feat: database analyzer celery job (#36688)

Co-authored-by: Enzo Martellucci <enzomartellucci@gmail.com>
Co-authored-by: Geidō <60598000+geido@users.noreply.github.com>
Co-authored-by: Enzo Martellucci <52219496+EnxDev@users.noreply.github.com>
Co-authored-by: Alexandru Soare <37236580+alexandrusoare@users.noreply.github.com>
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Diego Pucci <diegopucci.me@gmail.com>

.github/workflows/bashlib.sh

@@ -117,19 +117,6 @@ testdata() {
   say "::endgroup::"
 }
 
-playwright_testdata() {
-  cd "$GITHUB_WORKSPACE"
-  say "::group::Load all examples for Playwright tests"
-  # must specify PYTHONPATH to make `tests.superset_test_config` importable
-  export PYTHONPATH="$GITHUB_WORKSPACE"
-  pip install -e .
-  superset db upgrade
-  superset load_test_users
-  superset load_examples
-  superset init
-  say "::endgroup::"
-}
-
 celery-worker() {
   cd "$GITHUB_WORKSPACE"
   say "::group::Start Celery worker"

.github/workflows/showtime-cleanup.yml

@@ -7,6 +7,12 @@ on:
 
   # Manual trigger for testing
   workflow_dispatch:
+    inputs:
+      max_age_hours:
+        description: 'Maximum age in hours before cleanup'
+        required: false
+        default: '48'
+        type: string
 
 # Common environment variables
 env:
@@ -32,5 +38,13 @@ jobs:
 
       - name: Cleanup expired environments
         run: |
-          echo "Cleaning up environments respecting TTL labels"
-          python -m showtime cleanup --respect-ttl
+          MAX_AGE="${{ github.event.inputs.max_age_hours || '48' }}"
+
+          # Validate max_age is numeric
+          if [[ ! "$MAX_AGE" =~ ^[0-9]+$ ]]; then
+            echo "❌ Invalid max_age_hours format: $MAX_AGE (must be numeric)"
+            exit 1
+          fi
+
+          echo "Cleaning up environments older than ${MAX_AGE}h"
+          python -m showtime cleanup --older-than "${MAX_AGE}h"

.github/workflows/superset-e2e.yml

@@ -146,7 +146,7 @@ jobs:
           SAFE_APP_ROOT=${APP_ROOT//\//_}
           echo "safe_app_root=$SAFE_APP_ROOT" >> $GITHUB_OUTPUT
       - name: Upload Artifacts
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v5
         if: failure()
         with:
           path: ${{ github.workspace }}/superset-frontend/cypress-base/cypress/screenshots
@@ -223,7 +223,7 @@ jobs:
         if: steps.check.outputs.python || steps.check.outputs.frontend
         uses: ./.github/actions/cached-dependencies
         with:
-          run: playwright_testdata
+          run: testdata
       - name: Setup Node.js
         if: steps.check.outputs.python || steps.check.outputs.frontend
         uses: actions/setup-node@v6
@@ -259,7 +259,7 @@ jobs:
           SAFE_APP_ROOT=${APP_ROOT//\//_}
           echo "safe_app_root=$SAFE_APP_ROOT" >> $GITHUB_OUTPUT
       - name: Upload Playwright Artifacts
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v5
         if: failure()
         with:
           path: |

.github/workflows/superset-extensions-cli.yml

@@ -58,7 +58,7 @@ jobs:
 
       - name: Upload HTML coverage report
         if: steps.check.outputs.superset-extensions-cli
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v5
         with:
           name: superset-extensions-cli-coverage-html
           path: htmlcov/

.github/workflows/superset-frontend.yml

@@ -58,7 +58,7 @@ jobs:
 
       - name: Upload Docker Image Artifact
         if: steps.check.outputs.frontend
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v5
         with:
           name: docker-image
           path: docker-image.tar.gz
@@ -73,7 +73,7 @@ jobs:
     runs-on: ubuntu-24.04
     steps:
       - name: Download Docker Image Artifact
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@v6
         with:
           name: docker-image
 
@@ -90,7 +90,7 @@ jobs:
           "npm run test -- --coverage --shard=${{ matrix.shard }}/8 --coverageReporters=json-summary"
 
       - name: Upload Coverage Artifact
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v5
         with:
           name: coverage-artifacts-${{ matrix.shard }}
           path: superset-frontend/coverage
@@ -101,7 +101,7 @@ jobs:
     runs-on: ubuntu-24.04
     steps:
       - name: Download Coverage Artifacts
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@v6
         with:
           pattern: coverage-artifacts-*
           path: coverage/
@@ -127,7 +127,7 @@ jobs:
     runs-on: ubuntu-24.04
     steps:
       - name: Download Docker Image Artifact
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@v6
         with:
           name: docker-image
 
@@ -151,7 +151,7 @@ jobs:
     runs-on: ubuntu-24.04
     steps:
       - name: Download Docker Image Artifact
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@v6
         with:
           name: docker-image
 
@@ -167,21 +167,3 @@ jobs:
         run: |
           docker run --rm $TAG bash -c \
           "npm run plugins:build-storybook"
-
-  test-storybook:
-    needs: frontend-build
-    if: needs.frontend-build.outputs.should-run == 'true'
-    runs-on: ubuntu-24.04
-    steps:
-      - name: Download Docker Image Artifact
-        uses: actions/download-artifact@v6
-        with:
-          name: docker-image
-
-      - name: Load Docker Image
-        run: docker load < docker-image.tar.gz
-
-      - name: Build Storybook and Run Tests
-        run: |
-          docker run --rm $TAG bash -c \
-          "npm run build-storybook && npx playwright install-deps && npx playwright install chromium && npm run test-storybook:ci"

.github/workflows/superset-playwright.yml

@@ -97,7 +97,7 @@ jobs:
         if: steps.check.outputs.python || steps.check.outputs.frontend
         uses: ./.github/actions/cached-dependencies
         with:
-          run: playwright_testdata
+          run: testdata
       - name: Setup Node.js
         if: steps.check.outputs.python || steps.check.outputs.frontend
         uses: actions/setup-node@v6
@@ -133,7 +133,7 @@ jobs:
           SAFE_APP_ROOT=${APP_ROOT//\//_}
           echo "safe_app_root=$SAFE_APP_ROOT" >> $GITHUB_OUTPUT
       - name: Upload Playwright Artifacts
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v5
         if: failure()
         with:
           path: |

README.md

@@ -17,21 +17,6 @@ specific language governing permissions and limitations
 under the License.
 -->
 
-# Superset
-
-[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/license/apache-2-0)
-[![Latest Release on Github](https://img.shields.io/github/v/release/apache/superset?sort=semver)](https://github.com/apache/superset/releases/latest)
-[![Build Status](https://github.com/apache/superset/actions/workflows/superset-python-unittest.yml/badge.svg)](https://github.com/apache/superset/actions)
-[![PyPI version](https://badge.fury.io/py/apache_superset.svg)](https://badge.fury.io/py/apache_superset)
-[![PyPI](https://img.shields.io/pypi/pyversions/apache_superset.svg?maxAge=2592000)](https://pypi.python.org/pypi/apache_superset)
-[![GitHub Stars](https://img.shields.io/github/stars/apache/superset?style=social)](https://github.com/apache/superset/stargazers)
-[![Contributors](https://img.shields.io/github/contributors/apache/superset)](https://github.com/apache/superset/graphs/contributors)
-[![Last Commit](https://img.shields.io/github/last-commit/apache/superset)](https://github.com/apache/superset/commits/master)
-[![Open Issues](https://img.shields.io/github/issues/apache/superset)](https://github.com/apache/superset/issues)
-[![Open PRs](https://img.shields.io/github/issues-pr/apache/superset)](https://github.com/apache/superset/pulls)
-[![Get on Slack](https://img.shields.io/badge/slack-join-orange.svg)](http://bit.ly/join-superset-slack)
-[![Documentation](https://img.shields.io/badge/docs-apache.org-blue.svg)](https://superset.apache.org)
-
 <picture width="500">
   <source
     width="600"

docs/.gitignore

@@ -23,6 +23,3 @@ docs/.zshrc
 
 # Gets copied from the root of the project at build time (yarn start / yarn build)
 docs/intro.md
-
-# Generated badge images (downloaded at build time by remark-localize-badges plugin)
-static/badges/

docs/developer_portal/extensions/components/alert.mdx

@@ -1,131 +0,0 @@
----
-title: Alert
-sidebar_label: Alert
----
-
-<!--
-    Licensed to the Apache Software Foundation (ASF) under one
-    or more contributor license agreements.  See the NOTICE file
-    distributed with this work for additional information
-    regarding copyright ownership.  The ASF licenses this file
-    to you under the Apache License, Version 2.0 (the
-    "License"); you may not use this file except in compliance
-    with the License.  You may obtain a copy of the License at
-
-      http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing,
-    software distributed under the License is distributed on an
-    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-    KIND, either express or implied.  See the License for the
-    specific language governing permissions and limitations
-    under the License.
--->
-
-import { StoryWithControls } from '../../../src/components/StorybookWrapper';
-import { Alert } from '@apache-superset/core/ui';
-
-# Alert
-
-Alert component for displaying important messages to users. Wraps Ant Design Alert with sensible defaults and improved accessibility.
-
-## Live Example
-
-<StoryWithControls
-  component={Alert}
-  props={{
-  closable: true,
-  type: 'info',
-  message: 'This is a sample alert message.',
-  description: 'Sample description for additional context.',
-  showIcon: true
-}}
-  controls={[
-  {
-    name: 'type',
-    label: 'Type',
-    type: 'select',
-    options: [
-      'info',
-      'error',
-      'warning',
-      'success'
-    ]
-  },
-  {
-    name: 'closable',
-    label: 'Closable',
-    type: 'boolean'
-  },
-  {
-    name: 'showIcon',
-    label: 'Show Icon',
-    type: 'boolean'
-  },
-  {
-    name: 'message',
-    label: 'Message',
-    type: 'text'
-  },
-  {
-    name: 'description',
-    label: 'Description',
-    type: 'text'
-  }
-]}
-/>
-
-## Try It
-
-Edit the code below to experiment with the component:
-
-```tsx live
-function Demo() {
-  return (
-    <Alert
-      closable
-      type="info"
-      message="This is a sample alert message."
-      description="Sample description for additional context."
-      showIcon
-    />
-  );
-}
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `closable` | `boolean` | `true` | Whether the Alert can be closed with a close button. |
-| `type` | `string` | `"info"` | Type of the alert (e.g., info, error, warning, success). |
-| `message` | `string` | `"This is a sample alert message."` | Message |
-| `description` | `string` | `"Sample description for additional context."` | Description |
-| `showIcon` | `boolean` | `true` | Whether to display an icon in the Alert. |
-
-## Usage in Extensions
-
-This component is available in the `@apache-superset/core/ui` package, which is automatically available to Superset extensions.
-
-```tsx
-import { Alert } from '@apache-superset/core/ui';
-
-function MyExtension() {
-  return (
-    <Alert
-      closable
-      type="info"
-      message="This is a sample alert message."
-    />
-  );
-}
-```
-
-## Source Links
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-core/src/ui/components/Alert/Alert.stories.tsx)
-- [Component source](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-core/src/ui/components/Alert/index.tsx)
-
----
-
-*This page was auto-generated from the component's Storybook story.*

docs/developer_portal/extensions/components/index.mdx

@@ -1,93 +0,0 @@
----
-title: Extension Components
-sidebar_label: Overview
-sidebar_position: 1
----
-
-<!--
-    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.
--->
-
-# Extension Components
-
-These UI components are available to Superset extension developers through the `@apache-superset/core/ui` package. They provide a consistent look and feel with the rest of Superset and are designed to be used in extension panels, views, and other UI elements.
-
-## Available Components
-
-- [Alert](./alert)
-
-## Usage
-
-All components are exported from the `@apache-superset/core/ui` package:
-
-```tsx
-import { Alert } from '@apache-superset/core/ui';
-
-export function MyExtensionPanel() {
-  return (
-    <Alert type="info">
-      Welcome to my extension!
-    </Alert>
-  );
-}
-```
-
-## Adding New Components
-
-Components in `@apache-superset/core/ui` are automatically documented here. To add a new extension component:
-
-1. Add the component to `superset-frontend/packages/superset-core/src/ui/components/`
-2. Export it from `superset-frontend/packages/superset-core/src/ui/components/index.ts`
-3. Create a Storybook story with an `Interactive` export:
-
-```tsx
-export default {
-  title: 'Extension Components/MyComponent',
-  component: MyComponent,
-  parameters: {
-    docs: {
-      description: {
-        component: 'Description of the component...',
-      },
-    },
-  },
-};
-
-export const InteractiveMyComponent = (args) => <MyComponent {...args} />;
-
-InteractiveMyComponent.args = {
-  variant: 'primary',
-  disabled: false,
-};
-
-InteractiveMyComponent.argTypes = {
-  variant: {
-    control: { type: 'select' },
-    options: ['primary', 'secondary'],
-  },
-  disabled: {
-    control: { type: 'boolean' },
-  },
-};
-```
-
-4. Run `yarn start` in `docs/` - the page generates automatically!
-
-## Interactive Documentation
-
-For interactive examples with controls, visit the [Storybook](/storybook/?path=/docs/extension-components--docs).

docs/developer_portal/extensions/development.md

@@ -237,73 +237,3 @@ superset-extensions dev
 ✅ Manifest updated
 👀 Watching for changes in: /dataset_references/frontend, /dataset_references/backend
 ```
-
-## Contributing Extension-Compatible Components
-
-Components in `@apache-superset/core` are automatically documented in the Developer Portal. Simply add a component to the package and it will appear in the extension documentation.
-
-### Requirements
-
-1. **Location**: The component must be in `superset-frontend/packages/superset-core/src/ui/components/`
-2. **Exported**: The component must be exported from the package's `index.ts`
-3. **Story**: The component must have a Storybook story
-
-### Creating a Story for Your Component
-
-Create a story file with an `Interactive` export that defines args and argTypes:
-
-```typescript
-// MyComponent.stories.tsx
-import { MyComponent } from '.';
-
-export default {
-  title: 'Extension Components/MyComponent',
-  component: MyComponent,
-  parameters: {
-    docs: {
-      description: {
-        component: 'A brief description of what this component does.',
-      },
-    },
-  },
-};
-
-// Define an interactive story with args
-export const InteractiveMyComponent = (args) => <MyComponent {...args} />;
-
-InteractiveMyComponent.args = {
-  variant: 'primary',
-  disabled: false,
-};
-
-InteractiveMyComponent.argTypes = {
-  variant: {
-    control: { type: 'select' },
-    options: ['primary', 'secondary', 'danger'],
-  },
-  disabled: {
-    control: { type: 'boolean' },
-  },
-};
-```
-
-### How Documentation is Generated
-
-When the docs site is built (`yarn start` or `yarn build` in the `docs/` directory):
-
-1. The `generate-extension-components` script scans all stories in `superset-core`
-2. For each story, it generates an MDX page with:
-   - Component description
-   - **Live interactive example** with controls extracted from `argTypes`
-   - **Editable code playground** for experimentation
-   - Props table from story `args`
-   - Usage code snippet
-   - Links to source files
-3. Pages appear automatically in **Developer Portal → Extensions → Components**
-
-### Best Practices
-
-- **Use descriptive titles**: The title path determines the component's location in docs (e.g., `Extension Components/Alert`)
-- **Define argTypes**: These become interactive controls in the documentation
-- **Provide default args**: These populate the initial state of the live example
-- **Write clear descriptions**: Help extension developers understand when to use each component

docs/developer_portal/extensions/quick-start.md

@@ -455,7 +455,7 @@ Add the following to your `superset_config.py`:
 ```python
 # Enable extensions feature
 FEATURE_FLAGS = {
-    "ENABLE_EXTENSIONS": True,
+    "EXTENSIONS": True,
 }
 
 # Set the directory where extensions are stored

docs/developer_portal/guidelines/backend-style-guidelines.md

@@ -1,6 +1,6 @@
 ---
-title: Overview
-sidebar_position: 1
+title: Backend Style Guidelines
+sidebar_position: 3
 ---
 
 <!--
@@ -26,22 +26,22 @@ under the License.
 
 This is a list of statements that describe how we do backend development in Superset. While they might not be 100% true for all files in the repo, they represent the gold standard we strive towards for backend quality and style.
 
-- We use a monolithic Python/Flask/Flask-AppBuilder backend, with small single-responsibility satellite services where necessary.
-- Files are generally organized by feature or object type. Within each domain, we can have api controllers, models, schemas, commands, and data access objects (DAO).
-  - See: [Proposal for Improving Superset's Python Code Organization](https://github.com/apache/superset/issues/9077)
-- API controllers use Marshmallow Schemas to serialize/deserialize data.
-- Authentication and authorization are controlled by the [security manager](https://github.com/apache/superset/blob/master/superset/security/manager).
-- We use Pytest for unit and integration tests. These live in the `tests` directory.
-- We add tests for every new piece of functionality added to the backend.
-- We use pytest fixtures to share setup between tests.
-- We use SQLAlchemy to access both Superset's application database, and users' analytics databases.
-- We make changes backwards compatible whenever possible.
-  - If a change cannot be made backwards compatible, it goes into a major release.
-  - See: [Proposal For Semantic Versioning](https://github.com/apache/superset/issues/12566)
-- We use Swagger for API documentation, with docs written inline on the API endpoint code.
-- We prefer thin ORM models, putting shared functionality in other utilities.
-- Several linters/checkers are used to maintain consistent code style and type safety: pylint, mypy, black, isort.
-- `__init__.py` files are kept empty to avoid implicit dependencies.
+* We use a monolithic Python/Flask/Flask-AppBuilder backend, with small single-responsibility satellite services where necessary.
+* Files are generally organized by feature or object type. Within each domain, we can have api controllers, models, schemas, commands, and data access objects (dao).
+    * See: [Proposal for Improving Superset's Python Code Organization](https://github.com/apache/superset/issues/9077)
+* API controllers use Marshmallow Schemas to serialize/deserialize data.
+* Authentication and authorization are controlled by the [security manager](https://github.com/apache/superset/blob/master/superset/security/manager).
+* We use Pytest for unit and integration tests. These live in the `tests` directory.
+* We add tests for every new piece of functionality added to the backend.
+* We use pytest fixtures to share setup between tests.
+* We use sqlalchemy to access both Superset's application database, and users' analytics databases.
+* We make changes backwards compatible whenever possible.
+    * If a change cannot be made backwards compatible, it goes into a major release.
+    * See: [Proposal For Semantic Versioning](https://github.com/apache/superset/issues/12566)
+* We use Swagger for API documentation, with docs written inline on the API endpoint code.
+* We prefer thin ORM models, putting shared functionality in other utilities.
+* Several linters/checkers are used to maintain consistent code style and type safety: pylint, pypy, black, isort.
+* `__init__.py` files are kept empty to avoid implicit dependencies.
 
 ## Code Organization
 

docs/developer_portal/guidelines/backend/dao-style-guidelines.md

@@ -1,6 +1,6 @@
 ---
 title: DAO Style Guidelines and Best Practices
-sidebar_position: 2
+sidebar_position: 1
 ---
 
 <!--
@@ -26,29 +26,19 @@ under the License.
 
 A Data Access Object (DAO) is a pattern that provides an abstract interface to the SQLAlchemy Object Relational Mapper (ORM). The DAOs are critical as they form the building block of the application which are wrapped by the associated commands and RESTful API endpoints.
 
-There are numerous inconsistencies and violations of the DRY principal within the codebase as it relates to DAOs and ORMs—unnecessary commits, non-ACID transactions, etc.—which makes the code unnecessarily complex and convoluted. Addressing the underlying issues with the DAOs _should_ help simplify the downstream operations and improve the developer experience.
+Currently there are numerous inconsistencies and violation of the DRY principal within the codebase as it relates to DAOs and ORMs—unnecessary commits, non-ACID transactions, etc.—which makes the code unnecessarily complex and convoluted. Addressing the underlying issues with the DAOs _should_ help simplify the downstream operations and improve the developer experience.
 
 To ensure consistency the following rules should be adhered to:
 
-## Core Rules
+1. All database operations (including testing) should be defined within a DAO, i.e., there should not be any explicit `db.session.add`, `db.session.merge`, etc. calls outside of a DAO.
 
-1. **All database operations (including testing) should be defined within a DAO**, i.e., there should not be any explicit `db.session.add`, `db.session.merge`, etc. calls outside of a DAO.
+2. A DAO should use `create`, `update`, `delete`, `upsert` terms—typical database operations which ensure consistency with commands—rather than action based terms like `save`, `saveas`, `override`, etc.
 
-2. **A DAO should use `create`, `update`, `delete`, `upsert` terms**—typical database operations which ensure consistency with commands—rather than action based terms like `save`, `saveas`, `override`, etc.
+3. Sessions should be managed via a [context manager](https://docs.sqlalchemy.org/en/20/orm/session_transaction.html#begin-once) which auto-commits on success and rolls back on failure, i.e., there should be no explicit `db.session.commit` or `db.session.rollback` calls within the DAO.
 
-3. **Sessions should be managed via a [context manager](https://docs.sqlalchemy.org/en/20/orm/session_transaction.html#begin-once)** which auto-commits on success and rolls back on failure, i.e., there should be no explicit `db.session.commit` or `db.session.rollback` calls within the DAO.
+4. There should be a single atomic transaction representing the entirety of the operation, i.e., when creating a dataset with associated columns and metrics either all the changes succeed when the transaction is committed, or all the changes are undone when the transaction is rolled back. SQLAlchemy supports [nested transactions](https://docs.sqlalchemy.org/en/20/orm/session_transaction.html#nested-transaction) via the `begin_nested` method which can be nested—inline with how DAOs are invoked.
 
-4. **There should be a single atomic transaction representing the entirety of the operation**, i.e., when creating a dataset with associated columns and metrics either all the changes succeed when the transaction is committed, or all the changes are undone when the transaction is rolled back. SQLAlchemy supports [nested transactions](https://docs.sqlalchemy.org/en/20/orm/session_transaction.html#nested-transaction) via the `begin_nested` method which can be nested—inline with how DAOs are invoked.
-
-5. **The database layer should adopt a "shift left" mentality** i.e., uniqueness/foreign key constraints, relationships, cascades, etc. should all be defined in the database layer rather than being enforced in the application layer.
-
-6. **Exception-based validation**: Ask for forgiveness rather than permission. Try to perform the operation and rely on database constraints to verify that the model is acceptable, rather than pre-validating conditions.
-
-7. **Bulk operations**: Provide bulk `create`, `update`, and `delete` methods where applicable for performance optimization.
-
-8. **Sparse updates**: Updates should only modify explicitly defined attributes.
-
-9. **Test transactions**: Tests should leverage nested transactions which should be rolled back on teardown, rather than deleting objects.
+5. The database layer should adopt a "shift left" mentality i.e., uniqueness/foreign key constraints, relationships, cascades, etc. should all be defined in the database layer rather than being enforced in the application layer.
 
 ## DAO Implementation Examples
 

docs/developer_portal/guidelines/design-guidelines.md

@@ -30,23 +30,21 @@ This is an area to host resources and documentation supporting the evolution and
 
 ### Sentence case
 
-Use sentence-case capitalization for everything in the UI (except these exceptions below).
+Use sentence-case capitalization for everything in the UI (except these **).
 
 Sentence case is predominantly lowercase. Capitalize only the initial character of the first word, and other words that require capitalization, like:
 
-- **Proper nouns.** Objects in the product _are not_ considered proper nouns e.g. dashboards, charts, saved queries etc. Proprietary feature names eg. SQL Lab, Preset Manager _are_ considered proper nouns
-- **Acronyms** (e.g. CSS, HTML)
-- When referring to **UI labels that are themselves capitalized** from sentence case (e.g. page titles - Dashboards page, Charts page, Saved queries page, etc.)
-- User input that is reflected in the UI. E.g. a user-named a dashboard tab
+* **Proper nouns.** Objects in the product _are not_ considered proper nouns e.g. dashboards, charts, saved queries etc. Proprietary feature names eg. SQL Lab, Preset Manager _are_ considered proper nouns
+* **Acronyms** (e.g. CSS, HTML)
+* When referring to **UI labels that are themselves capitalized** from sentence case (e.g. page titles - Dashboards page, Charts page, Saved queries page, etc.)
+* User input that is reflected in the UI. E.g. a user-named a dashboard tab
 
-**Sentence case vs. Title case:**
-- Title case: "A Dog Takes a Walk in Paris"
-- Sentence case: "A dog takes a walk in Paris"
+**Sentence case vs. Title case:** Title case: "A Dog Takes a Walk in Paris" Sentence case: "A dog takes a walk in Paris"
 
 **Why sentence case?**
 
-- It's generally accepted as the quickest to read
-- It's the easiest form to distinguish between common and proper nouns
+* It's generally accepted as the quickest to read
+* It's the easiest form to distinguish between common and proper nouns
 
 ### How to refer to UI elements
 
@@ -54,38 +52,21 @@ When writing about a UI element, use the same capitalization as used in the UI.
 
 For example, if an input field is labeled "Name" then you refer to this as the "Name input field". Similarly, if a button has the label "Save" in it, then it is correct to refer to the "Save button".
 
-Where a product page is titled "Settings", you refer to this in writing as follows:
-"Edit your personal information on the Settings page".
+Where a product page is titled "Settings", you refer to this in writing as follows: "Edit your personal information on the Settings page".
 
 Often a product page will have the same title as the objects it contains. In this case, refer to the page as it appears in the UI, and the objects as common nouns:
 
-- Upload a dashboard on the Dashboards page
-- Go to Dashboards
-- View dashboard
-- View all dashboards
-- Upload CSS templates on the CSS templates page
-- Queries that you save will appear on the Saved queries page
-- Create custom queries in SQL Lab then create dashboards
+* Upload a dashboard on the Dashboards page
+* Go to Dashboards
+* View dashboard
+* View all dashboards
+* Upload CSS templates on the CSS templates page
+* Queries that you save will appear on the Saved queries page
+* Create custom queries in SQL Lab then create dashboards
 
-### Exceptions to sentence case
+### **Exceptions to sentence case:**
 
-1. **Acronyms and abbreviations.**
-   Examples: URL, CSV, XML, CSS, SQL, SSH, URI, NaN, CRON, CC, BCC
-
-2. **Proper nouns and brand names.**
-   Examples: Apache, Superset, AntD JavaScript, GeoJSON, Slack, Google Sheets, SQLAlchemy
-
-3. **Technical terms derived from proper nouns.**
-   Examples: Jinja, Gaussian, European (as in European time zone)
-
-4. **Key names.** Capitalize button labels and UI elements as they appear in the product UI.
-   Examples: Shift (as in the keyboard button), Enter key
-
-5. **Named queries or specific labeled items.**
-   Examples: Query A, Query B
-
-6. **Database names.** Always capitalize names of database engines and connectors.
-   Examples: Presto, Trino, Drill, Hive, Google Sheets
+1. Acronyms and abbreviations. Examples: URL, CSV, XML
 
 ## Button Design Guidelines
 
@@ -117,32 +98,6 @@ Primary buttons have a fourth style: dropdown.
 | Tertiary | For less prominent actions; can be used in isolation or paired with a primary button |
 | Destructive | For actions that could have destructive effects on the user's data |
 
-### Format
-
-#### Anatomy
-
-Button text is centered using the Label style. Icons appear left of text when combined. If no text label exists, an icon must indicate the button's function.
-
-#### Button size
-
-- Default dimensions: 160px width × 32px height
-- Text: 11px, Inter Medium, all caps
-- Corners: 4px border radius
-- Minimum padding: 8px around text
-- Width can decrease if space is limited, but maintain minimum padding
-
-#### Button groups
-
-- Group related buttons to establish visual hierarchy
-- Avoid overwhelming users with too many actions
-- Limit calls to action; use tertiary/ghost buttons for layouts with 3+ actions
-- Maintain consistent styles within groups when possible
-- Space buttons 8px apart vertically or horizontally
-
-#### Content guidelines
-
-Button labels should be clear and predictable. Use the "\{verb\} + \{noun\}" format, except for common actions like "Done," "Close," "Cancel," "Add," or "Delete." This formula provides necessary context and aids translation, though compact UIs or localization needs may warrant exceptions.
-
 ## Error Message Design Guidelines
 
 ### Definition
@@ -173,10 +128,10 @@ In all cases, encountering errors increases user friction and frustration while
 
 Select one pattern per error (e.g. do not implement an inline and banner pattern for the same error).
 
-| When the error... | Use... |
-|------------------|--------|
-| Is directly related to a UI control | Inline error |
-| Is not directly related to a UI control | Banner error |
+When the error... | Use...
+---------------- | ------
+Is directly related to a UI control | Inline error
+Is not directly related to a UI control | Banner error
 
 #### Inline
 
@@ -191,45 +146,3 @@ Use the `LabeledErrorBoundInput` component for this error pattern.
 ##### Implementation details
 
 - Where and when relevant, scroll the screen to the UI control with the error
-- When multiple inline errors are present, scroll to the topmost error
-
-#### Banner
-
-Banner errors are used when the source of the error is not directly related to a UI control (text input, selector, etc.) such as a technical failure or a loading problem.
-
-##### Anatomy
-
-Use the `ErrorAlert` component for this error pattern.
-
-1. **Headline** (optional): 1-2 word summary of the error
-2. **Message**: What went wrong and what users should do next
-3. **Expand option** (optional): "See more"/"See less"
-4. **Details** (optional): Additional helpful context
-5. **Modal** (optional): For spatial constraints using `ToastType.DANGER`
-
-##### Implementation details
-
-- Place the banner near the content area most relevant to the error
-- For chart errors in Explore, use the chart area
-- For modal errors, use the modal footer
-- For app-wide errors, use the top of the screen
-
-### Content guidelines
-
-Effective error messages communicate:
-
-1. What went wrong
-2. What users should do next
-
-Error messages should be:
-
-- Clear and accurate, leaving no room for misinterpretation
-- Short and concise
-- Understandable to non-technical users
-- Non-blaming and avoiding negative language
-
-**Example:**
-
-❌ "Cannot delete a datasource that has slices attached to it."
-
-✅ "Please delete all charts using this dataset before deleting the dataset."

docs/developer_portal/guidelines/frontend-style-guidelines.md

@@ -1,6 +1,6 @@
 ---
-title: Overview
-sidebar_position: 1
+title: Frontend Style Guidelines
+sidebar_position: 2
 ---
 
 <!--
@@ -26,25 +26,19 @@ under the License.
 
 This is a list of statements that describe how we do frontend development in Superset. While they might not be 100% true for all files in the repo, they represent the gold standard we strive towards for frontend quality and style.
 
-- We develop using TypeScript.
-  - See: [SIP-36](https://github.com/apache/superset/issues/9101)
-- We use React for building components, and Redux to manage app/global state.
-  - See: [Component Style Guidelines and Best Practices](./frontend/component-style-guidelines)
-- We prefer functional components to class components and use hooks for local component state.
-- We use [Ant Design](https://ant.design/) components from our component library whenever possible, only building our own custom components when it's required.
-  - See: [SIP-48](https://github.com/apache/superset/issues/11283)
-- We use [@emotion](https://emotion.sh/docs/introduction) to provide styling for our components, co-locating styling within component files.
-  - See: [SIP-37](https://github.com/apache/superset/issues/9145)
-  - See: [Emotion Styling Guidelines and Best Practices](./frontend/emotion-styling-guidelines)
-- We use Jest for unit tests, React Testing Library for component tests, and Cypress for end-to-end tests.
-  - See: [SIP-56](https://github.com/apache/superset/issues/11830)
-  - See: [Testing Guidelines and Best Practices](../testing/testing-guidelines)
-- We add tests for every new component or file added to the frontend.
-- We organize our repo so similar files live near each other, and tests are co-located with the files they test.
-  - See: [SIP-61](https://github.com/apache/superset/issues/12098)
-- We prefer small, easily testable files and components.
-- We use ESLint and Prettier to automatically fix lint errors and format the code.
-  - We do not debate code formatting style in PRs, instead relying on automated tooling to enforce it.
-  - If there's not a linting rule, we don't have a rule!
-- We use [React Storybook](https://storybook.js.org/) and [Applitools](https://applitools.com/) to help preview/test and stabilize our components
-  - A public Storybook with components from the `master` branch is available [here](https://apache-superset.github.io/superset-ui/?path=/story/*)
+*   We develop using TypeScript.
+*   We use React for building components, and Redux to manage app/global state.
+    *   See: [Component Style Guidelines and Best Practices](./frontend/component-style-guidelines)
+*   We prefer functional components to class components and use hooks for local component state.
+*   We use [Ant Design](https://ant.design/) components from our component library whenever possible, only building our own custom components when it's required.
+*   We use [@emotion](https://emotion.sh/docs/introduction) to provide styling for our components, co-locating styling within component files.
+    *   See: [Emotion Styling Guidelines and Best Practices](./frontend/emotion-styling-guidelines)
+*   We use Jest for unit tests, React Testing Library for component tests, and Cypress for end-to-end tests.
+    *   See: [Testing Guidelines and Best Practices](./frontend/testing-guidelines)
+*   We add tests for every new component or file added to the frontend.
+*   We organize our repo so similar files live near each other, and tests are co-located with the files they test.
+*   We prefer small, easily testable files and components.
+*   We use ESLint and Prettier to automatically fix lint errors and format the code.
+    *   We do not debate code formatting style in PRs, instead relying on automated tooling to enforce it.
+    *   If there's not a linting rule, we don't have a rule!
+*   We use [React Storybook](https://storybook.js.org/) and [Applitools](https://applitools.com/) to help preview/test and stabilize our components

docs/developer_portal/guidelines/frontend/component-style-guidelines.md

@@ -1,6 +1,6 @@
 ---
 title: Component Style Guidelines and Best Practices
-sidebar_position: 2
+sidebar_position: 1
 ---
 
 <!--
@@ -35,7 +35,7 @@ This guide is intended primarily for reusable components. Whenever possible, all
 - All components should be made to be reusable whenever possible
 - All components should follow the structure and best practices as detailed below
 
-### Directory and component structure
+## Directory and component structure
 
 ```
 superset-frontend/src/components
@@ -51,142 +51,208 @@ superset-frontend/src/components
 
 **Component directory name:** Use `PascalCase` for the component directory name
 
-**Storybook:** Components should come with a storybook file whenever applicable, with the following naming convention `\{ComponentName\}.stories.tsx`. More details about Storybook below
+**Storybook:** Components should come with a storybook file whenever applicable, with the following naming convention `{ComponentName}.stories.tsx`. More details about Storybook below
 
-**Unit and end-to-end tests:** All components should come with unit tests using Jest and React Testing Library. The file name should follow this naming convention `\{ComponentName\}.test.tsx`. Read the [Testing Guidelines and Best Practices](../../testing/testing-guidelines) for more details
+**Unit and end-to-end tests:** All components should come with unit tests using Jest and React Testing Library. The file name should follow this naming convention `{ComponentName}.test.tsx.` Read the [Testing Guidelines and Best Practices](./testing-guidelines) for more details about tests
 
-**Reference naming:** Use `PascalCase` for React components and `camelCase` for component instances
+## Component Development Best Practices
 
-**BAD:**
-```jsx
-import mainNav from './MainNav';
-```
+### Use TypeScript
 
-**GOOD:**
-```jsx
-import MainNav from './MainNav';
-```
-
-**BAD:**
-```jsx
-const NavItem = <MainNav />;
-```
-
-**GOOD:**
-```jsx
-const navItem = <MainNav />;
-```
-
-**Component naming:** Use the file name as the component name
-
-**BAD:**
-```jsx
-import MainNav from './MainNav/index';
-```
-
-**GOOD:**
-```jsx
-import MainNav from './MainNav';
-```
-
-**Props naming:** Do not use DOM related props for different purposes
-
-**BAD:**
-```jsx
-<MainNav style="big" />
-```
-
-**GOOD:**
-```jsx
-<MainNav variant="big" />
-```
-
-**Importing dependencies:** Only import what you need
-
-**BAD:**
-```jsx
-import * as React from "react";
-```
-
-**GOOD:**
-```jsx
-import React, { useState } from "react";
-```
-
-**Default VS named exports:** As recommended by [TypeScript](https://www.typescriptlang.org/docs/handbook/modules.html), "If a module's primary purpose is to house one specific export, then you should consider exporting it as a default export. This makes both importing and actually using the import a little easier". If you're exporting multiple objects, use named exports instead.
-
-_As a default export_
-```jsx
-import MainNav from './MainNav';
-```
-
-_As a named export_
-```jsx
-import { MainNav, SecondaryNav } from './Navbars';
-```
-
-**ARIA roles:** Always make sure you are writing accessible components by using the official [ARIA roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques)
-
-## Use TypeScript
-
-All components should be written in TypeScript and their extensions should be `.ts` or `.tsx`
-
-### type vs interface
-
-Validate all props with the correct types. This replaces the need for a run-time validation as provided by the prop-types library.
+All new components should be written in TypeScript. This helps catch errors early and provides better development experience with IDE support.
 
 ```tsx
-type HeadingProps = {
-  param: string;
+interface ComponentProps {
+  title: string;
+  isVisible?: boolean;
+  onClose?: () => void;
 }
 
-export default function Heading({ children }: HeadingProps) {
-  return <h2>{children}</h2>
+export const MyComponent: React.FC<ComponentProps> = ({
+  title,
+  isVisible = true,
+  onClose
+}) => {
+  // Component implementation
+};
+```
+
+### Prefer Functional Components
+
+Use functional components with hooks instead of class components:
+
+```tsx
+// ✅ Good - Functional component with hooks
+export const MyComponent: React.FC<Props> = ({ data }) => {
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    // Effect logic
+  }, []);
+
+  return <div>{/* Component JSX */}</div>;
+};
+
+// ❌ Avoid - Class component
+class MyComponent extends React.Component {
+  // Class implementation
 }
 ```
 
-Use `type` for your component props and state. Use `interface` when you want to enable _declaration merging_.
+### Follow Ant Design Patterns
 
-### Define default values for non-required props
-
-In order to improve the readability of your code and reduce assumptions, always add default values for non required props, when applicable, for example:
+Extend Ant Design components rather than building from scratch:
 
 ```tsx
-const applyDiscount = (price: number, discount = 0.05) => price * (1 - discount);
+import { Button } from 'antd';
+import styled from '@emotion/styled';
+
+const StyledButton = styled(Button)`
+  // Custom styling using emotion
+`;
 ```
 
-## Functional components and Hooks
+### Reusability and Props Design
 
-We prefer functional components and the usage of hooks over class components.
-
-### useState
-
-Always explicitly declare the type unless the type can easily be assumed by the declaration.
+Design components with reusability in mind:
 
 ```tsx
-const [customer, setCustomer] = useState<ICustomer | null>(null);
+interface ButtonProps {
+  variant?: 'primary' | 'secondary' | 'tertiary';
+  size?: 'small' | 'medium' | 'large';
+  loading?: boolean;
+  disabled?: boolean;
+  children: React.ReactNode;
+  onClick?: () => void;
+}
+
+export const CustomButton: React.FC<ButtonProps> = ({
+  variant = 'primary',
+  size = 'medium',
+  ...props
+}) => {
+  // Implementation
+};
 ```
 
-### useReducer
+## Testing Components
 
-Always prefer `useReducer` over `useState` when your state has complex logics.
+Every component should include comprehensive tests:
 
-### useMemo and useCallback
+```tsx
+// MyComponent.test.tsx
+import { render, screen, fireEvent } from '@testing-library/react';
+import { MyComponent } from './MyComponent';
 
-Always memoize when your components take functions or complex objects as props to avoid unnecessary rerenders.
+test('renders component with title', () => {
+  render(<MyComponent title="Test Title" />);
+  expect(screen.getByText('Test Title')).toBeInTheDocument();
+});
 
-### Custom hooks
+test('calls onClose when close button is clicked', () => {
+  const mockOnClose = jest.fn();
+  render(<MyComponent title="Test" onClose={mockOnClose} />);
 
-All custom hooks should be located in the directory `/src/hooks`. Before creating a new custom hook, make sure that is not available in the existing custom hooks.
+  fireEvent.click(screen.getByRole('button', { name: /close/i }));
+  expect(mockOnClose).toHaveBeenCalledTimes(1);
+});
+```
 
-## Storybook
+## Storybook Stories
 
-Each component should come with its dedicated storybook file.
+Create stories for visual testing and documentation:
 
-**One component per story:** Each storybook file should only contain one component unless substantially different variants are required
+```tsx
+// MyComponent.stories.tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import { MyComponent } from './MyComponent';
 
-**Component variants:** If the component behavior is substantially different when certain props are used, it is best to separate the story into different types. See the `superset-frontend/src/components/Select/Select.stories.tsx` as an example.
+const meta: Meta<typeof MyComponent> = {
+  title: 'Components/MyComponent',
+  component: MyComponent,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
 
-**Isolated state:** The storybook should show how the component works in an isolated state and with as few dependencies as possible
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-**Use args:** It should be possible to test the component with every variant of the available props. We recommend using [args](https://storybook.js.org/docs/react/writing-stories/args)
+export const Default: Story = {
+  args: {
+    title: 'Default Component',
+    isVisible: true,
+  },
+};
+
+export const Hidden: Story = {
+  args: {
+    title: 'Hidden Component',
+    isVisible: false,
+  },
+};
+```
+
+## Performance Considerations
+
+### Use React.memo for Expensive Components
+
+```tsx
+import React, { memo } from 'react';
+
+export const ExpensiveComponent = memo<Props>(({ data }) => {
+  // Expensive rendering logic
+  return <div>{/* Component content */}</div>;
+});
+```
+
+### Optimize Re-renders
+
+Use `useCallback` and `useMemo` appropriately:
+
+```tsx
+export const OptimizedComponent: React.FC<Props> = ({ items, onSelect }) => {
+  const expensiveValue = useMemo(() => {
+    return items.reduce((acc, item) => acc + item.value, 0);
+  }, [items]);
+
+  const handleSelect = useCallback((id: string) => {
+    onSelect(id);
+  }, [onSelect]);
+
+  return <div>{/* Component content */}</div>;
+};
+```
+
+## Accessibility
+
+Ensure components are accessible:
+
+```tsx
+export const AccessibleButton: React.FC<Props> = ({ children, onClick }) => {
+  return (
+    <button
+      type="button"
+      aria-label="Descriptive label"
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+};
+```
+
+## Error Boundaries
+
+For components that might fail, consider error boundaries:
+
+```tsx
+export const SafeComponent: React.FC<Props> = ({ children }) => {
+  return (
+    <ErrorBoundary fallback={<div>Something went wrong</div>}>
+      {children}
+    </ErrorBoundary>
+  );
+};
+```

docs/developer_portal/guidelines/frontend/emotion-styling-guidelines.md

@@ -1,6 +1,6 @@
 ---
 title: Emotion Styling Guidelines and Best Practices
-sidebar_position: 3
+sidebar_position: 2
 ---
 
 <!--
@@ -33,245 +33,314 @@ under the License.
 - **DO** use `css` when you want to amend/merge sets of styles compositionally
 - **DO** use `css` when you're making a small, or single-use set of styles for a component
 - **DO** move your style definitions from direct usage in the `css` prop to an external variable when they get long
-- **DO** prefer tagged template literals (`css={css`...`}`) over style objects wherever possible for maximum style portability/consistency (note: typescript support may be diminished, but IDE plugins like [this](https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components) make life easy)
-- **DO** use `useTheme` to get theme variables. `withTheme` should be only used for wrapping legacy Class-based components.
+- **DO** prefer tagged template literals (`css={css\`...\`}`) over style objects wherever possible for maximum style portability/consistency
+- **DO** use `useTheme` to get theme variables
 
 ### DON'T do these things:
 
 - **DON'T** use `styled` for small, single-use style tweaks that would be easier to read/review if they were inline
-- **DON'T** export incomplete AntD components (make sure all their compound components are exported)
-
-## Emotion Tips and Strategies
-
-The first thing to consider when adding styles to an element is how much you think a style might be reusable in other areas of Superset. Always err on the side of reusability here. Nobody wants to chase styling inconsistencies, or try to debug little endless overrides scattered around the codebase. The more we can consolidate, the less will have to be figured out by those who follow. Reduce, reuse, recycle.
+- **DON'T** export incomplete Ant Design components
 
 ## When to use `css` or `styled`
 
-In short, either works for just about any use case! And you'll see them used somewhat interchangeably in the existing codebase. But we need a way to weigh it when we encounter the choice, so here's one way to think about it:
+### Use `css` for:
 
-A good use of `styled` syntax if you want to re-use a styled component. In other words, if you wanted to export flavors of a component for use, like so:
+1. **Small, single-use styles**
+```tsx
+import { css } from '@emotion/react';
 
-```jsx
-const StatusThing = styled.div`
-  padding: 10px;
-  border-radius: 10px;
+const MyComponent = () => (
+  <div
+    css={css`
+      margin: 8px;
+      padding: 16px;
+    `}
+  >
+    Content
+  </div>
+);
+```
+
+2. **Composing styles**
+```tsx
+const baseStyles = css`
+  padding: 16px;
+  border-radius: 4px;
 `;
 
-export const InfoThing = styled(StatusThing)`
-  background: blue;
-  &::before {
-    content: "ℹ️";
-  }
+const primaryStyles = css`
+  ${baseStyles}
+  background-color: blue;
+  color: white;
 `;
 
-export const WarningThing = styled(StatusThing)`
-  background: orange;
-  &::before {
-    content: "⚠️";
-  }
+const secondaryStyles = css`
+  ${baseStyles}
+  background-color: gray;
+  color: black;
 `;
+```
 
-export const TerribleThing = styled(StatusThing)`
-  background: red;
-  &::before {
-    content: "🔥";
+3. **Conditional styling**
+```tsx
+const MyComponent = ({ isActive }: { isActive: boolean }) => (
+  <div
+    css={[
+      baseStyles,
+      isActive && activeStyles,
+    ]}
+  >
+    Content
+  </div>
+);
+```
+
+### Use `styled` for:
+
+1. **Reusable components**
+```tsx
+import styled from '@emotion/styled';
+
+const StyledButton = styled.button`
+  padding: 12px 24px;
+  border: none;
+  border-radius: 4px;
+  background-color: ${({ theme }) => theme.colors.primary};
+  color: white;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.primaryDark};
   }
 `;
 ```
 
-You can also use `styled` when you're building a bigger component, and just want to have some custom bits for internal use in your JSX. For example:
+2. **Components with complex nested selectors**
+```tsx
+const StyledCard = styled.div`
+  padding: 16px;
+  border: 1px solid ${({ theme }) => theme.colors.border};
 
-```jsx
-const SeparatorOnlyUsedInThisComponent = styled.hr`
-  height: 12px;
-  border: 0;
-  box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
+  .card-header {
+    font-weight: bold;
+    margin-bottom: 8px;
+  }
+
+  .card-content {
+    color: ${({ theme }) => theme.colors.text};
+
+    p {
+      margin-bottom: 12px;
+    }
+  }
 `;
-
-function SuperComplicatedComponent(props) {
-  return (
-    <>
-      Daily standup for {user.name}!
-      <SeparatorOnlyUsedInThisComponent />
-      <h2>Yesterday:</h2>
-      // spit out a list of accomplishments
-      <SeparatorOnlyUsedInThisComponent />
-      <h2>Today:</h2>
-      // spit out a list of plans
-      <SeparatorOnlyUsedInThisComponent />
-      <h2>Tomorrow:</h2>
-      // spit out a list of goals
-    </>
-  );
-}
 ```
 
-The `css` prop, in reality, shares all the same styling capabilities as `styled` but it does have some particular use cases that jump out as sensible. For example, if you just want to style one element in your component, you could add the styles inline like so:
+3. **Extending Ant Design components**
+```tsx
+import { Button } from 'antd';
+import styled from '@emotion/styled';
 
-```jsx
-function SomeFanciness(props) {
-  return (
-    <>
-      Here's an awesome report card for {user.name}!
-      <div
-        css={css`
-          box-shadow: 5px 5px 10px #ccc;
-          border-radius: 10px;
-        `}
-      >
-        <h2>Yesterday:</h2>
-        // ...some stuff
-        <h2>Today:</h2>
-        // ...some stuff
-        <h2>Tomorrow:</h2>
-        // ...some stuff
-      </div>
-    </>
-  );
-}
+const CustomButton = styled(Button)`
+  border-radius: 8px;
+  font-weight: 600;
+
+  &.ant-btn-primary {
+    background: linear-gradient(45deg, #1890ff, #722ed1);
+  }
+`;
 ```
 
-You can also define the styles as a variable, external to your JSX. This is handy if the styles get long and you just want it out of the way. This is also handy if you want to apply the same styles to disparate element types, kind of like you might use a CSS class on varied elements. Here's a trumped up example:
+## Using Theme Variables
 
-```jsx
-function FakeGlobalNav(props) {
-  const menuItemStyles = css`
-    display: block;
-    border-bottom: 1px solid cadetblue;
-    font-family: "Comic Sans", cursive;
-  `;
+Always use theme variables for consistent styling:
+
+```tsx
+import { useTheme } from '@emotion/react';
+
+const MyComponent = () => {
+  const theme = useTheme();
 
   return (
-    <Nav>
-      <a css={menuItemStyles} href="#">One link</a>
-      <Link css={menuItemStyles} to={url}>Another link</Link>
-      <div css={menuItemStyles} onClick={() => alert('clicked')}>Another link</div>
-    </Nav>
-  );
-}
-```
-
-## CSS tips and tricks
-
-### `css` lets you write actual CSS
-
-By default the `css` prop uses the object syntax with JS style definitions, like so:
-
-```jsx
-<div css={{
-  borderRadius: 10,
-  marginTop: 10,
-  backgroundColor: '#00FF00'
-}}>Howdy</div>
-```
-
-But you can use the `css` interpolator as well to get away from icky JS styling syntax. Doesn't this look cleaner?
-
-```jsx
-<div css={css`
-  border-radius: 10px;
-  margin-top: 10px;
-  background-color: #00FF00;
-`}>Howdy</div>
-```
-
-You might say "whatever… I can read and write JS syntax just fine." Well, that's great. But… let's say you're migrating in some of our legacy LESS styles… now it's copy/paste! Or if you want to migrate to or from `styled` syntax… also copy/paste!
-
-### You can combine `css` definitions with array syntax
-
-You can use multiple groupings of styles with the `css` interpolator, and combine/override them in array syntax, like so:
-
-```jsx
-function AnotherSillyExample(props) {
-  const shadowedCard = css`
-    box-shadow: 2px 2px 4px #999;
-    padding: 4px;
-  `;
-  const infoCard = css`
-    background-color: #33f;
-    border-radius: 4px;
-  `;
-  const overrideInfoCard = css`
-    background-color: #f33;
-  `;
-  return (
-    <div className="App">
-      Combining two classes:
-      <div css={[shadowedCard, infoCard]}>Hello</div>
-      Combining again, but now with overrides:
-      <div css={[shadowedCard, infoCard, overrideInfoCard]}>Hello</div>
+    <div
+      css={css`
+        background-color: ${theme.colors.grayscale.light5};
+        color: ${theme.colors.grayscale.dark2};
+        padding: ${theme.gridUnit * 4}px;
+        border-radius: ${theme.borderRadius}px;
+      `}
+    >
+      Content
     </div>
   );
+};
+```
+
+## Common Patterns
+
+### Responsive Design
+```tsx
+const ResponsiveContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  ${({ theme }) => theme.breakpoints.up('md')} {
+    flex-direction: row;
+  }
+`;
+```
+
+### Animation
+```tsx
+const FadeInComponent = styled.div`
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+
+  &.visible {
+    opacity: 1;
+  }
+`;
+```
+
+### Conditional Props
+```tsx
+interface StyledDivProps {
+  isHighlighted?: boolean;
+  size?: 'small' | 'medium' | 'large';
 }
-```
 
-### Style variations with props
+const StyledDiv = styled.div<StyledDivProps>`
+  padding: 16px;
+  background-color: ${({ isHighlighted, theme }) =>
+    isHighlighted ? theme.colors.primary : theme.colors.grayscale.light5};
 
-You can give any component a custom prop, and reference that prop in your component styles, effectively using the prop to turn on a "flavor" of that component.
-
-For example, let's make a styled component that acts as a card. Of course, this could be done with any AntD component, or any component at all. But we'll do this with a humble `div` to illustrate the point:
-
-```jsx
-const SuperCard = styled.div`
-  ${({ theme, cutout }) => `
-    padding: ${theme.gridUnit * 2}px;
-    border-radius: ${theme.borderRadius}px;
-    box-shadow: 10px 5px 10px #ccc ${cutout && 'inset'};
-    border: 1px solid ${cutout ? 'transparent' : theme.colors.secondary.light3};
-  `}
+  ${({ size }) => {
+    switch (size) {
+      case 'small':
+        return css`font-size: 12px;`;
+      case 'large':
+        return css`font-size: 18px;`;
+      default:
+        return css`font-size: 14px;`;
+    }
+  }}
 `;
 ```
 
-Then just use the component as `<SuperCard>Some content</SuperCard>` or with the (potentially dynamic) prop: `<SuperCard cutout>Some content</SuperCard>`
+## Best Practices
 
-## Styled component tips
+### 1. Use Semantic CSS Properties
+```tsx
+// ✅ Good - semantic property names
+const Header = styled.h1`
+  font-size: ${({ theme }) => theme.typography.sizes.xl};
+  margin-bottom: ${({ theme }) => theme.gridUnit * 4}px;
+`;
 
-### No need to use `theme` the hard way
+// ❌ Avoid - magic numbers
+const Header = styled.h1`
+  font-size: 24px;
+  margin-bottom: 16px;
+`;
+```
 
-It's very tempting (and commonly done) to use the `theme` prop inline in the template literal like so:
+### 2. Group Related Styles
+```tsx
+// ✅ Good - grouped styles
+const Card = styled.div`
+  /* Layout */
+  display: flex;
+  flex-direction: column;
+  padding: ${({ theme }) => theme.gridUnit * 4}px;
 
-```jsx
-const SomeStyledThing = styled.div`
-  padding: ${({ theme }) => theme.gridUnit * 2}px;
+  /* Appearance */
+  background-color: ${({ theme }) => theme.colors.grayscale.light5};
+  border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
   border-radius: ${({ theme }) => theme.borderRadius}px;
-  border: 1px solid ${({ theme }) => theme.colors.secondary.light3};
+
+  /* Typography */
+  font-family: ${({ theme }) => theme.typography.families.sansSerif};
+  color: ${({ theme }) => theme.colors.grayscale.dark2};
 `;
 ```
 
-Instead, you can make things a little easier to read/type by writing it like so:
+### 3. Extract Complex Styles
+```tsx
+// ✅ Good - extract complex styles to variables
+const complexGradient = css`
+  background: linear-gradient(
+    135deg,
+    ${({ theme }) => theme.colors.primary} 0%,
+    ${({ theme }) => theme.colors.secondary} 100%
+  );
+`;
 
-```jsx
-const SomeStyledThing = styled.div`
-  ${({ theme }) => `
-    padding: ${theme.gridUnit * 2}px;
-    border-radius: ${theme.borderRadius}px;
-    border: 1px solid ${theme.colors.secondary.light3};
-  `}
+const GradientButton = styled.button`
+  ${complexGradient}
+  padding: 12px 24px;
+  border: none;
+  color: white;
 `;
 ```
 
-## Extend an AntD component with custom styling
+### 4. Avoid Deep Nesting
+```tsx
+// ✅ Good - shallow nesting
+const Navigation = styled.nav`
+  .nav-item {
+    padding: 8px 16px;
+  }
 
-As mentioned, you want to keep your styling as close to the root of your component system as possible, to minimize repetitive styling/overrides, and err on the side of reusability. In some cases, that means you'll want to globally tweak one of our core components to match our design system. In Superset, that's Ant Design (AntD).
-
-AntD uses a cool trick called compound components. For example, the `Menu` component also lets you use `Menu.Item`, `Menu.SubMenu`, `Menu.ItemGroup`, and `Menu.Divider`.
-
-### The `Object.assign` trick
-
-Let's say you want to override an AntD component called `Foo`, and have `Foo.Bar` display some custom CSS for the `Bar` compound component. You can do it effectively like so:
-
-```jsx
-import {
-  Foo as AntdFoo,
-} from 'antd';
-
-export const StyledBar = styled(AntdFoo.Bar)`
-  border-radius: ${({ theme }) => theme.borderRadius}px;
+  .nav-link {
+    color: ${({ theme }) => theme.colors.text};
+    text-decoration: none;
+  }
 `;
 
-export const Foo = Object.assign(AntdFoo, {
-  Bar: StyledBar,
+// ❌ Avoid - deep nesting
+const Navigation = styled.nav`
+  ul {
+    li {
+      a {
+        span {
+          color: blue; /* Too nested */
+        }
+      }
+    }
+  }
+`;
+```
+
+## Performance Tips
+
+### 1. Avoid Inline Functions in CSS
+```tsx
+// ✅ Good - external function
+const getBackgroundColor = (isActive: boolean, theme: any) =>
+  isActive ? theme.colors.primary : theme.colors.secondary;
+
+const Button = styled.button<{ isActive: boolean }>`
+  background-color: ${({ isActive, theme }) => getBackgroundColor(isActive, theme)};
+`;
+
+// ❌ Avoid - inline function (creates new function on each render)
+const Button = styled.button<{ isActive: boolean }>`
+  background-color: ${({ isActive, theme }) =>
+    isActive ? theme.colors.primary : theme.colors.secondary};
+`;
+```
+
+### 2. Use CSS Objects for Dynamic Styles
+```tsx
+// For highly dynamic styles, consider CSS objects
+const dynamicStyles = (props: Props) => ({
+  backgroundColor: props.color,
+  fontSize: `${props.size}px`,
+  // ... other dynamic properties
 });
-```
 
-You can then import this customized `Foo` and use `Foo.Bar` as expected. You should probably save your creation in `src/components` for maximum reusability, and add a Storybook entry so future engineers can view your creation, and designers can better understand how it fits the Superset Design System.
+const DynamicComponent = (props: Props) => (
+  <div css={dynamicStyles(props)}>
+    Content
+  </div>
+);
+```

docs/developer_portal/guidelines/frontend/testing-guidelines.md

@@ -0,0 +1,297 @@
+---
+title: Testing Guidelines and Best Practices
+sidebar_position: 3
+---
+
+<!--
+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.
+-->
+
+# Testing Guidelines and Best Practices
+
+We feel that tests are an important part of a feature and not an additional or optional effort. That's why we colocate test files with functionality and sometimes write tests upfront to help validate requirements and shape the API of our components. Every new component or file added should have an associated test file with the `.test` extension.
+
+We use Jest, React Testing Library (RTL), and Cypress to write our unit, integration, and end-to-end tests. For each type, we have a set of best practices/tips described below:
+
+## Jest
+
+### Write simple, standalone tests
+
+The importance of simplicity is often overlooked in test cases. Clear, dumb code should always be preferred over complex ones. The test cases should be pretty much standalone and should not involve any external logic if not absolutely necessary. That's because you want the corpus of the tests to be easy to read and understandable at first sight.
+
+### Avoid nesting when you're testing
+
+Avoid the use of `describe` blocks in favor of inlined tests. If your tests start to grow and you feel the need to group tests, prefer to break them into multiple test files. Check this awesome [article](https://kentcdodds.com/blog/avoid-nesting-when-youre-testing) written by [Kent C. Dodds](https://kentcdodds.com/) about this topic.
+
+### No warnings!
+
+Your tests shouldn't trigger warnings. This is really common when testing async functionality. It's really difficult to read test results when we have a bunch of warnings.
+
+## React Testing Library (RTL)
+
+### Keep accessibility in mind when writing your tests
+
+One of the most important points of RTL is accessibility and this is also a very important point for us. We should try our best to follow the RTL [Priority](https://testing-library.com/docs/queries/about/#priority) when querying for elements in our tests. `getByTestId` is not viewable by the user and should only be used when the element isn't accessible in any other way.
+
+### Don't use `act` unnecessarily
+
+`render` and `fireEvent` are already wrapped in `act`, so wrapping them in `act` again is a common mistake. Some solutions to the warnings related to async testing can be found in the RTL docs.
+
+## Example Test Structure
+
+```tsx
+// MyComponent.test.tsx
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MyComponent } from './MyComponent';
+
+// ✅ Good - Simple, standalone test
+test('renders loading state initially', () => {
+  render(<MyComponent />);
+  expect(screen.getByText('Loading...')).toBeInTheDocument();
+});
+
+// ✅ Good - Tests user interaction
+test('calls onSubmit when form is submitted', async () => {
+  const user = userEvent.setup();
+  const mockOnSubmit = jest.fn();
+
+  render(<MyComponent onSubmit={mockOnSubmit} />);
+
+  await user.type(screen.getByLabelText('Username'), 'testuser');
+  await user.click(screen.getByRole('button', { name: 'Submit' }));
+
+  expect(mockOnSubmit).toHaveBeenCalledWith({ username: 'testuser' });
+});
+
+// ✅ Good - Tests async behavior
+test('displays error message when API call fails', async () => {
+  const mockFetch = jest.fn().mockRejectedValue(new Error('API Error'));
+  global.fetch = mockFetch;
+
+  render(<MyComponent />);
+
+  await waitFor(() => {
+    expect(screen.getByText('Error: API Error')).toBeInTheDocument();
+  });
+});
+```
+
+## Testing Best Practices
+
+### Use appropriate queries in priority order
+
+1. **Accessible to everyone**: `getByRole`, `getByLabelText`, `getByPlaceholderText`, `getByText`
+2. **Semantic queries**: `getByAltText`, `getByTitle`
+3. **Test IDs**: `getByTestId` (last resort)
+
+```tsx
+// ✅ Good - using accessible queries
+test('user can submit form', () => {
+  render(<LoginForm />);
+
+  const usernameInput = screen.getByLabelText('Username');
+  const passwordInput = screen.getByLabelText('Password');
+  const submitButton = screen.getByRole('button', { name: 'Log in' });
+
+  // Test implementation
+});
+
+// ❌ Avoid - using test IDs when better options exist
+test('user can submit form', () => {
+  render(<LoginForm />);
+
+  const usernameInput = screen.getByTestId('username-input');
+  const passwordInput = screen.getByTestId('password-input');
+  const submitButton = screen.getByTestId('submit-button');
+
+  // Test implementation
+});
+```
+
+### Test behavior, not implementation details
+
+```tsx
+// ✅ Good - tests what the user experiences
+test('shows success message after successful form submission', async () => {
+  render(<ContactForm />);
+
+  await userEvent.type(screen.getByLabelText('Email'), 'test@example.com');
+  await userEvent.click(screen.getByRole('button', { name: 'Submit' }));
+
+  await waitFor(() => {
+    expect(screen.getByText('Message sent successfully!')).toBeInTheDocument();
+  });
+});
+
+// ❌ Avoid - testing implementation details
+test('calls setState when form is submitted', () => {
+  const component = shallow(<ContactForm />);
+  const instance = component.instance();
+  const spy = jest.spyOn(instance, 'setState');
+
+  instance.handleSubmit();
+  expect(spy).toHaveBeenCalled();
+});
+```
+
+### Mock external dependencies appropriately
+
+```tsx
+// Mock API calls
+jest.mock('../api/userService', () => ({
+  getUser: jest.fn(),
+  createUser: jest.fn(),
+}));
+
+// Mock components that aren't relevant to the test
+jest.mock('../Chart/Chart', () => {
+  return function MockChart() {
+    return <div data-testid="mock-chart">Chart Component</div>;
+  };
+});
+```
+
+## Async Testing Patterns
+
+### Testing async operations
+
+```tsx
+test('loads and displays user data', async () => {
+  const mockUser = { id: 1, name: 'John Doe' };
+  const mockGetUser = jest.fn().mockResolvedValue(mockUser);
+
+  render(<UserProfile getUserData={mockGetUser} />);
+
+  // Wait for the async operation to complete
+  await waitFor(() => {
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+  });
+
+  expect(mockGetUser).toHaveBeenCalledTimes(1);
+});
+```
+
+### Testing loading states
+
+```tsx
+test('shows loading spinner while fetching data', async () => {
+  const mockGetUser = jest.fn().mockImplementation(
+    () => new Promise(resolve => setTimeout(resolve, 100))
+  );
+
+  render(<UserProfile getUserData={mockGetUser} />);
+
+  expect(screen.getByText('Loading...')).toBeInTheDocument();
+
+  await waitFor(() => {
+    expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+  });
+});
+```
+
+## Component-Specific Testing
+
+### Testing form components
+
+```tsx
+test('validates required fields', async () => {
+  render(<RegistrationForm />);
+
+  const submitButton = screen.getByRole('button', { name: 'Register' });
+  await userEvent.click(submitButton);
+
+  expect(screen.getByText('Username is required')).toBeInTheDocument();
+  expect(screen.getByText('Email is required')).toBeInTheDocument();
+});
+```
+
+### Testing modals and overlays
+
+```tsx
+test('opens and closes modal', async () => {
+  render(<ModalContainer />);
+
+  const openButton = screen.getByRole('button', { name: 'Open Modal' });
+  await userEvent.click(openButton);
+
+  expect(screen.getByRole('dialog')).toBeInTheDocument();
+
+  const closeButton = screen.getByRole('button', { name: 'Close' });
+  await userEvent.click(closeButton);
+
+  expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+});
+```
+
+### Testing with context providers
+
+```tsx
+const renderWithTheme = (component: React.ReactElement) => {
+  return render(
+    <ThemeProvider theme={mockTheme}>
+      {component}
+    </ThemeProvider>
+  );
+};
+
+test('applies theme colors correctly', () => {
+  renderWithTheme(<ThemedButton />);
+
+  const button = screen.getByRole('button');
+  expect(button).toHaveStyle({
+    backgroundColor: mockTheme.colors.primary,
+  });
+});
+```
+
+## Performance Testing
+
+### Testing with large datasets
+
+```tsx
+test('handles large lists efficiently', () => {
+  const largeDataset = Array.from({ length: 10000 }, (_, i) => ({
+    id: i,
+    name: `Item ${i}`,
+  }));
+
+  const { container } = render(<VirtualizedList items={largeDataset} />);
+
+  // Should only render visible items
+  const renderedItems = container.querySelectorAll('[data-testid="list-item"]');
+  expect(renderedItems.length).toBeLessThan(100);
+});
+```
+
+## Testing Accessibility
+
+```tsx
+test('is accessible to screen readers', () => {
+  render(<AccessibleForm />);
+
+  const form = screen.getByRole('form');
+  const inputs = screen.getAllByRole('textbox');
+
+  inputs.forEach(input => {
+    expect(input).toHaveAttribute('aria-label');
+  });
+
+  expect(form).toHaveAttribute('aria-describedby');
+});
+```

docs/developer_portal/testing/testing-guidelines.md

@@ -1,129 +0,0 @@
----
-title: Testing Guidelines and Best Practices
-sidebar_position: 1
----
-
-<!--
-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.
--->
-
-# Testing Guidelines and Best Practices
-
-We feel that tests are an important part of a feature and not an additional or optional effort. That's why we colocate test files with functionality and sometimes write tests upfront to help validate requirements and shape the API of our components. Every new component or file added should have an associated test file with the `.test` extension.
-
-We use Jest, React Testing Library (RTL), and Cypress to write our unit, integration, and end-to-end tests. For each type, we have a set of best practices/tips described below:
-
-## Jest
-
-### Write simple, standalone tests
-
-The importance of simplicity is often overlooked in test cases. Clear, dumb code should always be preferred over complex ones. The test cases should be pretty much standalone and should not involve any external logic if not absolutely necessary. That's because you want the corpus of the tests to be easy to read and understandable at first sight.
-
-### Avoid nesting when you're testing
-
-Avoid the use of `describe` blocks in favor of inlined tests. If your tests start to grow and you feel the need to group tests, prefer to break them into multiple test files. Check this awesome [article](https://kentcdodds.com/blog/avoid-nesting-when-youre-testing) written by [Kent C. Dodds](https://kentcdodds.com/) about this topic.
-
-### No warnings!
-
-Your tests shouldn't trigger warnings. This is really common when testing async functionality. It's really difficult to read test results when we have a bunch of warnings.
-
-### Example
-
-You can find an example of a test [here](https://github.com/apache/superset/blob/e6c5bf4/superset-frontend/src/common/hooks/useChangeEffect/useChangeEffect.test.ts).
-
-## React Testing Library (RTL)
-
-### Keep accessibility in mind when writing your tests
-
-One of the most important points of RTL is accessibility and this is also a very important point for us. We should try our best to follow the RTL [Priority](https://testing-library.com/docs/queries/about/#priority) when querying for elements in our tests. `getByTestId` is not viewable by the user and should only be used when the element isn't accessible in any other way.
-
-### Don't use `act` unnecessarily
-
-`render` and `fireEvent` are already wrapped in `act`, so wrapping them in `act` again is a common mistake. Some solutions to the warnings related to `act` might be found [here](https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning).
-
-### Be specific when using *ByRole
-
-By using the `name` option we can point to the items by their accessible name. For example:
-
-```jsx
-screen.getByRole('button', { name: /hello world/i })
-```
-
-Using the `name` property also avoids breaking the tests in the future if other components with the same role are added.
-
-### userEvent vs fireEvent
-
-Prefer the [user-event](https://github.com/testing-library/user-event) library, which provides a more advanced simulation of browser interactions than the built-in [fireEvent](https://testing-library.com/docs/dom-testing-library/api-events/#fireevent) method.
-
-### Usage of waitFor
-
-- [Prefer to use `find`](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#using-waitfor-to-wait-for-elements-that-can-be-queried-with-find) over `waitFor` when you're querying for elements. Even though both achieve the same objective, the `find` version is simpler and you'll get better error messages.
-- Prefer to use only [one assertion at a time](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#having-multiple-assertions-in-a-single-waitfor-callback). If you put multiple assertions inside a `waitFor` we could end up waiting for the whole block timeout before seeing a test failure even if the failure occurred at the first assertion. By putting a single assertion in there, we can improve on test execution time.
-- Do not perform [side-effects](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#performing-side-effects-in-waitfor) inside `waitFor`. The callback can be called a non-deterministic number of times and frequency (it's called both on an interval as well as when there are DOM mutations). So this means that your side-effect could run multiple times.
-
-### Example
-
-You can find an example of a test [here](https://github.com/apache/superset/blob/master/superset-frontend/src/dashboard/components/PublishedStatus/PublishedStatus.test.tsx).
-
-## Cypress
-
-### Prefer to use Cypress for e2e testing and RTL for integration testing
-
-Here it's important to make the distinction between e2e and integration testing. This [article](https://www.onpathtesting.com/blog/end-to-end-vs-integration-testing) gives an excellent definition:
-
-> End-to-end testing verifies that your software works correctly from the beginning to the end of a particular user flow. It replicates expected user behavior and various usage scenarios to ensure that your software works as whole. End-to-end testing uses a production equivalent environment and data to simulate real-world situations and may also involve the integrations your software has with external applications.
-
-> A typical software project consists of multiple software units, usually coded by different developers. Integration testing combines those software units logically and tests them as a group.
-> Essentially, integration testing verifies whether or not the individual modules or services that make up your application work well together. The purpose of this level of testing is to expose defects in the interaction between these software modules when they are integrated.
-
-Do not use Cypress when RTL can do it better and faster. Many of the Cypress tests that we have right now, fall into the integration testing category and can be ported to RTL which is much faster and gives more immediate feedback. Cypress should be used mainly for end-to-end testing, replicating the user experience, with positive and negative flows.
-
-### Isolated and standalone tests
-
-Tests should never rely on other tests to pass. This might be hard when a single user is used for testing as data will be stored in the database. At every new test, we should reset the database.
-
-### Cleaning state
-
-Cleaning the state of the application, such as resetting the DB, or in general, any state that might affect consequent tests should always be done in the `beforeEach` hook and never in the `afterEach` one as the `beforeEach` is guaranteed to run, while the test might never reach the point to run the `afterEach` hook. One example would be if you refresh Cypress in the middle of the test. At this point, you will have built up a partial state in the database, and your clean-up function will never get called. You can read more about it [here](https://docs.cypress.io/guides/references/best-practices#Using-after-or-afterEach-hooks).
-
-### Unnecessary use of `cy.wait`
-
-- Unnecessary when using `cy.request()` as it will resolve when a response is received from the server
-- Unnecessary when using `cy.visit()` as it resolves only when the page fires the load event
-- Unnecessary when using `cy.get()`. When the selector should wait for a request to happen, aliases would come in handy:
-
-```js
-cy.intercept('GET', '/users', [{ name: 'Maggy' }, { name: 'Joan' }]).as('getUsers')
-cy.get('#fetch').click()
-cy.wait('@getUsers') // <--- wait explicitly for this route to finish
-cy.get('table tr').should('have.length', 2)
-```
-
-### Accessibility and Resilience
-
-The same accessibility principles in the RTL section apply here. Use accessible selectors when querying for elements. Those principles also help to isolate selectors from eventual CSS and JS changes and improve the resilience of your tests.
-
-## References
-
-- [Avoid Nesting when you're Testing](https://kentcdodds.com/blog/avoid-nesting-when-youre-testing)
-- [RTL - Queries](https://testing-library.com/docs/queries/about/#priority)
-- [Fix the "not wrapped in act(...)" warning](https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning)
-- [Common mistakes with React Testing Library](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library)
-- [ARIA Roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles)
-- [Cypress - Best Practices](https://docs.cypress.io/guides/references/best-practices)
-- [End-to-end vs integration tests: what's the difference?](https://www.onpathtesting.com/blog/end-to-end-vs-integration-testing)

docs/docs/configuration/sql-templating.mdx

@@ -26,8 +26,8 @@ made available in the Jinja context:
 
 - `columns`: columns which to group by in the query
 - `filter`: filters applied in the query
-- `from_dttm`: start `datetime` value from the selected time range (`None` if undefined). **Note:** Only available in virtual datasets when a time range filter is applied in Explore/Chart views—not available in standalone SQL Lab queries. (deprecated beginning in version 5.0, use `get_time_filter` instead)
-- `to_dttm`: end `datetime` value from the selected time range (`None` if undefined). **Note:** Only available in virtual datasets when a time range filter is applied in Explore/Chart views—not available in standalone SQL Lab queries. (deprecated beginning in version 5.0, use `get_time_filter` instead)
+- `from_dttm`: start `datetime` value from the selected time range (`None` if undefined) (deprecated beginning in version 5.0, use `get_time_filter` instead)
+- `to_dttm`: end `datetime` value from the selected time range (`None` if undefined). (deprecated beginning in version 5.0, use `get_time_filter` instead)
 - `groupby`: columns which to group by in the query (deprecated)
 - `metrics`: aggregate expressions in the query
 - `row_limit`: row limit of the query
@@ -67,54 +67,6 @@ the time filter is not set. For many database engines, this could be replaced wi
 Note that the Jinja parameters are called within _double_ brackets in the query and with
 _single_ brackets in the logic blocks.
 
-### Understanding Context Availability
-
-Some Jinja variables like `from_dttm`, `to_dttm`, and `filter` are **only available when a chart or dashboard provides them**. They are populated from:
-
-- Time range filters applied in Explore/Chart views
-- Dashboard native filters
-- Filter components
-
-**These variables are NOT available in standalone SQL Lab queries** because there's no filter context. If you try to use `{{ from_dttm }}` directly in SQL Lab, you'll get an "undefined parameter" error.
-
-#### Testing Time-Filtered Queries in SQL Lab
-
-To test queries that use time variables in SQL Lab, you have several options:
-
-**Option 1: Use Jinja defaults (recommended)**
-
-```sql
-SELECT *
-FROM tbl
-WHERE dttm_col > '{{ from_dttm | default("2024-01-01", true) }}'
-  AND dttm_col < '{{ to_dttm | default("2024-12-31", true) }}'
-```
-
-**Option 2: Use SQL Lab Parameters**
-
-Set parameters in the SQL Lab UI (Parameters menu):
-```json
-{
-  "from_dttm": "2024-01-01",
-  "to_dttm": "2024-12-31"
-}
-```
-
-**Option 3: Use `{% set %}` for testing**
-
-```sql
-{% set from_dttm = "2024-01-01" %}
-{% set to_dttm = "2024-12-31" %}
-SELECT *
-FROM tbl
-WHERE dttm_col > '{{ from_dttm }}' AND dttm_col < '{{ to_dttm }}'
-```
-
-:::tip
-When you save a SQL Lab query as a virtual dataset and use it in a chart with time filters,
-the actual filter values will override any defaults or test values you set.
-:::
-
 To add custom functionality to the Jinja context, you need to overload the default Jinja
 context in your environment by defining the `JINJA_CONTEXT_ADDONS` in your superset configuration
 (`superset_config.py`). Objects referenced in this dictionary are made available for users to use

docs/docs/contributing/development.mdx

@@ -934,20 +934,6 @@ npm run storybook
 
 When contributing new React components to Superset, please try to add a Story alongside the component's `jsx/tsx` file.
 
-#### Testing Stories
-
-Superset uses [@storybook/test-runner](https://storybook.js.org/docs/writing-tests/test-runner) to validate that all stories compile and render without errors. This helps catch broken stories before they're merged.
-
-```bash
-# Run against a running Storybook server (start with `npm run storybook` first)
-npm run test-storybook
-
-# Build static Storybook and test (CI-friendly, no server needed)
-npm run test-storybook:ci
-```
-
-The `test-storybook` job runs automatically in CI on every pull request, ensuring stories remain functional.
-
 ## Tips
 
 ### Adding a new datasource

docs/docusaurus.config.ts

@@ -21,7 +21,6 @@ import type { Config } from '@docusaurus/types';
 import type { Options, ThemeConfig } from '@docusaurus/preset-classic';
 import { themes } from 'prism-react-renderer';
 import remarkImportPartial from 'remark-import-partial';
-import remarkLocalizeBadges from './plugins/remark-localize-badges.mjs';
 import * as fs from 'fs';
 import * as path from 'path';
 
@@ -45,7 +44,7 @@ if (!versionsConfig.components.disabled) {
       sidebarPath: require.resolve('./sidebarComponents.js'),
       editUrl:
         'https://github.com/apache/superset/edit/master/docs/components',
-      remarkPlugins: [remarkImportPartial, remarkLocalizeBadges],
+      remarkPlugins: [remarkImportPartial],
       docItemComponent: '@theme/DocItem',
       includeCurrentVersion: versionsConfig.components.includeCurrentVersion,
       lastVersion: versionsConfig.components.lastVersion,
@@ -69,7 +68,7 @@ if (!versionsConfig.developer_portal.disabled) {
       sidebarPath: require.resolve('./sidebarTutorials.js'),
       editUrl:
         'https://github.com/apache/superset/edit/master/docs/developer_portal',
-      remarkPlugins: [remarkImportPartial, remarkLocalizeBadges],
+      remarkPlugins: [remarkImportPartial],
       docItemComponent: '@theme/DocItem',
       includeCurrentVersion: versionsConfig.developer_portal.includeCurrentVersion,
       lastVersion: versionsConfig.developer_portal.lastVersion,
@@ -165,11 +164,7 @@ const config: Config = {
   favicon: '/img/favicon.ico',
   organizationName: 'apache',
   projectName: 'superset',
-  themes: [
-    '@saucelabs/theme-github-codeblock',
-    '@docusaurus/theme-mermaid',
-    '@docusaurus/theme-live-codeblock',
-  ],
+  themes: ['@saucelabs/theme-github-codeblock', '@docusaurus/theme-mermaid'],
   plugins: [
     require.resolve('./src/webpack.extend.ts'),
     [
@@ -342,7 +337,6 @@ const config: Config = {
             }
             return `https://github.com/apache/superset/edit/master/docs/${versionDocsDirPath}/${docPath}`;
           },
-          remarkPlugins: [remarkImportPartial, remarkLocalizeBadges],
           includeCurrentVersion: versionsConfig.docs.includeCurrentVersion,
           lastVersion: versionsConfig.docs.lastVersion,  // Make 'next' the default
           onlyIncludeVersions: versionsConfig.docs.onlyIncludeVersions,
@@ -480,9 +474,6 @@ const config: Config = {
         hideable: true,
       },
     },
-    liveCodeBlock: {
-      playgroundPosition: 'bottom',
-    },
   } satisfies ThemeConfig,
   scripts: [
     // {

docs/package.json

@@ -6,17 +6,16 @@
   "scripts": {
     "docusaurus": "docusaurus",
     "_init": "cat src/intro_header.txt ../README.md > docs/intro.md",
-    "start": "yarn run _init && yarn run generate:extension-components && NODE_ENV=development docusaurus start",
+    "start": "yarn run _init && NODE_ENV=development docusaurus start",
     "stop": "pkill -f 'docusaurus start' || pkill -f 'docusaurus serve' || echo 'No docusaurus server running'",
-    "build": "yarn run _init && yarn run generate:extension-components && DEBUG=docusaurus:* docusaurus build",
+    "build": "yarn run _init && DEBUG=docusaurus:* docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",
     "serve": "yarn run _init && docusaurus serve",
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
-    "typecheck": "yarn run generate:extension-components && tsc",
-    "generate:extension-components": "node scripts/generate-extension-components.mjs",
+    "typecheck": "tsc",
     "eslint": "eslint .",
     "version:add": "node scripts/manage-versions.mjs add",
     "version:remove": "node scripts/manage-versions.mjs remove",
@@ -32,7 +31,6 @@
     "@docusaurus/core": "3.9.2",
     "@docusaurus/plugin-client-redirects": "3.9.2",
     "@docusaurus/preset-classic": "3.9.2",
-    "@docusaurus/theme-live-codeblock": "^3.9.2",
     "@docusaurus/theme-mermaid": "^3.9.2",
     "@emotion/core": "^11.0.0",
     "@emotion/react": "^11.13.3",
@@ -55,7 +53,7 @@
     "caniuse-lite": "^1.0.30001760",
     "docusaurus-plugin-less": "^2.0.2",
     "json-bigint": "^1.0.0",
-    "less": "^4.5.1",
+    "less": "^4.4.2",
     "less-loader": "^12.3.0",
     "prism-react-renderer": "^2.4.1",
     "react": "^18.3.1",
@@ -67,17 +65,16 @@
     "storybook": "^8.6.11",
     "swagger-ui-react": "^5.31.0",
     "tinycolor2": "^1.4.2",
-    "ts-loader": "^9.5.4",
-    "unist-util-visit": "^5.0.0"
+    "ts-loader": "^9.5.4"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^3.9.1",
     "@docusaurus/tsconfig": "^3.9.2",
-    "@eslint/js": "^9.39.2",
+    "@eslint/js": "^9.39.1",
     "@types/react": "^19.1.8",
     "@typescript-eslint/eslint-plugin": "^8.37.0",
     "@typescript-eslint/parser": "^8.49.0",
-    "eslint": "^9.39.2",
+    "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.3",
     "eslint-plugin-react": "^7.37.5",

docs/plugins/remark-localize-badges.mjs

@@ -1,224 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-/**
- * Remark plugin to localize badge images from shields.io and similar services.
- *
- * This plugin downloads badge SVGs at build time and serves them locally,
- * avoiding external dependencies and caching issues with dynamic badges.
- *
- * Inspired by Apache Commons' fixshields.py approach.
- */
-
-import { visit } from 'unist-util-visit';
-import * as fs from 'fs';
-import * as path from 'path';
-import * as crypto from 'crypto';
-
-// Badge domains to localize (always localize all URLs from these domains)
-const BADGE_DOMAINS = [
-  'img.shields.io',
-  'badge.fury.io',
-  'codecov.io',
-  'badgen.net',
-  'nodei.co',
-];
-
-// Patterns for badge URLs on other domains (e.g., GitHub Actions badges)
-const BADGE_PATH_PATTERNS = [
-  /github\.com\/.*\/actions\/workflows\/.*\/badge\.svg/,
-  /github\.com\/.*\/badge\.svg/,
-];
-
-// Cache for downloaded badges (persists across files in a single build)
-const badgeCache = new Map();
-
-// Track if we've already ensured the badges directory exists
-let badgesDirCreated = false;
-
-/**
- * Generate a stable filename for a badge URL
- */
-function getBadgeFilename(url) {
-  const hash = crypto.createHash('md5').update(url).digest('hex').slice(0, 12);
-  // Extract a readable name from the URL
-  const urlPath = new URL(url).pathname;
-  const readablePart = urlPath
-    .replace(/^\//, '')
-    .replace(/[^a-zA-Z0-9-]/g, '_')
-    .slice(0, 40);
-  return `${readablePart}_${hash}.svg`;
-}
-
-/**
- * Check if a URL is a badge we should localize
- */
-function isBadgeUrl(url) {
-  if (!url) return false;
-  try {
-    const parsed = new URL(url);
-    // Check if it's from a known badge domain
-    if (BADGE_DOMAINS.some((domain) => parsed.hostname.includes(domain))) {
-      return true;
-    }
-    // Check if it matches a badge path pattern
-    return BADGE_PATH_PATTERNS.some((pattern) => pattern.test(url));
-  } catch {
-    return false;
-  }
-}
-
-/**
- * Download a badge and return the local path
- */
-async function downloadBadge(url, staticDir) {
-  // Check cache first
-  if (badgeCache.has(url)) {
-    return badgeCache.get(url);
-  }
-
-  const badgesDir = path.join(staticDir, 'badges');
-
-  // Ensure badges directory exists
-  if (!badgesDirCreated) {
-    fs.mkdirSync(badgesDir, { recursive: true });
-    badgesDirCreated = true;
-  }
-
-  const filename = getBadgeFilename(url);
-  const localPath = path.join(badgesDir, filename);
-  const webPath = `/badges/${filename}`;
-
-  // Check if already downloaded in a previous build
-  if (fs.existsSync(localPath)) {
-    badgeCache.set(url, webPath);
-    return webPath;
-  }
-
-  console.log(`[remark-localize-badges] Downloading: ${url}`);
-
-  try {
-    const response = await fetch(url, {
-      headers: {
-        // Some services need a user agent
-        'User-Agent': 'Mozilla/5.0 (compatible; DocusaurusBuild/1.0)',
-        Accept: 'image/svg+xml,image/*,*/*',
-      },
-      // Follow redirects
-      redirect: 'follow',
-    });
-
-    if (!response.ok) {
-      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-    }
-
-    const contentType = response.headers.get('content-type') || '';
-    const content = await response.text();
-
-    // Validate it's actually an SVG or image
-    if (
-      !contentType.includes('svg') &&
-      !contentType.includes('image') &&
-      !content.trim().startsWith('<svg') &&
-      !content.trim().startsWith('<?xml')
-    ) {
-      throw new Error(
-        `Invalid content type: ${contentType}. Expected SVG image.`,
-      );
-    }
-
-    // Write the badge to disk
-    fs.writeFileSync(localPath, content, 'utf8');
-    console.log(`[remark-localize-badges] Saved: ${filename}`);
-
-    badgeCache.set(url, webPath);
-    return webPath;
-  } catch (error) {
-    // Fail the build on badge download failure
-    throw new Error(
-      `[remark-localize-badges] Failed to download badge: ${url}\n` +
-        `Error: ${error.message}\n` +
-        `Build cannot continue with broken badges. Please fix the badge URL or remove it.`,
-    );
-  }
-}
-
-/**
- * The remark plugin factory
- */
-export default function remarkLocalizeBadges(options = {}) {
-  // __dirname equivalent for ES modules - use import.meta.url
-  const currentDir = path.dirname(new URL(import.meta.url).pathname);
-  const docsRoot = path.resolve(currentDir, '..');
-  const staticDir = options.staticDir || path.join(docsRoot, 'static');
-
-
-  return async function transformer(tree) {
-    const promises = [];
-
-    // Find all image nodes
-    visit(tree, 'image', (node) => {
-      if (isBadgeUrl(node.url)) {
-        promises.push(
-          downloadBadge(node.url, staticDir).then((localPath) => {
-            node.url = localPath;
-          }),
-        );
-      }
-    });
-
-    // Also handle HTML img tags in raw HTML or JSX
-    visit(tree, ['html', 'jsx'], (node) => {
-      if (!node.value) return;
-
-      // Find img src attributes pointing to badge URLs
-      const imgRegex = /<img[^>]+src=["']([^"']+)["'][^>]*>/gi;
-      let match;
-
-      while ((match = imgRegex.exec(node.value)) !== null) {
-        const url = match[1];
-        if (isBadgeUrl(url)) {
-          promises.push(
-            downloadBadge(url, staticDir).then((localPath) => {
-              node.value = node.value.replace(url, localPath);
-            }),
-          );
-        }
-      }
-    });
-
-    // Also handle markdown link images: [![alt](img-url)](link-url)
-    visit(tree, 'link', (node) => {
-      if (node.children) {
-        node.children.forEach((child) => {
-          if (child.type === 'image' && isBadgeUrl(child.url)) {
-            promises.push(
-              downloadBadge(child.url, staticDir).then((localPath) => {
-                child.url = localPath;
-              }),
-            );
-          }
-        });
-      }
-    });
-
-    // Wait for all downloads to complete
-    await Promise.all(promises);
-  };
-}

docs/scripts/generate-extension-components.mjs

@@ -1,676 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-/**
- * This script scans for Storybook stories in superset-core/src and generates
- * MDX documentation pages for the developer portal. All components in
- * superset-core are considered extension-compatible by virtue of their location.
- *
- * Usage: node scripts/generate-extension-components.mjs
- */
-
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const ROOT_DIR = path.resolve(__dirname, '../..');
-const DOCS_DIR = path.resolve(__dirname, '..');
-const OUTPUT_DIR = path.join(
-  DOCS_DIR,
-  'developer_portal/extensions/components'
-);
-const TYPES_OUTPUT_DIR = path.join(DOCS_DIR, 'src/types/apache-superset-core');
-const TYPES_OUTPUT_PATH = path.join(TYPES_OUTPUT_DIR, 'index.d.ts');
-const SUPERSET_CORE_DIR = path.join(
-  ROOT_DIR,
-  'superset-frontend/packages/superset-core'
-);
-
-/**
- * Find all story files in the superset-core package
- */
-async function findStoryFiles() {
-  const files = [];
-
-  // Use fs to recursively find files since glob might not be available
-  function walkDir(dir) {
-    if (!fs.existsSync(dir)) return;
-    const entries = fs.readdirSync(dir, { withFileTypes: true });
-    for (const entry of entries) {
-      const fullPath = path.join(dir, entry.name);
-      if (entry.isDirectory()) {
-        walkDir(fullPath);
-      } else if (entry.name.endsWith('.stories.tsx')) {
-        files.push(fullPath);
-      }
-    }
-  }
-
-  walkDir(path.join(SUPERSET_CORE_DIR, 'src'));
-  return files;
-}
-
-/**
- * Parse a story file and extract metadata
- *
- * All stories in superset-core are considered extension-compatible
- * by virtue of their location - no tag needed.
- */
-function parseStoryFile(filePath) {
-  const content = fs.readFileSync(filePath, 'utf-8');
-
-  // Extract component name from title
-  const titleMatch = content.match(/title:\s*['"]([^'"]+)['"]/);
-  const title = titleMatch ? titleMatch[1] : null;
-
-  // Extract component name (last part of title path)
-  const componentName = title ? title.split('/').pop() : null;
-
-  // Extract description from parameters
-  // Handle concatenated strings like: 'part1 ' + 'part2'
-  let description = '';
-
-  // First try to find the description block
-  const descBlockMatch = content.match(
-    /description:\s*{\s*component:\s*([\s\S]*?)\s*},?\s*}/
-  );
-
-  if (descBlockMatch) {
-    const descBlock = descBlockMatch[1];
-    // Extract all string literals and concatenate them
-    const stringParts = [];
-    const stringMatches = descBlock.matchAll(/['"]([^'"]*)['"]/g);
-    for (const match of stringMatches) {
-      stringParts.push(match[1]);
-    }
-    description = stringParts.join('').trim();
-  }
-
-  // Extract package info
-  const packageMatch = content.match(/package:\s*['"]([^'"]+)['"]/);
-  const packageName = packageMatch ? packageMatch[1] : '@apache-superset/core/ui';
-
-  // Extract import path - handle double-quoted strings containing single quotes
-  // Match: importPath: "import { Alert } from '@apache-superset/core';"
-  const importMatchDouble = content.match(/importPath:\s*"([^"]+)"/);
-  const importMatchSingle = content.match(/importPath:\s*'([^']+)'/);
-  let importPath = `import { ${componentName} } from '${packageName}';`;
-  if (importMatchDouble) {
-    importPath = importMatchDouble[1];
-  } else if (importMatchSingle) {
-    importPath = importMatchSingle[1];
-  }
-
-  // Get the directory containing the story to find the component
-  const storyDir = path.dirname(filePath);
-  const componentFile = path.join(storyDir, 'index.tsx');
-  const hasComponentFile = fs.existsSync(componentFile);
-
-  // Try to extract props interface from component file (for future use)
-  if (hasComponentFile) {
-    // Read component file - props extraction reserved for future enhancement
-    // const componentContent = fs.readFileSync(componentFile, 'utf-8');
-  }
-
-  // Extract story exports (named exports that aren't the default)
-  const storyExports = [];
-  const exportMatches = content.matchAll(
-    /export\s+(?:const|function)\s+(\w+)/g
-  );
-  for (const match of exportMatches) {
-    if (match[1] !== 'default') {
-      storyExports.push(match[1]);
-    }
-  }
-
-  return {
-    filePath,
-    title,
-    componentName,
-    description,
-    packageName,
-    importPath,
-    storyExports,
-    hasComponentFile,
-    relativePath: path.relative(ROOT_DIR, filePath),
-  };
-}
-
-/**
- * Extract argTypes/args from story content for generating controls
- */
-function extractArgsAndControls(content, componentName, storyContent) {
-  // Look for InteractiveX.args pattern - handle multi-line objects
-  const argsMatch = content.match(
-    new RegExp(`Interactive${componentName}\\.args\\s*=\\s*\\{([\\s\\S]*?)\\};`, 's')
-  );
-
-  // Look for argTypes
-  const argTypesMatch = content.match(
-    new RegExp(`Interactive${componentName}\\.argTypes\\s*=\\s*\\{([\\s\\S]*?)\\};`, 's')
-  );
-
-  const args = {};
-  const controls = [];
-  const propDescriptions = {};
-
-  if (argsMatch) {
-    // Parse args - handle strings, booleans, numbers
-    // Note: Using simple regex without escape handling for security (avoids ReDoS)
-    // This is sufficient for Storybook args which rarely contain escaped quotes
-    const argsContent = argsMatch[1];
-    const argLines = argsContent.matchAll(/(\w+):\s*(['"]([^'"]*)['"']|true|false|\d+)/g);
-    for (const match of argLines) {
-      const key = match[1];
-      let value = match[2];
-      // Convert string booleans
-      if (value === 'true') value = true;
-      else if (value === 'false') value = false;
-      else if (!isNaN(Number(value))) value = Number(value);
-      else if (match[3] !== undefined) value = match[3]; // Use captured string content
-      args[key] = value;
-    }
-  }
-
-  if (argTypesMatch) {
-    const argTypesContent = argTypesMatch[1];
-
-    // Match each top-level property in argTypes
-    // Pattern: propertyName: { ... }, (with balanced braces)
-    const propPattern = /(\w+):\s*\{([^{}]*(?:\{[^{}]*\}[^{}]*)*)\}/g;
-    let propMatch;
-
-    while ((propMatch = propPattern.exec(argTypesContent)) !== null) {
-      const name = propMatch[1];
-      const propContent = propMatch[2];
-
-      // Extract description if present
-      const descMatch = propContent.match(/description:\s*['"]([^'"]+)['"]/);
-      if (descMatch) {
-        propDescriptions[name] = descMatch[1];
-      }
-
-      // Skip if it's an action (not a control)
-      if (propContent.includes('action:')) continue;
-
-      // Extract label for display
-      const label = name.charAt(0).toUpperCase() + name.slice(1).replace(/([A-Z])/g, ' $1');
-
-      // Check for select control
-      if (propContent.includes("type: 'select'") || propContent.includes('type: "select"')) {
-        // Look for options - could be inline array or variable reference
-        const inlineOptionsMatch = propContent.match(/options:\s*\[([^\]]+)\]/);
-        const varOptionsMatch = propContent.match(/options:\s*(\w+)/);
-
-        let options = [];
-        if (inlineOptionsMatch) {
-          options = [...inlineOptionsMatch[1].matchAll(/['"]([^'"]+)['"]/g)].map(m => m[1]);
-        } else if (varOptionsMatch && storyContent) {
-          // Look up the variable
-          const varName = varOptionsMatch[1];
-          const varDefMatch = storyContent.match(
-            new RegExp(`const\\s+${varName}[^=]*=\\s*\\[([^\\]]+)\\]`)
-          );
-          if (varDefMatch) {
-            options = [...varDefMatch[1].matchAll(/['"]([^'"]+)['"]/g)].map(m => m[1]);
-          }
-        }
-
-        if (options.length > 0) {
-          controls.push({ name, label, type: 'select', options });
-        }
-      }
-      // Check for boolean control
-      else if (propContent.includes("type: 'boolean'") || propContent.includes('type: "boolean"')) {
-        controls.push({ name, label, type: 'boolean' });
-      }
-      // Check for text/string control (default for props in args without explicit control)
-      else if (args[name] !== undefined && typeof args[name] === 'string') {
-        controls.push({ name, label, type: 'text' });
-      }
-    }
-  }
-
-  // Add text controls for string args that don't have explicit argTypes
-  for (const [key, value] of Object.entries(args)) {
-    if (typeof value === 'string' && !controls.find(c => c.name === key)) {
-      const label = key.charAt(0).toUpperCase() + key.slice(1).replace(/([A-Z])/g, ' $1');
-      controls.push({ name: key, label, type: 'text' });
-    }
-  }
-
-  return { args, controls, propDescriptions };
-}
-
-/**
- * Generate MDX content for a component
- */
-function generateMDX(component, storyContent) {
-  const { componentName, description, importPath, packageName, relativePath } =
-    component;
-
-  // Extract args, controls, and descriptions from the story
-  const { args, controls, propDescriptions } = extractArgsAndControls(storyContent, componentName, storyContent);
-
-  // Generate the controls array for StoryWithControls
-  const controlsJson = JSON.stringify(controls, null, 2)
-    .replace(/"(\w+)":/g, '$1:')  // Remove quotes from keys
-    .replace(/"/g, "'");  // Use single quotes for strings
-
-  // Generate default props
-  const propsJson = JSON.stringify(args, null, 2)
-    .replace(/"(\w+)":/g, '$1:')
-    .replace(/"/g, "'");
-
-  // Generate a realistic live code example from the actual args
-  const liveExampleProps = Object.entries(args)
-    .map(([key, value]) => {
-      if (typeof value === 'string') return `${key}="${value}"`;
-      if (typeof value === 'boolean') return value ? key : null;
-      return `${key}={${JSON.stringify(value)}}`;
-    })
-    .filter(Boolean)
-    .join('\n      ');
-
-  // Generate props table with descriptions from argTypes
-  const propsTable = Object.entries(args).map(([key, value]) => {
-    const type = typeof value === 'boolean' ? 'boolean' : typeof value === 'string' ? 'string' : 'any';
-    const desc = propDescriptions[key] || key.charAt(0).toUpperCase() + key.slice(1).replace(/([A-Z])/g, ' $1');
-    return `| \`${key}\` | \`${type}\` | \`${JSON.stringify(value)}\` | ${desc} |`;
-  }).join('\n');
-
-  // Generate usage example props (simplified for readability)
-  const usageExampleProps = Object.entries(args)
-    .slice(0, 3) // Show first 3 props for brevity
-    .map(([key, value]) => {
-      if (typeof value === 'string') return `${key}="${value}"`;
-      if (typeof value === 'boolean') return value ? key : `${key}={false}`;
-      return `${key}={${JSON.stringify(value)}}`;
-    })
-    .join('\n      ');
-
-  return `---
-title: ${componentName}
-sidebar_label: ${componentName}
----
-
-<!--
-    Licensed to the Apache Software Foundation (ASF) under one
-    or more contributor license agreements.  See the NOTICE file
-    distributed with this work for additional information
-    regarding copyright ownership.  The ASF licenses this file
-    to you under the Apache License, Version 2.0 (the
-    "License"); you may not use this file except in compliance
-    with the License.  You may obtain a copy of the License at
-
-      http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing,
-    software distributed under the License is distributed on an
-    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-    KIND, either express or implied.  See the License for the
-    specific language governing permissions and limitations
-    under the License.
--->
-
-import { StoryWithControls } from '../../../src/components/StorybookWrapper';
-import { ${componentName} } from '@apache-superset/core/ui';
-
-# ${componentName}
-
-${description || `The ${componentName} component from the Superset extension API.`}
-
-## Live Example
-
-<StoryWithControls
-  component={${componentName}}
-  props={${propsJson}}
-  controls={${controlsJson}}
-/>
-
-## Try It
-
-Edit the code below to experiment with the component:
-
-\`\`\`tsx live
-function Demo() {
-  return (
-    <${componentName}
-      ${liveExampleProps}
-    />
-  );
-}
-\`\`\`
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-${propsTable}
-
-## Usage in Extensions
-
-This component is available in the \`${packageName}\` package, which is automatically available to Superset extensions.
-
-\`\`\`tsx
-${importPath}
-
-function MyExtension() {
-  return (
-    <${componentName}
-      ${usageExampleProps}
-    />
-  );
-}
-\`\`\`
-
-## Source Links
-
-- [Story file](https://github.com/apache/superset/blob/master/${relativePath})
-- [Component source](https://github.com/apache/superset/blob/master/${relativePath.replace(/\/[^/]+\.stories\.tsx$/, '/index.tsx')})
-
----
-
-*This page was auto-generated from the component's Storybook story.*
-`;
-}
-
-/**
- * Generate index page for extension components
- */
-function generateIndexMDX(components) {
-  const componentList = components
-    .map(c => `- [${c.componentName}](./${c.componentName.toLowerCase()})`)
-    .join('\n');
-
-  return `---
-title: Extension Components
-sidebar_label: Overview
-sidebar_position: 1
----
-
-<!--
-    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.
--->
-
-# Extension Components
-
-These UI components are available to Superset extension developers through the \`@apache-superset/core/ui\` package. They provide a consistent look and feel with the rest of Superset and are designed to be used in extension panels, views, and other UI elements.
-
-## Available Components
-
-${componentList}
-
-## Usage
-
-All components are exported from the \`@apache-superset/core/ui\` package:
-
-\`\`\`tsx
-import { Alert } from '@apache-superset/core/ui';
-
-export function MyExtensionPanel() {
-  return (
-    <Alert type="info">
-      Welcome to my extension!
-    </Alert>
-  );
-}
-\`\`\`
-
-## Adding New Components
-
-Components in \`@apache-superset/core/ui\` are automatically documented here. To add a new extension component:
-
-1. Add the component to \`superset-frontend/packages/superset-core/src/ui/components/\`
-2. Export it from \`superset-frontend/packages/superset-core/src/ui/components/index.ts\`
-3. Create a Storybook story with an \`Interactive\` export:
-
-\`\`\`tsx
-export default {
-  title: 'Extension Components/MyComponent',
-  component: MyComponent,
-  parameters: {
-    docs: {
-      description: {
-        component: 'Description of the component...',
-      },
-    },
-  },
-};
-
-export const InteractiveMyComponent = (args) => <MyComponent {...args} />;
-
-InteractiveMyComponent.args = {
-  variant: 'primary',
-  disabled: false,
-};
-
-InteractiveMyComponent.argTypes = {
-  variant: {
-    control: { type: 'select' },
-    options: ['primary', 'secondary'],
-  },
-  disabled: {
-    control: { type: 'boolean' },
-  },
-};
-\`\`\`
-
-4. Run \`yarn start\` in \`docs/\` - the page generates automatically!
-
-## Interactive Documentation
-
-For interactive examples with controls, visit the [Storybook](/storybook/?path=/docs/extension-components--docs).
-`;
-}
-
-/**
- * Extract type exports from a component file
- */
-function extractComponentTypes(componentPath) {
-  if (!fs.existsSync(componentPath)) {
-    return null;
-  }
-
-  const content = fs.readFileSync(componentPath, 'utf-8');
-  const types = [];
-
-  // Find all "export type X = ..." declarations
-  const typeMatches = content.matchAll(/export\s+type\s+(\w+)\s*=\s*([^;]+);/g);
-  for (const match of typeMatches) {
-    types.push({
-      name: match[1],
-      definition: match[2].trim(),
-    });
-  }
-
-  // Find all "export const X = ..." declarations (components)
-  const constMatches = content.matchAll(/export\s+const\s+(\w+)\s*[=:]/g);
-  const components = [];
-  for (const match of constMatches) {
-    components.push(match[1]);
-  }
-
-  return { types, components };
-}
-
-/**
- * Generate the type declarations file content
- */
-function generateTypeDeclarations(componentInfos) {
-  const imports = new Set();
-  const typeDeclarations = [];
-  const componentDeclarations = [];
-
-  for (const info of componentInfos) {
-    const componentDir = path.dirname(info.filePath);
-    const componentFile = path.join(componentDir, 'index.tsx');
-    const extracted = extractComponentTypes(componentFile);
-
-    if (!extracted) continue;
-
-    // Check if types reference antd or react
-    for (const type of extracted.types) {
-      if (type.definition.includes('AntdAlertProps') || type.definition.includes('AlertProps')) {
-        imports.add("import type { AlertProps as AntdAlertProps } from 'antd/es/alert';");
-      }
-      if (type.definition.includes('PropsWithChildren') || type.definition.includes('FC')) {
-        imports.add("import type { PropsWithChildren, FC } from 'react';");
-      }
-
-      // Add the type declaration
-      typeDeclarations.push(`  export type ${type.name} = ${type.definition};`);
-    }
-
-    // Add component declarations
-    for (const comp of extracted.components) {
-      const propsType = `${comp}Props`;
-      const hasPropsType = extracted.types.some(t => t.name === propsType);
-      if (hasPropsType) {
-        componentDeclarations.push(`  export const ${comp}: FC<${propsType}>;`);
-      } else {
-        componentDeclarations.push(`  export const ${comp}: FC<Record<string, unknown>>;`);
-      }
-    }
-  }
-
-  // Remove 'export' prefix for direct exports (not in declare module)
-  const cleanedTypes = typeDeclarations.map(t => t.replace(/^ {2}export /, 'export '));
-  const cleanedComponents = componentDeclarations.map(c => c.replace(/^ {2}export /, 'export '));
-
-  return `/**
- * 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.
- */
-
-/**
- * Type declarations for @apache-superset/core/ui
- *
- * AUTO-GENERATED by scripts/generate-extension-components.mjs
- * Do not edit manually - regenerate by running: yarn generate:extension-components
- */
-${Array.from(imports).join('\n')}
-
-${cleanedTypes.join('\n')}
-
-${cleanedComponents.join('\n')}
-`;
-}
-
-/**
- * Main function
- */
-async function main() {
-  console.log('Scanning for extension-compatible stories...\n');
-
-  // Find all story files
-  const storyFiles = await findStoryFiles();
-  console.log(`Found ${storyFiles.length} story files in superset-core\n`);
-
-  // Parse each story file
-  const components = [];
-  for (const file of storyFiles) {
-    const parsed = parseStoryFile(file);
-    if (parsed) {
-      components.push(parsed);
-      console.log(`  ✓ ${parsed.componentName} (${parsed.relativePath})`);
-    }
-  }
-
-  if (components.length === 0) {
-    console.log(
-      '\nNo extension-compatible components found. Make sure stories have:'
-    );
-    console.log("  tags: ['extension-compatible']");
-    return;
-  }
-
-  console.log(`\nFound ${components.length} extension-compatible components\n`);
-
-  // Ensure output directory exists
-  if (!fs.existsSync(OUTPUT_DIR)) {
-    fs.mkdirSync(OUTPUT_DIR, { recursive: true });
-    console.log(`Created directory: ${OUTPUT_DIR}\n`);
-  }
-
-  // Generate MDX files
-  for (const component of components) {
-    // Read the story content for extracting args/controls
-    const storyContent = fs.readFileSync(component.filePath, 'utf-8');
-    const mdxContent = generateMDX(component, storyContent);
-    const outputPath = path.join(
-      OUTPUT_DIR,
-      `${component.componentName.toLowerCase()}.mdx`
-    );
-    fs.writeFileSync(outputPath, mdxContent);
-    console.log(`  Generated: ${path.relative(DOCS_DIR, outputPath)}`);
-  }
-
-  // Generate index page
-  const indexContent = generateIndexMDX(components);
-  const indexPath = path.join(OUTPUT_DIR, 'index.mdx');
-  fs.writeFileSync(indexPath, indexContent);
-  console.log(`  Generated: ${path.relative(DOCS_DIR, indexPath)}`);
-
-  // Generate type declarations
-  if (!fs.existsSync(TYPES_OUTPUT_DIR)) {
-    fs.mkdirSync(TYPES_OUTPUT_DIR, { recursive: true });
-  }
-  const typesContent = generateTypeDeclarations(components);
-  fs.writeFileSync(TYPES_OUTPUT_PATH, typesContent);
-  console.log(`  Generated: ${path.relative(DOCS_DIR, TYPES_OUTPUT_PATH)}`);
-
-  console.log('\nDone! Extension component documentation generated.');
-  console.log(
-    `\nGenerated ${components.length + 2} files (${components.length + 1} MDX + 1 type declaration)`
-  );
-}
-
-main().catch(console.error);

docs/sidebarTutorials.js

@@ -42,24 +42,32 @@ const sidebars = {
         'contributing/howtos',
         'contributing/release-process',
         'contributing/resources',
-        'guidelines/design-guidelines',
         {
           type: 'category',
-          label: 'Frontend Style Guidelines',
+          label: 'Contribution Guidelines',
           collapsed: true,
           items: [
-            'guidelines/frontend-style-guidelines',
-            'guidelines/frontend/component-style-guidelines',
-            'guidelines/frontend/emotion-styling-guidelines',
-          ],
-        },
-        {
-          type: 'category',
-          label: 'Backend Style Guidelines',
-          collapsed: true,
-          items: [
-            'guidelines/backend-style-guidelines',
-            'guidelines/backend/dao-style-guidelines',
+            'guidelines/design-guidelines',
+            {
+              type: 'category',
+              label: 'Frontend Style Guidelines',
+              collapsed: true,
+              items: [
+                'guidelines/frontend-style-guidelines',
+                'guidelines/frontend/component-style-guidelines',
+                'guidelines/frontend/emotion-styling-guidelines',
+                'guidelines/frontend/testing-guidelines',
+              ],
+            },
+            {
+              type: 'category',
+              label: 'Backend Style Guidelines',
+              collapsed: true,
+              items: [
+                'guidelines/backend-style-guidelines',
+                'guidelines/backend/dao-style-guidelines',
+              ],
+            },
           ],
         },
       ],
@@ -73,17 +81,6 @@ const sidebars = {
         'extensions/quick-start',
         'extensions/architecture',
         'extensions/contribution-types',
-        {
-          type: 'category',
-          label: 'Components',
-          collapsed: true,
-          items: [
-            {
-              type: 'autogenerated',
-              dirName: 'extensions/components',
-            },
-          ],
-        },
         {
           type: 'category',
           label: 'Extension Points',
@@ -105,7 +102,6 @@ const sidebars = {
       collapsed: true,
       items: [
         'testing/overview',
-        'testing/testing-guidelines',
         'testing/frontend-testing',
         'testing/backend-testing',
         'testing/e2e-testing',

docs/src/theme/ReactLiveScope/index.tsx

@@ -1,53 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import React from 'react';
-import { Button, Card, Input, Space, Tag, Tooltip } from 'antd';
-
-// Import extension components from @apache-superset/core/ui
-// This matches the established pattern used throughout the Superset codebase
-// Resolved via webpack alias to superset-frontend/packages/superset-core/src/ui/components
-import { Alert } from '@apache-superset/core/ui';
-
-/**
- * ReactLiveScope provides the scope for live code blocks.
- * Any component added here will be available in ```tsx live blocks.
- *
- * To add more components:
- * 1. Import the component from @apache-superset/core above
- * 2. Add it to the scope object below
- */
-const ReactLiveScope = {
-  // React core
-  React,
-  ...React,
-
-  // Extension components from @apache-superset/core
-  Alert,
-
-  // Common Ant Design components (for demos)
-  Button,
-  Card,
-  Input,
-  Space,
-  Tag,
-  Tooltip,
-};
-
-export default ReactLiveScope;

docs/src/webpack.extend.ts

@@ -51,15 +51,6 @@ export default function webpackExtendPlugin(): Plugin<void> {
               __dirname,
               '../../superset-frontend/packages/superset-ui-core/src/components',
             ),
-            // Extension API package - allows docs to import from @apache-superset/core/ui
-            // This matches the established pattern used throughout the Superset codebase
-            // Point directly to components to avoid importing theme (which has font dependencies)
-            // Note: TypeScript types come from docs/src/types/apache-superset-core (see tsconfig.json)
-            // This split is intentional: webpack resolves actual source, tsconfig provides simplified types
-            '@apache-superset/core/ui': path.resolve(
-              __dirname,
-              '../../superset-frontend/packages/superset-core/src/ui/components',
-            ),
             // Add proper Storybook aliases
             '@storybook/blocks': path.resolve(
               __dirname,

docs/tsconfig.json

@@ -6,23 +6,19 @@
     "skipLibCheck": true,
     "noImplicitAny": false,
     "strict": false,
-    "jsx": "react-jsx",
-    "moduleResolution": "node",
-    "types": ["@docusaurus/module-type-aliases"],
-    "paths": {
-      "@superset-ui/core": ["../superset-frontend/packages/superset-ui-core/src"],
-      "@superset-ui/core/*": ["../superset-frontend/packages/superset-ui-core/src/*"],
-      // Types for @apache-superset/core/ui are auto-generated by scripts/generate-extension-components.mjs
-      // Runtime resolution uses webpack alias pointing to actual source (see src/webpack.extend.ts)
-      // Using /ui path matches the established pattern used throughout the Superset codebase
-      "@apache-superset/core/ui": ["./src/types/apache-superset-core"],
-      "*": ["src/*", "node_modules/*"]
-    }
+    "types": ["@docusaurus/module-type-aliases"]
+  },
+  "jsx": "react-jsx",
+  "moduleResolution": "node",
+  "baseUrl": "./",
+  "paths": {
+    "@superset-ui/core": ["../superset-frontend/packages/superset-ui-core/src"],
+    "@superset-ui/core/*": ["../superset-frontend/packages/superset-ui-core/src/*"],
+    "*": ["src/*", "node_modules/*"]
   },
   "include": [
     "src/**/*.ts",
-    "src/**/*.tsx",
-    "src/**/*.d.ts"
+    "src/**/*.tsx"
   ],
   "exclude": [
     "node_modules",

docs/versioned_docs/version-6.0.0/configuration/sql-templating.mdx

@@ -17,8 +17,8 @@ made available in the Jinja context:
 
 - `columns`: columns which to group by in the query
 - `filter`: filters applied in the query
-- `from_dttm`: start `datetime` value from the selected time range (`None` if undefined). **Note:** Only available in virtual datasets when a time range filter is applied in Explore/Chart views—not available in standalone SQL Lab queries. (deprecated beginning in version 5.0, use `get_time_filter` instead)
-- `to_dttm`: end `datetime` value from the selected time range (`None` if undefined). **Note:** Only available in virtual datasets when a time range filter is applied in Explore/Chart views—not available in standalone SQL Lab queries. (deprecated beginning in version 5.0, use `get_time_filter` instead)
+- `from_dttm`: start `datetime` value from the selected time range (`None` if undefined) (deprecated beginning in version 5.0, use `get_time_filter` instead)
+- `to_dttm`: end `datetime` value from the selected time range (`None` if undefined). (deprecated beginning in version 5.0, use `get_time_filter` instead)
 - `groupby`: columns which to group by in the query (deprecated)
 - `metrics`: aggregate expressions in the query
 - `row_limit`: row limit of the query
@@ -58,54 +58,6 @@ the time filter is not set. For many database engines, this could be replaced wi
 Note that the Jinja parameters are called within _double_ brackets in the query and with
 _single_ brackets in the logic blocks.
 
-### Understanding Context Availability
-
-Some Jinja variables like `from_dttm`, `to_dttm`, and `filter` are **only available when a chart or dashboard provides them**. They are populated from:
-
-- Time range filters applied in Explore/Chart views
-- Dashboard native filters
-- Filter components
-
-**These variables are NOT available in standalone SQL Lab queries** because there's no filter context. If you try to use `{{ from_dttm }}` directly in SQL Lab, you'll get an "undefined parameter" error.
-
-#### Testing Time-Filtered Queries in SQL Lab
-
-To test queries that use time variables in SQL Lab, you have several options:
-
-**Option 1: Use Jinja defaults (recommended)**
-
-```sql
-SELECT *
-FROM tbl
-WHERE dttm_col > '{{ from_dttm | default("2024-01-01", true) }}'
-  AND dttm_col < '{{ to_dttm | default("2024-12-31", true) }}'
-```
-
-**Option 2: Use SQL Lab Parameters**
-
-Set parameters in the SQL Lab UI (Parameters menu):
-```json
-{
-  "from_dttm": "2024-01-01",
-  "to_dttm": "2024-12-31"
-}
-```
-
-**Option 3: Use `{% set %}` for testing**
-
-```sql
-{% set from_dttm = "2024-01-01" %}
-{% set to_dttm = "2024-12-31" %}
-SELECT *
-FROM tbl
-WHERE dttm_col > '{{ from_dttm }}' AND dttm_col < '{{ to_dttm }}'
-```
-
-:::tip
-When you save a SQL Lab query as a virtual dataset and use it in a chart with time filters,
-the actual filter values will override any defaults or test values you set.
-:::
-
 To add custom functionality to the Jinja context, you need to overload the default Jinja
 context in your environment by defining the `JINJA_CONTEXT_ADDONS` in your superset configuration
 (`superset_config.py`). Objects referenced in this dictionary are made available for users to use

docs/versioned_docs/version-6.0.0/contributing/development.mdx

@@ -914,20 +914,6 @@ npm run storybook
 
 When contributing new React components to Superset, please try to add a Story alongside the component's `jsx/tsx` file.
 
-#### Testing Stories
-
-Superset uses [@storybook/test-runner](https://storybook.js.org/docs/writing-tests/test-runner) to validate that all stories compile and render without errors. This helps catch broken stories before they're merged.
-
-```bash
-# Run against a running Storybook server (start with `npm run storybook` first)
-npm run test-storybook
-
-# Build static Storybook and test (CI-friendly, no server needed)
-npm run test-storybook:ci
-```
-
-The `test-storybook` job runs automatically in CI on every pull request, ensuring stories remain functional.
-
 ## Tips
 
 ### Adding a new datasource

docs/yarn.lock

@@ -1957,21 +1957,6 @@
     tslib "^2.6.0"
     utility-types "^3.10.0"
 
-"@docusaurus/theme-live-codeblock@^3.9.2":
-  version "3.9.2"
-  resolved "https://registry.yarnpkg.com/@docusaurus/theme-live-codeblock/-/theme-live-codeblock-3.9.2.tgz#43f0968fb737fda1dae2222a2ab7caa25c5668d0"
-  integrity sha512-cgxxZh18dI5Q4iV0GLmwqXtgZbTLOnb0TYgZRiUh0mnIGbuNWFUhUYXXl5owKbDfIXFdFAiI/owJKM83howEAw==
-  dependencies:
-    "@docusaurus/core" "3.9.2"
-    "@docusaurus/theme-common" "3.9.2"
-    "@docusaurus/theme-translations" "3.9.2"
-    "@docusaurus/utils-validation" "3.9.2"
-    "@philpl/buble" "^0.19.7"
-    clsx "^2.0.0"
-    fs-extra "^11.1.1"
-    react-live "^4.1.6"
-    tslib "^2.6.0"
-
 "@docusaurus/theme-mermaid@^3.9.2":
   version "3.9.2"
   resolved "https://registry.yarnpkg.com/@docusaurus/theme-mermaid/-/theme-mermaid-3.9.2.tgz#f065e4b4b319560ddd8c3be65ce9dd19ce1d5cc8"
@@ -2387,10 +2372,10 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@eslint/js@9.39.2", "@eslint/js@^9.39.2":
-  version "9.39.2"
-  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-9.39.2.tgz#2d4b8ec4c3ea13c1b3748e0c97ecd766bdd80599"
-  integrity sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==
+"@eslint/js@9.39.1", "@eslint/js@^9.39.1":
+  version "9.39.1"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-9.39.1.tgz#0dd59c3a9f40e3f1882975c321470969243e0164"
+  integrity sha512-S26Stp4zCy88tH94QbBv3XCuzRQiZ9yXofEILmglYTh/Ug/a9/umqvgFtYBAo3Lp0nsI/5/qH1CCrbdK3AP1Tw==
 
 "@eslint/object-schema@^2.1.7":
   version "2.1.7"
@@ -2483,7 +2468,7 @@
     "@types/yargs" "^17.0.8"
     chalk "^4.0.0"
 
-"@jridgewell/gen-mapping@^0.3.12", "@jridgewell/gen-mapping@^0.3.2", "@jridgewell/gen-mapping@^0.3.5":
+"@jridgewell/gen-mapping@^0.3.12", "@jridgewell/gen-mapping@^0.3.5":
   version "0.3.13"
   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz#6342a19f44347518c93e43b1ac69deb3c4656a1f"
   integrity sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==
@@ -2636,21 +2621,6 @@
   resolved "https://registry.yarnpkg.com/@opentelemetry/api/-/api-1.9.0.tgz#d03eba68273dc0f7509e2a3d5cba21eae10379fe"
   integrity sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==
 
-"@philpl/buble@^0.19.7":
-  version "0.19.7"
-  resolved "https://registry.yarnpkg.com/@philpl/buble/-/buble-0.19.7.tgz#27231e6391393793b64bc1c982fc7b593198b893"
-  integrity sha512-wKTA2DxAGEW+QffRQvOhRQ0VBiYU2h2p8Yc1oBNlqSKws48/8faxqKNIuub0q4iuyTuLwtB8EkwiKwhlfV1PBA==
-  dependencies:
-    acorn "^6.1.1"
-    acorn-class-fields "^0.2.1"
-    acorn-dynamic-import "^4.0.0"
-    acorn-jsx "^5.0.1"
-    chalk "^2.4.2"
-    magic-string "^0.25.2"
-    minimist "^1.2.0"
-    os-homedir "^1.0.1"
-    regexpu-core "^4.5.4"
-
 "@pkgr/core@^0.2.9":
   version "0.2.9"
   resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.2.9.tgz#d229a7b7f9dac167a156992ef23c7f023653f53b"
@@ -4686,22 +4656,12 @@ accepts@~1.3.4, accepts@~1.3.8:
     mime-types "~2.1.34"
     negotiator "0.6.3"
 
-acorn-class-fields@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/acorn-class-fields/-/acorn-class-fields-0.2.1.tgz#748058bceeb0ef25164bbc671993984083f5a085"
-  integrity sha512-US/kqTe0H8M4LN9izoL+eykVAitE68YMuYZ3sHn3i1fjniqR7oQ3SPvuMK/VT1kjOQHrx5Q88b90TtOKgAv2hQ==
-
-acorn-dynamic-import@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz#482210140582a36b83c3e342e1cfebcaa9240948"
-  integrity sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw==
-
 acorn-import-phases@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/acorn-import-phases/-/acorn-import-phases-1.0.4.tgz#16eb850ba99a056cb7cbfe872ffb8972e18c8bd7"
   integrity sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==
 
-acorn-jsx@^5.0.0, acorn-jsx@^5.0.1, acorn-jsx@^5.3.2:
+acorn-jsx@^5.0.0, acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
@@ -4713,11 +4673,6 @@ acorn-walk@^8.0.0:
   dependencies:
     acorn "^8.11.0"
 
-acorn@^6.1.1:
-  version "6.4.2"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.2.tgz#35866fd710528e92de10cf06016498e47e39e1e6"
-  integrity sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==
-
 acorn@^8.0.0, acorn@^8.0.4, acorn@^8.11.0, acorn@^8.14.0, acorn@^8.15.0:
   version "8.15.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.15.0.tgz#a360898bc415edaac46c8241f6383975b930b816"
@@ -4841,13 +4796,6 @@ ansi-regex@^6.0.1:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.2.0.tgz#2f302e7550431b1b7762705fffb52cf1ffa20447"
   integrity sha512-TKY5pyBkHyADOPYlRT9Lx6F544mPl0vS5Ew7BJ45hA08Q+t3GjbueLliBWN3sMICk6+y7HdyxSzC4bWS8baBdg==
 
-ansi-styles@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
-  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
-  dependencies:
-    color-convert "^1.9.0"
-
 ansi-styles@^4.0.0, ansi-styles@^4.1.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
@@ -4914,11 +4862,6 @@ antd@^6.1.0:
     scroll-into-view-if-needed "^3.1.0"
     throttle-debounce "^5.0.2"
 
-any-promise@^1.0.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
-  integrity sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==
-
 anymatch@~3.1.2:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
@@ -5403,15 +5346,6 @@ ccount@^2.0.0:
   resolved "https://registry.yarnpkg.com/ccount/-/ccount-2.0.1.tgz#17a3bf82302e0870d6da43a01311a8bc02a3ecf5"
   integrity sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==
 
-chalk@^2.4.2:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
-  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
-  dependencies:
-    ansi-styles "^3.2.1"
-    escape-string-regexp "^1.0.5"
-    supports-color "^5.3.0"
-
 chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
@@ -5569,13 +5503,6 @@ collapse-white-space@^2.0.0:
   resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-2.1.0.tgz#640257174f9f42c740b40f3b55ee752924feefca"
   integrity sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==
 
-color-convert@^1.9.0:
-  version "1.9.3"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
-  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
-  dependencies:
-    color-name "1.1.3"
-
 color-convert@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
@@ -5583,11 +5510,6 @@ color-convert@^2.0.1:
   dependencies:
     color-name "~1.1.4"
 
-color-name@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
-  integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
-
 color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
@@ -5635,11 +5557,6 @@ commander@^2.20.0, commander@^2.20.3:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
-commander@^4.0.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
-  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
-
 commander@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
@@ -7075,10 +6992,10 @@ eslint-visitor-keys@^4.2.1:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz#4cfea60fe7dd0ad8e816e1ed026c1d5251b512c1"
   integrity sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==
 
-eslint@^9.39.2:
-  version "9.39.2"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-9.39.2.tgz#cb60e6d16ab234c0f8369a3fe7cc87967faf4b6c"
-  integrity sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==
+eslint@^9.39.1:
+  version "9.39.1"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-9.39.1.tgz#be8bf7c6de77dcc4252b5a8dcb31c2efff74a6e5"
+  integrity sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==
   dependencies:
     "@eslint-community/eslint-utils" "^4.8.0"
     "@eslint-community/regexpp" "^4.12.1"
@@ -7086,7 +7003,7 @@ eslint@^9.39.2:
     "@eslint/config-helpers" "^0.4.2"
     "@eslint/core" "^0.17.0"
     "@eslint/eslintrc" "^3.3.1"
-    "@eslint/js" "9.39.2"
+    "@eslint/js" "9.39.1"
     "@eslint/plugin-kit" "^0.4.1"
     "@humanfs/node" "^0.16.6"
     "@humanwhocodes/module-importer" "^1.0.1"
@@ -7779,11 +7696,6 @@ has-bigints@^1.0.2:
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.1.0.tgz#28607e965ac967e03cd2a2c70a2636a1edad49fe"
   integrity sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==
 
-has-flag@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
-  integrity sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==
-
 has-flag@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
@@ -8781,11 +8693,6 @@ jsesc@^3.0.2:
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.1.0.tgz#74d335a234f67ed19907fdadfac7ccf9d409825d"
   integrity sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==
 
-jsesc@~0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
-  integrity sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==
-
 jsesc@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.0.2.tgz#bb8b09a6597ba426425f2e4a07245c3d00b9343e"
@@ -8939,10 +8846,10 @@ less-loader@^12.3.0:
   resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-12.3.0.tgz#d4a00361568be86a97da3df4f16954b0d4c15340"
   integrity sha512-0M6+uYulvYIWs52y0LqN4+QM9TqWAohYSNTo4htE8Z7Cn3G/qQMEmktfHmyJT23k+20kU9zHH2wrfFXkxNLtVw==
 
-less@^4.5.1:
-  version "4.5.1"
-  resolved "https://registry.yarnpkg.com/less/-/less-4.5.1.tgz#739266532249a3de232e8b60ffb1b27ad5ec6ad8"
-  integrity sha512-UKgI3/KON4u6ngSsnDADsUERqhZknsVZbnuzlRZXLQCmfC/MDld42fTydUE9B+Mla1AL6SJ/Pp6SlEFi/AVGfw==
+less@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/less/-/less-4.4.2.tgz#fa4291fdb0334de91163622cc038f4bd3eb6b8d7"
+  integrity sha512-j1n1IuTX1VQjIy3tT7cyGbX7nvQOsFLoIqobZv4ttI5axP923gA44zUj6miiA6R5Aoms4sEGVIIcucXUbRI14g==
   dependencies:
     copy-anything "^2.0.1"
     parse-node-version "^1.0.1"
@@ -9085,13 +8992,6 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
-magic-string@^0.25.2:
-  version "0.25.9"
-  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"
-  integrity sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==
-  dependencies:
-    sourcemap-codec "^1.4.8"
-
 make-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
@@ -10208,15 +10108,6 @@ multicast-dns@^7.2.5:
     dns-packet "^5.2.2"
     thunky "^1.0.2"
 
-mz@^2.7.0:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
-  integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
-  dependencies:
-    any-promise "^1.0.0"
-    object-assign "^4.0.1"
-    thenify-all "^1.0.0"
-
 nanoid@^3.3.11:
   version "3.3.11"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.11.tgz#4f4f112cefbe303202f2199838128936266d185b"
@@ -10353,7 +10244,7 @@ null-loader@^4.0.1:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
-object-assign@^4.0.1, object-assign@^4.1.1:
+object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
@@ -10484,11 +10375,6 @@ optionator@^0.9.3:
     type-check "^0.4.0"
     word-wrap "^1.2.5"
 
-os-homedir@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
-  integrity sha512-B5JU3cabzk8c67mRRd3ECmROafjYMXbuzlwtqdM8IbS8ktlTix8aFGb2bAGKrSRIlnfKwovGUUr72JUPyOb6kQ==
-
 own-keys@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/own-keys/-/own-keys-1.0.1.tgz#e4006910a2bf913585289676eebd6f390cf51358"
@@ -10740,11 +10626,6 @@ pify@^4.0.1:
   resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
   integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
 
-pirates@^4.0.1:
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.7.tgz#643b4a18c4257c8a65104b73f3049ce9a0a15e22"
-  integrity sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==
-
 pkg-dir@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-7.0.0.tgz#8f0c08d6df4476756c5ff29b3282d0bab7517d11"
@@ -11382,7 +11263,7 @@ pretty-time@^1.1.0:
   resolved "https://registry.yarnpkg.com/pretty-time/-/pretty-time-1.1.0.tgz#ffb7429afabb8535c346a34e41873adf3d74dd0e"
   integrity sha512-28iF6xPQrP8Oa6uxE6a1biz+lWeTOAPKggvjB8HAs6nVMKZwf5bG++632Dx614hIWgUPkgivRfG+a8uAXGTIbA==
 
-prism-react-renderer@^2.3.0, prism-react-renderer@^2.4.0, prism-react-renderer@^2.4.1:
+prism-react-renderer@^2.3.0, prism-react-renderer@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-2.4.1.tgz#ac63b7f78e56c8f2b5e76e823a976d5ede77e35f"
   integrity sha512-ey8Ls/+Di31eqzUxC46h8MksNuGx/n0AAC8uKpwFau4RPDYLuE3EXTp8N8G2vX2N7UC/+IXeNUnlWBGGcAG+Ig==
@@ -11640,15 +11521,6 @@ react-json-view-lite@^2.3.0:
   resolved "https://registry.yarnpkg.com/react-json-view-lite/-/react-json-view-lite-2.4.2.tgz#796ed6c650c29123d87b9484889445d1a8a88ede"
   integrity sha512-m7uTsXDgPQp8R9bJO4HD/66+i218eyQPAb+7/dGQpwg8i4z2afTFqtHJPQFHvJfgDCjGQ1HSGlL3HtrZDa3Tdg==
 
-react-live@^4.1.6:
-  version "4.1.8"
-  resolved "https://registry.yarnpkg.com/react-live/-/react-live-4.1.8.tgz#287fb6c5127c2d89a6fe39380278d95cc8e661b6"
-  integrity sha512-B2SgNqwPuS2ekqj4lcxi5TibEcjWkdVyYykBEUBshPAPDQ527x2zPEZg560n8egNtAjUpwXFQm7pcXV65aAYmg==
-  dependencies:
-    prism-react-renderer "^2.4.0"
-    sucrase "^3.35.0"
-    use-editable "^2.3.3"
-
 react-loadable-ssr-addon-v5-slorber@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/react-loadable-ssr-addon-v5-slorber/-/react-loadable-ssr-addon-v5-slorber-1.0.1.tgz#2cdc91e8a744ffdf9e3556caabeb6e4278689883"
@@ -11880,13 +11752,6 @@ regenerate-unicode-properties@^10.2.0:
   dependencies:
     regenerate "^1.4.2"
 
-regenerate-unicode-properties@^9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-9.0.0.tgz#54d09c7115e1f53dc2314a974b32c1c344efe326"
-  integrity sha512-3E12UeNSPfjrgwjkR81m5J7Aw/T55Tu7nUyZVQYCKEOs+2dkxEY+DpPtZzO4YruuiPb7NkYLVcyJC4+zCbk5pA==
-  dependencies:
-    regenerate "^1.4.2"
-
 regenerate@^1.4.2:
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
@@ -11904,18 +11769,6 @@ regexp.prototype.flags@^1.5.3, regexp.prototype.flags@^1.5.4:
     gopd "^1.2.0"
     set-function-name "^2.0.2"
 
-regexpu-core@^4.5.4:
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.8.0.tgz#e5605ba361b67b1718478501327502f4479a98f0"
-  integrity sha512-1F6bYsoYiz6is+oz70NWur2Vlh9KWtswuRuzJOfeYUrfPX2o8n74AnUVaOGDbUqVGO9fNHu48/pjJO4sNVwsOg==
-  dependencies:
-    regenerate "^1.4.2"
-    regenerate-unicode-properties "^9.0.0"
-    regjsgen "^0.5.2"
-    regjsparser "^0.7.0"
-    unicode-match-property-ecmascript "^2.0.0"
-    unicode-match-property-value-ecmascript "^2.0.0"
-
 regexpu-core@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-6.2.0.tgz#0e5190d79e542bf294955dccabae04d3c7d53826"
@@ -11942,11 +11795,6 @@ registry-url@^6.0.0:
   dependencies:
     rc "1.2.8"
 
-regjsgen@^0.5.2:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.5.2.tgz#92ff295fb1deecbf6ecdab2543d207e91aa33733"
-  integrity sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A==
-
 regjsgen@^0.8.0:
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.8.0.tgz#df23ff26e0c5b300a6470cad160a9d090c3a37ab"
@@ -11959,13 +11807,6 @@ regjsparser@^0.12.0:
   dependencies:
     jsesc "~3.0.2"
 
-regjsparser@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.7.0.tgz#a6b667b54c885e18b52554cb4960ef71187e9968"
-  integrity sha512-A4pcaORqmNMDVwUjWoTzuhwMGpP+NykpfqAsEgI1FSH/EzC7lrN5TMd+kN8YCovX+jMpu8eaqXgXPCa0g8FQNQ==
-  dependencies:
-    jsesc "~0.5.0"
-
 rehype-raw@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/rehype-raw/-/rehype-raw-7.0.0.tgz#59d7348fd5dbef3807bbaa1d443efd2dd85ecee4"
@@ -12714,11 +12555,6 @@ source-map@^0.7.0, source-map@^0.7.4:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.6.tgz#a3658ab87e5b6429c8a1f3ba0083d4c61ca3ef02"
   integrity sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==
 
-sourcemap-codec@^1.4.8:
-  version "1.4.8"
-  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
-  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
-
 space-separated-tokens@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz#1ecd9d2350a3844572c3f4a312bceb018348859f"
@@ -12978,26 +12814,6 @@ stylis@^4.3.4, stylis@^4.3.6:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.6.tgz#7c7b97191cb4f195f03ecab7d52f7902ed378320"
   integrity sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==
 
-sucrase@^3.35.0:
-  version "3.35.1"
-  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.35.1.tgz#4619ea50393fe8bd0ae5071c26abd9b2e346bfe1"
-  integrity sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==
-  dependencies:
-    "@jridgewell/gen-mapping" "^0.3.2"
-    commander "^4.0.0"
-    lines-and-columns "^1.1.6"
-    mz "^2.7.0"
-    pirates "^4.0.1"
-    tinyglobby "^0.2.11"
-    ts-interface-checker "^0.1.9"
-
-supports-color@^5.3.0:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
-  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
-  dependencies:
-    has-flag "^3.0.0"
-
 supports-color@^7.1.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
@@ -13140,20 +12956,6 @@ terser@^5.10.0, terser@^5.15.1, terser@^5.31.1:
     commander "^2.20.0"
     source-map-support "~0.5.20"
 
-thenify-all@^1.0.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
-  integrity sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==
-  dependencies:
-    thenify ">= 3.1.0 < 4"
-
-"thenify@>= 3.1.0 < 4":
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.1.tgz#8932e686a4066038a016dd9e2ca46add9838a95f"
-  integrity sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==
-  dependencies:
-    any-promise "^1.0.0"
-
 thingies@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/thingies/-/thingies-2.5.0.tgz#5f7b882c933b85989f8466b528a6247a6881e04f"
@@ -13194,7 +12996,7 @@ tinyexec@^1.0.1:
   resolved "https://registry.yarnpkg.com/tinyexec/-/tinyexec-1.0.1.tgz#70c31ab7abbb4aea0a24f55d120e5990bfa1e0b1"
   integrity sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==
 
-tinyglobby@^0.2.11, tinyglobby@^0.2.15:
+tinyglobby@^0.2.15:
   version "0.2.15"
   resolved "https://registry.yarnpkg.com/tinyglobby/-/tinyglobby-0.2.15.tgz#e228dd1e638cea993d2fdb4fcd2d4602a79951c2"
   integrity sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==
@@ -13292,11 +13094,6 @@ ts-dedent@^2.0.0, ts-dedent@^2.2.0:
   resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-2.2.0.tgz#39e4bd297cd036292ae2394eb3412be63f563bb5"
   integrity sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==
 
-ts-interface-checker@^0.1.9:
-  version "0.1.13"
-  resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
-  integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
-
 ts-loader@^9.5.4:
   version "9.5.4"
   resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-9.5.4.tgz#44b571165c10fb5a90744aa5b7e119233c4f4585"
@@ -13470,11 +13267,6 @@ unicode-match-property-ecmascript@^2.0.0:
     unicode-canonical-property-names-ecmascript "^2.0.0"
     unicode-property-aliases-ecmascript "^2.0.0"
 
-unicode-match-property-value-ecmascript@^2.0.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.2.1.tgz#65a7adfad8574c219890e219285ce4c64ed67eaa"
-  integrity sha512-JQ84qTuMg4nVkx8ga4A16a1epI9H6uTXAknqxkGF/aFfRLw1xC/Bp24HNLaZhHSkWd3+84t8iXnp1J0kYcZHhg==
-
 unicode-match-property-value-ecmascript@^2.1.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.2.0.tgz#a0401aee72714598f739b68b104e4fe3a0cb3c71"
@@ -13703,11 +13495,6 @@ url-parse@^1.5.10:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
-use-editable@^2.3.3:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/use-editable/-/use-editable-2.3.3.tgz#a292fe9ba4c291cd28d1cc2728c75a5fc8d9a33f"
-  integrity sha512-7wVD2JbfAFJ3DK0vITvXBdpd9JAz5BcKAAolsnLBuBn6UDDwBGuCIAGvR3yA2BNKm578vAMVHFCWaOcA+BhhiA==
-
 use-sync-external-store@^1.4.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz#55122e2a3edd2a6c106174c27485e0fd59bcfca0"

pyproject.toml

@@ -109,6 +109,10 @@ dependencies = [
     "wtforms>=2.3.3, <4",
     "wtforms-json",
     "xlsxwriter>=3.0.7, <3.1",
+    # --------------------------
+    # AI/LLM features - dashboard generator, database analyzer
+    "langchain-core>=1.2.0, <2",  # Output parsers, prompts, and utilities
+    "langgraph>=1.0.5, <2",  # Stateful agent orchestration
 ]
 
 [project.optional-dependencies]

requirements/base.txt

@@ -8,6 +8,8 @@ amqp==5.3.1
     # via kombu
 annotated-types==0.7.0
     # via pydantic
+anyio==4.12.0
+    # via httpx
 apispec==6.6.1
     # via
     #   -r requirements/base.in
@@ -50,6 +52,8 @@ celery==5.5.2
     # via apache-superset (pyproject.toml)
 certifi==2025.6.15
     # via
+    #   httpcore
+    #   httpx
     #   requests
     #   selenium
 cffi==1.17.1
@@ -164,16 +168,26 @@ greenlet==3.1.1
 gunicorn==23.0.0
     # via apache-superset (pyproject.toml)
 h11==0.16.0
-    # via wsproto
+    # via
+    #   httpcore
+    #   wsproto
 hashids==1.3.1
     # via apache-superset (pyproject.toml)
 holidays==0.82
     # via apache-superset (pyproject.toml)
+httpcore==1.0.9
+    # via httpx
+httpx==0.28.1
+    # via
+    #   langgraph-sdk
+    #   langsmith
 humanize==4.12.3
     # via apache-superset (pyproject.toml)
 idna==3.10
     # via
+    #   anyio
     #   email-validator
+    #   httpx
     #   requests
     #   trio
     #   url-normalize
@@ -187,8 +201,12 @@ jinja2==3.1.6
     # via
     #   flask
     #   flask-babel
+jsonpatch==1.33
+    # via langchain-core
 jsonpath-ng==1.7.0
     # via apache-superset (pyproject.toml)
+jsonpointer==3.0.0
+    # via jsonpatch
 jsonschema==4.23.0
     # via
     #   flask-appbuilder
@@ -199,6 +217,24 @@ jsonschema-specifications==2025.4.1
     #   openapi-schema-validator
 kombu==5.5.3
     # via celery
+langchain-core==1.2.2
+    # via
+    #   apache-superset (pyproject.toml)
+    #   langgraph
+    #   langgraph-checkpoint
+    #   langgraph-prebuilt
+langgraph==1.0.5
+    # via apache-superset (pyproject.toml)
+langgraph-checkpoint==3.0.1
+    # via
+    #   langgraph
+    #   langgraph-prebuilt
+langgraph-prebuilt==1.0.5
+    # via langgraph
+langgraph-sdk==0.3.0
+    # via langgraph
+langsmith==0.5.0
+    # via langchain-core
 limits==5.1.0
     # via flask-limiter
 mako==1.3.10
@@ -252,6 +288,12 @@ openpyxl==3.1.5
     # via pandas
 ordered-set==4.1.0
     # via flask-limiter
+orjson==3.11.5
+    # via
+    #   langgraph-sdk
+    #   langsmith
+ormsgpack==1.12.1
+    # via langgraph-checkpoint
 outcome==1.3.0.post0
     # via
     #   trio
@@ -262,6 +304,8 @@ packaging==25.0
     #   apispec
     #   deprecation
     #   gunicorn
+    #   langchain-core
+    #   langsmith
     #   limits
     #   marshmallow
     #   shillelagh
@@ -301,6 +345,9 @@ pydantic==2.11.7
     # via
     #   apache-superset (pyproject.toml)
     #   apache-superset-core
+    #   langchain-core
+    #   langgraph
+    #   langsmith
 pydantic-core==2.33.2
     # via pydantic
 pygments==2.19.1
@@ -343,6 +390,7 @@ pyyaml==6.0.2
     # via
     #   apache-superset (pyproject.toml)
     #   apispec
+    #   langchain-core
 redis==5.3.1
     # via apache-superset (pyproject.toml)
 referencing==0.36.2
@@ -351,10 +399,14 @@ referencing==0.36.2
     #   jsonschema-specifications
 requests==2.32.4
     # via
+    #   langsmith
     #   requests-cache
+    #   requests-toolbelt
     #   shillelagh
 requests-cache==1.2.1
     # via shillelagh
+requests-toolbelt==1.0.0
+    # via langsmith
 rfc3339-validator==0.1.4
     # via openapi-schema-validator
 rich==13.9.4
@@ -408,6 +460,8 @@ sshtunnel==0.4.0
     # via apache-superset (pyproject.toml)
 tabulate==0.9.0
     # via apache-superset (pyproject.toml)
+tenacity==9.1.2
+    # via langchain-core
 trio==0.30.0
     # via
     #   selenium
@@ -418,8 +472,10 @@ typing-extensions==4.15.0
     # via
     #   apache-superset (pyproject.toml)
     #   alembic
+    #   anyio
     #   apache-superset-core
     #   cattrs
+    #   langchain-core
     #   limits
     #   pydantic
     #   pydantic-core
@@ -442,6 +498,10 @@ urllib3==2.6.0
     #   requests
     #   requests-cache
     #   selenium
+uuid-utils==0.12.0
+    # via
+    #   langchain-core
+    #   langsmith
 vine==5.1.0
     # via
     #   amqp
@@ -478,5 +538,9 @@ xlsxwriter==3.0.9
     # via
     #   apache-superset (pyproject.toml)
     #   pandas
+xxhash==3.6.0
+    # via langgraph
 zstandard==0.23.0
-    # via flask-compress
+    # via
+    #   flask-compress
+    #   langsmith

requirements/development.txt

@@ -22,8 +22,9 @@ annotated-types==0.7.0
     # via
     #   -c requirements/base-constraint.txt
     #   pydantic
-anyio==4.11.0
+anyio==4.12.0
     # via
+    #   -c requirements/base-constraint.txt
     #   httpx
     #   mcp
     #   sse-starlette
@@ -401,10 +402,15 @@ holidays==0.82
     #   apache-superset
     #   prophet
 httpcore==1.0.9
-    # via httpx
+    # via
+    #   -c requirements/base-constraint.txt
+    #   httpx
 httpx==0.28.1
     # via
+    #   -c requirements/base-constraint.txt
     #   fastmcp
+    #   langgraph-sdk
+    #   langsmith
     #   mcp
 httpx-sse==0.4.1
     # via mcp
@@ -458,10 +464,18 @@ jinja2==3.1.6
     #   apache-superset-extensions-cli
     #   flask
     #   flask-babel
+jsonpatch==1.33
+    # via
+    #   -c requirements/base-constraint.txt
+    #   langchain-core
 jsonpath-ng==1.7.0
     # via
     #   -c requirements/base-constraint.txt
     #   apache-superset
+jsonpointer==3.0.0
+    # via
+    #   -c requirements/base-constraint.txt
+    #   jsonpatch
 jsonschema==4.23.0
     # via
     #   -c requirements/base-constraint.txt
@@ -486,6 +500,34 @@ kombu==5.5.3
     # via
     #   -c requirements/base-constraint.txt
     #   celery
+langchain-core==1.2.2
+    # via
+    #   -c requirements/base-constraint.txt
+    #   apache-superset
+    #   langgraph
+    #   langgraph-checkpoint
+    #   langgraph-prebuilt
+langgraph==1.0.5
+    # via
+    #   -c requirements/base-constraint.txt
+    #   apache-superset
+langgraph-checkpoint==3.0.1
+    # via
+    #   -c requirements/base-constraint.txt
+    #   langgraph
+    #   langgraph-prebuilt
+langgraph-prebuilt==1.0.5
+    # via
+    #   -c requirements/base-constraint.txt
+    #   langgraph
+langgraph-sdk==0.3.0
+    # via
+    #   -c requirements/base-constraint.txt
+    #   langgraph
+langsmith==0.5.0
+    # via
+    #   -c requirements/base-constraint.txt
+    #   langchain-core
 lazy-object-proxy==1.10.0
     # via openapi-spec-validator
 limits==5.1.0
@@ -606,6 +648,15 @@ ordered-set==4.1.0
     # via
     #   -c requirements/base-constraint.txt
     #   flask-limiter
+orjson==3.11.5
+    # via
+    #   -c requirements/base-constraint.txt
+    #   langgraph-sdk
+    #   langsmith
+ormsgpack==1.12.1
+    # via
+    #   -c requirements/base-constraint.txt
+    #   langgraph-checkpoint
 outcome==1.3.0.post0
     # via
     #   -c requirements/base-constraint.txt
@@ -622,6 +673,8 @@ packaging==25.0
     #   duckdb-engine
     #   google-cloud-bigquery
     #   gunicorn
+    #   langchain-core
+    #   langsmith
     #   limits
     #   marshmallow
     #   matplotlib
@@ -747,6 +800,9 @@ pydantic==2.11.7
     #   apache-superset
     #   apache-superset-core
     #   fastmcp
+    #   langchain-core
+    #   langgraph
+    #   langsmith
     #   mcp
     #   openapi-pydantic
     #   pydantic-settings
@@ -866,6 +922,7 @@ pyyaml==6.0.2
     #   apache-superset
     #   apispec
     #   jsonschema-path
+    #   langchain-core
     #   pre-commit
 redis==5.3.1
     # via
@@ -887,10 +944,12 @@ requests==2.32.4
     #   google-api-core
     #   google-cloud-bigquery
     #   jsonschema-path
+    #   langsmith
     #   pydruid
     #   pyhive
     #   requests-cache
     #   requests-oauthlib
+    #   requests-toolbelt
     #   shillelagh
     #   trino
 requests-cache==1.2.1
@@ -899,6 +958,10 @@ requests-cache==1.2.1
     #   shillelagh
 requests-oauthlib==2.0.0
     # via google-auth-oauthlib
+requests-toolbelt==1.0.0
+    # via
+    #   -c requirements/base-constraint.txt
+    #   langsmith
 rfc3339-validator==0.1.4
     # via
     #   -c requirements/base-constraint.txt
@@ -965,7 +1028,6 @@ slack-sdk==3.35.0
 sniffio==1.3.1
     # via
     #   -c requirements/base-constraint.txt
-    #   anyio
     #   trio
 sortedcontainers==2.4.0
     # via
@@ -1014,6 +1076,10 @@ tabulate==0.9.0
     # via
     #   -c requirements/base-constraint.txt
     #   apache-superset
+tenacity==9.1.2
+    # via
+    #   -c requirements/base-constraint.txt
+    #   langchain-core
 tomlkit==0.13.3
     # via pylint
 tqdm==4.67.1
@@ -1042,6 +1108,7 @@ typing-extensions==4.15.0
     #   apache-superset-core
     #   cattrs
     #   exceptiongroup
+    #   langchain-core
     #   limits
     #   mcp
     #   opentelemetry-api
@@ -1082,6 +1149,11 @@ urllib3==2.6.0
     #   requests
     #   requests-cache
     #   selenium
+uuid-utils==0.12.0
+    # via
+    #   -c requirements/base-constraint.txt
+    #   langchain-core
+    #   langsmith
 uvicorn==0.37.0
     # via
     #   fastmcp
@@ -1144,6 +1216,10 @@ xlsxwriter==3.0.9
     #   -c requirements/base-constraint.txt
     #   apache-superset
     #   pandas
+xxhash==3.6.0
+    # via
+    #   -c requirements/base-constraint.txt
+    #   langgraph
 zipp==3.23.0
     # via importlib-metadata
 zope-event==5.0
@@ -1154,3 +1230,4 @@ zstandard==0.23.0
     # via
     #   -c requirements/base-constraint.txt
     #   flask-compress
+    #   langsmith

superset-core/src/superset_core/api/models.py

@@ -30,22 +30,13 @@ Usage:
     session = get_session()
 """
 
-from __future__ import annotations
-
 from datetime import datetime
-from typing import Any, TYPE_CHECKING
+from typing import Any
 from uuid import UUID
 
 from flask_appbuilder import Model
 from sqlalchemy.orm import scoped_session
 
-if TYPE_CHECKING:
-    from superset_core.api.types import (
-        AsyncQueryHandle,
-        QueryOptions,
-        QueryResult,
-    )
-
 
 class CoreModel(Model):
     """
@@ -84,83 +75,6 @@ class Database(CoreModel):
     def data(self) -> dict[str, Any]:
         raise NotImplementedError
 
-    def execute(
-        self,
-        sql: str,
-        options: QueryOptions | None = None,
-    ) -> QueryResult:
-        """
-        Execute SQL synchronously.
-
-        :param sql: SQL query to execute
-        :param options: Query execution options (see `QueryOptions`).
-            If not provided, defaults are used.
-        :returns: QueryResult with status, data (DataFrame), and metadata
-
-        Example:
-            from superset_core.api.daos import DatabaseDAO
-            from superset_core.api.types import QueryOptions, QueryStatus
-
-            db = DatabaseDAO.find_one_or_none(id=1)
-            result = db.execute(
-                "SELECT * FROM users WHERE active = true",
-                options=QueryOptions(schema="public", limit=100)
-            )
-            if result.status == QueryStatus.SUCCESS:
-                df = result.data
-                print(f"Found {sum(s.row_count for s in result.statements)} rows")
-
-        Example with templates:
-            result = db.execute(
-                "SELECT * FROM {{ table }} WHERE date > '{{ start_date }}'",
-                options=QueryOptions(
-                    schema="analytics",
-                    template_params={"table": "events", "start_date": "2024-01-01"}
-                )
-            )
-
-        Example with dry_run:
-            result = db.execute(
-                "SELECT * FROM users",
-                options=QueryOptions(schema="public", limit=100, dry_run=True)
-            )
-            print(f"Would execute: {result.statements[0].statement}")
-        """
-        raise NotImplementedError("Method will be replaced during initialization")
-
-    def execute_async(
-        self,
-        sql: str,
-        options: QueryOptions | None = None,
-    ) -> AsyncQueryHandle:
-        """
-        Execute SQL asynchronously.
-
-        Returns immediately with a handle for tracking progress and retrieving
-        results from the background worker.
-
-        :param sql: SQL query to execute
-        :param options: Query execution options (see `QueryOptions`).
-            If not provided, defaults are used.
-        :returns: AsyncQueryHandle for tracking the query
-
-        Example:
-            handle = db.execute_async(
-                "SELECT * FROM large_table",
-                options=QueryOptions(schema="analytics")
-            )
-
-            # Check status and get results
-            status = handle.get_status()
-            if status == QueryStatus.SUCCESS:
-                query_result = handle.get_result()
-                df = query_result.statements[0].data
-
-            # Cancel if needed
-            handle.cancel()
-        """
-        raise NotImplementedError("Method will be replaced during initialization")
-
 
 class Dataset(CoreModel):
     """

superset-core/src/superset_core/api/types.py

@@ -1,177 +0,0 @@
-# Licensed to the Apache Software Foundation (ASF) under one
-# or more contributor license agreements.  See the NOTICE file
-# distributed with this work for additional information
-# regarding copyright ownership.  The ASF licenses this file
-# to you under the Apache License, Version 2.0 (the
-# "License"); you may not use this file except in compliance
-# with the License.  You may obtain a copy of the License at
-#
-#   http://www.apache.org/licenses/LICENSE-2.0
-#
-# Unless required by applicable law or agreed to in writing,
-# software distributed under the License is distributed on an
-# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-# KIND, either express or implied.  See the License for the
-# specific language governing permissions and limitations
-# under the License.
-
-"""
-Query execution types for superset-core.
-
-Provides type definitions for query execution that are partially aligned
-with frontend types in superset-ui-core/src/query/types/.
-"""
-
-from __future__ import annotations
-
-from dataclasses import dataclass, field
-from datetime import datetime
-from enum import Enum
-from typing import Any, TYPE_CHECKING
-
-if TYPE_CHECKING:
-    import pandas as pd
-
-
-class QueryStatus(Enum):
-    """
-    Status of query execution.
-    """
-
-    PENDING = "pending"
-    RUNNING = "running"
-    SUCCESS = "success"
-    FAILED = "failed"
-    TIMED_OUT = "timed_out"
-    STOPPED = "stopped"
-
-
-@dataclass
-class CacheOptions:
-    """
-    Options for query result caching.
-    """
-
-    timeout: int | None = None  # Override default cache timeout (seconds)
-    force_refresh: bool = False  # Bypass cache and re-execute query
-
-
-@dataclass
-class QueryOptions:
-    """
-    Options for query execution via Database.execute() and execute_async().
-
-    Supports customization of:
-    - Basic: catalog, schema, limit, timeout
-    - Templates: Jinja2 template parameters
-    - Caching: Cache timeout and refresh control
-    - Dry run: Return transformed SQL without execution
-    """
-
-    # Basic options
-    catalog: str | None = None
-    schema: str | None = None
-    limit: int | None = None
-    timeout_seconds: int | None = None
-
-    # Template options
-    template_params: dict[str, Any] | None = None  # For Jinja2 rendering
-
-    # Caching options
-    cache: CacheOptions | None = None
-
-    # Dry run option
-    dry_run: bool = False  # Return transformed SQL without executing
-
-
-@dataclass
-class StatementResult:
-    """
-    Result of a single SQL statement execution.
-
-    For SELECT queries: data contains DataFrame, row_count is len(data)
-    For DML queries: data is None, row_count contains affected rows
-    """
-
-    original_sql: str  # The SQL statement as submitted by the user
-    executed_sql: (
-        str  # The SQL statement after transformations (RLS, mutations, limits)
-    )
-    data: pd.DataFrame | None = None
-    row_count: int = 0
-    execution_time_ms: float | None = None
-
-
-@dataclass
-class QueryResult:
-    """
-    Result of a multi-statement query execution.
-
-    On success: statements contains all executed statements
-    On failure: statements contains successful statements before failure
-
-    Fields:
-        status: Overall query status (SUCCESS or FAILED)
-        statements: Results from each executed statement
-        query_id: Query model ID for entire execution (None if dry_run=True)
-        total_execution_time_ms: Total execution time across all statements
-        is_cached: Whether result came from cache
-        error_message: Query-level error (e.g., "Statement 2 of 3: error")
-    """
-
-    status: QueryStatus
-    statements: list[StatementResult] = field(default_factory=list)
-    query_id: int | None = None
-    total_execution_time_ms: float | None = None
-    is_cached: bool = False
-    error_message: str | None = None
-
-
-@dataclass
-class AsyncQueryHandle:
-    """
-    Handle for tracking an asynchronous query.
-
-    Provides methods to check status, retrieve results, and cancel the query.
-    The methods are bound to concrete implementations at runtime.
-
-    This is the return type of Database.execute_async().
-    """
-
-    query_id: int | None  # None for cached results
-    status: QueryStatus = field(default=QueryStatus.PENDING)
-    started_at: datetime | None = None
-
-    def get_status(self) -> QueryStatus:
-        """
-        Get the current status of the async query.
-
-        :returns: Current QueryStatus
-        """
-        raise NotImplementedError("Method will be replaced during initialization")
-
-    def get_result(self) -> QueryResult:
-        """
-        Get the result of the async query.
-
-        :returns: QueryResult with data if successful
-        """
-        raise NotImplementedError("Method will be replaced during initialization")
-
-    def cancel(self) -> bool:
-        """
-        Cancel the async query.
-
-        :returns: True if cancellation was successful
-        """
-        raise NotImplementedError("Method will be replaced during initialization")
-
-
-__all__ = [
-    "QueryStatus",
-    "QueryOptions",
-    "QueryResult",
-    "StatementResult",
-    "AsyncQueryHandle",
-    "CacheOptions",
-]

superset-extensions-cli/src/superset_extensions_cli/templates/extension.json.j2

@@ -7,8 +7,8 @@
   "frontend": {
     "contributions": {
       "commands": [],
-      "views": {},
-      "menus": {}
+      "views": [],
+      "menus": []
     },
     "moduleFederation": {
       "exposes": ["./index"]

superset-extensions-cli/tests/test_cli_init.py

@@ -226,7 +226,7 @@ def test_extension_json_content_is_correct(
     frontend = content["frontend"]
     assert "contributions" in frontend
     assert "moduleFederation" in frontend
-    assert frontend["contributions"] == {"commands": [], "views": {}, "menus": {}}
+    assert frontend["contributions"] == {"commands": [], "views": [], "menus": []}
     assert frontend["moduleFederation"] == {"exposes": ["./index"]}
 
     # Verify backend section exists and has correct structure

superset-extensions-cli/tests/test_templates.py

@@ -75,7 +75,7 @@ def test_extension_json_template_renders_with_both_frontend_and_backend(
     frontend = parsed["frontend"]
     assert "contributions" in frontend
     assert "moduleFederation" in frontend
-    assert frontend["contributions"] == {"commands": [], "views": {}, "menus": {}}
+    assert frontend["contributions"] == {"commands": [], "views": [], "menus": []}
     assert frontend["moduleFederation"] == {"exposes": ["./index"]}
 
     # Verify backend section exists

superset-frontend/.gitignore

@@ -1,9 +1,6 @@
 coverage/*
 cypress/screenshots
 cypress/videos
-playwright/.auth
-playwright-report/
-test-results/
 src/temp
 .temp_cache/
 .tsbuildinfo

superset-frontend/.storybook/main.js

@@ -20,57 +20,6 @@ import { dirname, join } from 'path';
 // Superset's webpack.config.js
 const customConfig = require('../webpack.config.js');
 
-// Filter out plugins that shouldn't be included in Storybook's static build
-// ReactRefreshWebpackPlugin adds Fast Refresh code that requires a dev server runtime,
-// which isn't available when serving the static storybook build
-const filteredPlugins = customConfig.plugins.filter(
-  plugin => plugin.constructor.name !== 'ReactRefreshWebpackPlugin',
-);
-
-// Deep clone and modify rules to disable React Fast Refresh and dev mode in SWC loader
-// The Fast Refresh transform adds $RefreshSig$ calls that require a runtime
-// which isn't present when serving the static build.
-// Also disable development mode to use jsx instead of jsxDEV runtime.
-const disableDevModeInRules = rules =>
-  rules.map(rule => {
-    if (!rule.use) return rule;
-
-    const newUse = (Array.isArray(rule.use) ? rule.use : [rule.use]).map(
-      loader => {
-        // Check if this is the swc-loader with react transform settings
-        if (
-          typeof loader === 'object' &&
-          loader.loader?.includes('swc-loader') &&
-          loader.options?.jsc?.transform?.react
-        ) {
-          return {
-            ...loader,
-            options: {
-              ...loader.options,
-              jsc: {
-                ...loader.options.jsc,
-                transform: {
-                  ...loader.options.jsc.transform,
-                  react: {
-                    ...loader.options.jsc.transform.react,
-                    refresh: false,
-                    development: false,
-                  },
-                },
-              },
-            },
-          };
-        }
-        return loader;
-      },
-    );
-
-    return {
-      ...rule,
-      use: Array.isArray(rule.use) ? newUse : newUse[0],
-    };
-  });
-
 module.exports = {
   stories: [
     '../src/@(components|common|filters|explore|views|dashboard|features)/**/*.stories.@(tsx|jsx)',
@@ -92,19 +41,13 @@ module.exports = {
     ...config,
     module: {
       ...config.module,
-      rules: disableDevModeInRules(customConfig.module.rules),
+      rules: customConfig.module.rules,
     },
     resolve: {
       ...config.resolve,
       ...customConfig.resolve,
-      alias: {
-        ...config.resolve?.alias,
-        ...customConfig.resolve?.alias,
-        // Fix for Storybook 8.6.x with React 17 - resolve ESM module paths
-        'react-dom/test-utils': require.resolve('react-dom/test-utils'),
-      },
     },
-    plugins: [...config.plugins, ...filteredPlugins],
+    plugins: [...config.plugins, ...customConfig.plugins],
   }),
 
   typescript: {

superset-frontend/.storybook/preview.jsx

@@ -17,7 +17,8 @@
  * under the License.
  */
 import { withJsx } from '@mihkeleidast/storybook-addon-source';
-import { themeObject, css, exampleThemes } from '@apache-superset/core/ui';
+import { exampleThemes } from '@superset-ui/core';
+import { themeObject, css } from '@apache-superset/core/ui';
 import { combineReducers, createStore, applyMiddleware, compose } from 'redux';
 import thunk from 'redux-thunk';
 import { Provider } from 'react-redux';

superset-frontend/.storybook/test-runner.ts

@@ -1,38 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import type { TestRunnerConfig } from '@storybook/test-runner';
-
-/**
- * Test runner configuration for Storybook smoke tests.
- *
- * The test-runner visits each story and verifies it renders without errors.
- * These are basic smoke tests - they don't test interactions or assertions,
- * just that stories can render successfully.
- */
-const config: TestRunnerConfig = {
-  async preVisit(page) {
-    // Listen for page errors (JavaScript exceptions) and log them
-    // This helps identify stories that crash during rendering
-    page.on('pageerror', error => {
-      console.error(`[page error] ${error.message}`);
-    });
-  },
-};
-
-export default config;

superset-frontend/cypress-base/cypress/e2e/chart_list/list.test.ts

@@ -206,20 +206,12 @@ describe('Charts list', () => {
 
       // edits in list-view
       setGridMode('list');
-      // Wait for list view to fully render after mode change
-      cy.get('.loading').should('not.exist');
-      cy.getBySel('table-row').should('be.visible');
-      // Target the specific row by chart title to avoid flakiness from row ordering
-      cy.getBySel('table-row')
-        .contains('1 - Sample chart | EDITED')
-        .parents('[data-test="table-row"]')
-        .find('[data-test="edit-alt"]')
-        .click();
+      cy.getBySel('edit-alt').eq(1).click();
       cy.getBySel('properties-modal-name-input').clear();
       cy.getBySel('properties-modal-name-input').type('1 - Sample chart');
       cy.get('button:contains("Save")').click();
       cy.wait('@update');
-      cy.getBySel('table-row').contains('1 - Sample chart').should('exist');
+      cy.getBySel('table-row').eq(1).contains('1 - Sample chart');
     });
   });
 });

superset-frontend/package.json

@@ -79,8 +79,6 @@
     "prod": "npm run build",
     "prune": "rm -rf ./{packages,plugins}/*/{node_modules,lib,esm,tsconfig.tsbuildinfo,package-lock.json} ./.temp_cache",
     "storybook": "cross-env NODE_ENV=development BABEL_ENV=development storybook dev -p 6006",
-    "test-storybook": "test-storybook",
-    "test-storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"npx http-server storybook-static --port 6006 --silent\" \"npx wait-on tcp:127.0.0.1:6006 && npm run test-storybook -- --maxWorkers=2\"",
     "tdd": "cross-env NODE_ENV=test NODE_OPTIONS=\"--max-old-space-size=8192\" jest --watch",
     "test": "cross-env NODE_ENV=test NODE_OPTIONS=\"--max-old-space-size=8192\" jest --max-workers=80% --silent",
     "test-loud": "cross-env NODE_ENV=test NODE_OPTIONS=\"--max-old-space-size=8192\" jest --max-workers=80%",
@@ -146,8 +144,8 @@
     "content-disposition": "^1.0.1",
     "d3-color": "^3.1.0",
     "d3-scale": "^2.1.2",
-    "dayjs": "^1.11.19",
-    "dom-to-image-more": "^3.7.2",
+    "dayjs": "^1.11.18",
+    "dom-to-image-more": "^3.6.0",
     "dom-to-pdf": "^0.3.2",
     "echarts": "^5.6.0",
     "eslint-plugin-i18n-strings": "file:eslint-rules/eslint-plugin-i18n-strings",
@@ -177,6 +175,7 @@
     "mustache": "^4.2.0",
     "nanoid": "^5.0.9",
     "ol": "^7.5.2",
+    "polished": "^4.3.1",
     "prop-types": "^15.8.1",
     "re-resizable": "^6.10.1",
     "react": "^17.0.2",
@@ -223,7 +222,7 @@
     "@babel/cli": "^7.28.3",
     "@babel/compat-data": "^7.28.4",
     "@babel/core": "^7.28.3",
-    "@babel/eslint-parser": "^7.28.5",
+    "@babel/eslint-parser": "^7.28.4",
     "@babel/node": "^7.28.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-export-namespace-from": "^7.27.1",
@@ -244,17 +243,15 @@
     "@mihkeleidast/storybook-addon-source": "^1.0.1",
     "@playwright/test": "^1.56.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.17",
-    "@storybook/addon-actions": "8.6.14",
-    "@storybook/addon-controls": "8.6.14",
-    "@storybook/addon-essentials": "8.6.14",
-    "@storybook/addon-links": "8.6.14",
-    "@storybook/addon-mdx-gfm": "8.6.14",
-    "@storybook/components": "8.6.14",
-    "@storybook/preview-api": "8.6.14",
-    "@storybook/react": "8.6.14",
-    "@storybook/react-webpack5": "8.6.14",
-    "@storybook/test": "^8.6.14",
-    "@storybook/test-runner": "^0.17.0",
+    "@storybook/addon-actions": "8.1.11",
+    "@storybook/addon-controls": "8.1.11",
+    "@storybook/addon-essentials": "8.1.11",
+    "@storybook/addon-links": "8.1.11",
+    "@storybook/addon-mdx-gfm": "8.1.11",
+    "@storybook/components": "8.1.11",
+    "@storybook/preview-api": "8.1.11",
+    "@storybook/react": "8.1.11",
+    "@storybook/react-webpack5": "8.1.11",
     "@svgr/webpack": "^8.1.0",
     "@swc/core": "^1.14.0",
     "@swc/plugin-emotion": "^12.0.0",
@@ -271,7 +268,7 @@
     "@types/json-bigint": "^1.0.4",
     "@types/math-expression-evaluator": "^2.0.0",
     "@types/mousetrap": "^1.6.15",
-    "@types/node": "^25.0.2",
+    "@types/node": "^24.8.1",
     "@types/react": "^17.0.83",
     "@types/react-dom": "^17.0.26",
     "@types/react-json-tree": "^0.13.0",
@@ -295,9 +292,7 @@
     "babel-plugin-jsx-remove-data-test-id": "^3.0.0",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-typescript-to-proptypes": "^2.0.0",
-    "baseline-browser-mapping": "^2.9.7",
     "cheerio": "1.1.0",
-    "concurrently": "^9.2.1",
     "copy-webpack-plugin": "^13.0.1",
     "cross-env": "^10.0.0",
     "css-loader": "^7.1.2",
@@ -321,13 +316,12 @@
     "eslint-plugin-react-prefer-function-component": "^5.0.0",
     "eslint-plugin-react-you-might-not-need-an-effect": "^0.5.1",
     "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-testing-library": "^7.14.0",
+    "eslint-plugin-testing-library": "^7.13.6",
     "eslint-plugin-theme-colors": "file:eslint-rules/eslint-plugin-theme-colors",
     "fetch-mock": "^11.1.5",
     "fork-ts-checker-webpack-plugin": "^9.1.0",
     "history": "^5.3.0",
     "html-webpack-plugin": "^5.6.4",
-    "http-server": "^14.1.1",
     "imports-loader": "^5.0.0",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -350,18 +344,17 @@
     "source-map": "^0.7.4",
     "source-map-support": "^0.5.21",
     "speed-measure-webpack-plugin": "^1.5.0",
-    "storybook": "8.6.14",
+    "storybook": "8.1.11",
     "style-loader": "^4.0.0",
     "swc-loader": "^0.2.6",
-    "terser-webpack-plugin": "^5.3.16",
+    "terser-webpack-plugin": "^5.3.14",
     "thread-loader": "^4.0.4",
-    "ts-jest": "^29.4.6",
+    "ts-jest": "^29.4.5",
     "ts-loader": "^9.5.1",
     "tscw-config": "^1.1.2",
-    "tsx": "^4.21.0",
+    "tsx": "^4.20.3",
     "typescript": "5.4.5",
     "vm-browserify": "^1.1.2",
-    "wait-on": "^9.0.3",
     "webpack": "^5.103.0",
     "webpack-bundle-analyzer": "^4.10.1",
     "webpack-cli": "^6.0.1",

superset-frontend/packages/superset-core/src/ui/components/Alert/Alert.stories.tsx

@@ -30,17 +30,8 @@ const bigText =
   'purus convallis placerat in at nunc. Nulla nec viverra augue.';
 
 export default {
-  title: 'Extension Components/Alert',
+  title: 'Components/Alert',
   component: Alert,
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Alert component for displaying important messages to users. ' +
-          'Wraps Ant Design Alert with sensible defaults and improved accessibility.',
-      },
-    },
-  },
 };
 
 export const AlertGallery = () => (

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

@@ -28,7 +28,7 @@
     "@ant-design/icons": "^5.2.6",
     "@babel/runtime": "^7.28.4",
     "@types/json-bigint": "^1.0.4",
-    "ace-builds": "^1.43.5",
+    "ace-builds": "^1.43.4",
     "ag-grid-community": "34.3.1",
     "ag-grid-react": "34.3.1",
     "brace": "^0.11.1",
@@ -36,7 +36,7 @@
     "csstype": "^3.1.3",
     "core-js": "^3.38.1",
     "d3-format": "^1.3.2",
-    "dayjs": "^1.11.19",
+    "dayjs": "^1.11.18",
     "d3-interpolate": "^3.0.1",
     "d3-scale": "^4.0.2",
     "d3-time": "^3.1.0",
@@ -79,7 +79,7 @@
     "@types/jquery": "^3.5.33",
     "@types/lodash": "^4.17.21",
     "@types/math-expression-evaluator": "^2.0.0",
-    "@types/node": "^25.0.2",
+    "@types/node": "^24.8.1",
     "@types/prop-types": "^15.7.15",
     "@types/rison": "0.1.0",
     "@types/seedrandom": "^3.0.8",

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

@@ -0,0 +1,78 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { render, screen, waitFor } from '@superset-ui/core/spec';
+import userEvent from '@testing-library/user-event';
+import { AIInfoBanner } from '.';
+
+test('renders with default props', () => {
+  render(<AIInfoBanner text="Hello AI" />);
+  const banner = screen.getByTestId('ai-info-banner');
+  expect(banner).toBeInTheDocument();
+  expect(banner).toHaveAttribute('role', 'status');
+  expect(banner).toHaveAttribute('aria-live', 'polite');
+});
+
+test('displays text with typing effect', async () => {
+  const testText = 'Test message';
+  render(<AIInfoBanner text={testText} typingSpeed={10} />);
+
+  // Wait for text to be fully typed
+  await waitFor(
+    () => {
+      expect(screen.getByText(testText)).toBeInTheDocument();
+    },
+    { timeout: 500 },
+  );
+});
+
+test('shows close button when dismissible is true (default)', () => {
+  render(<AIInfoBanner text="Test" />);
+  const closeButton = screen.getByTestId('ai-info-banner-close');
+  expect(closeButton).toBeInTheDocument();
+});
+
+test('hides close button when dismissible is false', () => {
+  render(<AIInfoBanner text="Test" dismissible={false} />);
+  expect(
+    screen.queryByTestId('ai-info-banner-close'),
+  ).not.toBeInTheDocument();
+});
+
+test('calls onDismiss and hides banner when close button is clicked', async () => {
+  const onDismiss = jest.fn();
+  render(<AIInfoBanner text="Test" onDismiss={onDismiss} />);
+
+  const closeButton = screen.getByTestId('ai-info-banner-close');
+  await userEvent.click(closeButton);
+
+  expect(onDismiss).toHaveBeenCalledTimes(1);
+  expect(screen.queryByTestId('ai-info-banner')).not.toBeInTheDocument();
+});
+
+test('accepts custom className', () => {
+  render(<AIInfoBanner text="Test" className="custom-class" />);
+  const banner = screen.getByTestId('ai-info-banner');
+  expect(banner).toHaveClass('custom-class');
+});
+
+test('accepts custom data-test attribute', () => {
+  render(<AIInfoBanner text="Test" data-test="custom-test-id" />);
+  expect(screen.getByTestId('custom-test-id')).toBeInTheDocument();
+});

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

@@ -0,0 +1,293 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import { styled, css, keyframes } from '@apache-superset/core/ui';
+import type { AIInfoBannerProps } from './types';
+
+// Keyframes for the SIRI-like orb animation
+const pulse = keyframes`
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.8;
+  }
+`;
+
+const wave = keyframes`
+  0% {
+    transform: scale(0.8);
+    opacity: 0.8;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 0.4;
+  }
+  100% {
+    transform: scale(1.6);
+    opacity: 0;
+  }
+`;
+
+const gradientShift = keyframes`
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+`;
+
+const cursorBlink = keyframes`
+  0%, 50% {
+    opacity: 1;
+  }
+  51%, 100% {
+    opacity: 0;
+  }
+`;
+
+const BannerContainer = styled.div`
+  ${({ theme }) => css`
+    display: flex;
+    align-items: center;
+    gap: ${theme.sizeUnit * 3}px;
+    padding: ${theme.sizeUnit * 3}px ${theme.sizeUnit * 4}px;
+    background: linear-gradient(
+      135deg,
+      ${theme.colorPrimaryBg} 0%,
+      ${theme.colorInfoBg} 50%,
+      ${theme.colorPrimaryBg} 100%
+    );
+    background-size: 200% 200%;
+    animation: ${gradientShift} 8s ease infinite;
+    border-radius: ${theme.borderRadius}px;
+    border: 1px solid ${theme.colorPrimaryBorder};
+    position: relative;
+    overflow: hidden;
+  `}
+`;
+
+const AIIndicatorWrapper = styled.div`
+  ${({ theme }) => css`
+    position: relative;
+    width: ${theme.sizeUnit * 10}px;
+    height: ${theme.sizeUnit * 10}px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `}
+`;
+
+const AIOrb = styled.div`
+  ${({ theme }) => css`
+    width: ${theme.sizeUnit * 5}px;
+    height: ${theme.sizeUnit * 5}px;
+    border-radius: 50%;
+    background: linear-gradient(
+      135deg,
+      ${theme.colorPrimary} 0%,
+      ${theme.colorInfo} 25%,
+      ${theme.colorSuccess} 50%,
+      ${theme.colorInfo} 75%,
+      ${theme.colorPrimaryActive} 100%
+    );
+    background-size: 300% 300%;
+    animation:
+      ${pulse} 1.5s ease-in-out infinite,
+      ${gradientShift} 1.2s steps(6) infinite;
+    box-shadow:
+      0 0 ${theme.sizeUnit * 2}px ${theme.colorPrimary},
+      0 0 ${theme.sizeUnit * 5}px ${theme.colorPrimaryBg};
+    z-index: 2;
+  `}
+`;
+
+const WaveRing = styled.div<{ $delay: number }>`
+  ${({ theme, $delay }) => css`
+    position: absolute;
+    width: ${theme.sizeUnit * 5}px;
+    height: ${theme.sizeUnit * 5}px;
+    border-radius: 50%;
+    border: 1px solid ${theme.colorPrimary};
+    animation: ${wave} 1.8s ease-out infinite;
+    animation-delay: ${$delay}s;
+    z-index: 1;
+  `}
+`;
+
+const ContentWrapper = styled.div`
+  ${({ theme }) => css`
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.sizeUnit}px;
+  `}
+`;
+
+const TextContent = styled.div`
+  ${({ theme }) => css`
+    font-size: ${theme.fontSize}px;
+    color: ${theme.colorText};
+    line-height: 1.5;
+    display: inline;
+  `}
+`;
+
+const TypingCursor = styled.span<{ $isTyping: boolean }>`
+  ${({ theme, $isTyping }) => css`
+    display: inline-block;
+    width: 2px;
+    height: 1em;
+    background-color: ${theme.colorPrimary};
+    margin-left: 2px;
+    vertical-align: text-bottom;
+    animation: ${$isTyping ? cursorBlink : 'none'} 0.8s step-end infinite;
+    opacity: ${$isTyping ? 1 : 0};
+  `}
+`;
+
+const CloseButton = styled.button`
+  ${({ theme }) => css`
+    position: absolute;
+    top: ${theme.sizeUnit}px;
+    right: ${theme.sizeUnit}px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: ${theme.sizeUnit * 0.5}px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: ${theme.borderRadius}px;
+    color: ${theme.colorTextTertiary};
+    transition: all ${theme.motionDurationMid};
+
+    &:hover {
+      background-color: ${theme.colorPrimaryBg};
+      color: ${theme.colorText};
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px ${theme.colorPrimaryBorder};
+    }
+  `}
+`;
+
+const CloseIcon = () => (
+  <svg
+    width="10"
+    height="10"
+    viewBox="0 0 10 10"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1 1L9 9M1 9L9 1"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+  </svg>
+);
+
+export function AIInfoBanner({
+  text,
+  typingSpeed = 20,
+  dismissible = true,
+  onDismiss,
+  className,
+  'data-test': dataTest,
+}: AIInfoBannerProps) {
+  const [displayedText, setDisplayedText] = useState('');
+  const [isTyping, setIsTyping] = useState(true);
+  const [isVisible, setIsVisible] = useState(true);
+
+  useEffect(() => {
+    if (!text) return;
+
+    setDisplayedText('');
+    setIsTyping(true);
+
+    let currentIndex = 0;
+    const intervalId = setInterval(() => {
+      if (currentIndex < text.length) {
+        setDisplayedText(text.slice(0, currentIndex + 1));
+        currentIndex += 1;
+      } else {
+        setIsTyping(false);
+        clearInterval(intervalId);
+      }
+    }, typingSpeed);
+
+    return () => clearInterval(intervalId);
+  }, [text, typingSpeed]);
+
+  const handleDismiss = useCallback(() => {
+    setIsVisible(false);
+    onDismiss?.();
+  }, [onDismiss]);
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <BannerContainer
+      className={className}
+      data-test={dataTest ?? 'ai-info-banner'}
+      role="status"
+      aria-live="polite"
+    >
+      <AIIndicatorWrapper>
+        <WaveRing $delay={0} />
+        <WaveRing $delay={0.5} />
+        <WaveRing $delay={1} />
+        <AIOrb />
+      </AIIndicatorWrapper>
+
+      <ContentWrapper>
+        <TextContent>
+          {displayedText}
+          <TypingCursor $isTyping={isTyping} />
+        </TextContent>
+      </ContentWrapper>
+
+      {dismissible && (
+        <CloseButton
+          onClick={handleDismiss}
+          aria-label="Dismiss"
+          data-test="ai-info-banner-close"
+        >
+          <CloseIcon />
+        </CloseButton>
+      )}
+    </BannerContainer>
+  );
+}
+
+export type { AIInfoBannerProps };

superset-frontend/packages/superset-ui-core/src/components/AIInfoBanner/types.ts

@@ -0,0 +1,33 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export interface AIInfoBannerProps {
+  /** The text content to display with typing effect */
+  text: string;
+  /** Typing speed in milliseconds per character (default: 20) */
+  typingSpeed?: number;
+  /** Whether the banner can be dismissed (default: true) */
+  dismissible?: boolean;
+  /** Callback when the banner is dismissed */
+  onDismiss?: () => void;
+  /** Custom className for styling */
+  className?: string;
+  /** Data test attribute for testing */
+  'data-test'?: string;
+}

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

@@ -0,0 +1,266 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { styled, useTheme, css, keyframes } from '@apache-superset/core/ui';
+import { Flex, Typography } from '../index';
+import { Icons } from '../Icons';
+import type { AsyncProcessPanelProps, ProcessStep } from './types';
+
+const spin = keyframes`
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+`;
+
+const Spinner = styled.div`
+  ${({ theme }) => css`
+    width: ${theme.sizeUnit * 20}px;
+    height: ${theme.sizeUnit * 20}px;
+    border: ${theme.sizeUnit}px solid ${theme.colorBgContainer};
+    border-top: ${theme.sizeUnit}px solid ${theme.colorPrimary};
+    border-radius: 50%;
+    animation: ${spin} 1s linear infinite;
+  `}
+`;
+
+const Subtitle = styled(Typography.Text)`
+  ${() => css`
+    display: block;
+    text-align: center;
+    max-width: 400px;
+  `}
+`;
+
+const ProgressBarContainer = styled.div`
+  ${({ theme }) => css`
+    width: 100%;
+    height: ${theme.sizeUnit * 1.5}px;
+    background-color: ${theme.colorBgContainer};
+    border-radius: ${theme.borderRadiusSM}px;
+    overflow: hidden;
+  `}
+`;
+
+const ProgressBar = styled.div<{ progress: number }>`
+  ${({ theme, progress }) => css`
+    height: 100%;
+    width: ${progress}%;
+    background: linear-gradient(
+      90deg,
+      ${theme.colorPrimary} 0%,
+      ${theme.colorSuccess} 100%
+    );
+    border-radius: ${theme.borderRadiusSM}px;
+    transition: width 0.5s ease-in-out;
+  `}
+`;
+
+const StepsContainer = styled.div`
+  ${({ theme }) => css`
+    width: 100%;
+    background-color: ${theme.colorBgContainer};
+    border: 1px solid ${theme.colorBorder};
+    border-radius: ${theme.borderRadius}px;
+    padding: ${theme.paddingLG}px;
+  `}
+`;
+
+const StepIcon = styled.div<{ $isActive: boolean; $isCompleted: boolean }>`
+  ${({ theme, $isActive, $isCompleted }) => css`
+    width: ${theme.sizeUnit * 6}px;
+    height: ${theme.sizeUnit * 6}px;
+    min-width: ${theme.sizeUnit * 6}px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: ${theme.fontSizeSM}px;
+
+    ${$isCompleted
+      ? css`
+          background-color: ${theme.colorSuccess};
+          color: ${theme.colorTextLightSolid};
+        `
+      : $isActive
+        ? css`
+            background-color: ${theme.colorPrimary};
+            color: ${theme.colorTextLightSolid};
+          `
+        : css`
+            background-color: ${theme.colorBgBase};
+            border: 1px solid ${theme.colorBorder};
+            color: ${theme.colorTextSecondary};
+          `}
+  `}
+`;
+
+const StepTitle = styled.p<{ $isActive: boolean; $isCompleted: boolean }>`
+  ${({ theme, $isActive, $isCompleted }) => css`
+    font-size: ${theme.fontSize}px;
+    font-weight: ${theme.fontWeightStrong};
+    color: ${$isActive || $isCompleted
+      ? theme.colorText
+      : theme.colorTextSecondary};
+    margin: 0 0 2px 0;
+  `}
+`;
+
+const StepDescription = styled.p`
+  ${({ theme }) => css`
+    font-size: ${theme.fontSizeSM}px;
+    color: ${theme.colorTextSecondary};
+    margin: 0;
+  `}
+`;
+
+const InfoBanner = styled.div`
+  ${({ theme }) => css`
+    width: 100%;
+    background-color: ${theme.colorBgContainer};
+    border: 1px solid ${theme.colorBorder};
+    border-radius: ${theme.borderRadius}px;
+    padding: ${theme.paddingMD}px ${theme.paddingLG}px;
+  `}
+`;
+
+const InfoIcon = styled.div`
+  margin-top: 2px;
+  flex-shrink: 0;
+`;
+
+const PanelContainer = styled(Flex)`
+  ${({ theme }) => css`
+    width: 100%;
+    max-width: 600px;
+    gap: ${theme.marginLG}px;
+  `}
+`;
+
+const TitleSection = styled(Flex)`
+  ${({ theme }) => css`
+    gap: ${theme.marginSM}px;
+  `}
+`;
+
+const StepsListContainer = styled(Flex)`
+  ${({ theme }) => css`
+    gap: ${theme.marginSM}px;
+  `}
+`;
+
+const StepRow = styled(Flex)`
+  ${({ theme }) => css`
+    padding: ${theme.paddingSM}px 0;
+    gap: ${theme.marginSM}px;
+  `}
+`;
+
+const InfoBannerContent = styled(Flex)`
+  ${({ theme }) => css`
+    gap: ${theme.marginSM}px;
+  `}
+`;
+
+const StepContent = styled(Flex)`
+  flex: 1;
+`;
+
+export function AsyncProcessPanel({
+  title,
+  subtitle,
+  steps,
+  currentStepIndex,
+  infoBannerTitle,
+  infoBannerDescription,
+}: AsyncProcessPanelProps) {
+  const theme = useTheme();
+
+  const progress = ((currentStepIndex + 1) / (steps.length + 1)) * 100;
+
+  return (
+    <PanelContainer vertical align="center">
+      <Spinner />
+
+      <TitleSection vertical align="center">
+        <Typography.Title css={{ margin: 0, textAlign: 'center' }} level={3}>
+          {title}
+        </Typography.Title>
+        {subtitle && <Subtitle type="secondary">{subtitle}</Subtitle>}
+      </TitleSection>
+
+      <ProgressBarContainer>
+        <ProgressBar progress={progress} />
+      </ProgressBarContainer>
+
+      <StepsContainer>
+        <StepsListContainer vertical>
+          {steps.map((step, index) => {
+            const isCompleted = currentStepIndex > index;
+            const isActive = currentStepIndex === index;
+
+            return (
+              <StepRow key={step.key} align="flex-start">
+                <StepIcon $isActive={isActive} $isCompleted={isCompleted}>
+                  {isCompleted ? (
+                    <Icons.CheckOutlined />
+                  ) : isActive ? (
+                    <Icons.LoadingOutlined />
+                  ) : null}
+                </StepIcon>
+                <StepContent vertical>
+                  <StepTitle $isActive={isActive} $isCompleted={isCompleted}>
+                    {step.title}
+                  </StepTitle>
+                  <StepDescription>{step.description}</StepDescription>
+                </StepContent>
+              </StepRow>
+            );
+          })}
+        </StepsListContainer>
+      </StepsContainer>
+
+      {(infoBannerTitle || infoBannerDescription) && (
+        <InfoBanner>
+          <InfoBannerContent align="flex-start">
+            <InfoIcon>
+              <Icons.InfoCircleOutlined
+                iconSize="m"
+                iconColor={theme.colorPrimary}
+              />
+            </InfoIcon>
+            <StepContent vertical>
+              {infoBannerTitle && (
+                <Typography.Text
+                  css={{ display: 'block', fontWeight: 600, marginBottom: 4 }}
+                >
+                  {infoBannerTitle}
+                </Typography.Text>
+              )}
+              {infoBannerDescription && (
+                <Typography.Text type="secondary">
+                  {infoBannerDescription}
+                </Typography.Text>
+              )}
+            </StepContent>
+          </InfoBannerContent>
+        </InfoBanner>
+      )}
+    </PanelContainer>
+  );
+}
+
+export type { AsyncProcessPanelProps, ProcessStep };

superset-frontend/packages/superset-ui-core/src/components/AsyncProcessPanel/types.ts

@@ -16,23 +16,19 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import type { ReactNode } from 'react';
 
-// Service Worker types (declared locally to avoid polluting global scope)
-declare const self: {
-  skipWaiting(): Promise<void>;
-  clients: { claim(): Promise<void> };
-  addEventListener(
-    type: 'install' | 'activate',
-    listener: (event: { waitUntil(promise: Promise<unknown>): void }) => void,
-  ): void;
-};
+export interface ProcessStep {
+  key: string;
+  title: string;
+  description: string;
+}
 
-self.addEventListener('install', event => {
-  event.waitUntil(self.skipWaiting());
-});
-
-self.addEventListener('activate', event => {
-  event.waitUntil(self.clients.claim());
-});
-
-export {};
+export interface AsyncProcessPanelProps {
+  title: string;
+  subtitle?: string | ReactNode;
+  steps: ProcessStep[];
+  currentStepIndex: number;
+  infoBannerTitle?: string;
+  infoBannerDescription?: string;
+}

superset-frontend/packages/superset-ui-core/src/components/DesignSystem.stories.tsx

@@ -38,120 +38,13 @@ export const DesignSystem = () => (
   </a>
 
   While the Superset Design System will use Atomic Design principles, we choose a different language to describe the elements.
+
+  | Atomic Design   |    Atoms    | Molecules  | Organisms | Templates | Pages / Screens |
+  | :-------------- | :---------: | :--------: | :-------: | :-------: | :-------------: |
+  | Superset Design | Foundations | Components | Patterns  | Templates |    Features     |
+
       `}
     </Markdown>
-    <table style={{ borderCollapse: 'collapse', margin: '16px 0' }}>
-      <thead>
-        <tr>
-          <th
-            style={{
-              border: '1px solid #ddd',
-              padding: '8px',
-              textAlign: 'left',
-            }}
-          >
-            Atomic Design
-          </th>
-          <th
-            style={{
-              border: '1px solid #ddd',
-              padding: '8px',
-              textAlign: 'center',
-            }}
-          >
-            Atoms
-          </th>
-          <th
-            style={{
-              border: '1px solid #ddd',
-              padding: '8px',
-              textAlign: 'center',
-            }}
-          >
-            Molecules
-          </th>
-          <th
-            style={{
-              border: '1px solid #ddd',
-              padding: '8px',
-              textAlign: 'center',
-            }}
-          >
-            Organisms
-          </th>
-          <th
-            style={{
-              border: '1px solid #ddd',
-              padding: '8px',
-              textAlign: 'center',
-            }}
-          >
-            Templates
-          </th>
-          <th
-            style={{
-              border: '1px solid #ddd',
-              padding: '8px',
-              textAlign: 'center',
-            }}
-          >
-            Pages / Screens
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td style={{ border: '1px solid #ddd', padding: '8px' }}>
-            Superset Design
-          </td>
-          <td
-            style={{
-              border: '1px solid #ddd',
-              padding: '8px',
-              textAlign: 'center',
-            }}
-          >
-            Foundations
-          </td>
-          <td
-            style={{
-              border: '1px solid #ddd',
-              padding: '8px',
-              textAlign: 'center',
-            }}
-          >
-            Components
-          </td>
-          <td
-            style={{
-              border: '1px solid #ddd',
-              padding: '8px',
-              textAlign: 'center',
-            }}
-          >
-            Patterns
-          </td>
-          <td
-            style={{
-              border: '1px solid #ddd',
-              padding: '8px',
-              textAlign: 'center',
-            }}
-          >
-            Templates
-          </td>
-          <td
-            style={{
-              border: '1px solid #ddd',
-              padding: '8px',
-              textAlign: 'center',
-            }}
-          >
-            Features
-          </td>
-        </tr>
-      </tbody>
-    </table>
     <img
       src={AtomicDesign}
       alt="Atoms = Foundations, Molecules = Components, Organisms = Patterns, Templates = Templates, Pages / Screens = Features"

superset-frontend/packages/superset-ui-core/src/components/ListViewCard/ListViewCard.stories.tsx

@@ -16,29 +16,80 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { action } from '@storybook/addon-actions';
+import { Icons } from '@superset-ui/core/components/Icons';
+import { Dropdown } from '../Dropdown';
+import { FaveStar } from '../FaveStar';
 import { ListViewCard } from '.';
 
 export default {
   title: 'Components/ListViewCard',
   component: ListViewCard,
   argTypes: {
-    loading: { control: 'boolean' },
+    loading: { control: 'boolean', defaultValue: false },
+    imgURL: {
+      control: 'text',
+      defaultValue:
+        'https://images.unsplash.com/photo-1658163724548-29ef00812a54?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80',
+    },
+    imgFallbackURL: {
+      control: 'text',
+      defaultValue:
+        'https://images.unsplash.com/photo-1658208193219-e859d9771912?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80',
+    },
+    isStarred: { control: 'boolean', defaultValue: false },
   },
 };
 
 export const SupersetListViewCard = ({
-  loading = false,
+  loading,
+  imgURL,
+  imgFallbackURL,
+  isStarred,
 }: {
-  loading?: boolean;
+  loading: boolean;
+  imgURL: string;
+  imgFallbackURL: string;
+  isStarred: boolean;
 }) => (
   <ListViewCard
     title="Superset Card Title"
     loading={loading}
     url="/superset/dashboard/births/"
-    imgURL="https://images.unsplash.com/photo-1658163724548-29ef00812a54?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"
-    imgFallbackURL="https://images.unsplash.com/photo-1658208193219-e859d9771912?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"
+    imgURL={imgURL}
+    imgFallbackURL={imgFallbackURL}
     description="Lorem ipsum dolor sit amet, consectetur adipiscing elit..."
     coverLeft="Left Section"
     coverRight="Right Section"
+    actions={
+      <ListViewCard.Actions>
+        <FaveStar
+          itemId={0}
+          fetchFaveStar={action('fetchFaveStar')}
+          saveFaveStar={action('saveFaveStar')}
+          isStarred={isStarred}
+        />
+        <Dropdown
+          menu={{
+            items: [
+              {
+                key: 'delete',
+                label: 'Delete',
+                icon: <Icons.DeleteOutlined />,
+                onClick: action('Delete'),
+              },
+              {
+                key: 'edit',
+                label: 'Edit',
+                icon: <Icons.EditOutlined />,
+                onClick: action('Edit'),
+              },
+            ],
+          }}
+        >
+          <Icons.EllipsisOutlined />
+        </Dropdown>
+      </ListViewCard.Actions>
+    }
   />
 );

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

@@ -149,6 +149,8 @@ export { Progress, type ProgressProps } from './Progress';
 
 export { Skeleton, type SkeletonProps } from './Skeleton';
 
+export { Spin } from './Spin';
+
 export { Switch, type SwitchProps } from './Switch';
 
 export { TreeSelect, type TreeSelectProps } from './TreeSelect';
@@ -191,3 +193,9 @@ export {
   type CodeEditorTheme,
 } from './CodeEditor';
 export { ActionButton, type ActionProps } from './ActionButton';
+export { AIInfoBanner, type AIInfoBannerProps } from './AIInfoBanner';
+export {
+  AsyncProcessPanel,
+  type AsyncProcessPanelProps,
+  type ProcessStep,
+} from './AsyncProcessPanel';

superset-frontend/packages/superset-ui-demo/.storybook/main.js

@@ -15,24 +15,11 @@ module.exports = {
     ...config,
     module: {
       ...config.module,
-      rules: [
-        ...customConfig.module.rules,
-        // Fix for Storybook 8 ESM issue with react-dom/test-utils
-        {
-          test: /\.m?js$/,
-          resolve: {
-            fullySpecified: false,
-          },
-        },
-      ],
+      rules: customConfig.module.rules,
     },
     resolve: {
       ...config.resolve,
       ...customConfig.resolve,
-      alias: {
-        ...config.resolve?.alias,
-        ...customConfig.resolve?.alias,
-      },
     },
   }),
 

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

@@ -36,11 +36,11 @@
     "@emotion/styled": "^11.14.1",
     "@mihkeleidast/storybook-addon-source": "^1.0.1",
     "@react-icons/all-files": "^4.1.0",
-    "@storybook/addon-actions": "8.6.14",
-    "@storybook/addon-controls": "8.6.14",
-    "@storybook/addon-links": "8.6.14",
-    "@storybook/react": "8.6.14",
-    "@storybook/types": "8.6.14",
+    "@storybook/addon-actions": "9.0.8",
+    "@storybook/addon-controls": "8.1.11",
+    "@storybook/addon-links": "8.1.11",
+    "@storybook/react": "8.1.11",
+    "@storybook/types": "8.4.7",
     "@types/react-loadable": "^5.5.11",
     "core-js": "3.40.0",
     "gh-pages": "^6.3.0",
@@ -56,7 +56,7 @@
     "@babel/preset-env": "^7.28.5",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.23.3",
-    "@storybook/react-webpack5": "8.6.14",
+    "@storybook/react-webpack5": "8.2.9",
     "babel-loader": "^10.0.0",
     "fork-ts-checker-webpack-plugin": "^9.1.0",
     "ts-loader": "^9.5.2",

superset-frontend/packages/superset-ui-demo/storybook/stories/ExampleApp.stories.jsx

@@ -21,10 +21,11 @@ import {
   Menu,
   Button,
   Card,
+  Alert,
   Input,
+  Table,
   Space,
 } from '@superset-ui/core/components';
-import { Alert, Table } from 'antd';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { Icons } from '@superset-ui/core/components/Icons';
 

superset-frontend/playwright.config.ts

@@ -33,9 +33,6 @@ export default defineConfig({
     ? undefined
     : '**/experimental/**',
 
-  // Global setup - authenticate once before all tests
-  globalSetup: './playwright/global-setup.ts',
-
   // Timeout settings
   timeout: 30000,
   expect: { timeout: 8000 },
@@ -63,11 +60,7 @@ export default defineConfig({
   // Global test setup
   use: {
     // Use environment variable for base URL in CI, default to localhost:8088 for local
-    // Normalize to always end with '/' to prevent URL resolution issues with APP_PREFIX
-    baseURL: (() => {
-      const url = process.env.PLAYWRIGHT_BASE_URL || 'http://localhost:8088';
-      return url.endsWith('/') ? url : `${url}/`;
-    })(),
+    baseURL: process.env.PLAYWRIGHT_BASE_URL || 'http://localhost:8088',
 
     // Browser settings
     headless: !!process.env.CI,
@@ -84,32 +77,10 @@ export default defineConfig({
 
   projects: [
     {
-      // Default project - uses global authentication for speed
-      // E2E tests login once via global-setup.ts and reuse auth state
-      // Explicitly ignore auth tests (they run in chromium-unauth project)
-      // Also respect the global experimental testIgnore setting
       name: 'chromium',
-      testIgnore: [
-        '**/tests/auth/**/*.spec.ts',
-        ...(process.env.INCLUDE_EXPERIMENTAL ? [] : ['**/experimental/**']),
-      ],
       use: {
         browserName: 'chromium',
         testIdAttribute: 'data-test',
-        // Reuse authentication state from global setup (fast E2E tests)
-        storageState: 'playwright/.auth/user.json',
-      },
-    },
-    {
-      // Separate project for unauthenticated tests (login, signup, etc.)
-      // These tests use beforeEach for per-test navigation - no global auth
-      // This hybrid approach: simple auth tests, fast E2E tests
-      name: 'chromium-unauth',
-      testMatch: '**/tests/auth/**/*.spec.ts',
-      use: {
-        browserName: 'chromium',
-        testIdAttribute: 'data-test',
-        // No storageState = clean browser with no cached cookies
       },
     },
   ],

superset-frontend/playwright/components/core/Modal.ts

@@ -1,118 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { Locator, Page } from '@playwright/test';
-
-/**
- * Base Modal component for Ant Design modals.
- * Provides minimal primitives - extend this for specific modal types.
- * Add methods to this class only when multiple modal types need them (YAGNI).
- *
- * @example
- * class DeleteConfirmationModal extends Modal {
- *   async clickDelete(): Promise<void> {
- *     await this.footer.locator('button', { hasText: 'Delete' }).click();
- *   }
- * }
- */
-export class Modal {
-  protected readonly page: Page;
-  protected readonly modalSelector: string;
-
-  // Ant Design modal structure selectors (shared by all modal types)
-  protected static readonly BASE_SELECTORS = {
-    FOOTER: '.ant-modal-footer',
-    BODY: '.ant-modal-body',
-  };
-
-  constructor(page: Page, modalSelector = '[role="dialog"]') {
-    this.page = page;
-    this.modalSelector = modalSelector;
-  }
-
-  /**
-   * Gets the modal element locator
-   */
-  get element(): Locator {
-    return this.page.locator(this.modalSelector);
-  }
-
-  /**
-   * Gets the modal footer locator (contains action buttons)
-   */
-  get footer(): Locator {
-    return this.element.locator(Modal.BASE_SELECTORS.FOOTER);
-  }
-
-  /**
-   * Gets the modal body locator (contains content)
-   */
-  get body(): Locator {
-    return this.element.locator(Modal.BASE_SELECTORS.BODY);
-  }
-
-  /**
-   * Gets a footer button by text content (private helper)
-   * @param buttonText - The text content of the button
-   */
-  private getFooterButton(buttonText: string): Locator {
-    return this.footer.getByRole('button', { name: buttonText, exact: true });
-  }
-
-  /**
-   * Clicks a footer button by text content
-   * @param buttonText - The text content of the button to click
-   * @param options - Optional click options
-   */
-  protected async clickFooterButton(
-    buttonText: string,
-    options?: { timeout?: number; force?: boolean; delay?: number },
-  ): Promise<void> {
-    await this.getFooterButton(buttonText).click(options);
-  }
-
-  /**
-   * Waits for the modal to become visible
-   * @param options - Optional wait options
-   */
-  async waitForVisible(options?: { timeout?: number }): Promise<void> {
-    await this.element.waitFor({ state: 'visible', ...options });
-  }
-
-  /**
-   * Waits for the modal to be fully ready for interaction.
-   * This includes waiting for the modal dialog to be visible AND for React to finish
-   * rendering the modal content. Use this before interacting with modal elements
-   * to avoid race conditions with React state updates.
-   *
-   * @param options - Optional wait options
-   */
-  async waitForReady(options?: { timeout?: number }): Promise<void> {
-    await this.waitForVisible(options);
-    await this.body.waitFor({ state: 'visible', ...options });
-  }
-
-  /**
-   * Waits for the modal to be hidden
-   * @param options - Optional wait options
-   */
-  async waitForHidden(options?: { timeout?: number }): Promise<void> {
-    await this.element.waitFor({ state: 'hidden', ...options });
-  }
-}

superset-frontend/playwright/components/core/Table.ts

@@ -1,102 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { Locator, Page } from '@playwright/test';
-
-/**
- * Table component for Superset ListView tables.
- */
-export class Table {
-  private readonly page: Page;
-  private readonly tableSelector: string;
-
-  private static readonly SELECTORS = {
-    TABLE_ROW: '[data-test="table-row"]',
-  };
-
-  constructor(page: Page, tableSelector = '[data-test="listview-table"]') {
-    this.page = page;
-    this.tableSelector = tableSelector;
-  }
-
-  /**
-   * Gets the table element locator
-   */
-  get element(): Locator {
-    return this.page.locator(this.tableSelector);
-  }
-
-  /**
-   * Gets a table row by exact text match in the first cell (dataset name column).
-   * Uses exact match to avoid substring collisions (e.g., 'members_channels_2' vs 'duplicate_members_channels_2_123').
-   *
-   * Note: Returns a Locator that will auto-wait when used in assertions or actions.
-   * If row doesn't exist, operations on the locator will timeout with clear error.
-   *
-   * @param rowText - Exact text to find in the row's first cell
-   * @returns Locator for the matching row
-   */
-  getRow(rowText: string): Locator {
-    return this.element.locator(Table.SELECTORS.TABLE_ROW).filter({
-      has: this.page.getByRole('cell', { name: rowText, exact: true }),
-    });
-  }
-
-  /**
-   * Clicks a link within a specific row
-   * @param rowText - Text to identify the row
-   * @param linkSelector - Selector for the link within the row
-   */
-  async clickRowLink(rowText: string, linkSelector: string): Promise<void> {
-    const row = this.getRow(rowText);
-    await row.locator(linkSelector).click();
-  }
-
-  /**
-   * Waits for the table to be visible
-   * @param options - Optional wait options
-   */
-  async waitForVisible(options?: { timeout?: number }): Promise<void> {
-    await this.element.waitFor({ state: 'visible', ...options });
-  }
-
-  /**
-   * Clicks an action button in a row by selector
-   * @param rowText - Text to identify the row
-   * @param selector - CSS selector for the action element
-   */
-  async clickRowAction(rowText: string, selector: string): Promise<void> {
-    const row = this.getRow(rowText);
-    const actionButton = row.locator(selector);
-
-    const count = await actionButton.count();
-    if (count === 0) {
-      throw new Error(
-        `No action button found with selector "${selector}" in row "${rowText}"`,
-      );
-    }
-    if (count > 1) {
-      throw new Error(
-        `Multiple action buttons (${count}) found with selector "${selector}" in row "${rowText}". Use more specific selector.`,
-      );
-    }
-
-    await actionButton.click();
-  }
-}

superset-frontend/playwright/components/core/Toast.ts

@@ -1,105 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { Page, Locator } from '@playwright/test';
-
-export type ToastType = 'success' | 'danger' | 'warning' | 'info';
-
-const SELECTORS = {
-  CONTAINER: '[data-test="toast-container"][role="alert"]',
-  CONTENT: '.toast__content',
-  CLOSE_BUTTON: '[data-test="close-button"]',
-} as const;
-
-/**
- * Toast notification component
- * Handles success, danger, warning, and info toasts
- */
-export class Toast {
-  private page: Page;
-  private container: Locator;
-
-  constructor(page: Page) {
-    this.page = page;
-    this.container = page.locator(SELECTORS.CONTAINER);
-  }
-
-  /**
-   * Get the toast container locator
-   */
-  get(): Locator {
-    return this.container;
-  }
-
-  /**
-   * Get the toast message text
-   */
-  getMessage(): Locator {
-    return this.container.locator(SELECTORS.CONTENT);
-  }
-
-  /**
-   * Wait for a toast to appear
-   */
-  async waitForVisible(): Promise<void> {
-    await this.container.waitFor({ state: 'visible' });
-  }
-
-  /**
-   * Wait for toast to disappear
-   */
-  async waitForHidden(): Promise<void> {
-    await this.container.waitFor({ state: 'hidden' });
-  }
-
-  /**
-   * Get a success toast
-   */
-  getSuccess(): Locator {
-    return this.page.locator(`${SELECTORS.CONTAINER}.toast--success`);
-  }
-
-  /**
-   * Get a danger/error toast
-   */
-  getDanger(): Locator {
-    return this.page.locator(`${SELECTORS.CONTAINER}.toast--danger`);
-  }
-
-  /**
-   * Get a warning toast
-   */
-  getWarning(): Locator {
-    return this.page.locator(`${SELECTORS.CONTAINER}.toast--warning`);
-  }
-
-  /**
-   * Get an info toast
-   */
-  getInfo(): Locator {
-    return this.page.locator(`${SELECTORS.CONTAINER}.toast--info`);
-  }
-
-  /**
-   * Close the toast by clicking the close button
-   */
-  async close(): Promise<void> {
-    await this.container.locator(SELECTORS.CLOSE_BUTTON).click();
-  }
-}

superset-frontend/playwright/components/core/index.ts

@@ -21,5 +21,3 @@
 export { Button } from './Button';
 export { Form } from './Form';
 export { Input } from './Input';
-export { Modal } from './Modal';
-export { Table } from './Table';

superset-frontend/playwright/components/modals/DeleteConfirmationModal.ts

@@ -1,75 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { Modal, Input } from '../core';
-
-/**
- * Delete confirmation modal that requires typing "DELETE" to confirm.
- * Used throughout Superset for destructive delete operations.
- *
- * Provides primitives for tests to compose deletion flows.
- */
-export class DeleteConfirmationModal extends Modal {
-  private static readonly SELECTORS = {
-    CONFIRMATION_INPUT: 'input[type="text"]',
-  };
-
-  /**
-   * Gets the confirmation input component
-   */
-  private get confirmationInput(): Input {
-    return new Input(
-      this.page,
-      this.body.locator(DeleteConfirmationModal.SELECTORS.CONFIRMATION_INPUT),
-    );
-  }
-
-  /**
-   * Fills the confirmation input with the specified text.
-   *
-   * @param confirmationText - The text to type
-   * @param options - Optional fill options (timeout, force)
-   *
-   * @example
-   * const deleteModal = new DeleteConfirmationModal(page);
-   * await deleteModal.waitForVisible();
-   * await deleteModal.fillConfirmationInput('DELETE');
-   * await deleteModal.clickDelete();
-   * await deleteModal.waitForHidden();
-   */
-  async fillConfirmationInput(
-    confirmationText: string,
-    options?: { timeout?: number; force?: boolean },
-  ): Promise<void> {
-    await this.confirmationInput.fill(confirmationText, options);
-  }
-
-  /**
-   * Clicks the Delete button in the footer
-   *
-   * @param options - Optional click options (timeout, force, delay)
-   */
-  async clickDelete(options?: {
-    timeout?: number;
-    force?: boolean;
-    delay?: number;
-  }): Promise<void> {
-    await this.clickFooterButton('Delete', options);
-  }
-}

superset-frontend/playwright/components/modals/DuplicateDatasetModal.ts

@@ -1,73 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { Modal, Input } from '../core';
-
-/**
- * Duplicate dataset modal that requires entering a new dataset name.
- * Used for duplicating virtual datasets with custom SQL.
- */
-export class DuplicateDatasetModal extends Modal {
-  private static readonly SELECTORS = {
-    NAME_INPUT: '[data-test="duplicate-modal-input"]',
-  };
-
-  /**
-   * Gets the new dataset name input component
-   */
-  private get nameInput(): Input {
-    return new Input(
-      this.page,
-      this.body.locator(DuplicateDatasetModal.SELECTORS.NAME_INPUT),
-    );
-  }
-
-  /**
-   * Fills the new dataset name input
-   *
-   * @param datasetName - The new name for the duplicated dataset
-   * @param options - Optional fill options (timeout, force)
-   *
-   * @example
-   * const duplicateModal = new DuplicateDatasetModal(page);
-   * await duplicateModal.waitForVisible();
-   * await duplicateModal.fillDatasetName('my_dataset_copy');
-   * await duplicateModal.clickDuplicate();
-   * await duplicateModal.waitForHidden();
-   */
-  async fillDatasetName(
-    datasetName: string,
-    options?: { timeout?: number; force?: boolean },
-  ): Promise<void> {
-    await this.nameInput.fill(datasetName, options);
-  }
-
-  /**
-   * Clicks the Duplicate button in the footer
-   *
-   * @param options - Optional click options (timeout, force, delay)
-   */
-  async clickDuplicate(options?: {
-    timeout?: number;
-    force?: boolean;
-    delay?: number;
-  }): Promise<void> {
-    await this.clickFooterButton('Duplicate', options);
-  }
-}

superset-frontend/playwright/global-setup.ts

@@ -1,93 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import {
-  chromium,
-  FullConfig,
-  Browser,
-  BrowserContext,
-} from '@playwright/test';
-import { mkdir } from 'fs/promises';
-import { dirname } from 'path';
-import { AuthPage } from './pages/AuthPage';
-import { TIMEOUT } from './utils/constants';
-
-/**
- * Global setup function that runs once before all tests.
- * Authenticates as admin user and saves the authentication state
- * to be reused by tests in the 'chromium' project (E2E tests).
- *
- * Auth tests (chromium-unauth project) don't use this - they login
- * per-test via beforeEach for isolation and simplicity.
- */
-async function globalSetup(config: FullConfig) {
-  // Get baseURL with fallback to default
-  // FullConfig.use doesn't exist in the type - baseURL is only in projects[0].use
-  const baseURL = config.projects[0]?.use?.baseURL || 'http://localhost:8088';
-
-  // Test credentials - can be overridden via environment variables
-  const adminUsername = process.env.PLAYWRIGHT_ADMIN_USERNAME || 'admin';
-  const adminPassword = process.env.PLAYWRIGHT_ADMIN_PASSWORD || 'general';
-
-  console.log('[Global Setup] Authenticating as admin user...');
-
-  let browser: Browser | null = null;
-  let context: BrowserContext | null = null;
-
-  try {
-    // Launch browser
-    browser = await chromium.launch();
-  } catch (error) {
-    console.error('[Global Setup] Failed to launch browser:', error);
-    throw new Error('Browser launch failed - check Playwright installation');
-  }
-
-  try {
-    context = await browser.newContext({ baseURL });
-    const page = await context.newPage();
-
-    // Use AuthPage to handle login logic (DRY principle)
-    const authPage = new AuthPage(page);
-    await authPage.goto();
-    await authPage.waitForLoginForm();
-    await authPage.loginWithCredentials(adminUsername, adminPassword);
-    // Use longer timeout for global setup (cold CI starts may exceed PAGE_LOAD timeout)
-    await authPage.waitForLoginSuccess({ timeout: TIMEOUT.GLOBAL_SETUP });
-
-    // Save authentication state for all tests to reuse
-    const authStatePath = 'playwright/.auth/user.json';
-    await mkdir(dirname(authStatePath), { recursive: true });
-    await context.storageState({
-      path: authStatePath,
-    });
-
-    console.log(
-      '[Global Setup] Authentication successful - state saved to playwright/.auth/user.json',
-    );
-  } catch (error) {
-    console.error('[Global Setup] Authentication failed:', error);
-    throw error;
-  } finally {
-    // Ensure cleanup even if auth fails
-    if (context) await context.close();
-    if (browser) await browser.close();
-  }
-}
-
-export default globalSetup;

superset-frontend/playwright/helpers/api/database.ts

@@ -1,79 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { Page, APIResponse } from '@playwright/test';
-import { apiPost, apiDelete, ApiRequestOptions } from './requests';
-
-const ENDPOINTS = {
-  DATABASE: 'api/v1/database/',
-} as const;
-
-/**
- * TypeScript interface for database creation API payload
- * Provides compile-time safety for required fields
- */
-export interface DatabaseCreatePayload {
-  database_name: string;
-  engine: string;
-  configuration_method?: string;
-  engine_information?: {
-    disable_ssh_tunneling?: boolean;
-    supports_dynamic_catalog?: boolean;
-    supports_file_upload?: boolean;
-    supports_oauth2?: boolean;
-  };
-  driver?: string;
-  sqlalchemy_uri_placeholder?: string;
-  extra?: string;
-  expose_in_sqllab?: boolean;
-  catalog?: Array<{ name: string; value: string }>;
-  parameters?: {
-    service_account_info?: string;
-    catalog?: Record<string, string>;
-  };
-  masked_encrypted_extra?: string;
-  impersonate_user?: boolean;
-}
-
-/**
- * POST request to create a database connection
- * @param page - Playwright page instance (provides authentication context)
- * @param requestBody - Database configuration object with type safety
- * @returns API response from database creation
- */
-export async function apiPostDatabase(
-  page: Page,
-  requestBody: DatabaseCreatePayload,
-): Promise<APIResponse> {
-  return apiPost(page, ENDPOINTS.DATABASE, requestBody);
-}
-
-/**
- * DELETE request to remove a database connection
- * @param page - Playwright page instance (provides authentication context)
- * @param databaseId - ID of the database to delete
- * @returns API response from database deletion
- */
-export async function apiDeleteDatabase(
-  page: Page,
-  databaseId: number,
-  options?: ApiRequestOptions,
-): Promise<APIResponse> {
-  return apiDelete(page, `${ENDPOINTS.DATABASE}${databaseId}`, options);
-}

superset-frontend/playwright/helpers/api/dataset.ts

@@ -1,133 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { Page, APIResponse } from '@playwright/test';
-import rison from 'rison';
-import { apiGet, apiPost, apiDelete, ApiRequestOptions } from './requests';
-
-export const ENDPOINTS = {
-  DATASET: 'api/v1/dataset/',
-} as const;
-
-/**
- * TypeScript interface for dataset creation API payload
- * Provides compile-time safety for required fields
- */
-export interface DatasetCreatePayload {
-  database: number;
-  catalog: string | null;
-  schema: string;
-  table_name: string;
-}
-
-/**
- * TypeScript interface for dataset API response
- * Represents the shape of dataset data returned from the API
- */
-export interface DatasetResult {
-  id: number;
-  table_name: string;
-  sql?: string;
-  schema?: string;
-  database: {
-    id: number;
-    database_name: string;
-  };
-  owners?: Array<{ id: number }>;
-  dataset_type?: 'physical' | 'virtual';
-}
-
-/**
- * POST request to create a dataset
- * @param page - Playwright page instance (provides authentication context)
- * @param requestBody - Dataset configuration object (database, schema, table_name)
- * @returns API response from dataset creation
- */
-export async function apiPostDataset(
-  page: Page,
-  requestBody: DatasetCreatePayload,
-): Promise<APIResponse> {
-  return apiPost(page, ENDPOINTS.DATASET, requestBody);
-}
-
-/**
- * Get a dataset by its table name
- * @param page - Playwright page instance (provides authentication context)
- * @param tableName - The table_name to search for
- * @returns Dataset object if found, null if not found
- */
-export async function getDatasetByName(
-  page: Page,
-  tableName: string,
-): Promise<DatasetResult | null> {
-  // Use Superset's filter API to search by table_name
-  const filter = {
-    filters: [
-      {
-        col: 'table_name',
-        opr: 'eq',
-        value: tableName,
-      },
-    ],
-  };
-  const queryParam = rison.encode(filter);
-  // Use failOnStatusCode: false so we return null instead of throwing on errors
-  const response = await apiGet(page, `${ENDPOINTS.DATASET}?q=${queryParam}`, {
-    failOnStatusCode: false,
-  });
-
-  if (!response.ok()) {
-    return null;
-  }
-
-  const body = await response.json();
-  if (body.result && body.result.length > 0) {
-    return body.result[0] as DatasetResult;
-  }
-
-  return null;
-}
-
-/**
- * GET request to fetch a dataset's details
- * @param page - Playwright page instance (provides authentication context)
- * @param datasetId - ID of the dataset to fetch
- * @returns API response with dataset details
- */
-export async function apiGetDataset(
-  page: Page,
-  datasetId: number,
-  options?: ApiRequestOptions,
-): Promise<APIResponse> {
-  return apiGet(page, `${ENDPOINTS.DATASET}${datasetId}`, options);
-}
-
-/**
- * DELETE request to remove a dataset
- * @param page - Playwright page instance (provides authentication context)
- * @param datasetId - ID of the dataset to delete
- * @returns API response from dataset deletion
- */
-export async function apiDeleteDataset(
-  page: Page,
-  datasetId: number,
-  options?: ApiRequestOptions,
-): Promise<APIResponse> {
-  return apiDelete(page, `${ENDPOINTS.DATASET}${datasetId}`, options);
-}

superset-frontend/playwright/helpers/api/requests.ts

@@ -1,193 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { Page, APIResponse } from '@playwright/test';
-
-export interface ApiRequestOptions {
-  headers?: Record<string, string>;
-  params?: Record<string, string>;
-  failOnStatusCode?: boolean;
-  allowMissingCsrf?: boolean;
-}
-
-/**
- * Get base URL for Referer header
- * Reads from environment variable configured in playwright.config.ts
- * Preserves full base URL including path prefix (e.g., /app/prefix/)
- * Normalizes to always end with '/' for consistent URL resolution
- */
-function getBaseUrl(): string {
-  // Use environment variable which includes path prefix if configured
-  // Normalize to always end with '/' (matches playwright.config.ts normalization)
-  const url = process.env.PLAYWRIGHT_BASE_URL || 'http://localhost:8088';
-  return url.endsWith('/') ? url : `${url}/`;
-}
-
-interface CsrfResult {
-  token: string;
-  error?: string;
-}
-
-/**
- * Get CSRF token from the API endpoint
- * Superset provides a CSRF token via api/v1/security/csrf_token/
- * The session cookie is automatically included by page.request
- */
-async function getCsrfToken(page: Page): Promise<CsrfResult> {
-  try {
-    const response = await page.request.get('api/v1/security/csrf_token/', {
-      failOnStatusCode: false,
-    });
-
-    if (!response.ok()) {
-      return {
-        token: '',
-        error: `HTTP ${response.status()} ${response.statusText()}`,
-      };
-    }
-
-    const json = await response.json();
-    return { token: json.result || '' };
-  } catch (error) {
-    return { token: '', error: String(error) };
-  }
-}
-
-/**
- * Build headers for mutation requests (POST, PUT, PATCH, DELETE)
- * Includes CSRF token and Referer for Flask-WTF CSRFProtect
- */
-async function buildHeaders(
-  page: Page,
-  options?: ApiRequestOptions,
-): Promise<Record<string, string>> {
-  const { token: csrfToken, error: csrfError } = await getCsrfToken(page);
-  const headers: Record<string, string> = {
-    'Content-Type': 'application/json',
-    ...options?.headers,
-  };
-
-  // Include CSRF token and Referer for Flask-WTF CSRFProtect
-  if (csrfToken) {
-    headers['X-CSRFToken'] = csrfToken;
-    headers['Referer'] = getBaseUrl();
-  } else if (!options?.allowMissingCsrf) {
-    const errorDetail = csrfError ? ` (${csrfError})` : '';
-    throw new Error(
-      `Missing CSRF token${errorDetail} - mutation requests require authentication. ` +
-        'Ensure global authentication completed or test has valid session.',
-    );
-  }
-
-  return headers;
-}
-
-/**
- * Send a GET request
- * Uses page.request to automatically include browser authentication
- */
-export async function apiGet(
-  page: Page,
-  url: string,
-  options?: ApiRequestOptions,
-): Promise<APIResponse> {
-  return page.request.get(url, {
-    headers: options?.headers,
-    params: options?.params,
-    failOnStatusCode: options?.failOnStatusCode ?? true,
-  });
-}
-
-/**
- * Send a POST request
- * Uses page.request to automatically include browser authentication
- */
-export async function apiPost(
-  page: Page,
-  url: string,
-  data?: unknown,
-  options?: ApiRequestOptions,
-): Promise<APIResponse> {
-  const headers = await buildHeaders(page, options);
-
-  return page.request.post(url, {
-    data,
-    headers,
-    params: options?.params,
-    failOnStatusCode: options?.failOnStatusCode ?? true,
-  });
-}
-
-/**
- * Send a PUT request
- * Uses page.request to automatically include browser authentication
- */
-export async function apiPut(
-  page: Page,
-  url: string,
-  data?: unknown,
-  options?: ApiRequestOptions,
-): Promise<APIResponse> {
-  const headers = await buildHeaders(page, options);
-
-  return page.request.put(url, {
-    data,
-    headers,
-    params: options?.params,
-    failOnStatusCode: options?.failOnStatusCode ?? true,
-  });
-}
-
-/**
- * Send a PATCH request
- * Uses page.request to automatically include browser authentication
- */
-export async function apiPatch(
-  page: Page,
-  url: string,
-  data?: unknown,
-  options?: ApiRequestOptions,
-): Promise<APIResponse> {
-  const headers = await buildHeaders(page, options);
-
-  return page.request.patch(url, {
-    data,
-    headers,
-    params: options?.params,
-    failOnStatusCode: options?.failOnStatusCode ?? true,
-  });
-}
-
-/**
- * Send a DELETE request
- * Uses page.request to automatically include browser authentication
- */
-export async function apiDelete(
-  page: Page,
-  url: string,
-  options?: ApiRequestOptions,
-): Promise<APIResponse> {
-  const headers = await buildHeaders(page, options);
-
-  return page.request.delete(url, {
-    headers,
-    params: options?.params,
-    failOnStatusCode: options?.failOnStatusCode ?? true,
-  });
-}

superset-frontend/playwright/pages/AuthPage.ts

@@ -17,10 +17,9 @@
  * under the License.
  */
 
-import { Page, Response, Cookie } from '@playwright/test';
+import { Page, Response } from '@playwright/test';
 import { Form } from '../components/core';
 import { URL } from '../utils/urls';
-import { TIMEOUT } from '../utils/constants';
 
 export class AuthPage {
   private readonly page: Page;
@@ -57,7 +56,7 @@ export class AuthPage {
    * Wait for login form to be visible
    */
   async waitForLoginForm(): Promise<void> {
-    await this.loginForm.waitForVisible({ timeout: TIMEOUT.FORM_LOAD });
+    await this.loginForm.waitForVisible({ timeout: 5000 });
   }
 
   /**
@@ -84,67 +83,6 @@ export class AuthPage {
     await loginButton.click();
   }
 
-  /**
-   * Wait for successful login by verifying the login response and session cookie.
-   * Call this after loginWithCredentials to ensure authentication completed.
-   *
-   * This does NOT assume a specific landing page (which is configurable).
-   * Instead it:
-   * 1. Checks if session cookie already exists (guards against race condition)
-   * 2. Waits for POST /login/ response with redirect status
-   * 3. Polls for session cookie to appear
-   *
-   * @param options - Optional wait options
-   */
-  async waitForLoginSuccess(options?: { timeout?: number }): Promise<void> {
-    const timeout = options?.timeout ?? TIMEOUT.PAGE_LOAD;
-    const startTime = Date.now();
-
-    // 1. Guard: Check if session cookie already exists (race condition protection)
-    const existingCookie = await this.getSessionCookie();
-    if (existingCookie?.value) {
-      // Already authenticated - login completed before we started waiting
-      return;
-    }
-
-    // 2. Wait for POST /login/ response (bounded by caller's timeout)
-    const loginResponse = await this.page.waitForResponse(
-      response =>
-        response.url().includes('/login/') &&
-        response.request().method() === 'POST',
-      { timeout },
-    );
-
-    // 3. Verify it's a redirect (3xx status code indicates successful login)
-    const status = loginResponse.status();
-    if (status < 300 || status >= 400) {
-      throw new Error(`Login failed: expected redirect (3xx), got ${status}`);
-    }
-
-    // 4. Poll for session cookie to appear (HttpOnly cookie, not accessible via document.cookie)
-    // Use page.context().cookies() since session cookie is HttpOnly
-    const pollInterval = 500; // 500ms instead of 100ms for less chattiness
-    while (true) {
-      const remaining = timeout - (Date.now() - startTime);
-      if (remaining <= 0) {
-        break; // Timeout exceeded
-      }
-
-      const sessionCookie = await this.getSessionCookie();
-      if (sessionCookie && sessionCookie.value) {
-        // Success - session cookie has landed
-        return;
-      }
-
-      await this.page.waitForTimeout(Math.min(pollInterval, remaining));
-    }
-
-    const currentUrl = await this.page.url();
-    throw new Error(
-      `Login timeout: session cookie did not appear within ${timeout}ms. Current URL: ${currentUrl}`,
-    );
-  }
-
   /**
    * Get current page URL
    */
@@ -155,9 +93,9 @@ export class AuthPage {
   /**
    * Get the session cookie specifically
    */
-  async getSessionCookie(): Promise<Cookie | null> {
+  async getSessionCookie(): Promise<{ name: string; value: string } | null> {
     const cookies = await this.page.context().cookies();
-    return cookies.find(c => c.name === 'session') || null;
+    return cookies.find((c: any) => c.name === 'session') || null;
   }
 
   /**
@@ -168,7 +106,7 @@ export class AuthPage {
       selector => this.page.locator(selector).isVisible(),
     );
     const visibilityResults = await Promise.all(visibilityPromises);
-    return visibilityResults.some(isVisible => isVisible);
+    return visibilityResults.some((isVisible: any) => isVisible);
   }
 
   /**
@@ -176,7 +114,7 @@ export class AuthPage {
    */
   async waitForLoginRequest(): Promise<Response> {
     return this.page.waitForResponse(
-      response =>
+      (response: any) =>
         response.url().includes('/login/') &&
         response.request().method() === 'POST',
     );

superset-frontend/playwright/pages/DatasetListPage.ts

@@ -1,115 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { Page, Locator } from '@playwright/test';
-import { Table } from '../components/core';
-import { URL } from '../utils/urls';
-
-/**
- * Dataset List Page object.
- */
-export class DatasetListPage {
-  private readonly page: Page;
-  private readonly table: Table;
-
-  private static readonly SELECTORS = {
-    DATASET_LINK: '[data-test="internal-link"]',
-    DELETE_ACTION: '.action-button svg[data-icon="delete"]',
-    EXPORT_ACTION: '.action-button svg[data-icon="upload"]',
-    DUPLICATE_ACTION: '.action-button svg[data-icon="copy"]',
-  } as const;
-
-  constructor(page: Page) {
-    this.page = page;
-    this.table = new Table(page);
-  }
-
-  /**
-   * Navigate to the dataset list page
-   */
-  async goto(): Promise<void> {
-    await this.page.goto(URL.DATASET_LIST);
-  }
-
-  /**
-   * Wait for the table to load
-   * @param options - Optional wait options
-   */
-  async waitForTableLoad(options?: { timeout?: number }): Promise<void> {
-    await this.table.waitForVisible(options);
-  }
-
-  /**
-   * Gets a dataset row locator by name.
-   * Returns a Locator that tests can use with expect().toBeVisible(), etc.
-   *
-   * @param datasetName - The name of the dataset
-   * @returns Locator for the dataset row
-   *
-   * @example
-   * await expect(datasetListPage.getDatasetRow('birth_names')).toBeVisible();
-   */
-  getDatasetRow(datasetName: string): Locator {
-    return this.table.getRow(datasetName);
-  }
-
-  /**
-   * Clicks on a dataset name to navigate to Explore
-   * @param datasetName - The name of the dataset to click
-   */
-  async clickDatasetName(datasetName: string): Promise<void> {
-    await this.table.clickRowLink(
-      datasetName,
-      DatasetListPage.SELECTORS.DATASET_LINK,
-    );
-  }
-
-  /**
-   * Clicks the delete action button for a dataset
-   * @param datasetName - The name of the dataset to delete
-   */
-  async clickDeleteAction(datasetName: string): Promise<void> {
-    await this.table.clickRowAction(
-      datasetName,
-      DatasetListPage.SELECTORS.DELETE_ACTION,
-    );
-  }
-
-  /**
-   * Clicks the export action button for a dataset
-   * @param datasetName - The name of the dataset to export
-   */
-  async clickExportAction(datasetName: string): Promise<void> {
-    await this.table.clickRowAction(
-      datasetName,
-      DatasetListPage.SELECTORS.EXPORT_ACTION,
-    );
-  }
-
-  /**
-   * Clicks the duplicate action button for a dataset (virtual datasets only)
-   * @param datasetName - The name of the dataset to duplicate
-   */
-  async clickDuplicateAction(datasetName: string): Promise<void> {
-    await this.table.clickRowAction(
-      datasetName,
-      DatasetListPage.SELECTORS.DUPLICATE_ACTION,
-    );
-  }
-}

superset-frontend/playwright/pages/ExplorePage.ts

@@ -1,88 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { Page, Locator } from '@playwright/test';
-import { TIMEOUT } from '../utils/constants';
-
-/**
- * Explore Page object
- */
-export class ExplorePage {
-  private readonly page: Page;
-
-  private static readonly SELECTORS = {
-    DATASOURCE_CONTROL: '[data-test="datasource-control"]',
-    VIZ_SWITCHER: '[data-test="fast-viz-switcher"]',
-  } as const;
-
-  constructor(page: Page) {
-    this.page = page;
-  }
-
-  /**
-   * Waits for the Explore page to load.
-   * Validates URL contains /explore/ and datasource control is visible.
-   *
-   * @param options - Optional wait options
-   */
-  async waitForPageLoad(options?: { timeout?: number }): Promise<void> {
-    const timeout = options?.timeout ?? TIMEOUT.PAGE_LOAD;
-
-    await this.page.waitForURL('**/explore/**', { timeout });
-
-    await this.page.waitForSelector(ExplorePage.SELECTORS.DATASOURCE_CONTROL, {
-      state: 'visible',
-      timeout,
-    });
-  }
-
-  /**
-   * Gets the datasource control locator.
-   * Returns a Locator that tests can use with expect() or to read text.
-   *
-   * @returns Locator for the datasource control
-   *
-   * @example
-   * const name = await explorePage.getDatasourceControl().textContent();
-   */
-  getDatasourceControl(): Locator {
-    return this.page.locator(ExplorePage.SELECTORS.DATASOURCE_CONTROL);
-  }
-
-  /**
-   * Gets the currently selected dataset name from the datasource control
-   */
-  async getDatasetName(): Promise<string> {
-    const text = await this.getDatasourceControl().textContent();
-    return text?.trim() || '';
-  }
-
-  /**
-   * Gets the visualization switcher locator.
-   * Returns a Locator that tests can use with expect().toBeVisible(), etc.
-   *
-   * @returns Locator for the viz switcher
-   *
-   * @example
-   * await expect(explorePage.getVizSwitcher()).toBeVisible();
-   */
-  getVizSwitcher(): Locator {
-    return this.page.locator(ExplorePage.SELECTORS.VIZ_SWITCHER);
-  }
-}

superset-frontend/playwright/tests/auth/login.spec.ts

@@ -20,74 +20,69 @@
 import { test, expect } from '@playwright/test';
 import { AuthPage } from '../../pages/AuthPage';
 import { URL } from '../../utils/urls';
-import { TIMEOUT } from '../../utils/constants';
 
-// Test credentials - can be overridden via environment variables
-const adminUsername = process.env.PLAYWRIGHT_ADMIN_USERNAME || 'admin';
-const adminPassword = process.env.PLAYWRIGHT_ADMIN_PASSWORD || 'general';
+test.describe('Login view', () => {
+  let authPage: AuthPage;
 
-/**
- * Auth/login tests use per-test navigation via beforeEach.
- * Each test starts fresh on the login page without global authentication.
- * This follows the Cypress pattern for auth testing - simple and isolated.
- */
-
-let authPage: AuthPage;
-
-test.beforeEach(async ({ page }) => {
-  // Navigate to login page before each test (ensures clean state)
-  authPage = new AuthPage(page);
-  await authPage.goto();
-  await authPage.waitForLoginForm();
-});
-
-test('should redirect to login with incorrect username and password', async ({
-  page,
-}) => {
-  // Setup request interception before login attempt
-  const loginRequestPromise = authPage.waitForLoginRequest();
-
-  // Attempt login with incorrect credentials (both username and password invalid)
-  await authPage.loginWithCredentials('wronguser', 'wrongpassword');
-
-  // Wait for login request and verify response
-  const loginResponse = await loginRequestPromise;
-  // Failed login returns 401 Unauthorized or 302 redirect to login
-  expect([401, 302]).toContain(loginResponse.status());
-
-  // Wait for redirect to complete before checking URL
-  await page.waitForURL(url => url.pathname.endsWith(URL.LOGIN), {
-    timeout: TIMEOUT.PAGE_LOAD,
+  test.beforeEach(async ({ page }: any) => {
+    authPage = new AuthPage(page);
+    await authPage.goto();
+    await authPage.waitForLoginForm();
   });
 
-  // Verify we stay on login page
-  const currentUrl = await authPage.getCurrentUrl();
-  expect(currentUrl).toContain(URL.LOGIN);
+  test('should redirect to login with incorrect username and password', async ({
+    page,
+  }: any) => {
+    // Setup request interception before login attempt
+    const loginRequestPromise = authPage.waitForLoginRequest();
 
-  // Verify error message is shown
-  const hasError = await authPage.hasLoginError();
-  expect(hasError).toBe(true);
-});
+    // Attempt login with incorrect credentials
+    await authPage.loginWithCredentials('admin', 'wrongpassword');
 
-test('should login with correct username and password', async ({ page }) => {
-  // Setup request interception before login attempt
-  const loginRequestPromise = authPage.waitForLoginRequest();
+    // Wait for login request and verify response
+    const loginResponse = await loginRequestPromise;
+    // Failed login returns 401 Unauthorized or 302 redirect to login
+    expect([401, 302]).toContain(loginResponse.status());
 
-  // Login with correct credentials
-  await authPage.loginWithCredentials(adminUsername, adminPassword);
+    // Wait for redirect to complete before checking URL
+    await page.waitForURL((url: any) => url.pathname.endsWith('login/'), {
+      timeout: 10000,
+    });
 
-  // Wait for login request and verify response
-  const loginResponse = await loginRequestPromise;
-  // Successful login returns 302 redirect
-  expect(loginResponse.status()).toBe(302);
+    // Verify we stay on login page
+    const currentUrl = await authPage.getCurrentUrl();
+    expect(currentUrl).toContain(URL.LOGIN);
 
-  // Wait for successful redirect to welcome page
-  await page.waitForURL(url => url.pathname.endsWith(URL.WELCOME), {
-    timeout: TIMEOUT.PAGE_LOAD,
+    // Verify error message is shown
+    const hasError = await authPage.hasLoginError();
+    expect(hasError).toBe(true);
   });
 
-  // Verify specific session cookie exists
-  const sessionCookie = await authPage.getSessionCookie();
-  expect(sessionCookie).not.toBeNull();
-  expect(sessionCookie?.value).toBeTruthy();
+  test('should login with correct username and password', async ({
+    page,
+  }: any) => {
+    // Setup request interception before login attempt
+    const loginRequestPromise = authPage.waitForLoginRequest();
+
+    // Login with correct credentials
+    await authPage.loginWithCredentials('admin', 'general');
+
+    // Wait for login request and verify response
+    const loginResponse = await loginRequestPromise;
+    // Successful login returns 302 redirect
+    expect(loginResponse.status()).toBe(302);
+
+    // Wait for successful redirect to welcome page
+    await page.waitForURL(
+      (url: any) => url.pathname.endsWith('superset/welcome/'),
+      {
+        timeout: 10000,
+      },
+    );
+
+    // Verify specific session cookie exists
+    const sessionCookie = await authPage.getSessionCookie();
+    expect(sessionCookie).not.toBeNull();
+    expect(sessionCookie?.value).toBeTruthy();
+  });
 });

superset-frontend/playwright/tests/experimental/README.md

@@ -19,98 +19,52 @@ under the License.
 
 # Experimental Playwright Tests
 
+This directory contains Playwright tests that are still under development or validation.
+
 ## Purpose
 
-This directory contains **experimental** Playwright E2E tests that are being developed and stabilized before becoming part of the required test suite.
+Tests in this directory run in "shadow mode" with `continue-on-error: true` in CI:
+- Failures do NOT block PR merges
+- Allows tests to run in CI to validate stability before promotion
+- Provides visibility into test reliability over time
 
-## How Experimental Tests Work
+## Promoting Tests to Stable
 
-### Running Tests
+Once a test has proven stable (no false positives/negatives over sufficient time):
 
-**By default (CI and local), experimental tests are EXCLUDED:**
-```bash
-npm run playwright:test
-# Only runs stable tests (tests/auth/*)
-```
-
-**To include experimental tests, set the environment variable:**
-```bash
-INCLUDE_EXPERIMENTAL=true npm run playwright:test
-# Runs all tests including experimental/
-```
-
-### CI Behavior
-
-- **Required CI jobs**: Experimental tests are excluded by default
-  - Tests in `experimental/` do NOT block merges
-  - Failures in `experimental/` do NOT fail the build
-
-- **Experimental CI jobs** (optional): Use `TEST_PATH=experimental/`
-  - Set `INCLUDE_EXPERIMENTAL=true` in the job environment to include experimental tests
-  - These jobs can use `continue-on-error: true` for shadow mode
-
-### Configuration
-
-The experimental pattern is configured in `playwright.config.ts`:
-
-```typescript
-testIgnore: process.env.INCLUDE_EXPERIMENTAL
-  ? undefined
-  : '**/experimental/**',
-```
-
-This ensures:
-- Without `INCLUDE_EXPERIMENTAL`: Tests in `experimental/` are ignored
-- With `INCLUDE_EXPERIMENTAL=true`: All tests run, including experimental
-
-## When to Use Experimental
-
-Add tests to `experimental/` when:
-
-1. **Testing new infrastructure** - New page objects, components, or patterns that need real-world validation
-2. **Flaky tests** - Tests that pass locally but have intermittent CI failures that need investigation
-3. **New test types** - E2E tests for new features that need to prove stability before becoming required
-4. **Prototyping** - Experimental approaches that may or may not become standard patterns
-
-## Moving Tests to Stable
-
-Once an experimental test has proven stable (consistent CI passes over time):
-
-1. **Move the test file** from `experimental/` to the appropriate stable directory:
+1. Move the test file out of `experimental/` to the appropriate feature directory:
    ```bash
-   git mv tests/experimental/dataset/my-test.spec.ts tests/dataset/my-test.spec.ts
+   # From the repository root:
+   git mv superset-frontend/playwright/tests/experimental/dashboard/test.spec.ts \
+          superset-frontend/playwright/tests/dashboard/
+
+   # Or from the superset-frontend/ directory:
+   git mv playwright/tests/experimental/dashboard/test.spec.ts \
+          playwright/tests/dashboard/
    ```
 
-2. **Commit the move** with a clear message:
-   ```bash
-   git commit -m "test(playwright): promote my-test from experimental to stable"
-   ```
+2. The test will automatically become required for merge
 
-3. **Test will now be required** - It will run by default and block merges on failure
+## Test Organization
 
-## Current Experimental Tests
+Organize tests by feature area:
+- `auth/` - Authentication and authorization tests
+- `dashboard/` - Dashboard functionality tests
+- `explore/` - Chart builder tests
+- `sqllab/` - SQL Lab tests
+- etc.
 
-### Dataset Tests
+## Running Tests
 
-- **`dataset/dataset-list.spec.ts`** - Dataset list E2E tests
-  - Status: Infrastructure complete, validating stability
-  - Includes: Delete dataset test with API-based test data
-  - Supporting infrastructure: API helpers, Modal components, page objects
+```bash
+# Run all experimental tests (requires INCLUDE_EXPERIMENTAL env var)
+INCLUDE_EXPERIMENTAL=true npm run playwright:test -- experimental/
 
-## Infrastructure Location
+# Run specific experimental test
+INCLUDE_EXPERIMENTAL=true npm run playwright:test -- experimental/dashboard/test.spec.ts
 
-**Important**: Supporting infrastructure (components, page objects, API helpers) should live in **stable locations**, NOT under `experimental/`:
+# Run in UI mode for debugging
+INCLUDE_EXPERIMENTAL=true npm run playwright:ui -- experimental/
+```
 
-✅ **Correct locations:**
-- `playwright/components/` - Components used by any tests
-- `playwright/pages/` - Page objects for any features
-- `playwright/helpers/api/` - API helpers for test data setup
-
-❌ **Avoid:**
-- `playwright/tests/experimental/components/` - Makes it hard to share infrastructure
-
-This keeps infrastructure reusable and avoids duplication when tests graduate from experimental to stable.
-
-## Questions?
-
-See [Superset Testing Documentation](https://superset.apache.org/docs/contributing/development#testing) or ask in the `#testing` Slack channel.
+**Note**: The `INCLUDE_EXPERIMENTAL=true` environment variable is required because experimental tests are filtered out by default in `playwright.config.ts`. Without it, Playwright will report "No tests found".

superset-frontend/playwright/tests/experimental/dataset/dataset-list.spec.ts

@@ -1,254 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { test, expect } from '@playwright/test';
-import { DatasetListPage } from '../../../pages/DatasetListPage';
-import { ExplorePage } from '../../../pages/ExplorePage';
-import { DeleteConfirmationModal } from '../../../components/modals/DeleteConfirmationModal';
-import { DuplicateDatasetModal } from '../../../components/modals/DuplicateDatasetModal';
-import { Toast } from '../../../components/core/Toast';
-import {
-  apiDeleteDataset,
-  apiGetDataset,
-  getDatasetByName,
-  ENDPOINTS,
-} from '../../../helpers/api/dataset';
-
-/**
- * Test data constants
- * These reference example datasets loaded via --load-examples in CI.
- *
- * DEPENDENCY: Tests assume the example dataset exists and is a virtual dataset.
- * If examples aren't loaded or the dataset changes, tests will fail.
- * This is acceptable for experimental tests; stable tests should use dedicated
- * seeded test data to decouple from example data changes.
- */
-const TEST_DATASETS = {
-  EXAMPLE_DATASET: 'members_channels_2',
-} as const;
-
-/**
- * Dataset List E2E Tests
- *
- * Uses flat test() structure per project convention (matches login.spec.ts).
- * Shared state and hooks are at file scope.
- */
-
-// File-scope state (reset in beforeEach)
-let datasetListPage: DatasetListPage;
-let explorePage: ExplorePage;
-let testResources: { datasetIds: number[] } = { datasetIds: [] };
-
-test.beforeEach(async ({ page }) => {
-  datasetListPage = new DatasetListPage(page);
-  explorePage = new ExplorePage(page);
-  testResources = { datasetIds: [] }; // Reset for each test
-
-  // Navigate to dataset list page
-  await datasetListPage.goto();
-  await datasetListPage.waitForTableLoad();
-});
-
-test.afterEach(async ({ page }) => {
-  // Cleanup any resources created during the test
-  const promises = [];
-  for (const datasetId of testResources.datasetIds) {
-    promises.push(
-      apiDeleteDataset(page, datasetId, {
-        failOnStatusCode: false,
-      }).catch(error => {
-        // Log cleanup failures to avoid silent resource leaks
-        console.warn(
-          `[Cleanup] Failed to delete dataset ${datasetId}:`,
-          String(error),
-        );
-      }),
-    );
-  }
-  await Promise.all(promises);
-});
-
-test('should navigate to Explore when dataset name is clicked', async ({
-  page,
-}) => {
-  // Use existing example dataset (hermetic - loaded in CI via --load-examples)
-  const datasetName = TEST_DATASETS.EXAMPLE_DATASET;
-  const dataset = await getDatasetByName(page, datasetName);
-  expect(dataset).not.toBeNull();
-
-  // Verify dataset is visible in list (uses page object + Playwright auto-wait)
-  await expect(datasetListPage.getDatasetRow(datasetName)).toBeVisible();
-
-  // Click on dataset name to navigate to Explore
-  await datasetListPage.clickDatasetName(datasetName);
-
-  // Wait for Explore page to load (validates URL + datasource control)
-  await explorePage.waitForPageLoad();
-
-  // Verify correct dataset is loaded in datasource control
-  const loadedDatasetName = await explorePage.getDatasetName();
-  expect(loadedDatasetName).toContain(datasetName);
-
-  // Verify visualization switcher shows default viz type (indicates full page load)
-  await expect(explorePage.getVizSwitcher()).toBeVisible();
-  await expect(explorePage.getVizSwitcher()).toContainText('Table');
-});
-
-test('should delete a dataset with confirmation', async ({ page }) => {
-  // Get example dataset to duplicate
-  const originalName = TEST_DATASETS.EXAMPLE_DATASET;
-  const originalDataset = await getDatasetByName(page, originalName);
-  expect(originalDataset).not.toBeNull();
-
-  // Create throwaway copy for deletion (hermetic - uses UI duplication)
-  const datasetName = `test_delete_${Date.now()}`;
-
-  // Verify original dataset is visible in list
-  await expect(datasetListPage.getDatasetRow(originalName)).toBeVisible();
-
-  // Set up response intercept to capture duplicate dataset ID
-  const duplicateResponsePromise = page.waitForResponse(
-    response =>
-      response.url().includes(`${ENDPOINTS.DATASET}duplicate`) &&
-      response.status() === 201,
-  );
-
-  // Click duplicate action button
-  await datasetListPage.clickDuplicateAction(originalName);
-
-  // Duplicate modal should appear and be ready for interaction
-  const duplicateModal = new DuplicateDatasetModal(page);
-  await duplicateModal.waitForReady();
-
-  // Fill in new dataset name
-  await duplicateModal.fillDatasetName(datasetName);
-
-  // Click the Duplicate button
-  await duplicateModal.clickDuplicate();
-
-  // Get the duplicate dataset ID from response and track immediately
-  const duplicateResponse = await duplicateResponsePromise;
-  const duplicateData = await duplicateResponse.json();
-  const duplicateId = duplicateData.id;
-
-  // Track duplicate for cleanup immediately (before any operations that could fail)
-  testResources = { datasetIds: [duplicateId] };
-
-  // Modal should close
-  await duplicateModal.waitForHidden();
-
-  // Refresh page to see new dataset
-  await datasetListPage.goto();
-  await datasetListPage.waitForTableLoad();
-
-  // Verify dataset is visible in list
-  await expect(datasetListPage.getDatasetRow(datasetName)).toBeVisible();
-
-  // Click delete action button
-  await datasetListPage.clickDeleteAction(datasetName);
-
-  // Delete confirmation modal should appear
-  const deleteModal = new DeleteConfirmationModal(page);
-  await deleteModal.waitForVisible();
-
-  // Type "DELETE" to confirm
-  await deleteModal.fillConfirmationInput('DELETE');
-
-  // Click the Delete button
-  await deleteModal.clickDelete();
-
-  // Modal should close
-  await deleteModal.waitForHidden();
-
-  // Verify success toast appears with correct message
-  const toast = new Toast(page);
-  const successToast = toast.getSuccess();
-  await expect(successToast).toBeVisible();
-  await expect(toast.getMessage()).toContainText('Deleted');
-
-  // Verify dataset is removed from list
-  await expect(datasetListPage.getDatasetRow(datasetName)).not.toBeVisible();
-});
-
-test('should duplicate a dataset with new name', async ({ page }) => {
-  // Use virtual example dataset
-  const originalName = TEST_DATASETS.EXAMPLE_DATASET;
-  const duplicateName = `duplicate_${originalName}_${Date.now()}`;
-
-  // Get the dataset by name (ID varies by environment)
-  const original = await getDatasetByName(page, originalName);
-  expect(original).not.toBeNull();
-  expect(original!.id).toBeGreaterThan(0);
-
-  // Verify original dataset is visible in list
-  await expect(datasetListPage.getDatasetRow(originalName)).toBeVisible();
-
-  // Set up response intercept to capture duplicate dataset ID
-  const duplicateResponsePromise = page.waitForResponse(
-    response =>
-      response.url().includes(`${ENDPOINTS.DATASET}duplicate`) &&
-      response.status() === 201,
-  );
-
-  // Click duplicate action button
-  await datasetListPage.clickDuplicateAction(originalName);
-
-  // Duplicate modal should appear and be ready for interaction
-  const duplicateModal = new DuplicateDatasetModal(page);
-  await duplicateModal.waitForReady();
-
-  // Fill in new dataset name
-  await duplicateModal.fillDatasetName(duplicateName);
-
-  // Click the Duplicate button
-  await duplicateModal.clickDuplicate();
-
-  // Get the duplicate dataset ID from response
-  const duplicateResponse = await duplicateResponsePromise;
-  const duplicateData = await duplicateResponse.json();
-  const duplicateId = duplicateData.id;
-
-  // Track duplicate for cleanup (original is example data, don't delete it)
-  testResources = { datasetIds: [duplicateId] };
-
-  // Modal should close
-  await duplicateModal.waitForHidden();
-
-  // Note: Duplicate action does not show a success toast (only errors)
-  // Verification is done via API and UI list check below
-
-  // Refresh to see the duplicated dataset
-  await datasetListPage.goto();
-  await datasetListPage.waitForTableLoad();
-
-  // Verify both datasets exist in list
-  await expect(datasetListPage.getDatasetRow(originalName)).toBeVisible();
-  await expect(datasetListPage.getDatasetRow(duplicateName)).toBeVisible();
-
-  // API Verification: Compare original and duplicate datasets
-  const duplicateResponseData = await apiGetDataset(page, duplicateId);
-  const duplicateDataFull = await duplicateResponseData.json();
-
-  // Verify key properties were copied correctly (original data already fetched)
-  expect(duplicateDataFull.result.sql).toBe(original!.sql);
-  expect(duplicateDataFull.result.database.id).toBe(original!.database.id);
-  expect(duplicateDataFull.result.schema).toBe(original!.schema);
-  // Name should be different (the duplicate name)
-  expect(duplicateDataFull.result.table_name).toBe(duplicateName);
-});

superset-frontend/playwright/utils/constants.ts

@@ -1,46 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-/**
- * Timeout constants for Playwright tests.
- * Only define timeouts that differ from Playwright defaults or are semantically important.
- *
- * Default Playwright timeouts (from playwright.config.ts):
- * - Test timeout: 30000ms (30s)
- * - Expect timeout: 8000ms (8s)
- *
- * Use these constants instead of magic numbers for better maintainability.
- */
-
-export const TIMEOUT = {
-  /**
-   * Global setup timeout (matches test timeout for cold CI starts)
-   */
-  GLOBAL_SETUP: 30000, // 30s for global setup auth
-
-  /**
-   * Page navigation and load timeouts
-   */
-  PAGE_LOAD: 10000, // 10s for page transitions (login → welcome, dataset → explore)
-
-  /**
-   * Form and UI element load timeouts
-   */
-  FORM_LOAD: 5000, // 5s for forms to become visible (login form, modals)
-} as const;

superset-frontend/playwright/utils/urls.ts

@@ -17,18 +17,7 @@
  * under the License.
  */
 
-/**
- * URL constants for Playwright navigation
- *
- * These are relative paths (no leading '/') that rely on baseURL ending with '/'.
- * playwright.config.ts normalizes baseURL to always end with '/' to ensure
- * correct URL resolution with APP_PREFIX (e.g., /app/prefix/).
- *
- * Example: baseURL='http://localhost:8088/app/prefix/' + 'tablemodelview/list'
- *        = 'http://localhost:8088/app/prefix/tablemodelview/list'
- */
 export const URL = {
-  DATASET_LIST: 'tablemodelview/list',
   LOGIN: 'login/',
   WELCOME: 'superset/welcome/',
 } as const;

superset-frontend/plugins/legacy-preset-chart-deckgl/package.json

@@ -25,7 +25,7 @@
   ],
   "dependencies": {
     "@deck.gl/aggregation-layers": "~9.2.5",
-    "@deck.gl/core": "~9.2.5",
+    "@deck.gl/core": "~9.2.2",
     "@deck.gl/extensions": "~9.2.2",
     "@deck.gl/geo-layers": "~9.2.5",
     "@deck.gl/layers": "~9.2.5",
@@ -64,7 +64,7 @@
     "@apache-superset/core": "*",
     "@superset-ui/chart-controls": "*",
     "@superset-ui/core": "*",
-    "dayjs": "^1.11.19",
+    "dayjs": "^1.11.18",
     "mapbox-gl": "*",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/Geojson.test.ts

@@ -1,121 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { SqlaFormData } from '@superset-ui/core';
-import {
-  computeGeoJsonTextOptionsFromJsOutput,
-  computeGeoJsonTextOptionsFromFormData,
-  computeGeoJsonIconOptionsFromJsOutput,
-  computeGeoJsonIconOptionsFromFormData,
-} from './Geojson';
-
-jest.mock('@deck.gl/react', () => ({
-  __esModule: true,
-  default: () => null,
-}));
-
-test('computeGeoJsonTextOptionsFromJsOutput returns an empty object for non-object input', () => {
-  expect(computeGeoJsonTextOptionsFromJsOutput(null)).toEqual({});
-  expect(computeGeoJsonTextOptionsFromJsOutput(42)).toEqual({});
-  expect(computeGeoJsonTextOptionsFromJsOutput([1, 2, 3])).toEqual({});
-  expect(computeGeoJsonTextOptionsFromJsOutput('string')).toEqual({});
-});
-
-test('computeGeoJsonTextOptionsFromJsOutput extracts valid text options from the input object', () => {
-  const input = {
-    getText: 'name',
-    getTextColor: [1, 2, 3, 255],
-    invalidOption: true,
-  };
-  const expectedOutput = {
-    getText: 'name',
-    getTextColor: [1, 2, 3, 255],
-  };
-  expect(computeGeoJsonTextOptionsFromJsOutput(input)).toEqual(expectedOutput);
-});
-
-test('computeGeoJsonTextOptionsFromFormData computes text options based on form data', () => {
-  const formData: SqlaFormData = {
-    label_property_name: 'name',
-    label_color: { r: 1, g: 2, b: 3, a: 1 },
-    label_size: 123,
-    label_size_unit: 'pixels',
-    datasource: 'test_datasource',
-    viz_type: 'deck_geojson',
-  };
-
-  const expectedOutput = {
-    getText: expect.any(Function),
-    getTextColor: [1, 2, 3, 255],
-    getTextSize: 123,
-    textSizeUnits: 'pixels',
-  };
-
-  const actualOutput = computeGeoJsonTextOptionsFromFormData(formData);
-  expect(actualOutput).toEqual(expectedOutput);
-
-  const sampleFeature = { properties: { name: 'Test' } };
-  expect(actualOutput.getText(sampleFeature)).toBe('Test');
-});
-
-test('computeGeoJsonIconOptionsFromJsOutput returns an empty object for non-object input', () => {
-  expect(computeGeoJsonIconOptionsFromJsOutput(null)).toEqual({});
-  expect(computeGeoJsonIconOptionsFromJsOutput(42)).toEqual({});
-  expect(computeGeoJsonIconOptionsFromJsOutput([1, 2, 3])).toEqual({});
-  expect(computeGeoJsonIconOptionsFromJsOutput('string')).toEqual({});
-});
-
-test('computeGeoJsonIconOptionsFromJsOutput extracts valid icon options from the input object', () => {
-  const input = {
-    getIcon: 'icon_name',
-    getIconColor: [1, 2, 3, 255],
-    invalidOption: false,
-  };
-
-  const expectedOutput = {
-    getIcon: 'icon_name',
-    getIconColor: [1, 2, 3, 255],
-  };
-
-  expect(computeGeoJsonIconOptionsFromJsOutput(input)).toEqual(expectedOutput);
-});
-
-test('computeGeoJsonIconOptionsFromFormData computes icon options based on form data', () => {
-  const formData: SqlaFormData = {
-    icon_url: 'https://example.com/icon.png',
-    icon_size: 123,
-    icon_size_unit: 'pixels',
-    datasource: 'test_datasource',
-    viz_type: 'deck_geojson',
-  };
-
-  const expectedOutput = {
-    getIcon: expect.any(Function),
-    getIconSize: 123,
-    iconSizeUnits: 'pixels',
-  };
-
-  const actualOutput = computeGeoJsonIconOptionsFromFormData(formData);
-  expect(actualOutput).toEqual(expectedOutput);
-
-  expect(actualOutput.getIcon()).toEqual({
-    url: 'https://example.com/icon.png',
-    height: 128,
-    width: 128,
-  });
-});

superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/Geojson.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { memo, useCallback, useMemo, useRef } from 'react';
-import { GeoJsonLayer, GeoJsonLayerProps } from '@deck.gl/layers';
+import { GeoJsonLayer } from '@deck.gl/layers';
 // ignoring the eslint error below since typescript prefers 'geojson' to '@types/geojson'
 // eslint-disable-next-line import/no-unresolved
 import { Feature, Geometry, GeoJsonProperties } from 'geojson';
@@ -29,7 +29,6 @@ import {
   JsonValue,
   QueryFormData,
   SetDataMaskHook,
-  SqlaFormData,
 } from '@superset-ui/core';
 
 import {
@@ -45,7 +44,6 @@ import { TooltipProps } from '../../components/Tooltip';
 import { Point } from '../../types';
 import { GetLayerType } from '../../factory';
 import { HIGHLIGHT_COLOR_ARRAY } from '../../utils';
-import { BLACK_COLOR, PRIMARY_COLOR } from '../../utilities/controls';
 
 type ProcessedFeature = Feature<Geometry, GeoJsonProperties> & {
   properties: JsonObject;
@@ -139,114 +137,6 @@ const getFillColor = (feature: JsonObject, filterStateValue: unknown[]) => {
 };
 const getLineColor = (feature: JsonObject) => feature?.properties?.strokeColor;
 
-const isObject = (value: unknown): value is Record<string, unknown> =>
-  typeof value === 'object' && value !== null && !Array.isArray(value);
-
-export const computeGeoJsonTextOptionsFromJsOutput = (
-  output: unknown,
-): Partial<GeoJsonLayerProps> => {
-  if (!isObject(output)) return {};
-
-  // Properties sourced from:
-  // https://deck.gl/docs/api-reference/layers/geojson-layer#pointtype-options-2
-  const options: (keyof GeoJsonLayerProps)[] = [
-    'getText',
-    'getTextColor',
-    'getTextAngle',
-    'getTextSize',
-    'getTextAnchor',
-    'getTextAlignmentBaseline',
-    'getTextPixelOffset',
-    'getTextBackgroundColor',
-    'getTextBorderColor',
-    'getTextBorderWidth',
-    'textSizeUnits',
-    'textSizeScale',
-    'textSizeMinPixels',
-    'textSizeMaxPixels',
-    'textCharacterSet',
-    'textFontFamily',
-    'textFontWeight',
-    'textLineHeight',
-    'textMaxWidth',
-    'textWordBreak',
-    'textBackground',
-    'textBackgroundPadding',
-    'textOutlineColor',
-    'textOutlineWidth',
-    'textBillboard',
-    'textFontSettings',
-  ];
-
-  const allEntries = Object.entries(output);
-  const validEntries = allEntries.filter(([k]) =>
-    options.includes(k as keyof GeoJsonLayerProps),
-  );
-  return Object.fromEntries(validEntries);
-};
-
-export const computeGeoJsonTextOptionsFromFormData = (
-  fd: SqlaFormData,
-): Partial<GeoJsonLayerProps> => {
-  const lc = fd.label_color ?? BLACK_COLOR;
-
-  return {
-    getText: (f: JsonObject) => f?.properties?.[fd.label_property_name],
-    getTextColor: [lc.r, lc.g, lc.b, 255 * lc.a],
-    getTextSize: parseInt(fd.label_size, 10),
-    textSizeUnits: fd.label_size_unit,
-  };
-};
-
-export const computeGeoJsonIconOptionsFromJsOutput = (
-  output: unknown,
-): Partial<GeoJsonLayerProps> => {
-  if (!isObject(output)) return {};
-
-  // Properties sourced from:
-  // https://deck.gl/docs/api-reference/layers/geojson-layer#pointtype-options-1
-  const options: (keyof GeoJsonLayerProps)[] = [
-    'getIcon',
-    'getIconSize',
-    'getIconColor',
-    'getIconAngle',
-    'getIconPixelOffset',
-    'iconSizeUnits',
-    'iconSizeScale',
-    'iconSizeMinPixels',
-    'iconSizeMaxPixels',
-    'iconAtlas',
-    'iconMapping',
-    'iconBillboard',
-    'iconAlphaCutoff',
-  ];
-
-  const allEntries = Object.entries(output);
-  const validEntries = allEntries.filter(([k]) =>
-    options.includes(k as keyof GeoJsonLayerProps),
-  );
-  return Object.fromEntries(validEntries);
-};
-
-export const computeGeoJsonIconOptionsFromFormData = (
-  fd: SqlaFormData,
-): Partial<GeoJsonLayerProps> => ({
-  getIcon: fd.icon_url
-    ? () => ({
-        url: fd.icon_url,
-        // This is the size deck.gl resizes the icon internally while preserving
-        // its aspect ratio. This is not the actual size the icon is rendered at,
-        // which is instead controlled by getIconSize below. These are set because
-        // deck.gl requires it, and 128x128 is a reasonable default. Read more at:
-        // https://deck.gl/docs/api-reference/layers/icon-layer#geticon
-        width: 128,
-        height: 128,
-      })
-    : undefined,
-  getIconSize: parseInt(fd.icon_size, 10),
-  iconSizeUnits: fd.icon_size_unit,
-});
-
 export const getLayer: GetLayerType<GeoJsonLayer> = function ({
   formData,
   onContextMenu,
@@ -257,8 +147,8 @@ export const getLayer: GetLayerType<GeoJsonLayer> = function ({
   emitCrossFilters,
 }) {
   const fd = formData;
-  const fc = fd.fill_color_picker ?? PRIMARY_COLOR;
-  const sc = fd.stroke_color_picker ?? PRIMARY_COLOR;
+  const fc = fd.fill_color_picker;
+  const sc = fd.stroke_color_picker;
   const fillColor = [fc.r, fc.g, fc.b, 255 * fc.a];
   const strokeColor = [sc.r, sc.g, sc.b, 255 * sc.a];
   const propOverrides: JsonObject = {};
@@ -279,38 +169,6 @@ export const getLayer: GetLayerType<GeoJsonLayer> = function ({
     processedFeatures = jsFnMutator(features) as ProcessedFeature[];
   }
 
-  let pointType = 'circle';
-  if (fd.enable_labels) {
-    pointType = `${pointType}+text`;
-  }
-  if (fd.enable_icons) {
-    pointType = `${pointType}+icon`;
-  }
-
-  let labelOpts: Partial<GeoJsonLayerProps> = {};
-  if (fd.enable_labels) {
-    if (fd.enable_label_javascript_mode) {
-      const generator = sandboxedEval(fd.label_javascript_config_generator);
-      if (typeof generator === 'function') {
-        labelOpts = computeGeoJsonTextOptionsFromJsOutput(generator());
-      }
-    } else {
-      labelOpts = computeGeoJsonTextOptionsFromFormData(fd);
-    }
-  }
-
-  let iconOpts: Partial<GeoJsonLayerProps> = {};
-  if (fd.enable_icons) {
-    if (fd.enable_icon_javascript_mode) {
-      const generator = sandboxedEval(fd.icon_javascript_config_generator);
-      if (typeof generator === 'function') {
-        iconOpts = computeGeoJsonIconOptionsFromJsOutput(generator());
-      }
-    } else {
-      iconOpts = computeGeoJsonIconOptionsFromFormData(fd);
-    }
-  }
-
   return new GeoJsonLayer({
     id: `geojson-layer-${fd.slice_id}` as const,
     data: processedFeatures,
@@ -323,9 +181,6 @@ export const getLayer: GetLayerType<GeoJsonLayer> = function ({
     getLineWidth: fd.line_width || 1,
     pointRadiusScale: fd.point_radius_scale,
     lineWidthUnits: fd.line_width_unit,
-    pointType,
-    ...labelOpts,
-    ...iconOpts,
     ...commonLayerProps({
       formData: fd,
       setTooltip,

superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/controlPanel.ts

@@ -17,12 +17,7 @@
  * under the License.
  */
 import { ControlPanelConfig } from '@superset-ui/chart-controls';
-import {
-  t,
-  legacyValidateInteger,
-  isFeatureEnabled,
-  FeatureFlag,
-} from '@superset-ui/core';
+import { t, legacyValidateInteger } from '@superset-ui/core';
 import { formatSelectOptions } from '../../utilities/utils';
 import {
   filterNulls,
@@ -41,27 +36,8 @@ import {
   lineWidth,
   tooltipContents,
   tooltipTemplate,
-  jsFunctionControl,
 } from '../../utilities/Shared_DeckGL';
 import { dndGeojsonColumn } from '../../utilities/sharedDndControls';
-import { BLACK_COLOR } from '../../utilities/controls';
-
-const defaultLabelConfigGenerator = `() => ({
-  // Check the documentation at:
-  // https://deck.gl/docs/api-reference/layers/geojson-layer#pointtype-options-2
-  getText: f => f.properties.name,
-  getTextColor: [0, 0, 0, 255],
-  getTextSize: 24,
-  textSizeUnits: 'pixels',
-})`;
-
-const defaultIconConfigGenerator = `() => ({
-  // Check the documentation at:
-  // https://deck.gl/docs/api-reference/layers/geojson-layer#pointtype-options-1
-  getIcon: () => ({ url: '', height: 128, width: 128 }),
-  getIconSize: 32,
-  iconSizeUnits: 'pixels',
-})`;
 
 const config: ControlPanelConfig = {
   controlPanelSections: [
@@ -87,245 +63,6 @@ const config: ControlPanelConfig = {
         [fillColorPicker, strokeColorPicker],
         [filled, stroked],
         [extruded],
-        [
-          {
-            name: 'enable_labels',
-            config: {
-              type: 'CheckboxControl',
-              label: t('Enable labels'),
-              description: t('Enables rendering of labels for GeoJSON points'),
-              default: false,
-              renderTrigger: true,
-            },
-          },
-        ],
-        [
-          {
-            name: 'enable_label_javascript_mode',
-            config: {
-              type: 'CheckboxControl',
-              label: t('Enable label JavaScript mode'),
-              description: t(
-                'Enables custom label configuration via JavaScript',
-              ),
-              visibility: ({ form_data }) =>
-                !!form_data.enable_labels &&
-                isFeatureEnabled(FeatureFlag.EnableJavascriptControls),
-              default: false,
-              renderTrigger: true,
-              resetOnHide: false,
-            },
-          },
-        ],
-        [
-          {
-            name: 'label_property_name',
-            config: {
-              type: 'TextControl',
-              label: t('Label property name'),
-              description: t('The feature property to use for point labels'),
-              visibility: ({ form_data }) =>
-                !!form_data.enable_labels &&
-                (!form_data.enable_label_javascript_mode ||
-                  !isFeatureEnabled(FeatureFlag.EnableJavascriptControls)),
-              default: 'name',
-              renderTrigger: true,
-              resetOnHide: false,
-            },
-          },
-        ],
-        [
-          {
-            name: 'label_color',
-            config: {
-              type: 'ColorPickerControl',
-              label: t('Label color'),
-              description: t('The color of the point labels'),
-              visibility: ({ form_data }) =>
-                !!form_data.enable_labels &&
-                (!form_data.enable_label_javascript_mode ||
-                  !isFeatureEnabled(FeatureFlag.EnableJavascriptControls)),
-              default: BLACK_COLOR,
-              renderTrigger: true,
-              resetOnHide: false,
-            },
-          },
-        ],
-        [
-          {
-            name: 'label_size',
-            config: {
-              type: 'SelectControl',
-              freeForm: true,
-              label: t('Label size'),
-              description: t('The font size of the point labels'),
-              visibility: ({ form_data }) =>
-                !!form_data.enable_labels &&
-                (!form_data.enable_label_javascript_mode ||
-                  !isFeatureEnabled(FeatureFlag.EnableJavascriptControls)),
-              validators: [legacyValidateInteger],
-              choices: formatSelectOptions([8, 16, 24, 32, 64, 128]),
-              default: 24,
-              renderTrigger: true,
-              resetOnHide: false,
-            },
-          },
-        ],
-        [
-          {
-            name: 'label_size_unit',
-            config: {
-              type: 'SelectControl',
-              label: t('Label size unit'),
-              description: t('The unit for label size'),
-              visibility: ({ form_data }) =>
-                !!form_data.enable_labels &&
-                (!form_data.enable_label_javascript_mode ||
-                  !isFeatureEnabled(FeatureFlag.EnableJavascriptControls)),
-              choices: [
-                ['meters', t('Meters')],
-                ['pixels', t('Pixels')],
-              ],
-              default: 'pixels',
-              renderTrigger: true,
-              resetOnHide: false,
-            },
-          },
-        ],
-        [
-          {
-            name: 'label_javascript_config_generator',
-            config: {
-              ...jsFunctionControl(
-                t('Label JavaScript config generator'),
-                t(
-                  'A JavaScript function that generates a label configuration object',
-                ),
-                undefined,
-                undefined,
-                defaultLabelConfigGenerator,
-              ),
-              visibility: ({ form_data }) =>
-                !!form_data.enable_labels &&
-                !!form_data.enable_label_javascript_mode &&
-                isFeatureEnabled(FeatureFlag.EnableJavascriptControls),
-              resetOnHide: false,
-            },
-          },
-        ],
-        [
-          {
-            name: 'enable_icons',
-            config: {
-              type: 'CheckboxControl',
-              label: t('Enable icons'),
-              description: t('Enables rendering of icons for GeoJSON points'),
-              default: false,
-              renderTrigger: true,
-            },
-          },
-        ],
-        [
-          {
-            name: 'enable_icon_javascript_mode',
-            config: {
-              type: 'CheckboxControl',
-              label: t('Enable icon JavaScript mode'),
-              description: t(
-                'Enables custom icon configuration via JavaScript',
-              ),
-              visibility: ({ form_data }) =>
-                !!form_data.enable_icons &&
-                isFeatureEnabled(FeatureFlag.EnableJavascriptControls),
-              default: false,
-              renderTrigger: true,
-              resetOnHide: false,
-            },
-          },
-        ],
-        [
-          {
-            name: 'icon_url',
-            config: {
-              type: 'TextControl',
-              label: t('Icon URL'),
-              description: t(
-                'The image URL of the icon to display for GeoJSON points. ' +
-                  'Note that the image URL must conform to the content ' +
-                  'security policy (CSP) in order to load correctly.',
-              ),
-              visibility: ({ form_data }) =>
-                !!form_data.enable_icons &&
-                (!form_data.enable_icon_javascript_mode ||
-                  !isFeatureEnabled(FeatureFlag.EnableJavascriptControls)),
-              default: '',
-              renderTrigger: true,
-              resetOnHide: false,
-            },
-          },
-        ],
-        [
-          {
-            name: 'icon_size',
-            config: {
-              type: 'SelectControl',
-              freeForm: true,
-              label: t('Icon size'),
-              description: t('The size of the point icons'),
-              visibility: ({ form_data }) =>
-                !!form_data.enable_icons &&
-                (!form_data.enable_icon_javascript_mode ||
-                  !isFeatureEnabled(FeatureFlag.EnableJavascriptControls)),
-              validators: [legacyValidateInteger],
-              choices: formatSelectOptions([16, 24, 32, 64, 128]),
-              default: 32,
-              renderTrigger: true,
-              resetOnHide: false,
-            },
-          },
-        ],
-        [
-          {
-            name: 'icon_size_unit',
-            config: {
-              type: 'SelectControl',
-              label: t('Icon size unit'),
-              description: t('The unit for icon size'),
-              visibility: ({ form_data }) =>
-                !!form_data.enable_icons &&
-                (!form_data.enable_icon_javascript_mode ||
-                  !isFeatureEnabled(FeatureFlag.EnableJavascriptControls)),
-              choices: [
-                ['meters', t('Meters')],
-                ['pixels', t('Pixels')],
-              ],
-              default: 'pixels',
-              renderTrigger: true,
-              resetOnHide: false,
-            },
-          },
-        ],
-        [
-          {
-            name: 'icon_javascript_config_generator',
-            config: {
-              ...jsFunctionControl(
-                t('Icon JavaScript config generator'),
-                t(
-                  'A JavaScript function that generates an icon configuration object',
-                ),
-                undefined,
-                undefined,
-                defaultIconConfigGenerator,
-              ),
-              visibility: ({ form_data }) =>
-                !!form_data.enable_icons &&
-                !!form_data.enable_icon_javascript_mode &&
-                isFeatureEnabled(FeatureFlag.EnableJavascriptControls),
-              resetOnHide: false,
-            },
-          },
-        ],
         [lineWidth],
         [
           {

superset-frontend/plugins/legacy-preset-chart-deckgl/src/utilities/Shared_DeckGL.tsx

@@ -96,7 +96,7 @@ const jsFunctionInfo = (
   </div>
 );
 
-export function jsFunctionControl(
+function jsFunctionControl(
   label: string,
   description: string,
   extraDescr = null,

superset-frontend/plugins/legacy-preset-chart-deckgl/src/utilities/controls.ts

@@ -39,7 +39,6 @@ export function columnChoices(datasource: Dataset | QueryResponse | null) {
 }
 
 export const PRIMARY_COLOR = { r: 0, g: 122, b: 135, a: 1 };
-export const BLACK_COLOR = { r: 0, g: 0, b: 0, a: 1 };
 
 export default {
   default: null,

superset-frontend/plugins/legacy-preset-chart-nvd3/package.json

@@ -42,7 +42,7 @@
     "@apache-superset/core": "*",
     "@superset-ui/chart-controls": "*",
     "@superset-ui/core": "*",
-    "dayjs": "^1.11.19",
+    "dayjs": "^1.11.18",
     "react": "^17.0.2"
   }
 }

superset-frontend/plugins/plugin-chart-echarts/package.json

@@ -32,7 +32,7 @@
     "@apache-superset/core": "*",
     "@superset-ui/chart-controls": "*",
     "@superset-ui/core": "*",
-    "dayjs": "^1.11.19",
+    "dayjs": "^1.11.18",
     "echarts": "*",
     "memoize-one": "*",
     "react": "^17.0.2"

superset-frontend/plugins/plugin-chart-handlebars/package.json

@@ -37,7 +37,7 @@
     "ace-builds": "^1.4.14",
     "handlebars": "^4.7.8",
     "lodash": "^4.17.11",
-    "dayjs": "^1.11.19",
+    "dayjs": "^1.11.18",
     "react": "^17.0.2",
     "react-ace": "^10.1.0",
     "react-dom": "^17.0.2"

superset-frontend/src/components/AlteredSliceTag/AlteredSliceTag.stories.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { AlteredSliceTag } from '.';
-import { defaultProps, expectedDiffs } from './AlteredSliceTagMocks';
+import { defaultProps } from './AlteredSliceTagMocks';
 
 export default {
   title: 'Components/AlteredSliceTag',
@@ -27,5 +27,5 @@ export const InteractiveSliceTag = (args: any) => <AlteredSliceTag {...args} />;
 
 InteractiveSliceTag.args = {
   origFormData: defaultProps.origFormData,
-  diffs: expectedDiffs,
+  currentFormData: defaultProps.currentFormData,
 };

superset-frontend/src/components/DatabaseSchemaEditor/JoinEditorModal.tsx

@@ -0,0 +1,355 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { useState, useEffect, useMemo } from 'react';
+import { t } from '@superset-ui/core';
+import { styled, Alert } from '@apache-superset/core/ui';
+import {
+  Modal,
+  Select,
+  Input,
+  Form,
+  Space,
+  Typography,
+} from '@superset-ui/core/components';
+
+export enum JoinType {
+  INNER = 'inner',
+  LEFT = 'left',
+  RIGHT = 'right',
+  FULL = 'full',
+  CROSS = 'cross',
+}
+
+export enum Cardinality {
+  ONE_TO_ONE = '1:1',
+  ONE_TO_MANY = '1:N',
+  MANY_TO_ONE = 'N:1',
+  MANY_TO_MANY = 'N:M',
+}
+
+export interface Table {
+  id: number;
+  name: string;
+  columns?: Column[];
+}
+
+export interface Column {
+  id: number;
+  name: string;
+  type: string;
+}
+
+export interface Join {
+  id?: number;
+  source_table: string;
+  source_table_id?: number;
+  source_columns: string[];
+  target_table: string;
+  target_table_id?: number;
+  target_columns: string[];
+  join_type: JoinType;
+  cardinality: Cardinality;
+  semantic_context?: string;
+}
+
+interface JoinEditorModalProps {
+  visible: boolean;
+  join?: Join | null;
+  tables: Table[];
+  onSave: (join: Join) => void;
+  onCancel: () => void;
+}
+
+const StyledForm = styled(Form)`
+  .ant-form-item {
+    margin-bottom: ${({ theme }) => theme.sizeUnit * 4}px;
+  }
+`;
+
+const ColumnSelectionGroup = styled.div`
+  display: flex;
+  gap: ${({ theme }) => theme.sizeUnit * 2}px;
+  align-items: center;
+`;
+
+const JoinEditorModal = ({
+  visible,
+  join,
+  tables,
+  onSave,
+  onCancel,
+}: JoinEditorModalProps) => {
+  const [form] = Form.useForm();
+  const [sourceTable, setSourceTable] = useState<string | undefined>(
+    join?.source_table,
+  );
+  const [targetTable, setTargetTable] = useState<string | undefined>(
+    join?.target_table,
+  );
+
+  useEffect(() => {
+    if (visible) {
+      if (join) {
+        form.setFieldsValue({
+          source_table: join.source_table,
+          source_columns: join.source_columns,
+          target_table: join.target_table,
+          target_columns: join.target_columns,
+          join_type: join.join_type,
+          cardinality: join.cardinality,
+          semantic_context: join.semantic_context,
+        });
+        setSourceTable(join.source_table);
+        setTargetTable(join.target_table);
+      } else {
+        form.resetFields();
+        setSourceTable(undefined);
+        setTargetTable(undefined);
+      }
+    }
+  }, [visible, join, form]);
+
+  const sourceTableColumns = useMemo(
+    () =>
+      tables.find(table => table.name === sourceTable)?.columns || [],
+    [tables, sourceTable],
+  );
+
+  const targetTableColumns = useMemo(
+    () =>
+      tables.find(table => table.name === targetTable)?.columns || [],
+    [tables, targetTable],
+  );
+
+  const joinTypeOptions = [
+    { value: JoinType.INNER, label: t('Inner Join') },
+    { value: JoinType.LEFT, label: t('Left Join') },
+    { value: JoinType.RIGHT, label: t('Right Join') },
+    { value: JoinType.FULL, label: t('Full Outer Join') },
+    { value: JoinType.CROSS, label: t('Cross Join') },
+  ];
+
+  const cardinalityOptions = [
+    { value: Cardinality.ONE_TO_ONE, label: t('One to One (1:1)') },
+    { value: Cardinality.ONE_TO_MANY, label: t('One to Many (1:N)') },
+    { value: Cardinality.MANY_TO_ONE, label: t('Many to One (N:1)') },
+    { value: Cardinality.MANY_TO_MANY, label: t('Many to Many (N:M)') },
+  ];
+
+  const handleSourceTableChange = (value: string) => {
+    setSourceTable(value);
+    form.setFieldValue('source_columns', []);
+  };
+
+  const handleTargetTableChange = (value: string) => {
+    setTargetTable(value);
+    form.setFieldValue('target_columns', []);
+  };
+
+  const handleSubmit = async () => {
+    try {
+      const values = await form.validateFields();
+      const sourceTableId = tables.find(
+        t => t.name === values.source_table,
+      )?.id;
+      const targetTableId = tables.find(
+        t => t.name === values.target_table,
+      )?.id;
+
+      onSave({
+        ...join,
+        ...values,
+        source_table_id: sourceTableId,
+        target_table_id: targetTableId,
+      });
+      form.resetFields();
+    } catch (error) {
+      // Form validation failed
+    }
+  };
+
+  return (
+    <Modal
+      title={join ? t('Edit Join Relationship') : t('Add Join Relationship')}
+      visible={visible}
+      onOk={handleSubmit}
+      onCancel={onCancel}
+      width={800}
+      okText={join ? t('Update') : t('Add')}
+      cancelText={t('Cancel')}
+    >
+      <StyledForm form={form} layout="vertical">
+        <Alert
+          message={t('Join Configuration')}
+          description={t(
+            'Define the relationship between tables. This join will be used when generating dashboards and visualizations.',
+          )}
+          type="info"
+          showIcon
+          style={{ marginBottom: 24 }}
+        />
+
+        <Typography.Title level={5}>{t('Tables')}</Typography.Title>
+
+        <ColumnSelectionGroup>
+          <Form.Item
+            name="source_table"
+            label={t('Source Table')}
+            rules={[{ required: true, message: t('Please select a source table') }]}
+            style={{ flex: 1, marginBottom: 0 }}
+          >
+            <Select
+              placeholder={t('Select source table')}
+              onChange={handleSourceTableChange}
+              showSearch
+              optionFilterProp="label"
+              options={tables.map(table => ({
+                value: table.name,
+                label: table.name,
+              }))}
+            />
+          </Form.Item>
+
+          <Form.Item
+            name="join_type"
+            label={t('Join Type')}
+            rules={[{ required: true, message: t('Please select a join type') }]}
+            style={{ minWidth: 150, marginBottom: 0 }}
+          >
+            <Select
+              placeholder={t('Select join type')}
+              options={joinTypeOptions}
+            />
+          </Form.Item>
+
+          <Form.Item
+            name="target_table"
+            label={t('Target Table')}
+            rules={[{ required: true, message: t('Please select a target table') }]}
+            style={{ flex: 1, marginBottom: 0 }}
+          >
+            <Select
+              placeholder={t('Select target table')}
+              onChange={handleTargetTableChange}
+              showSearch
+              optionFilterProp="label"
+              options={tables.map(table => ({
+                value: table.name,
+                label: table.name,
+              }))}
+            />
+          </Form.Item>
+        </ColumnSelectionGroup>
+
+        <Typography.Title level={5} style={{ marginTop: 24 }}>
+          {t('Join Columns')}
+        </Typography.Title>
+
+        <ColumnSelectionGroup>
+          <Form.Item
+            name="source_columns"
+            label={t('Source Columns')}
+            rules={[
+              { required: true, message: t('Please select source columns') },
+            ]}
+            style={{ flex: 1 }}
+          >
+            <Select
+              mode="multiple"
+              placeholder={t('Select columns from source table')}
+              disabled={!sourceTable}
+              options={sourceTableColumns.map(col => ({
+                value: col.name,
+                label: `${col.name} (${col.type})`,
+              }))}
+            />
+          </Form.Item>
+
+          <Typography.Text>=</Typography.Text>
+
+          <Form.Item
+            name="target_columns"
+            label={t('Target Columns')}
+            rules={[
+              { required: true, message: t('Please select target columns') },
+              ({ getFieldValue }) => ({
+                validator(_, value) {
+                  const sourceColumns = getFieldValue('source_columns') || [];
+                  if (value && value.length !== sourceColumns.length) {
+                    return Promise.reject(
+                      new Error(
+                        t(
+                          'Number of target columns must match source columns',
+                        ),
+                      ),
+                    );
+                  }
+                  return Promise.resolve();
+                },
+              }),
+            ]}
+            style={{ flex: 1 }}
+          >
+            <Select
+              mode="multiple"
+              placeholder={t('Select columns from target table')}
+              disabled={!targetTable}
+              options={targetTableColumns.map(col => ({
+                value: col.name,
+                label: `${col.name} (${col.type})`,
+              }))}
+            />
+          </Form.Item>
+        </ColumnSelectionGroup>
+
+        <Typography.Title level={5} style={{ marginTop: 24 }}>
+          {t('Relationship Details')}
+        </Typography.Title>
+
+        <Form.Item
+          name="cardinality"
+          label={t('Cardinality')}
+          rules={[{ required: true, message: t('Please select cardinality') }]}
+        >
+          <Select
+            placeholder={t('Select relationship cardinality')}
+            options={cardinalityOptions}
+          />
+        </Form.Item>
+
+        <Form.Item
+          name="semantic_context"
+          label={t('Description (AI Generated)')}
+          help={t(
+            'This description was generated by AI and can be edited for clarity',
+          )}
+        >
+          <Input.TextArea
+            rows={3}
+            placeholder={t(
+              'e.g., "Orders are linked to customers through the customer_id field"',
+            )}
+          />
+        </Form.Item>
+      </StyledForm>
+    </Modal>
+  );
+};
+
+export default JoinEditorModal;

superset-frontend/src/components/DatabaseSchemaEditor/JoinsList.tsx

@@ -0,0 +1,352 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { useState } from 'react';
+import { t, SupersetClient } from '@superset-ui/core';
+import { styled } from '@apache-superset/core/ui';
+import {
+  Table,
+  Button,
+  Space,
+  Typography,
+  Popconfirm,
+  Tag,
+} from '@superset-ui/core/components';
+import { useToasts } from '../MessageToasts/withToasts';
+import { EditOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons';
+import JoinEditorModal, {
+  Join,
+  JoinType,
+  Cardinality,
+  Table as TableType,
+} from './JoinEditorModal';
+
+interface JoinsListProps {
+  databaseReportId: number;
+  joins: Join[];
+  tables: TableType[];
+  onJoinsUpdate?: (joins: Join[]) => void;
+  editable?: boolean;
+}
+
+const StyledTableContainer = styled.div`
+  ${({ theme }) => `
+    padding: ${theme.sizeUnit * 4}px;
+    background-color: ${theme.colorBgContainer};
+    border-radius: ${theme.borderRadiusSM}px;
+  `}
+`;
+
+const HeaderContainer = styled.div`
+  ${({ theme }) => `
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: ${theme.sizeUnit * 4}px;
+  `}
+`;
+
+const JoinTypeTag = styled(Tag)<{ joinType: JoinType }>`
+  ${({ theme, joinType }) => {
+    const colorMap = {
+      [JoinType.INNER]: theme.colorSuccess,
+      [JoinType.LEFT]: theme.colorInfo,
+      [JoinType.RIGHT]: theme.colorWarning,
+      [JoinType.FULL]: theme.colorError,
+      [JoinType.CROSS]: theme.colorTextSecondary,
+    };
+    return `
+      background-color: ${colorMap[joinType]}20;
+      color: ${colorMap[joinType]};
+      border-color: ${colorMap[joinType]};
+    `;
+  }}
+`;
+
+const CardinalityTag = styled(Tag)`
+  ${({ theme }) => `
+    background-color: ${theme.colorPrimaryBg};
+    color: ${theme.colorPrimary};
+    border-color: ${theme.colorPrimary};
+  `}
+`;
+
+const JoinsList = ({
+  databaseReportId,
+  joins: initialJoins,
+  tables,
+  onJoinsUpdate,
+  editable = true,
+}: JoinsListProps) => {
+  const [joins, setJoins] = useState<Join[]>(initialJoins);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [editingJoin, setEditingJoin] = useState<Join | null>(null);
+  const [loading, setLoading] = useState(false);
+  const { addSuccessToast, addDangerToast } = useToasts();
+
+  const handleAddJoin = () => {
+    setEditingJoin(null);
+    setModalVisible(true);
+  };
+
+  const handleEditJoin = (join: Join) => {
+    setEditingJoin(join);
+    setModalVisible(true);
+  };
+
+  const handleDeleteJoin = async (joinId: number) => {
+      setLoading(true);
+    try {
+      const response = await SupersetClient.delete({
+        endpoint: `/api/v1/datasource/analysis/report/${databaseReportId}/join/${joinId}`,
+      });
+
+      if (response.ok) {
+        const updatedJoins = joins.filter(j => j.id !== joinId);
+        setJoins(updatedJoins);
+        onJoinsUpdate?.(updatedJoins);
+        addSuccessToast(t('Join deleted successfully'));
+      } else {
+        throw new Error('Failed to delete join');
+      }
+    } catch (error) {
+      console.error('Delete join error:', error);
+      addDangerToast(
+        t('Failed to delete join: %s', error?.message || String(error)),
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSaveJoin = async (join: Join) => {
+    setLoading(true);
+    try {
+      const endpoint = join.id
+        ? `/api/v1/datasource/analysis/report/${databaseReportId}/join/${join.id}`
+        : `/api/v1/datasource/analysis/report/${databaseReportId}/join`;
+      
+      const method = join.id ? 'PUT' : 'POST';
+      
+      const response = await SupersetClient.request({
+        endpoint,
+        method,
+        jsonPayload: join,
+      });
+
+      if (response.ok) {
+        const savedJoin = response.json;
+        let updatedJoins: Join[];
+        
+        if (join.id) {
+          updatedJoins = joins.map(j => (j.id === join.id ? savedJoin : j));
+        } else {
+          updatedJoins = [...joins, savedJoin];
+        }
+        
+        setJoins(updatedJoins);
+        onJoinsUpdate?.(updatedJoins);
+        setModalVisible(false);
+        addSuccessToast(
+          join.id
+            ? t('Join updated successfully')
+            : t('Join created successfully'),
+        );
+      } else {
+        throw new Error('Failed to save join');
+      }
+    } catch (error) {
+      console.error('Save join error:', error);
+      addDangerToast(
+        t('Failed to save join: %s', error?.message || String(error)),
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getJoinTypeLabel = (type: JoinType) => {
+    const labels = {
+      [JoinType.INNER]: t('INNER'),
+      [JoinType.LEFT]: t('LEFT'),
+      [JoinType.RIGHT]: t('RIGHT'),
+      [JoinType.FULL]: t('FULL'),
+      [JoinType.CROSS]: t('CROSS'),
+    };
+    return labels[type] || type;
+  };
+
+  const columns = [
+    {
+      title: t('Source Table'),
+      dataIndex: 'source_table',
+      key: 'source_table',
+      render: (text: string) => (
+        <Typography.Text strong>{text}</Typography.Text>
+      ),
+    },
+    {
+      title: t('Source Columns'),
+      dataIndex: 'source_columns',
+      key: 'source_columns',
+      render: (cols: string[] | string) => {
+        const columns = Array.isArray(cols)
+          ? cols
+          : typeof cols === 'string'
+            ? cols.split(',').map(c => c.trim()).filter(Boolean)
+            : [];
+        return <Typography.Text code>{columns.join(', ')}</Typography.Text>;
+      },
+    },
+    {
+      title: t('Join Type'),
+      dataIndex: 'join_type',
+      key: 'join_type',
+      render: (type: JoinType) => (
+        <JoinTypeTag joinType={type}>{getJoinTypeLabel(type)}</JoinTypeTag>
+      ),
+    },
+    {
+      title: t('Target Table'),
+      dataIndex: 'target_table',
+      key: 'target_table',
+      render: (text: string) => (
+        <Typography.Text strong>{text}</Typography.Text>
+      ),
+    },
+    {
+      title: t('Target Columns'),
+      dataIndex: 'target_columns',
+      key: 'target_columns',
+      render: (cols: string[] | string) => {
+        const columns = Array.isArray(cols)
+          ? cols
+          : typeof cols === 'string'
+            ? cols.split(',').map(c => c.trim()).filter(Boolean)
+            : [];
+        return <Typography.Text code>{columns.join(', ')}</Typography.Text>;
+      },
+    },
+    {
+      title: t('Cardinality'),
+      dataIndex: 'cardinality',
+      key: 'cardinality',
+      render: (cardinality: Cardinality) => (
+        <CardinalityTag>{cardinality}</CardinalityTag>
+      ),
+    },
+    {
+      title: t('Description'),
+      dataIndex: 'semantic_context',
+      key: 'semantic_context',
+      ellipsis: true,
+      render: (text: string) => (
+        <Typography.Text
+          ellipsis={{ tooltip: text }}
+          style={{ maxWidth: 200 }}
+        >
+          {text || '-'}
+        </Typography.Text>
+      ),
+    },
+  ];
+
+  if (editable) {
+    columns.push({
+      title: t('Actions'),
+      key: 'actions',
+      fixed: 'right',
+      width: 100,
+      render: (_: unknown, record: Join) => (
+        <Space size="small">
+          <Button
+            type="link"
+            icon={<EditOutlined />}
+            onClick={() => handleEditJoin(record)}
+            size="small"
+          />
+          <Popconfirm
+            title={t('Delete Join')}
+            description={t(
+              'Are you sure you want to delete this join relationship?',
+            )}
+            onConfirm={() => record.id && handleDeleteJoin(record.id)}
+            okText={t('Yes')}
+            cancelText={t('No')}
+          >
+            <Button
+              type="link"
+              danger
+              icon={<DeleteOutlined />}
+              size="small"
+            />
+          </Popconfirm>
+        </Space>
+      ),
+    });
+  }
+
+  return (
+    <StyledTableContainer>
+      <HeaderContainer>
+        <div>
+          <Typography.Title level={4}>{t('Table Joins')}</Typography.Title>
+          <Typography.Text type="secondary">
+            {t('AI-detected and user-defined relationships between tables')}
+          </Typography.Text>
+        </div>
+        {editable && (
+          <Button
+            type="primary"
+            icon={<PlusOutlined />}
+            onClick={handleAddJoin}
+          >
+            {t('Add Join')}
+          </Button>
+        )}
+      </HeaderContainer>
+
+      <Table
+        columns={columns}
+        dataSource={joins}
+        rowKey="id"
+        loading={loading}
+        pagination={{
+          pageSize: 10,
+          showSizeChanger: true,
+          showTotal: (total, range) =>
+            t('%s-%s of %s joins', range[0], range[1], total),
+        }}
+        scroll={{ x: 'max-content' }}
+        locale={{
+          emptyText: t('No joins defined yet'),
+        }}
+      />
+
+      <JoinEditorModal
+        visible={modalVisible}
+        join={editingJoin}
+        tables={tables}
+        onSave={handleSaveJoin}
+        onCancel={() => setModalVisible(false)}
+      />
+    </StyledTableContainer>
+  );
+};
+
+export default JoinsList;

superset-frontend/src/components/DatabaseSchemaEditor/index.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
-// Specific modal implementations
-export { DeleteConfirmationModal } from './DeleteConfirmationModal';
-export { DuplicateDatasetModal } from './DuplicateDatasetModal';
+export { default as JoinEditorModal } from './JoinEditorModal';
+export { default as JoinsList } from './JoinsList';
+export type { Join, Table, Column } from './JoinEditorModal';
+export { JoinType, Cardinality } from './JoinEditorModal';

superset-frontend/src/components/DatabaseSelector/index.tsx

@@ -317,9 +317,26 @@ export function DatabaseSelector({
   const catalogOptions = catalogData || EMPTY_CATALOG_OPTIONS;
 
   function changeDatabase(
-    value: { label: string; value: number },
-    database: DatabaseValue,
+    value: { label: string; value: number } | undefined,
+    database: DatabaseValue | undefined,
   ) {
+    // Handle clearing the selection
+    if (!database) {
+      setCurrentDb(undefined);
+      setCurrentCatalog(undefined);
+      setCurrentSchema(undefined);
+      if (onDbChange) {
+        onDbChange(undefined);
+      }
+      if (onCatalogChange) {
+        onCatalogChange(undefined);
+      }
+      if (onSchemaChange) {
+        onSchemaChange(undefined);
+      }
+      return;
+    }
+
     // the database id is actually stored in the value property; the ID is used
     // for the DOM, so it can't be an integer
     const databaseWithId = { ...database, id: database.value };
@@ -361,6 +378,7 @@ export function DatabaseSelector({
         disabled={!isDatabaseSelectEnabled || readOnly}
         options={loadDatabases}
         sortComparator={sortComparator}
+        allowClear
       />,
       null,
     );

superset-frontend/src/components/Datasource/DatasourceModal/index.tsx

@@ -106,6 +106,9 @@ const DatasourceModal: FunctionComponent<DatasourceModalProps> = ({
   const [isEditing, setIsEditing] = useState<boolean>(false);
   const [modal, contextHolder] = Modal.useModal();
   const [confirmModalOpen, setConfirmModalOpen] = useState(false);
+  const isTemplateDataset = currentDatasource.is_template_dataset;
+  const isReadOnly =
+    currentDatasource.is_managed_externally || isTemplateDataset;
   const buildPayload = (datasource: Record<string, any>) => {
     const payload: Record<string, any> = {
       table_name: datasource.table_name,
@@ -345,17 +348,17 @@ const DatasourceModal: FunctionComponent<DatasourceModalProps> = ({
             buttonStyle="primary"
             data-test="datasource-modal-save"
             onClick={onClickSave}
-            disabled={
-              isSaving ||
-              errors.length > 0 ||
-              currentDatasource.is_managed_externally
-            }
+            disabled={isSaving || errors.length > 0 || isReadOnly}
             tooltip={
-              currentDatasource.is_managed_externally
+              isTemplateDataset
                 ? t(
-                    "This dataset is managed externally, and can't be edited in Superset",
+                    'This dataset belongs to a template dashboard and cannot be modified.',
                   )
-                : ''
+                : currentDatasource.is_managed_externally
+                  ? t(
+                      "This dataset is managed externally, and can't be edited in Superset",
+                    )
+                  : ''
             }
           >
             {t('Save')}
@@ -364,6 +367,13 @@ const DatasourceModal: FunctionComponent<DatasourceModalProps> = ({
       }
       responsive
     >
+      {isTemplateDataset && (
+        <Alert type="info" banner closable={false}>
+          {t(
+            'This dataset belongs to a template dashboard and cannot be modified.',
+          )}
+        </Alert>
+      )}
       <DatasourceEditor
         showLoadingForImport
         height={500}

superset-frontend/src/components/Datasource/components/DatasourceEditor/DatasourceEditor.jsx

@@ -668,14 +668,6 @@ class DatasourceEditor extends PureComponent {
       usageChartsCount: 0,
     };
 
-    this.isComponentMounted = false;
-    this.abortControllers = {
-      formatQuery: null,
-      formatSql: null,
-      syncMetadata: null,
-      fetchUsageData: null,
-    };
-
     this.onChange = this.onChange.bind(this);
     this.onChangeEditMode = this.onChangeEditMode.bind(this);
     this.onDatasourcePropChange = this.onDatasourcePropChange.bind(this);
@@ -766,42 +758,24 @@ class DatasourceEditor extends PureComponent {
     });
   }
 
-  /**
-   * Formats SQL query using the formatQuery action.
-   * Aborts any pending format requests before starting a new one.
-   */
   async onQueryFormat() {
     const { datasource } = this.state;
     if (!datasource.sql || !this.state.isEditMode) {
       return;
     }
 
-    // Abort previous formatQuery if still pending
-    if (this.abortControllers.formatQuery) {
-      this.abortControllers.formatQuery.abort();
-    }
-
-    this.abortControllers.formatQuery = new AbortController();
-    const { signal } = this.abortControllers.formatQuery;
-
     try {
-      const response = await this.props.formatQuery(datasource.sql, { signal });
-
+      const response = await this.props.formatQuery(datasource.sql);
       this.onDatasourcePropChange('sql', response.json.result);
       this.props.addSuccessToast(t('SQL was formatted'));
     } catch (error) {
-      if (error.name === 'AbortError') return;
-
       const { error: clientError, statusText } =
         await getClientErrorObject(error);
-
       this.props.addDangerToast(
         clientError ||
           statusText ||
           t('An error occurred while formatting SQL'),
       );
-    } finally {
-      this.abortControllers.formatQuery = null;
     }
   }
 
@@ -828,71 +802,36 @@ class DatasourceEditor extends PureComponent {
     });
   }
 
-  /**
-   * Formats SQL query using the SQL format API endpoint.
-   * Aborts any pending format requests before starting a new one.
-   */
   async formatSql() {
     const { datasource } = this.state;
     if (!datasource.sql) {
       return;
     }
 
-    // Abort previous formatSql if still pending
-    if (this.abortControllers.formatSql) {
-      this.abortControllers.formatSql.abort();
-    }
-
-    this.abortControllers.formatSql = new AbortController();
-    const { signal } = this.abortControllers.formatSql;
-
     try {
       const response = await SupersetClient.post({
         endpoint: '/api/v1/sql/format',
         body: JSON.stringify({ sql: datasource.sql }),
         headers: { 'Content-Type': 'application/json' },
-        signal,
       });
-
       this.onDatasourcePropChange('sql', response.json.result);
       this.props.addSuccessToast(t('SQL was formatted'));
     } catch (error) {
-      if (error.name === 'AbortError') return;
-
       const { error: clientError, statusText } =
         await getClientErrorObject(error);
-
       this.props.addDangerToast(
         clientError ||
           statusText ||
           t('An error occurred while formatting SQL'),
       );
-    } finally {
-      this.abortControllers.formatSql = null;
     }
   }
 
-  /**
-   * Syncs dataset columns with the database schema.
-   * Fetches column metadata from the underlying table/view and updates the dataset.
-   * Aborts any pending sync requests before starting a new one.
-   */
   async syncMetadata() {
     const { datasource } = this.state;
-
-    // Abort previous syncMetadata if still pending
-    if (this.abortControllers.syncMetadata) {
-      this.abortControllers.syncMetadata.abort();
-    }
-
-    this.abortControllers.syncMetadata = new AbortController();
-    const { signal } = this.abortControllers.syncMetadata;
-
     this.setState({ metadataLoading: true });
-
     try {
-      const newCols = await fetchSyncedColumns(datasource, signal);
-
+      const newCols = await fetchSyncedColumns(datasource);
       const columnChanges = updateColumns(
         datasource.columns,
         newCols,
@@ -909,36 +848,15 @@ class DatasourceEditor extends PureComponent {
       this.props.addSuccessToast(t('Metadata has been synced'));
       this.setState({ metadataLoading: false });
     } catch (error) {
-      if (error.name === 'AbortError') {
-        // Only update state if still mounted (abort may happen during unmount)
-        if (this.isComponentMounted) {
-          this.setState({ metadataLoading: false });
-        }
-        return;
-      }
-
       const { error: clientError, statusText } =
         await getClientErrorObject(error);
-
       this.props.addDangerToast(
         clientError || statusText || t('An error has occurred'),
       );
       this.setState({ metadataLoading: false });
-    } finally {
-      this.abortControllers.syncMetadata = null;
     }
   }
 
-  /**
-   * Fetches chart usage data for this dataset (which charts use this dataset).
-   * Aborts any pending fetch requests before starting a new one.
-   *
-   * @param {number} page - Page number (1-indexed)
-   * @param {number} pageSize - Number of results per page
-   * @param {string} sortColumn - Column to sort by
-   * @param {string} sortDirection - Sort direction ('asc' or 'desc')
-   * @returns {Promise<{charts: Array, count: number, ids: Array}>} Chart usage data
-   */
   async fetchUsageData(
     page = 1,
     pageSize = 25,
@@ -946,15 +864,6 @@ class DatasourceEditor extends PureComponent {
     sortDirection = 'desc',
   ) {
     const { datasource } = this.state;
-
-    // Abort previous fetchUsageData if still pending
-    if (this.abortControllers.fetchUsageData) {
-      this.abortControllers.fetchUsageData.abort();
-    }
-
-    this.abortControllers.fetchUsageData = new AbortController();
-    const { signal } = this.abortControllers.fetchUsageData;
-
     try {
       const queryParams = rison.encode({
         columns: [
@@ -990,7 +899,6 @@ class DatasourceEditor extends PureComponent {
 
       const { json = {} } = await SupersetClient.get({
         endpoint: `/api/v1/chart/?q=${queryParams}`,
-        signal,
       });
 
       const charts = json?.result || [];
@@ -1002,13 +910,10 @@ class DatasourceEditor extends PureComponent {
         id: ids[index],
       }));
 
-      // Only update state if not aborted and component still mounted
-      if (!signal.aborted && this.isComponentMounted) {
-        this.setState({
-          usageCharts: chartsWithIds,
-          usageChartsCount: json?.count || 0,
-        });
-      }
+      this.setState({
+        usageCharts: chartsWithIds,
+        usageChartsCount: json?.count || 0,
+      });
 
       return {
         charts: chartsWithIds,
@@ -1016,12 +921,8 @@ class DatasourceEditor extends PureComponent {
         ids,
       };
     } catch (error) {
-      // Rethrow AbortError so callers can handle gracefully
-      if (error.name === 'AbortError') throw error;
-
       const { error: clientError, statusText } =
         await getClientErrorObject(error);
-
       this.props.addDangerToast(
         clientError ||
           statusText ||
@@ -1031,14 +932,11 @@ class DatasourceEditor extends PureComponent {
         usageCharts: [],
         usageChartsCount: 0,
       });
-
       return {
         charts: [],
         count: 0,
         ids: [],
       };
-    } finally {
-      this.abortControllers.fetchUsageData = null;
     }
   }
 
@@ -2043,7 +1941,6 @@ class DatasourceEditor extends PureComponent {
   }
 
   componentDidMount() {
-    this.isComponentMounted = true;
     Mousetrap.bind('ctrl+shift+f', e => {
       e.preventDefault();
       if (this.state.isEditMode) {
@@ -2051,19 +1948,10 @@ class DatasourceEditor extends PureComponent {
       }
       return false;
     });
-    this.fetchUsageData().catch(error => {
-      if (error?.name !== 'AbortError') throw error;
-    });
+    this.fetchUsageData();
   }
 
   componentWillUnmount() {
-    this.isComponentMounted = false;
-
-    // Abort all pending requests
-    Object.values(this.abortControllers).forEach(controller => {
-      if (controller) controller.abort();
-    });
-
     Mousetrap.unbind('ctrl+shift+f');
     this.props.resetQuery();
   }
@@ -2077,7 +1965,7 @@ const DataSourceComponent = withTheme(DatasourceEditor);
 const mapDispatchToProps = dispatch => ({
   runQuery: payload => dispatch(executeQuery(payload)),
   resetQuery: () => dispatch(resetDatabaseState()),
-  formatQuery: (sql, options) => dispatch(formatQuery(sql, options)),
+  formatQuery: sql => dispatch(formatQuery(sql)),
 });
 const mapStateToProps = state => ({
   database: state?.database,