chore: unify Node version

.github/workflows/scheduled-docker-image-refresh.yml

@@ -102,7 +102,7 @@ jobs:
       fail-fast: false
     steps:
       - name: "Checkout release tag: ${{ needs.config.outputs.latest-release }}"
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
         with:
           ref: ${{ needs.config.outputs.latest-release }}
           fetch-depth: 0

.github/workflows/superset-websocket.yml

@@ -28,10 +28,6 @@ jobs:
         uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
-      - name: Setup Node.js
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
-        with:
-          node-version-file: './superset-websocket/.nvmrc'
       - name: Install dependencies
         working-directory: ./superset-websocket
         run: npm ci

docs/.nvmrc

@@ -1 +0,0 @@
-v24.16.0

docs/.nvmrc

@@ -0,0 +1 @@
+../superset-frontend/.nvmrc

docs/admin_docs/installation/docker-compose.mdx

@@ -223,9 +223,8 @@ compose based installation, edit the `x-superset-image:` line in your `docker-co
 `docker-compose-non-dev.yml` files, replacing `apachesuperset.docker.scarf.sh/apache/superset` with
 `apache/superset` to pull the image directly from Docker Hub.
 
-To disable the Scarf telemetry pixel, set the `SCARF_ANALYTICS` environment variable to `false` in
-your `docker/.env` file. This is read at runtime, so it disables the pixel on the pre-built image
-without rebuilding the frontend.
+To disable the Scarf telemetry pixel, set the `SCARF_ANALYTICS` environment variable to `False` in
+your terminal and/or in your `docker/.env` file.
 :::
 
 ## 3. Log in to Superset

docs/admin_docs/installation/kubernetes.mdx

@@ -136,17 +136,7 @@ init:
 :::note
 Superset uses [Scarf Gateway](https://about.scarf.sh/scarf-gateway) to collect telemetry data.  Knowing the installation counts for different Superset versions informs the  project's decisions about patching and long-term support. Scarf purges personally identifiable information (PII) and provides only aggregated statistics.
 
-There are two independent telemetry channels:
-
-- **Image pulls** (Scarf Gateway): to opt out, edit the `repository:` line in your `helm/superset/values.yaml` file, replacing `apachesuperset.docker.scarf.sh/apache/superset` with `apache/superset` to pull the image directly from Docker Hub.
-- **The analytics pixel** rendered in the UI: to opt out, set the `SCARF_ANALYTICS` environment variable to `false` on the Superset containers via `extraEnv` in your `values.yaml`:
-
-  ```yaml
-  extraEnv:
-    SCARF_ANALYTICS: "false"
-  ```
-
-  This is read at runtime, so it takes effect on the pre-built images without rebuilding the frontend.
+To opt-out of this data collection in your Helm-based installation, edit the `repository:` line in your `helm/superset/values.yaml` file, replacing `apachesuperset.docker.scarf.sh/apache/superset` with `apache/superset` to pull the image directly from Docker Hub.
 :::
 
 ### Dependencies

docs/docs/faq.mdx

@@ -321,8 +321,8 @@ This can be used, for example, to convert UTC time to local time.
 Superset uses [Scarf](https://about.scarf.sh/) by default to collect basic telemetry data upon installing and/or running Superset. This data helps the maintainers of Superset better understand which versions of Superset are being used, in order to prioritize patch/minor releases and security fixes.
 We use the [Scarf Gateway](https://docs.scarf.sh/gateway/) to sit in front of container registries, the [scarf-js](https://about.scarf.sh/package-sdks) package to track `npm` installations, and a Scarf pixel to gather anonymous analytics on Superset page views.
 Scarf purges PII and provides aggregated statistics. Superset users can easily opt out of analytics in various ways documented [here](https://docs.scarf.sh/gateway/#do-not-track) and [here](https://docs.scarf.sh/package-analytics/#as-a-user-of-a-package-using-scarf-js-how-can-i-opt-out-of-analytics).
-You can also opt out of the analytics pixel by setting the `SCARF_ANALYTICS` environment variable to `false`. This is read at runtime, so setting it on the Superset container (for example via `extraEnv` in the Helm chart, or `docker/.env` for Docker Compose) disables the pixel on the pre-built images without rebuilding the frontend. Note that this only disables the page-view pixel; the Scarf Gateway (container registry) and `scarf-js` (`npm`) channels are opted out separately, as described above.
-Additional opt-out instructions are available on the [Docker Compose](/admin-docs/installation/docker-compose) and [Kubernetes](/admin-docs/installation/kubernetes) installation pages.
+Superset maintainers can also opt out of telemetry data collection by setting the `SCARF_ANALYTICS` environment variable to `false` in the Superset container (or anywhere Superset/webpack are run).
+Additional opt-out instructions for Docker users are available on the [Docker Installation](/admin-docs/installation/docker-compose) page.
 
 ## Does Superset have an archive panel or trash bin from which a user can recover deleted assets?
 

helm/superset/Chart.yaml

@@ -29,7 +29,7 @@ maintainers:
   - name: craig-rueda
     email: craig@craigrueda.com
     url: https://github.com/craig-rueda
-version: 0.18.0 # See [README](https://github.com/apache/superset/blob/master/helm/superset/README.md#versioning) for version details.
+version: 0.17.3 # See [README](https://github.com/apache/superset/blob/master/helm/superset/README.md#versioning) for version details.
 dependencies:
   - name: postgresql
     version: 16.7.27

helm/superset/README.md

@@ -23,7 +23,7 @@ NOTE: This file is generated by helm-docs: https://github.com/norwoodj/helm-docs
 
 # superset
 
-![Version: 0.18.0](https://img.shields.io/badge/Version-0.18.0-informational?style=flat-square)
+![Version: 0.17.3](https://img.shields.io/badge/Version-0.17.3-informational?style=flat-square)
 
 Apache Superset is a modern, enterprise-ready business intelligence web application
 
@@ -88,7 +88,6 @@ On helm this can be set on `extraSecretEnv.SUPERSET_SECRET_KEY` or `configOverri
 | ingress.path | string | `"/"` |  |
 | ingress.pathType | string | `"ImplementationSpecific"` |  |
 | ingress.tls | list | `[]` |  |
-| init.additionalPodSpec | object | `{}` | Custom pod spec to be added to init job |
 | init.adminUser.email | string | `"admin@superset.com"` |  |
 | init.adminUser.firstname | string | `"Superset"` |  |
 | init.adminUser.lastname | string | `"Admin"` |  |
@@ -132,7 +131,6 @@ On helm this can be set on `extraSecretEnv.SUPERSET_SECRET_KEY` or `configOverri
 | supersetCeleryBeat.affinity | object | `{}` | Affinity to be added to supersetCeleryBeat deployment |
 | supersetCeleryBeat.command | list | a `celery beat` command | Command |
 | supersetCeleryBeat.containerSecurityContext | object | `{}` |  |
-| supersetCeleryBeat.deploymentAdditionalPodSpec | object | `{}` | Custom pod spec to be added to supersetCeleryBeat deployment |
 | supersetCeleryBeat.deploymentAnnotations | object | `{}` | Annotations to be added to supersetCeleryBeat deployment |
 | supersetCeleryBeat.enabled | bool | `false` | This is only required if you intend to use alerts and reports |
 | supersetCeleryBeat.extraContainers | list | `[]` | Launch additional containers into supersetCeleryBeat pods |
@@ -151,7 +149,6 @@ On helm this can be set on `extraSecretEnv.SUPERSET_SECRET_KEY` or `configOverri
 | supersetCeleryFlower.affinity | object | `{}` | Affinity to be added to supersetCeleryFlower deployment |
 | supersetCeleryFlower.command | list | a `celery flower` command | Command |
 | supersetCeleryFlower.containerSecurityContext | object | `{}` |  |
-| supersetCeleryFlower.deploymentAdditionalPodSpec | object | `{}` | Custom pod spec to be added to supersetCeleryFlower deployment |
 | supersetCeleryFlower.deploymentAnnotations | object | `{}` | Annotations to be added to supersetCeleryFlower deployment |
 | supersetCeleryFlower.enabled | bool | `false` | Enables a Celery flower deployment (management UI to monitor celery jobs) WARNING: on superset 1.x, this requires a Superset image that has `flower<1.0.0` installed (which is NOT the case of the default images) flower>=1.0.0 requires Celery 5+ which Superset 1.5 does not support |
 | supersetCeleryFlower.extraContainers | list | `[]` | Launch additional containers into supersetCeleryFlower pods |
@@ -207,14 +204,12 @@ On helm this can be set on `extraSecretEnv.SUPERSET_SECRET_KEY` or `configOverri
 | supersetNode.connections.db_user | string | `"superset"` |  |
 | supersetNode.connections.redis_cache_db | string | `"1"` |  |
 | supersetNode.connections.redis_celery_db | string | `"0"` |  |
-| supersetNode.connections.redis_driver | string | `""` |  |
 | supersetNode.connections.redis_host | string | `"{{ .Release.Name }}-redis-headless"` | Change in case of bringing your own redis and then also set redis.enabled:false |
 | supersetNode.connections.redis_port | string | `"6379"` |  |
 | supersetNode.connections.redis_ssl.enabled | bool | `false` |  |
 | supersetNode.connections.redis_ssl.ssl_cert_reqs | string | `"CERT_NONE"` |  |
 | supersetNode.connections.redis_user | string | `""` |  |
 | supersetNode.containerSecurityContext | object | `{}` |  |
-| supersetNode.deploymentAdditionalPodSpec | object | `{}` | Custom pod spec to be added to supersetNode deployment |
 | supersetNode.deploymentAnnotations | object | `{}` | Annotations to be added to supersetNode deployment |
 | supersetNode.deploymentLabels | object | `{}` | Labels to be added to supersetNode deployment |
 | supersetNode.env | object | `{}` |  |
@@ -260,7 +255,6 @@ On helm this can be set on `extraSecretEnv.SUPERSET_SECRET_KEY` or `configOverri
 | supersetWebsockets.command | list | `[]` |  |
 | supersetWebsockets.config | object | see `values.yaml` | The config.json to pass to the server, see https://github.com/apache/superset/tree/master/superset-websocket Note that the configuration can also read from environment variables (which will have priority), see https://github.com/apache/superset/blob/master/superset-websocket/src/config.ts for a list of supported variables |
 | supersetWebsockets.containerSecurityContext | object | `{}` |  |
-| supersetWebsockets.deploymentAdditionalPodSpec | object | `{}` | Custom pod spec to be added to supersetWebsockets deployment |
 | supersetWebsockets.deploymentAnnotations | object | `{}` |  |
 | supersetWebsockets.enabled | bool | `false` | This is only required if you intend to use `GLOBAL_ASYNC_QUERIES` in `ws` mode see https://superset.apache.org/docs/contributing/misc#async-chart-queries |
 | supersetWebsockets.extraContainers | list | `[]` | Launch additional containers into supersetWebsockets pods |
@@ -314,7 +308,6 @@ On helm this can be set on `extraSecretEnv.SUPERSET_SECRET_KEY` or `configOverri
 | supersetWorker.autoscaling.targetCPUUtilizationPercentage | int | `80` |  |
 | supersetWorker.command | list | a `celery worker` command | Worker startup command |
 | supersetWorker.containerSecurityContext | object | `{}` |  |
-| supersetWorker.deploymentAdditionalPodSpec | object | `{}` | Custom pod spec to be added to supersetWorker deployment |
 | supersetWorker.deploymentAnnotations | object | `{}` | Annotations to be added to supersetWorker deployment |
 | supersetWorker.deploymentLabels | object | `{}` | Labels to be added to supersetWorker deployment |
 | supersetWorker.extraContainers | list | `[]` | Launch additional containers into supersetWorker pod |

helm/superset/templates/_helpers.tpl

@@ -71,9 +71,9 @@ def env(key, default=None):
 
 # Redis Base URL
 {{- if .Values.supersetNode.connections.redis_password }}
-REDIS_BASE_URL=f"{env('REDIS_DRIVER') or env('REDIS_PROTO')}://{env('REDIS_USER', '')}:{env('REDIS_PASSWORD')}@{env('REDIS_HOST')}:{env('REDIS_PORT')}"
+REDIS_BASE_URL=f"{env('REDIS_PROTO')}://{env('REDIS_USER', '')}:{env('REDIS_PASSWORD')}@{env('REDIS_HOST')}:{env('REDIS_PORT')}"
 {{- else }}
-REDIS_BASE_URL=f"{env('REDIS_DRIVER') or env('REDIS_PROTO')}://{env('REDIS_HOST')}:{env('REDIS_PORT')}"
+REDIS_BASE_URL=f"{env('REDIS_PROTO')}://{env('REDIS_HOST')}:{env('REDIS_PORT')}"
 {{- end }}
 
 # Redis URL Params

helm/superset/templates/deployment-beat.yaml

@@ -68,9 +68,6 @@ spec:
           {{- toYaml .Values.supersetCeleryBeat.podLabels | nindent 8 }}
         {{- end }}
     spec:
-      {{- if .Values.supersetCeleryBeat.deploymentAdditionalPodSpec }}
-      {{- tpl (toYaml .Values.supersetCeleryBeat.deploymentAdditionalPodSpec) . | nindent 6 }}
-      {{- end }}
       {{- if or (.Values.serviceAccount.create) (.Values.serviceAccountName) }}
       serviceAccountName: {{ template "superset.serviceAccountName" . }}
       {{- end }}

helm/superset/templates/deployment-flower.yaml

@@ -57,9 +57,6 @@ spec:
           {{- toYaml .Values.supersetCeleryFlower.podLabels | nindent 8 }}
         {{- end }}
     spec:
-      {{- if .Values.supersetCeleryFlower.deploymentAdditionalPodSpec }}
-      {{- tpl (toYaml .Values.supersetCeleryFlower.deploymentAdditionalPodSpec) . | nindent 6 }}
-      {{- end }}
       {{- if or (.Values.serviceAccount.create) (.Values.serviceAccountName) }}
       serviceAccountName: {{ template "superset.serviceAccountName" . }}
       {{- end }}

helm/superset/templates/deployment-worker.yaml

@@ -74,9 +74,6 @@ spec:
           {{- toYaml .Values.supersetWorker.podLabels | nindent 8 }}
         {{- end }}
     spec:
-      {{- if .Values.supersetWorker.deploymentAdditionalPodSpec }}
-      {{- tpl (toYaml .Values.supersetWorker.deploymentAdditionalPodSpec) . | nindent 6 }}
-      {{- end }}
       {{- if or (.Values.serviceAccount.create) (.Values.serviceAccountName) }}
       serviceAccountName: {{ template "superset.serviceAccountName" . }}
       {{- end }}

helm/superset/templates/deployment-ws.yaml

@@ -60,9 +60,6 @@ spec:
           {{- toYaml .Values.supersetWebsockets.podLabels | nindent 8 }}
         {{- end }}
     spec:
-      {{- if .Values.supersetWebsockets.deploymentAdditionalPodSpec }}
-      {{- tpl (toYaml .Values.supersetWebsockets.deploymentAdditionalPodSpec) . | nindent 6 }}
-      {{- end }}
       {{- if or (.Values.serviceAccount.create) (.Values.serviceAccountName) }}
       serviceAccountName: {{ template "superset.serviceAccountName" . }}
       {{- end }}

helm/superset/templates/deployment.yaml

@@ -76,9 +76,6 @@ spec:
           {{- toYaml .Values.supersetNode.podLabels | nindent 8 }}
         {{- end }}
     spec:
-      {{- if .Values.supersetNode.deploymentAdditionalPodSpec }}
-      {{- tpl (toYaml .Values.supersetNode.deploymentAdditionalPodSpec) . | nindent 6 }}
-      {{- end }}
       {{- if or (.Values.serviceAccount.create) (.Values.serviceAccountName) }}
       serviceAccountName: {{ template "superset.serviceAccountName" . }}
       {{- end }}

helm/superset/templates/init-job.yaml

@@ -41,21 +41,16 @@ spec:
       {{- if .Values.init.podAnnotations }}
       annotations: {{- toYaml .Values.init.podAnnotations | nindent 8 }}
       {{- end }}
+      {{- if or .Values.extraLabels .Values.init.podLabels }}
       labels:
-        app: {{ template "superset.name" . }}
-        chart: {{ template "superset.chart" . }}
-        release: {{ .Release.Name }}
-        job: {{ template "superset.fullname" . }}-init-db
         {{- if .Values.extraLabels }}
           {{- toYaml .Values.extraLabels | nindent 8 }}
         {{- end }}
         {{- if .Values.init.podLabels }}
           {{- toYaml .Values.init.podLabels | nindent 8 }}
         {{- end }}
-    spec:
-      {{- if .Values.init.additionalPodSpec }}
-      {{- tpl (toYaml .Values.init.additionalPodSpec) . | nindent 6 }}
       {{- end }}
+    spec:
       {{- if or (.Values.serviceAccount.create) (.Values.serviceAccountName) }}
       serviceAccountName: {{ template "superset.serviceAccountName" . }}
       {{- end }}

helm/superset/templates/secret-env.yaml

@@ -39,7 +39,6 @@ stringData:
     {{- end }}
     REDIS_PORT: {{ .Values.supersetNode.connections.redis_port | quote }}
     REDIS_PROTO: {{ if .Values.supersetNode.connections.redis_ssl.enabled }}"rediss"{{ else }}"redis"{{ end }}
-    REDIS_DRIVER: {{ .Values.supersetNode.connections.redis_driver | quote }}
     REDIS_DB: {{ .Values.supersetNode.connections.redis_cache_db | quote }}
     REDIS_CELERY_DB: {{ .Values.supersetNode.connections.redis_celery_db | quote }}
     {{- if .Values.supersetNode.connections.redis_ssl.enabled }}

helm/superset/values.yaml

@@ -283,7 +283,6 @@ supersetNode:
     redis_ssl:
       enabled: false
       ssl_cert_reqs: CERT_NONE
-    redis_driver: ""
     # You need to change below configuration incase bringing own PostgresSQL instance and also set postgresql.enabled:false
     # -- Database type for Superset metadata (Supported types: "postgresql", "mysql")
     db_type: "postgresql"
@@ -335,8 +334,6 @@ supersetNode:
   deploymentAnnotations: {}
   # -- Labels to be added to supersetNode deployment
   deploymentLabels: {}
-  # -- Custom pod spec to be added to supersetNode deployment
-  deploymentAdditionalPodSpec: {}
   # -- Affinity to be added to supersetNode deployment
   affinity: {}
   # -- TopologySpreadConstrains to be added to supersetNode deployments
@@ -462,8 +459,6 @@ supersetWorker:
   deploymentAnnotations: {}
   # -- Labels to be added to supersetWorker deployment
   deploymentLabels: {}
-  # -- Custom pod spec to be added to supersetWorker deployment
-  deploymentAdditionalPodSpec: {}
   # -- Affinity to be added to supersetWorker deployment
   affinity: {}
   # -- TopologySpreadConstrains to be added to supersetWorker deployments
@@ -570,8 +565,6 @@ supersetCeleryBeat:
   extraContainers: []
   # -- Annotations to be added to supersetCeleryBeat deployment
   deploymentAnnotations: {}
-  # -- Custom pod spec to be added to supersetCeleryBeat deployment
-  deploymentAdditionalPodSpec: {}
   # -- Affinity to be added to supersetCeleryBeat deployment
   affinity: {}
   # -- TopologySpreadConstrains to be added to supersetCeleryBeat deployments
@@ -687,8 +680,6 @@ supersetCeleryFlower:
   extraContainers: []
   # -- Annotations to be added to supersetCeleryFlower deployment
   deploymentAnnotations: {}
-  # -- Custom pod spec to be added to supersetCeleryFlower deployment
-  deploymentAdditionalPodSpec: {}
   # -- Affinity to be added to supersetCeleryFlower deployment
   affinity: {}
   # -- TopologySpreadConstrains to be added to supersetCeleryFlower deployments
@@ -766,8 +757,6 @@ supersetWebsockets:
   # -- Launch additional containers into supersetWebsockets pods
   extraContainers: []
   deploymentAnnotations: {}
-  # -- Custom pod spec to be added to supersetWebsockets deployment
-  deploymentAdditionalPodSpec: {}
   # -- Affinity to be added to supersetWebsockets deployment
   affinity: {}
   # -- TopologySpreadConstrains to be added to supersetWebsockets deployments
@@ -830,8 +819,6 @@ init:
   jobAnnotations:
     "helm.sh/hook": post-install,post-upgrade
     "helm.sh/hook-delete-policy": "before-hook-creation"
-  # -- Custom pod spec to be added to init job
-  additionalPodSpec: {}
   loadExamples: false
   createAdmin: true
   adminUser:

superset-embedded-sdk/.nvmrc

@@ -1 +0,0 @@
-v24.16.0

superset-embedded-sdk/.nvmrc

@@ -0,0 +1 @@
+../superset-frontend/.nvmrc

superset-embedded-sdk/CONTRIBUTING.md

@@ -32,7 +32,6 @@ and therefore are not easily unit-testable. We have instead opted to test the sd
 This way, the tests can assert that the sdk actually mounts the iframe and communicates with it correctly.
 
 At time of writing, these tests are not written yet, because we haven't yet put together the demo app that they will leverage.
-
 ### Things to e2e test once we have a demo app:
 
 **happy path:**

superset-embedded-sdk/README.md

@@ -41,12 +41,12 @@ npm install --save @superset-ui/embedded-sdk
 ```
 
 ```js
-import { embedDashboard } from "@superset-ui/embedded-sdk";
+import { embedDashboard } from '@superset-ui/embedded-sdk';
 
 embedDashboard({
-  id: "abc123", // given by the Superset embedding UI
-  supersetDomain: "https://superset.example.com",
-  mountPoint: document.getElementById("my-superset-container"), // any html element that can contain an iframe
+  id: 'abc123', // given by the Superset embedding UI
+  supersetDomain: 'https://superset.example.com',
+  mountPoint: document.getElementById('my-superset-container'), // any html element that can contain an iframe
   fetchGuestToken: () => fetchGuestTokenFromBackend(),
   dashboardUiConfig: {
     // dashboard UI config: hideTitle, hideTab, hideChartControls, filters.visible, filters.expanded (optional), urlParams (optional)
@@ -55,21 +55,21 @@ embedDashboard({
       expanded: true,
     },
     urlParams: {
-      foo: "value1",
-      bar: "value2",
+      foo: 'value1',
+      bar: 'value2',
       // themeMode: 'dark', // set the initial theme: 'dark' | 'system' | 'default' (default: 'default')
       // ...
     },
   },
   // optional additional iframe sandbox attributes
   iframeSandboxExtras: [
-    "allow-top-navigation",
-    "allow-popups-to-escape-sandbox",
+    'allow-top-navigation',
+    'allow-popups-to-escape-sandbox',
   ],
   // optional Permissions Policy features
-  iframeAllowExtras: ["clipboard-write", "fullscreen"],
+  iframeAllowExtras: ['clipboard-write', 'fullscreen'],
   // optional config to enforce a particular referrerPolicy
-  referrerPolicy: "same-origin",
+  referrerPolicy: 'same-origin',
   // optional callback to customize permalink URLs
   resolvePermalinkUrl: ({ key }) => `https://my-app.com/analytics/share/${key}`,
 });
@@ -163,13 +163,13 @@ Use the `themeMode` URL parameter to control the embedded dashboard's initial co
 
 ```js
 embedDashboard({
-  id: "abc123",
-  supersetDomain: "https://superset.example.com",
-  mountPoint: document.getElementById("my-superset-container"),
+  id: 'abc123',
+  supersetDomain: 'https://superset.example.com',
+  mountPoint: document.getElementById('my-superset-container'),
   fetchGuestToken: () => fetchGuestTokenFromBackend(),
   dashboardUiConfig: {
     urlParams: {
-      themeMode: "dark", // 'dark' | 'system' | 'default' (default: 'default')
+      themeMode: 'dark', // 'dark' | 'system' | 'default' (default: 'default')
     },
   },
 });
@@ -193,7 +193,7 @@ To pass additional sandbox attributes you can use `iframeSandboxExtras`:
 
 ```js
 // optional additional iframe sandbox attributes
-iframeSandboxExtras: ["allow-top-navigation", "allow-popups-to-escape-sandbox"];
+iframeSandboxExtras: ['allow-top-navigation', 'allow-popups-to-escape-sandbox'];
 ```
 
 ### Permissions Policy
@@ -202,7 +202,7 @@ To enable specific browser features within the embedded iframe, use `iframeAllow
 
 ```js
 // optional Permissions Policy features
-iframeAllowExtras: ["clipboard-write", "fullscreen"];
+iframeAllowExtras: ['clipboard-write', 'fullscreen'];
 ```
 
 Common permissions you might need:
@@ -225,9 +225,9 @@ When users click share buttons inside an embedded dashboard, Superset generates
 
 ```js
 embedDashboard({
-  id: "abc123",
-  supersetDomain: "https://superset.example.com",
-  mountPoint: document.getElementById("my-superset-container"),
+  id: 'abc123',
+  supersetDomain: 'https://superset.example.com',
+  mountPoint: document.getElementById('my-superset-container'),
   fetchGuestToken: () => fetchGuestTokenFromBackend(),
 
   // Customize permalink URLs
@@ -245,9 +245,9 @@ To restore the dashboard state from a permalink in your app:
 const permalinkKey = routeParams.key;
 
 embedDashboard({
-  id: "abc123",
-  supersetDomain: "https://superset.example.com",
-  mountPoint: document.getElementById("my-superset-container"),
+  id: 'abc123',
+  supersetDomain: 'https://superset.example.com',
+  mountPoint: document.getElementById('my-superset-container'),
   fetchGuestToken: () => fetchGuestTokenFromBackend(),
   resolvePermalinkUrl: ({ key }) => `https://my-app.com/analytics/share/${key}`,
   dashboardUiConfig: {

superset-embedded-sdk/babel.config.js

@@ -18,6 +18,9 @@
  */
 
 module.exports = {
-  presets: ["@babel/preset-typescript", "@babel/preset-env"],
+  presets: [
+    "@babel/preset-typescript",
+    "@babel/preset-env"
+  ],
   sourceMaps: true,
 };

superset-embedded-sdk/package.json

@@ -24,7 +24,7 @@
   "scripts": {
     "build": "tsc && babel src --out-dir lib --extensions '.ts,.tsx' && webpack --mode production",
     "ci:release": "node ./release-if-necessary.js",
-    "test": "vitest --run --dir src"
+    "test": "jest"
   },
   "browserslist": [
     "last 3 chrome versions",
@@ -41,11 +41,12 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.4",
     "@babel/preset-typescript": "^7.24.7",
-    "@types/node": "^25.4.0",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^22.5.4",
     "babel-loader": "^9.1.3",
+    "jest": "^29.7.0",
     "tscw-config": "^1.1.2",
-    "typescript": "^5.9.3",
-    "vitest": "^4.0.18",
+    "typescript": "^5.6.2",
     "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4"
   },

superset-embedded-sdk/release-if-necessary.js

@@ -17,15 +17,15 @@
  * under the License.
  */
 
-const { execSync } = require("child_process");
-const { name, version } = require("./package.json");
+const { execSync } = require('child_process');
+const { name, version } = require('./package.json');
 
 function log(...args) {
-  console.log("[embedded-sdk-release]", ...args);
+  console.log('[embedded-sdk-release]', ...args);
 }
 
 function logError(...args) {
-  console.error("[embedded-sdk-release]", ...args);
+  console.error('[embedded-sdk-release]', ...args);
 }
 
 (async () => {
@@ -38,13 +38,13 @@ function logError(...args) {
   const { status } = await fetch(packageUrl);
 
   if (status === 200) {
-    log("version already exists on npm, exiting");
+    log('version already exists on npm, exiting');
   } else if (status === 404) {
-    log("release required, building");
+    log('release required, building');
     try {
-      execSync("npm run build", { stdio: "pipe" });
-      log("build successful, publishing");
-      execSync("npm publish --access public", { stdio: "pipe" });
+      execSync('npm run build', { stdio: 'pipe' });
+      log('build successful, publishing')
+      execSync('npm publish --access public', { stdio: 'pipe' });
       log(`published ${version} to npm`);
     } catch (err) {
       // npm writes failure details to stderr (auth/permission/registry
@@ -52,7 +52,7 @@ function logError(...args) {
       // the real cause in CI logs.
       if (err.stdout) console.error(String(err.stdout));
       if (err.stderr) console.error(String(err.stderr));
-      logError("Encountered an error, details should be above");
+      logError('Encountered an error, details should be above');
       process.exitCode = 1;
     }
   } else {

superset-embedded-sdk/src/const.ts

@@ -18,9 +18,7 @@
  */
 
 export const IFRAME_COMMS_MESSAGE_TYPE = "__embedded_comms__";
-export const DASHBOARD_UI_FILTER_CONFIG_URL_PARAM_KEY: {
-  [index: string]: any;
-} = {
+export const DASHBOARD_UI_FILTER_CONFIG_URL_PARAM_KEY: { [index: string]: any } = {
   visible: "show_filters",
   expanded: "expand_filters",
-};
+}

superset-embedded-sdk/src/guestTokenRefresh.test.ts

@@ -24,23 +24,22 @@ import {
   DEFAULT_TOKEN_EXP_MS,
   DEFAULT_TOKEN_REFRESH_RETRY_MS,
 } from "./guestTokenRefresh";
-import { afterAll, beforeAll, it, expect, describe, vi } from "vitest";
 
 describe("guest token refresh", () => {
   beforeAll(() => {
-    vi.useFakeTimers();
-    vi.setSystemTime(new Date("2022-03-03 01:00"));
-    vi.spyOn(globalThis, "setTimeout");
+    jest.useFakeTimers();
+    jest.setSystemTime(new Date("2022-03-03 01:00"));
+    jest.spyOn(global, "setTimeout");
   });
 
   afterAll(() => {
-    vi.useRealTimers();
+    jest.useRealTimers();
   });
 
   function makeFakeJWT(claims: any) {
     // not a valid jwt, but close enough for this code
     const tokenifiedClaims = Buffer.from(JSON.stringify(claims)).toString(
-      "base64",
+      "base64"
     );
     return `abc.${tokenifiedClaims}.xyz`;
   }

superset-embedded-sdk/src/guestTokenRefresh.ts

@@ -18,23 +18,17 @@
  */
 import { jwtDecode } from "jwt-decode";
 
-export const REFRESH_TIMING_BUFFER_MS = 5000; // refresh guest token early to avoid failed superset requests
-export const MIN_REFRESH_WAIT_MS = 10000; // avoid blasting requests as fast as the cpu can handle
-export const DEFAULT_TOKEN_EXP_MS = 300000; // (5 min) used only when parsing guest token exp fails
-export const DEFAULT_TOKEN_REFRESH_RETRY_MS = 10000; // wait before retrying a failed/timed-out token refresh
+export const REFRESH_TIMING_BUFFER_MS = 5000 // refresh guest token early to avoid failed superset requests
+export const MIN_REFRESH_WAIT_MS = 10000 // avoid blasting requests as fast as the cpu can handle
+export const DEFAULT_TOKEN_EXP_MS = 300000 // (5 min) used only when parsing guest token exp fails
+export const DEFAULT_TOKEN_REFRESH_RETRY_MS = 10000 // wait before retrying a failed/timed-out token refresh
 
 // when do we refresh the guest token?
 export function getGuestTokenRefreshTiming(currentGuestToken: string) {
   const parsedJwt = jwtDecode<Record<string, any>>(currentGuestToken);
   // if exp is int, it is in seconds, but Date() takes milliseconds
-  const exp = new Date(
-    /[^0-9\.]/g.test(parsedJwt.exp)
-      ? parsedJwt.exp
-      : parseFloat(parsedJwt.exp) * 1000,
-  );
-  const isValidDate = exp.toString() !== "Invalid Date";
-  const ttl = isValidDate
-    ? Math.max(MIN_REFRESH_WAIT_MS, exp.getTime() - Date.now())
-    : DEFAULT_TOKEN_EXP_MS;
+  const exp = new Date(/[^0-9\.]/g.test(parsedJwt.exp) ? parsedJwt.exp : parseFloat(parsedJwt.exp) * 1000);
+  const isValidDate = exp.toString() !== 'Invalid Date';
+  const ttl = isValidDate ? Math.max(MIN_REFRESH_WAIT_MS, exp.getTime() - Date.now()) : DEFAULT_TOKEN_EXP_MS;
   return ttl - REFRESH_TIMING_BUFFER_MS;
 }

superset-embedded-sdk/src/index.ts

@@ -20,15 +20,15 @@
 import {
   DASHBOARD_UI_FILTER_CONFIG_URL_PARAM_KEY,
   IFRAME_COMMS_MESSAGE_TYPE,
-} from "./const";
+} from './const';
 
 // We can swap this out for the actual switchboard package once it gets published
-import { Switchboard } from "@superset-ui/switchboard";
+import { Switchboard } from '@superset-ui/switchboard';
 import {
   getGuestTokenRefreshTiming,
   DEFAULT_TOKEN_REFRESH_RETRY_MS,
-} from "./guestTokenRefresh";
-import { withTimeout } from "./withTimeout";
+} from './guestTokenRefresh';
+import { withTimeout } from './withTimeout';
 
 /**
  * The function to fetch a guest token from your Host App's backend server.
@@ -97,7 +97,7 @@ export type ObserveDataMaskCallbackFn = (
     nativeFiltersChanged: boolean;
   },
 ) => void;
-export type ThemeMode = "default" | "dark" | "system";
+export type ThemeMode = 'default' | 'dark' | 'system';
 
 /**
  * Callback to resolve permalink URLs.
@@ -113,12 +113,12 @@ export type EmbeddedDashboard = {
   unmount: () => void;
   getDashboardPermalink: (anchor: string) => Promise<string>;
   getActiveTabs: () => Promise<string[]>;
-  observeDataMask: (callbackFn: ObserveDataMaskCallbackFn) => void;
+  observeDataMask: (
+    callbackFn: ObserveDataMaskCallbackFn,
+  ) => void;
   getDataMask: () => Promise<Record<string, any>>;
   getChartStates: () => Promise<Record<string, any>>;
-  getChartDataPayloads: (params?: {
-    chartId?: number;
-  }) => Promise<Record<string, any>>;
+  getChartDataPayloads: (params?: { chartId?: number }) => Promise<Record<string, any>>;
   setThemeConfig: (themeConfig: Record<string, any>) => void;
   setThemeMode: (mode: ThemeMode) => void;
 };
@@ -133,7 +133,7 @@ export async function embedDashboard({
   fetchGuestToken,
   dashboardUiConfig,
   debug = false,
-  iframeTitle = "Embedded Dashboard",
+  iframeTitle = 'Embedded Dashboard',
   iframeSandboxExtras = [],
   iframeAllowExtras = [],
   referrerPolicy,
@@ -152,13 +152,13 @@ export async function embedDashboard({
     return withTimeout(
       fetchGuestToken(),
       guestTokenFetchTimeoutMs,
-      "fetchGuestToken",
+      'fetchGuestToken',
     );
   }
 
-  log("embedding");
+  log('embedding');
 
-  if (supersetDomain.endsWith("/")) {
+  if (supersetDomain.endsWith('/')) {
     supersetDomain = supersetDomain.slice(0, -1);
   }
 
@@ -185,15 +185,15 @@ export async function embedDashboard({
   }
 
   async function mountIframe(): Promise<Switchboard> {
-    return new Promise((resolve) => {
-      const iframe = document.createElement("iframe");
+    return new Promise(resolve => {
+      const iframe = document.createElement('iframe');
       const dashboardConfigUrlParams = dashboardUiConfig
         ? { uiConfig: `${calculateConfig()}` }
         : undefined;
       const filterConfig = dashboardUiConfig?.filters || {};
       const filterConfigKeys = Object.keys(filterConfig);
       const filterConfigUrlParams = Object.fromEntries(
-        filterConfigKeys.map((key) => [
+        filterConfigKeys.map(key => [
           DASHBOARD_UI_FILTER_CONFIG_URL_PARAM_KEY[key],
           filterConfig[key],
         ]),
@@ -206,16 +206,16 @@ export async function embedDashboard({
         ...dashboardUiConfig?.urlParams,
       };
       const urlParamsString = Object.keys(urlParams).length
-        ? "?" + new URLSearchParams(urlParams).toString()
-        : "";
+        ? '?' + new URLSearchParams(urlParams).toString()
+        : '';
 
       // set up the iframe's sandbox configuration
-      iframe.sandbox.add("allow-same-origin"); // needed for postMessage to work
-      iframe.sandbox.add("allow-scripts"); // obviously the iframe needs scripts
-      iframe.sandbox.add("allow-presentation"); // for fullscreen charts
-      iframe.sandbox.add("allow-downloads"); // for downloading charts as image
-      iframe.sandbox.add("allow-forms"); // for forms to submit
-      iframe.sandbox.add("allow-popups"); // for exporting charts as csv
+      iframe.sandbox.add('allow-same-origin'); // needed for postMessage to work
+      iframe.sandbox.add('allow-scripts'); // obviously the iframe needs scripts
+      iframe.sandbox.add('allow-presentation'); // for fullscreen charts
+      iframe.sandbox.add('allow-downloads'); // for downloading charts as image
+      iframe.sandbox.add('allow-forms'); // for forms to submit
+      iframe.sandbox.add('allow-popups'); // for exporting charts as csv
       // additional sandbox props
       iframeSandboxExtras.forEach((key: string) => {
         iframe.sandbox.add(key);
@@ -226,7 +226,7 @@ export async function embedDashboard({
       }
 
       // add the event listener before setting src, to be 100% sure that we capture the load event
-      iframe.addEventListener("load", () => {
+      iframe.addEventListener('load', () => {
         // MessageChannel allows us to send and receive messages smoothly between our window and the iframe
         // See https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API
         const commsChannel = new MessageChannel();
@@ -237,35 +237,35 @@ export async function embedDashboard({
         // See https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
         // we know the content window isn't null because we are in the load event handler.
         iframe.contentWindow!.postMessage(
-          { type: IFRAME_COMMS_MESSAGE_TYPE, handshake: "port transfer" },
+          { type: IFRAME_COMMS_MESSAGE_TYPE, handshake: 'port transfer' },
           supersetDomain,
           [theirPort],
         );
-        log("sent message channel to the iframe");
+        log('sent message channel to the iframe');
 
         // return our port from the promise
         resolve(
           new Switchboard({
             port: ourPort,
-            name: "superset-embedded-sdk",
+            name: 'superset-embedded-sdk',
             debug,
           }),
         );
       });
       iframe.src = `${supersetDomain}/embedded/${id}${urlParamsString}`;
       iframe.title = iframeTitle;
-      iframe.style.background = "transparent";
+      iframe.style.background = 'transparent';
       // Permissions Policy features the embedded dashboard relies on. Modern
       // browsers gate these APIs on the iframe's `allow` attribute regardless
       // of sandbox flags, so we include them by default. Host apps can extend
       // the list via `iframeAllowExtras`.
       const allowFeatures = Array.from(
-        new Set(["fullscreen", "clipboard-write", ...iframeAllowExtras]),
+        new Set(['fullscreen', 'clipboard-write', ...iframeAllowExtras]),
       );
-      iframe.setAttribute("allow", allowFeatures.join("; "));
+      iframe.setAttribute('allow', allowFeatures.join('; '));
       //@ts-ignore
       mountPoint.replaceChildren(iframe);
-      log("placed the iframe");
+      log('placed the iframe');
     });
   }
 
@@ -285,8 +285,8 @@ export async function embedDashboard({
     throw err;
   }
 
-  ourPort.emit("guestToken", { guestToken });
-  log("sent guest token");
+  ourPort.emit('guestToken', { guestToken });
+  log('sent guest token');
 
   // Track the pending refresh timer so it can be cancelled on unmount, and
   // stop the cycle once unmounted so it cannot leak across mount/unmount cycles.
@@ -298,7 +298,7 @@ export async function embedDashboard({
     try {
       const newGuestToken = await fetchGuestTokenWithTimeout();
       if (unmounted) return;
-      ourPort.emit("guestToken", { guestToken: newGuestToken });
+      ourPort.emit('guestToken', { guestToken: newGuestToken });
       refreshTimer = setTimeout(
         refreshGuestToken,
         getGuestTokenRefreshTiming(newGuestToken),
@@ -307,7 +307,7 @@ export async function embedDashboard({
       // A transient fetch failure or timeout must not permanently stop the
       // refresh cycle. Log it and retry so the session can recover once the
       // host callback succeeds again.
-      log("failed to refresh guest token, will retry:", err);
+      log('failed to refresh guest token, will retry:', err);
       if (unmounted) return;
       refreshTimer = setTimeout(
         refreshGuestToken,
@@ -325,7 +325,7 @@ export async function embedDashboard({
   // Returns null if no callback provided or on error, allowing iframe to use default URL
   ourPort.start();
   ourPort.defineMethod(
-    "resolvePermalinkUrl",
+    'resolvePermalinkUrl',
     async ({ key }: { key: string }): Promise<string | null> => {
       if (!resolvePermalinkUrl) {
         return null;
@@ -333,14 +333,14 @@ export async function embedDashboard({
       try {
         return await resolvePermalinkUrl({ key });
       } catch (error) {
-        log("Error in resolvePermalinkUrl callback:", error);
+        log('Error in resolvePermalinkUrl callback:', error);
         return null;
       }
     },
   );
 
   function unmount() {
-    log("unmounting");
+    log('unmounting');
     unmounted = true;
     if (refreshTimer !== undefined) {
       clearTimeout(refreshTimer);
@@ -350,25 +350,24 @@ export async function embedDashboard({
     mountPoint.replaceChildren();
   }
 
-  const getScrollSize = () => ourPort.get<Size>("getScrollSize");
+  const getScrollSize = () => ourPort.get<Size>('getScrollSize');
   const getDashboardPermalink = (anchor: string) =>
-    ourPort.get<string>("getDashboardPermalink", { anchor });
-  const getActiveTabs = () => ourPort.get<string[]>("getActiveTabs");
-  const getDataMask = () => ourPort.get<Record<string, any>>("getDataMask");
-  const getChartStates = () =>
-    ourPort.get<Record<string, any>>("getChartStates");
+    ourPort.get<string>('getDashboardPermalink', { anchor });
+  const getActiveTabs = () => ourPort.get<string[]>('getActiveTabs');
+  const getDataMask = () => ourPort.get<Record<string, any>>('getDataMask');
+  const getChartStates = () => ourPort.get<Record<string, any>>('getChartStates');
   const getChartDataPayloads = (params?: { chartId?: number }) =>
-    ourPort.get<Record<string, any>>("getChartDataPayloads", params);
-  const observeDataMask = (callbackFn: ObserveDataMaskCallbackFn) => {
-    ourPort.defineMethod("observeDataMask", callbackFn);
+    ourPort.get<Record<string, any>>('getChartDataPayloads', params);
+  const observeDataMask = (
+    callbackFn: ObserveDataMaskCallbackFn,
+  ) => {
+    ourPort.defineMethod('observeDataMask', callbackFn);
   };
   // TODO: Add proper types once theming branch is merged
-  const setThemeConfig = async (
-    themeConfig: Record<string, any>,
-  ): Promise<void> => {
+  const setThemeConfig = async (themeConfig: Record<string, any>): Promise<void> => {
     try {
-      ourPort.emit("setThemeConfig", { themeConfig });
-      log("Theme config sent successfully (or at least message dispatched)");
+      ourPort.emit('setThemeConfig', { themeConfig });
+      log('Theme config sent successfully (or at least message dispatched)');
     } catch (error) {
       log(
         'Error sending theme config. Ensure the iframe side implements the "setThemeConfig" method.',
@@ -379,7 +378,7 @@ export async function embedDashboard({
 
   const setThemeMode = (mode: ThemeMode): void => {
     try {
-      ourPort.emit("setThemeMode", { mode });
+      ourPort.emit('setThemeMode', { mode });
       log(`Theme mode set to: ${mode}`);
     } catch (error) {
       log(

superset-embedded-sdk/src/withTimeout.test.ts

@@ -18,23 +18,22 @@
  */
 
 import { withTimeout } from "./withTimeout";
-import { test, expect } from "vitest";
 
 test("resolves with the value when the promise settles in time", async () => {
   await expect(withTimeout(Promise.resolve("ok"), 1000, "fetch")).resolves.toBe(
-    "ok",
+    "ok"
   );
 });
 
 test("rejects when the promise does not settle within the timeout", async () => {
   const never = new Promise<string>(() => {});
   await expect(withTimeout(never, 10, "fetch")).rejects.toThrow(
-    /fetch did not resolve within 10ms/,
+    /fetch did not resolve within 10ms/
   );
 });
 
 test("passes the promise through unchanged when the timeout is disabled", async () => {
   await expect(withTimeout(Promise.resolve("ok"), 0, "fetch")).resolves.toBe(
-    "ok",
+    "ok"
   );
 });

superset-embedded-sdk/tsconfig.json

@@ -3,7 +3,7 @@
     // syntax rules
     "strict": true,
 
-    "moduleResolution": "bundler",
+    "moduleResolution": "node",
 
     // environment
     "target": "es6",
@@ -13,9 +13,7 @@
     // output
     "outDir": "./dist",
     "emitDeclarationOnly": true,
-    "declaration": true,
-
-    "types": ["node"]
+    "declaration": true
   },
 
   "include": [
@@ -23,6 +21,7 @@
   ],
 
   "exclude": [
+    "tests",
     "dist",
     "lib",
     "node_modules"

superset-embedded-sdk/webpack.config.js

@@ -17,19 +17,19 @@
  * under the License.
  */
 
-const path = require("path");
+const path = require('path');
 
 module.exports = {
-  entry: "./src/index.ts",
+  entry: './src/index.ts',
   output: {
-    filename: "index.js",
-    path: path.resolve(__dirname, "bundle"),
+    filename: 'index.js',
+    path: path.resolve(__dirname, 'bundle'),
 
     // this exposes the library's exports under a global variable
     library: {
       name: "supersetEmbeddedSdk",
-      type: "umd",
-    },
+      type: "umd"
+    }
   },
   devtool: "source-map",
   module: {
@@ -38,12 +38,12 @@ module.exports = {
         test: /\.[tj]s$/,
         // babel-loader is faster than ts-loader because it ignores types.
         // We do type checking in a separate process, so that's fine.
-        use: "babel-loader",
+        use: 'babel-loader',
         exclude: /node_modules/,
       },
     ],
   },
   resolve: {
-    extensions: [".ts", ".js"],
+    extensions: ['.ts', '.js'],
   },
 };

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

@@ -24,10 +24,7 @@ import { Modal } from '../Modal';
 export interface ModalTriggerProps {
   dialogClassName?: string;
   triggerNode: ReactNode;
-  // Accept ReactNode so callers can pass rich titles (e.g. a full
-  // <ControlHeader> with description tooltip + validation badges +
-  // warning icons). String remains valid for the common case.
-  modalTitle?: ReactNode;
+  modalTitle?: string;
   modalBody?: ReactNode; // not required because it can be generated by beforeOpen
   modalFooter?: ReactNode;
   beforeOpen?: Function;
@@ -113,9 +110,7 @@ export const ModalTrigger = forwardRef(
           className={className}
           show={showModal}
           onHide={close}
-          // `name` is used for data-test / telemetry and must be a string;
-          // `title` accepts arbitrary ReactNode for rich rendering.
-          name={typeof modalTitle === 'string' ? modalTitle : undefined}
+          name={modalTitle}
           title={modalTitle}
           footer={modalFooter}
           hideFooter={!modalFooter}

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

@@ -33,15 +33,10 @@ test('should render', () => {
 
 test('should render the pixel link when FF is on', () => {
   process.env.SCARF_ANALYTICS = 'true';
-  render(<TelemetryPixel version="1.2.3" sha="abc" build="42" />);
+  render(<TelemetryPixel />);
 
-  // Hits Scarf's static pixel directly, not the gateway redirect that browsers flag
-  const image = document.querySelector('img[src^="https://static.scarf.sh/"]');
+  const image = document.querySelector('img[src*="scarf.sh"]');
   expect(image).toBeInTheDocument();
-  expect(image?.getAttribute('src')).toContain('version=1.2.3');
-  expect(image?.getAttribute('src')).toContain('sha=abc');
-  expect(image?.getAttribute('src')).toContain('build=42');
-  expect(document.querySelector('img[src*="gateway.scarf.sh"]')).toBeNull();
 });
 
 test('should NOT render the pixel link when FF is off', () => {
@@ -51,19 +46,3 @@ test('should NOT render the pixel link when FF is off', () => {
   const image = document.querySelector('img[src*="scarf.sh"]');
   expect(image).not.toBeInTheDocument();
 });
-
-test('should NOT render the pixel link when disabled at runtime', () => {
-  process.env.SCARF_ANALYTICS = 'true';
-  render(<TelemetryPixel enabled={false} />);
-
-  const image = document.querySelector('img[src*="scarf.sh"]');
-  expect(image).not.toBeInTheDocument();
-});
-
-test('should render the pixel link when enabled at runtime', () => {
-  process.env.SCARF_ANALYTICS = 'true';
-  render(<TelemetryPixel enabled />);
-
-  const image = document.querySelector('img[src*="scarf.sh"]');
-  expect(image).toBeInTheDocument();
-});

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

@@ -23,25 +23,17 @@ interface TelemetryPixelProps {
   version?: string;
   sha?: string;
   build?: string;
-  enabled?: boolean;
 }
 
 /**
  * Renders a telemetry pixel component to capture anonymous, aggregated telemetry via Scarf.
- *
- * Telemetry can be disabled in two ways:
- * - At build time, by setting the SCARF_ANALYTICS environment variable to `false`
- *   (inlined by webpack; only effective when building the frontend yourself).
- * - At runtime, by passing `enabled={false}`, which the app derives from the
- *   `SCARF_ANALYTICS` backend config exposed via the bootstrap payload. This is
- *   what allows opting out in pre-built images, where the build-time flag is fixed.
+ * This can be disabled by setting the SCARF_ANALYTICS environment variable to false.
  *
  * @component
  * @param {TelemetryPixelProps} props - The props for the TelemetryPixel component.
  * @param {string} props.version - The version of  Superset that's currently in use.
  * @param {string} props.sha - The SHA of Superset that's currently in use.
  * @param {string} props.build - The build of Superset that's currently in use.
- * @param {boolean} props.enabled - Runtime opt-out switch; when false the pixel is not rendered.
  * @returns {JSX.Element | null} The rendered TelemetryPixel component.
  */
 
@@ -51,18 +43,9 @@ export const TelemetryPixel = ({
   version = 'unknownVersion',
   sha = 'unknownSHA',
   build = 'unknownBuild',
-  enabled = true,
 }: TelemetryPixelProps): ReactElement | null => {
-  // Use Scarf's native static pixel directly rather than the gateway redirect
-  // (apachesuperset.gateway.scarf.sh), which some browsers/extensions flag as a
-  // tracking redirect. The gateway route forwards to this same static endpoint.
-  const pixelPath =
-    `https://static.scarf.sh/a.png?x-pxid=${PIXEL_ID}` +
-    `&version=${encodeURIComponent(version)}` +
-    `&sha=${encodeURIComponent(sha)}` +
-    `&build=${encodeURIComponent(build)}`;
-  const disabled = !enabled || process.env.SCARF_ANALYTICS === 'false';
-  return disabled ? null : (
+  const pixelPath = `https://apachesuperset.gateway.scarf.sh/pixel/${PIXEL_ID}/${version}/${sha}/${build}`;
+  return process.env.SCARF_ANALYTICS === 'false' ? null : (
     <img
       referrerPolicy="no-referrer-when-downgrade"
       src={pixelPath}

superset-frontend/src/SqlLab/components/App/App.test.tsx

@@ -92,7 +92,7 @@ describe('SqlLab App', () => {
       useRedux: true,
       store: storeExceedLocalStorage,
     });
-    rerender(<App />);
+    rerender(<App updated />);
     expect(storeExceedLocalStorage.getActions()).toContainEqual(
       expect.objectContaining({
         type: LOG_EVENT,
@@ -118,7 +118,7 @@ describe('SqlLab App', () => {
       useRedux: true,
       store: storeExceedLocalStorage,
     });
-    rerender(<App />);
+    rerender(<App updated />);
     expect(storeExceedLocalStorage.getActions()).toContainEqual(
       expect.objectContaining({
         type: LOG_EVENT,

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

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import { Redirect } from 'react-router-dom';
 import Mousetrap from 'mousetrap';
@@ -103,85 +103,59 @@ const SqlLabStyles = styled.div`
   `};
 `;
 
-type AppProps = ReturnType<typeof mergeProps>;
+type PureProps = {
+  // add this for testing componentDidUpdate spec
+  updated?: boolean;
+};
 
-function App({
-  actions,
-  localStorageUsageInKilobytes,
-  queries,
-  queriesLastUpdate,
-}: AppProps) {
-  const [hash, setHash] = useState(window.location.hash);
-  const hasLoggedLocalStorageUsageRef = useRef(false);
+type AppProps = ReturnType<typeof mergeProps> & PureProps;
 
-  const showLocalStorageUsageWarning = useMemo(
-    () =>
-      throttle(
-        (currentUsage: number, queryCount: number) => {
-          actions.addDangerToast(
-            t(
-              "SQL Lab uses your browser's local storage to store queries and results." +
-                '\nCurrently, you are using %(currentUsage)s KB out of %(maxStorage)d KB storage space.' +
-                '\nTo keep SQL Lab from crashing, please delete some query tabs.' +
-                '\nYou can re-access these queries by using the Save feature before you delete the tab.' +
-                '\nNote that you will need to close other SQL Lab windows before you do this.',
-              {
-                currentUsage: currentUsage.toFixed(2),
-                maxStorage: LOCALSTORAGE_MAX_USAGE_KB,
-              },
-            ),
-          );
-          const eventData = {
-            current_usage: currentUsage,
-            query_count: queryCount,
-          };
-          actions.logEvent(
-            LOG_ACTIONS_SQLLAB_WARN_LOCAL_STORAGE_USAGE,
-            eventData,
-          );
-        },
-        LOCALSTORAGE_WARNING_MESSAGE_THROTTLE_MS,
-        { trailing: false },
-      ),
-    [actions],
-  );
+interface AppState {
+  hash: string;
+}
 
-  const onHashChanged = useCallback(() => {
-    setHash(window.location.hash);
-  }, []);
+class App extends PureComponent<AppProps, AppState> {
+  hasLoggedLocalStorageUsage: boolean;
 
-  // componentDidMount and componentWillUnmount
-  useEffect(() => {
-    window.addEventListener('hashchange', onHashChanged);
+  private boundOnHashChanged: () => void;
+
+  constructor(props: AppProps) {
+    super(props);
+    this.state = {
+      hash: window.location.hash,
+    };
+
+    this.boundOnHashChanged = this.onHashChanged.bind(this);
+
+    this.showLocalStorageUsageWarning = throttle(
+      this.showLocalStorageUsageWarning,
+      LOCALSTORAGE_WARNING_MESSAGE_THROTTLE_MS,
+      { trailing: false },
+    );
+  }
+
+  componentDidMount() {
+    window.addEventListener('hashchange', this.boundOnHashChanged);
 
     // Horrible hack to disable side swipe navigation when in SQL Lab. Even though the
     // docs say setting this style on any div will prevent it, turns out it only works
     // when set on the body element.
     document.body.style.overscrollBehaviorX = 'none';
+  }
 
-    return () => {
-      window.removeEventListener('hashchange', onHashChanged);
-
-      // And we need to reset the overscroll behavior back to the default.
-      document.body.style.overscrollBehaviorX = 'auto';
-
-      Mousetrap.reset();
-    };
-  }, [onHashChanged]);
-
-  // componentDidUpdate - check local storage usage
-  useEffect(() => {
+  componentDidUpdate() {
+    const { localStorageUsageInKilobytes, actions, queries } = this.props;
     const queryCount = Object.keys(queries || {}).length || 0;
     if (
       localStorageUsageInKilobytes >=
       LOCALSTORAGE_WARNING_THRESHOLD * LOCALSTORAGE_MAX_USAGE_KB
     ) {
-      showLocalStorageUsageWarning(localStorageUsageInKilobytes, queryCount);
+      this.showLocalStorageUsageWarning(
+        localStorageUsageInKilobytes,
+        queryCount,
+      );
     }
-    if (
-      localStorageUsageInKilobytes > 0 &&
-      !hasLoggedLocalStorageUsageRef.current
-    ) {
+    if (localStorageUsageInKilobytes > 0 && !this.hasLoggedLocalStorageUsage) {
       const eventData = {
         current_usage: localStorageUsageInKilobytes,
         query_count: queryCount,
@@ -190,38 +164,72 @@ function App({
         LOG_ACTIONS_SQLLAB_MONITOR_LOCAL_STORAGE_USAGE,
         eventData,
       );
-      hasLoggedLocalStorageUsageRef.current = true;
+      this.hasLoggedLocalStorageUsage = true;
     }
-  }, [
-    localStorageUsageInKilobytes,
-    queries,
-    actions,
-    showLocalStorageUsageWarning,
-  ]);
+  }
 
-  if (hash && hash === '#search') {
-    return (
-      <Redirect
-        to={{
-          pathname: '/sqllab/history/',
-        }}
-      />
+  componentWillUnmount() {
+    window.removeEventListener('hashchange', this.boundOnHashChanged);
+
+    // And now we need to reset the overscroll behavior back to the default.
+    document.body.style.overscrollBehaviorX = 'auto';
+
+    Mousetrap.reset();
+  }
+
+  onHashChanged() {
+    this.setState({ hash: window.location.hash });
+  }
+
+  showLocalStorageUsageWarning(currentUsage: number, queryCount: number) {
+    this.props.actions.addDangerToast(
+      t(
+        "SQL Lab uses your browser's local storage to store queries and results." +
+          '\nCurrently, you are using %(currentUsage)s KB out of %(maxStorage)d KB storage space.' +
+          '\nTo keep SQL Lab from crashing, please delete some query tabs.' +
+          '\nYou can re-access these queries by using the Save feature before you delete the tab.' +
+          '\nNote that you will need to close other SQL Lab windows before you do this.',
+        {
+          currentUsage: currentUsage.toFixed(2),
+          maxStorage: LOCALSTORAGE_MAX_USAGE_KB,
+        },
+      ),
+    );
+    const eventData = {
+      current_usage: currentUsage,
+      query_count: queryCount,
+    };
+    this.props.actions.logEvent(
+      LOG_ACTIONS_SQLLAB_WARN_LOCAL_STORAGE_USAGE,
+      eventData,
     );
   }
 
-  return (
-    <SqlLabStyles data-test="SqlLabApp" className="App SqlLab">
-      <QueryAutoRefresh
-        queries={queries}
-        queriesLastUpdate={queriesLastUpdate}
-      />
-      <PopEditorTab>
-        <AppLayout>
-          <TabbedSqlEditors />
-        </AppLayout>
-      </PopEditorTab>
-    </SqlLabStyles>
-  );
+  render() {
+    const { queries, queriesLastUpdate } = this.props;
+    if (this.state.hash && this.state.hash === '#search') {
+      return (
+        <Redirect
+          to={{
+            pathname: '/sqllab/history/',
+          }}
+        />
+      );
+    }
+    return (
+      <SqlLabStyles data-test="SqlLabApp" className="App SqlLab">
+        <QueryAutoRefresh
+          queries={queries}
+          queriesLastUpdate={queriesLastUpdate}
+        />
+        <PopEditorTab>
+          <AppLayout>
+            <TabbedSqlEditors />
+          </AppLayout>
+        </PopEditorTab>
+      </SqlLabStyles>
+    );
+  }
 }
 
 function mapStateToProps(state: SqlLabRootState) {
@@ -242,8 +250,10 @@ const mapDispatchToProps = {
 function mergeProps(
   stateProps: ReturnType<typeof mapStateToProps>,
   dispatchProps: typeof mapDispatchToProps,
+  state: PureProps,
 ) {
   return {
+    ...state,
     ...stateProps,
     actions: dispatchProps,
   };

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

@@ -16,13 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useEffect, useCallback, useMemo, useRef } from 'react';
+import { PureComponent } from 'react';
 import { EditableTabs } from '@superset-ui/core/components/Tabs';
 import { connect } from 'react-redux';
 import type { QueryEditor, SqlLabRootState } from 'src/SqlLab/types';
 import { t } from '@apache-superset/core/translation';
 import { FeatureFlag, isFeatureEnabled } from '@superset-ui/core';
-import { styled, css } from '@apache-superset/core/theme';
+import { styled } from '@apache-superset/core/theme';
 import { Logger } from 'src/logger/LogUtils';
 import { EmptyState, Tooltip } from '@superset-ui/core/components';
 import { ErrorBoundary } from 'src/components/ErrorBoundary';
@@ -33,10 +33,10 @@ import SqlEditor from '../SqlEditor';
 import SqlEditorTabHeader from '../SqlEditorTabHeader';
 
 const DEFAULT_PROPS = {
-  queryEditors: [] as QueryEditor[],
+  queryEditors: [],
   offline: false,
-  saveQueryWarning: null as string | null,
-  scheduleQueryWarning: null as string | null,
+  saveQueryWarning: null,
+  scheduleQueryWarning: null,
 };
 
 const StyledEditableTabs = styled(EditableTabs)`
@@ -90,201 +90,170 @@ const TabTitle = styled.span`
   text-transform: none;
 `;
 
+const AddTabIconWrapper = styled.span`
+  display: inline-flex;
+  vertical-align: middle;
+`;
+
 // Get the user's OS
 const userOS = detectOS();
 
 type TabbedSqlEditorsProps = ReturnType<typeof mergeProps>;
 
-function TabbedSqlEditors({
-  actions,
-  queryEditors = DEFAULT_PROPS.queryEditors,
-  queries,
-  tabHistory,
-  displayLimit,
-  offline = DEFAULT_PROPS.offline,
-  defaultQueryLimit,
-  maxRow,
-  saveQueryWarning = DEFAULT_PROPS.saveQueryWarning,
-  scheduleQueryWarning = DEFAULT_PROPS.scheduleQueryWarning,
-}: TabbedSqlEditorsProps) {
-  const activeQueryEditor = useMemo(() => {
-    if (tabHistory.length === 0) {
-      return queryEditors[0];
-    }
-    const qeid = tabHistory[tabHistory.length - 1];
-    return queryEditors.find(qe => qe.id === qeid) || null;
-  }, [tabHistory, queryEditors]);
+class TabbedSqlEditors extends PureComponent<TabbedSqlEditorsProps> {
+  constructor(props: TabbedSqlEditorsProps) {
+    super(props);
+    this.removeQueryEditor = this.removeQueryEditor.bind(this);
+    this.handleSelect = this.handleSelect.bind(this);
+    this.handleEdit = this.handleEdit.bind(this);
+  }
 
-  // Track the last persisted resultsKey we fetched, so the effect retries when
-  // the active query editor resolves after mount (or its latest query changes)
-  // but dedupes when the same resultsKey has already been fetched.
-  const fetchedResultsKeyRef = useRef<string | null>(null);
-
-  // Fetch query results for the active editor's latest query when its
-  // persisted resultsKey changes (equivalent to componentDidMount, but resilient
-  // to async hydration of activeQueryEditor).
-  useEffect(() => {
-    const latestQuery = queries[activeQueryEditor?.latestQueryId || ''];
-    const resultsKey = latestQuery?.resultsKey;
+  componentDidMount() {
+    const qe = this.activeQueryEditor();
+    const latestQuery = this.props.queries[qe?.latestQueryId || ''];
     if (
       isFeatureEnabled(FeatureFlag.SqllabBackendPersistence) &&
-      resultsKey &&
-      fetchedResultsKeyRef.current !== resultsKey
+      latestQuery?.resultsKey
     ) {
-      fetchedResultsKeyRef.current = resultsKey;
       // when results are not stored in localStorage they need to be
       // fetched from the results backend (if configured)
-      actions.fetchQueryResults(latestQuery, displayLimit);
+      this.props.actions.fetchQueryResults(
+        latestQuery,
+        this.props.displayLimit,
+      );
     }
-  }, [queries, activeQueryEditor, actions, displayLimit]);
+  }
 
-  const newQueryEditor = useCallback(() => {
-    actions.addNewQueryEditor();
-  }, [actions]);
+  activeQueryEditor() {
+    if (this.props.tabHistory.length === 0) {
+      return this.props.queryEditors[0];
+    }
+    const qeid = this.props.tabHistory[this.props.tabHistory.length - 1];
+    return this.props.queryEditors.find(qe => qe.id === qeid) || null;
+  }
 
-  const removeQueryEditor = useCallback(
-    (qe: QueryEditor) => {
-      actions.removeQueryEditor(qe);
-    },
-    [actions],
-  );
+  newQueryEditor() {
+    this.props.actions.addNewQueryEditor();
+  }
 
-  const handleSelect = useCallback(
-    (key: string) => {
-      const qeid = tabHistory[tabHistory.length - 1];
-      if (key !== qeid) {
-        const queryEditor = queryEditors.find(qe => qe.id === key);
-        if (!queryEditor) {
-          return;
-        }
-        actions.setActiveQueryEditor(queryEditor);
+  handleSelect(key: string) {
+    const qeid = this.props.tabHistory[this.props.tabHistory.length - 1];
+    if (key !== qeid) {
+      const queryEditor = this.props.queryEditors.find(qe => qe.id === key);
+      if (!queryEditor) {
+        return;
       }
-    },
-    [tabHistory, queryEditors, actions],
-  );
+      this.props.actions.setActiveQueryEditor(queryEditor);
+    }
+  }
 
-  const handleEdit = useCallback(
-    (key: string, action: string) => {
-      if (action === 'remove') {
-        const qe = queryEditors.find(qe => qe.id === key);
-        if (qe) {
-          removeQueryEditor(qe);
-        }
+  handleEdit(key: string, action: string) {
+    if (action === 'remove') {
+      const qe = this.props.queryEditors.find(qe => qe.id === key);
+      if (qe) {
+        this.removeQueryEditor(qe);
       }
-      if (action === 'add') {
-        Logger.markTimeOrigin();
-        newQueryEditor();
-      }
-    },
-    [queryEditors, removeQueryEditor, newQueryEditor],
-  );
+    }
+    if (action === 'add') {
+      Logger.markTimeOrigin();
+      this.newQueryEditor();
+    }
+  }
 
-  const onTabClicked = useCallback(() => {
+  removeQueryEditor(qe: QueryEditor) {
+    this.props.actions.removeQueryEditor(qe);
+  }
+
+  onTabClicked = () => {
     Logger.markTimeOrigin();
-    const noQueryEditors = queryEditors?.length === 0;
+    const noQueryEditors = this.props.queryEditors?.length === 0;
     if (noQueryEditors) {
-      newQueryEditor();
+      this.newQueryEditor();
     }
-  }, [queryEditors, newQueryEditor]);
-
-  const editors = useMemo(
-    () =>
-      queryEditors?.map(qe => ({
-        key: qe.id,
-        label: <SqlEditorTabHeader queryEditor={qe} />,
-        children: (
-          <ErrorBoundary>
-            <SqlEditor
-              queryEditor={qe}
-              defaultQueryLimit={defaultQueryLimit}
-              maxRow={maxRow}
-              displayLimit={displayLimit}
-              saveQueryWarning={saveQueryWarning}
-              scheduleQueryWarning={scheduleQueryWarning}
-            />
-          </ErrorBoundary>
-        ),
-      })),
-    [
-      queryEditors,
-      defaultQueryLimit,
-      maxRow,
-      displayLimit,
-      saveQueryWarning,
-      scheduleQueryWarning,
-    ],
-  );
-
-  const emptyTab = (
-    <StyledTab>
-      <TabTitle>{t('Add a new tab')}</TabTitle>
-      <Tooltip
-        id="add-tab"
-        placement="bottom"
-        title={
-          userOS === 'Windows'
-            ? t('New tab (Ctrl + q)')
-            : t('New tab (Ctrl + t)')
-        }
-      >
-        <Icons.PlusCircleOutlined
-          iconSize="s"
-          css={css`
-            vertical-align: middle;
-          `}
-          data-test="add-tab-icon"
-        />
-      </Tooltip>
-    </StyledTab>
-  );
-
-  const emptyTabState = {
-    key: '0',
-    label: emptyTab,
-    children: (
-      <EmptyState
-        image="empty_sql_chart.svg"
-        size="large"
-        description={t('Add a new tab to create SQL Query')}
-      />
-    ),
   };
 
-  const tabItems = queryEditors?.length > 0 ? editors : [emptyTabState];
+  render() {
+    const editors = this.props.queryEditors?.map(qe => ({
+      key: qe.id,
+      label: <SqlEditorTabHeader queryEditor={qe} />,
+      children: (
+        <ErrorBoundary>
+          <SqlEditor
+            queryEditor={qe}
+            defaultQueryLimit={this.props.defaultQueryLimit}
+            maxRow={this.props.maxRow}
+            displayLimit={this.props.displayLimit}
+            saveQueryWarning={this.props.saveQueryWarning}
+            scheduleQueryWarning={this.props.scheduleQueryWarning}
+          />
+        </ErrorBoundary>
+      ),
+    }));
 
-  return (
-    <StyledEditableTabs
-      activeKey={tabHistory[tabHistory.length - 1]}
-      id="a11y-query-editor-tabs"
-      className="SqlEditorTabs"
-      data-test="sql-editor-tabs"
-      onChange={handleSelect}
-      hideAdd={offline}
-      onTabClick={onTabClicked}
-      onEdit={handleEdit}
-      type={queryEditors?.length === 0 ? 'card' : 'editable-card'}
-      addIcon={
+    const emptyTab = (
+      <StyledTab>
+        <TabTitle>{t('Add a new tab')}</TabTitle>
         <Tooltip
           id="add-tab"
-          placement="left"
+          placement="bottom"
           title={
             userOS === 'Windows'
               ? t('New tab (Ctrl + q)')
               : t('New tab (Ctrl + t)')
           }
         >
-          <Icons.PlusOutlined
-            iconSize="l"
-            css={css`
-              vertical-align: middle;
-            `}
-            data-test="add-tab-icon"
-          />
+          <AddTabIconWrapper>
+            <Icons.PlusCircleOutlined iconSize="s" data-test="add-tab-icon" />
+          </AddTabIconWrapper>
         </Tooltip>
-      }
-      items={tabItems}
-    />
-  );
+      </StyledTab>
+    );
+
+    const emptyTabState = {
+      key: '0',
+      label: emptyTab,
+      children: (
+        <EmptyState
+          image="empty_sql_chart.svg"
+          size="large"
+          description={t('Add a new tab to create SQL Query')}
+        />
+      ),
+    };
+
+    const tabItems =
+      this.props.queryEditors?.length > 0 ? editors : [emptyTabState];
+
+    return (
+      <StyledEditableTabs
+        activeKey={this.props.tabHistory[this.props.tabHistory.length - 1]}
+        id="a11y-query-editor-tabs"
+        className="SqlEditorTabs"
+        data-test="sql-editor-tabs"
+        onChange={this.handleSelect}
+        hideAdd={this.props.offline}
+        onTabClick={this.onTabClicked}
+        onEdit={this.handleEdit}
+        type={this.props.queryEditors?.length === 0 ? 'card' : 'editable-card'}
+        addIcon={
+          <Tooltip
+            id="add-tab"
+            placement="left"
+            title={
+              userOS === 'Windows'
+                ? t('New tab (Ctrl + q)')
+                : t('New tab (Ctrl + t)')
+            }
+          >
+            <AddTabIconWrapper>
+              <Icons.PlusOutlined iconSize="l" data-test="add-tab-icon" />
+            </AddTabIconWrapper>
+          </Tooltip>
+        }
+        items={tabItems}
+      />
+    );
+  }
 }
 
 export function mapStateToProps({ sqlLab, common }: SqlLabRootState) {

superset-frontend/src/components/CopyToClipboard/CopyToClipboard.test.tsx

@@ -17,7 +17,6 @@
  * under the License.
  */
 import {
-  fireEvent,
   render,
   screen,
   userEvent,
@@ -38,34 +37,6 @@ test('renders with custom copy node', () => {
   expect(screen.getByRole('link')).toBeInTheDocument();
 });
 
-// Regression guard: passing a non-element copyNode (string or number) used to
-// crash because cloneElement only accepts React elements. The render path now
-// gates the cloneElement call behind isValidElement and falls back to a span
-// wrapper, so plain primitives should render without throwing.
-test('renders with string copyNode without crashing', () => {
-  render(<CopyToClipboard copyNode="just text" />, { useRedux: true });
-  expect(screen.getByRole('button')).toHaveTextContent('just text');
-});
-
-test('renders with number copyNode without crashing', () => {
-  render(<CopyToClipboard copyNode={42} />, { useRedux: true });
-  expect(screen.getByRole('button')).toHaveTextContent('42');
-});
-
-test('non-element copyNode wrapper is keyboard-activatable', async () => {
-  const onCopyEnd = jest.fn();
-  render(<CopyToClipboard copyNode="copy me" onCopyEnd={onCopyEnd} />, {
-    useRedux: true,
-  });
-  const button = screen.getByRole('button');
-  expect(button).toHaveAttribute('tabIndex', '0');
-  button.focus();
-  // user-event v12 (pinned in this repo) doesn't expose .keyboard(); use
-  // fireEvent to dispatch the Enter keydown directly to the focused button.
-  fireEvent.keyDown(button, { key: 'Enter' });
-  await waitFor(() => expect(onCopyEnd).toHaveBeenCalled());
-});
-
 test('renders without text showing', () => {
   const text = 'Text';
   render(<CopyToClipboard text={text} shouldShowText={false} />, {

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

@@ -16,13 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import {
-  cloneElement,
-  isValidElement,
-  type KeyboardEvent,
-  ReactElement,
-  useCallback,
-} from 'react';
+import { Component, cloneElement, ReactElement } from 'react';
 import { t } from '@apache-superset/core/translation';
 import { css, SupersetTheme } from '@apache-superset/core/theme';
 import copyTextToClipboard from 'src/utils/copy';
@@ -30,142 +24,121 @@ import { Tooltip } from '@superset-ui/core/components';
 import withToasts from '../MessageToasts/withToasts';
 import type { CopyToClipboardProps } from './types';
 
-function CopyToClip({
-  copyNode = <span>{t('Copy')}</span>,
-  onCopyEnd = () => {},
-  shouldShowText = true,
-  wrapped = true,
-  tooltipText = t('Copy to clipboard'),
-  hideTooltip = false,
-  disabled,
-  getText,
-  text,
-  addSuccessToast,
-  addDangerToast,
-}: CopyToClipboardProps) {
-  const copyToClipboard = useCallback(
-    (textToCopy: Promise<string>) => {
-      copyTextToClipboard(() => textToCopy)
-        .then(() => {
-          addSuccessToast(t('Copied to clipboard!'));
-        })
-        .catch(() => {
-          addDangerToast(
-            t(
-              'Sorry, your browser does not support copying. Use Ctrl / Cmd + C!',
-            ),
-          );
-        })
-        .finally(() => {
-          if (onCopyEnd) onCopyEnd();
-        });
-    },
-    [addSuccessToast, addDangerToast, onCopyEnd],
-  );
+const defaultProps: Partial<CopyToClipboardProps> = {
+  copyNode: <span>{t('Copy')}</span>,
+  onCopyEnd: () => {},
+  shouldShowText: true,
+  wrapped: true,
+  tooltipText: t('Copy to clipboard'),
+  hideTooltip: false,
+};
 
-  const onClick = useCallback(() => {
-    if (disabled) {
+class CopyToClip extends Component<CopyToClipboardProps> {
+  static defaultProps = defaultProps;
+
+  constructor(props: CopyToClipboardProps) {
+    super(props);
+    this.copyToClipboard = this.copyToClipboard.bind(this);
+    this.onClick = this.onClick.bind(this);
+  }
+
+  onClick() {
+    if (this.props.disabled) {
       return;
     }
-    if (getText) {
-      getText((d: string) => {
-        copyToClipboard(Promise.resolve(d));
+    if (this.props.getText) {
+      this.props.getText((d: string) => {
+        this.copyToClipboard(Promise.resolve(d));
       });
     } else {
-      copyToClipboard(Promise.resolve(text || ''));
+      this.copyToClipboard(Promise.resolve(this.props.text || ''));
     }
-  }, [disabled, getText, text, copyToClipboard]);
+  }
 
-  const getDecoratedCopyNode = useCallback(() => {
-    const cursor = disabled ? 'not-allowed' : 'pointer';
-    if (isValidElement(copyNode)) {
-      const node = copyNode as ReactElement;
-      return cloneElement(node, {
-        style: {
-          ...node.props.style,
-          cursor,
-        },
-        onClick: disabled ? undefined : onClick,
-        'aria-disabled': disabled || undefined,
-        tabIndex: disabled ? -1 : node.props.tabIndex,
+  getDecoratedCopyNode() {
+    const copyNode = this.props.copyNode as ReactElement;
+    const { disabled } = this.props;
+    return cloneElement(copyNode, {
+      style: {
+        ...copyNode.props.style,
+        cursor: disabled ? 'not-allowed' : 'pointer',
+      },
+      onClick: disabled ? undefined : this.onClick,
+      'aria-disabled': disabled || undefined,
+      tabIndex: disabled ? -1 : copyNode.props.tabIndex,
+    });
+  }
+
+  copyToClipboard(textToCopy: Promise<string>) {
+    copyTextToClipboard(() => textToCopy)
+      .then(() => {
+        this.props.addSuccessToast(t('Copied to clipboard!'));
+      })
+      .catch(() => {
+        this.props.addDangerToast(
+          t(
+            'Sorry, your browser does not support copying. Use Ctrl / Cmd + C!',
+          ),
+        );
+      })
+      .finally(() => {
+        if (this.props.onCopyEnd) this.props.onCopyEnd();
       });
-    }
-    const handleKeyDown = disabled
-      ? undefined
-      : (event: KeyboardEvent<HTMLSpanElement>) => {
-          if (event.key === 'Enter' || event.key === ' ') {
-            // Prevent space-scroll when the wrapper is focused.
-            event.preventDefault();
-            onClick();
-          }
-        };
-    return (
-      <span
-        style={{ cursor }}
-        onClick={disabled ? undefined : onClick}
-        onKeyDown={handleKeyDown}
-        role="button"
-        aria-disabled={disabled || undefined}
-        tabIndex={disabled ? -1 : 0}
-      >
-        {copyNode}
-      </span>
-    );
-  }, [copyNode, disabled, onClick]);
+  }
 
-  const renderTooltip = useCallback(
-    (cursor: string) => (
+  renderTooltip(cursor: string) {
+    return (
       <>
-        {!hideTooltip ? (
+        {!this.props.hideTooltip ? (
           <Tooltip
             id="copy-to-clipboard-tooltip"
             placement="topRight"
             style={{ cursor }}
-            title={tooltipText || ''}
+            title={this.props.tooltipText || ''}
             trigger={['hover']}
             arrow={{ pointAtCenter: true }}
           >
             {/* Wrap in a span so antd Tooltip has a real DOM ref target;
                 avoids findDOMNode fallback when copyNode is a function
                 component without forwardRef. */}
-            <span>{getDecoratedCopyNode()}</span>
+            <span>{this.getDecoratedCopyNode()}</span>
           </Tooltip>
         ) : (
-          getDecoratedCopyNode()
+          this.getDecoratedCopyNode()
         )}
       </>
-    ),
-    [hideTooltip, tooltipText, getDecoratedCopyNode],
-  );
+    );
+  }
 
-  const renderNotWrapped = useCallback(
-    () => renderTooltip(disabled ? 'not-allowed' : 'pointer'),
-    [renderTooltip, disabled],
-  );
+  renderNotWrapped() {
+    return this.renderTooltip(this.props.disabled ? 'not-allowed' : 'pointer');
+  }
 
-  const renderLink = useCallback(
-    () => (
+  renderLink() {
+    return (
       <span css={{ display: 'inline-flex', alignItems: 'center' }}>
-        {shouldShowText && text && (
+        {this.props.shouldShowText && this.props.text && (
           <span
             data-test="short-url"
             css={(theme: SupersetTheme) => css`
               margin-right: ${theme.sizeUnit}px;
             `}
           >
-            {text}
+            {this.props.text}
           </span>
         )}
-        {renderTooltip(disabled ? 'not-allowed' : 'pointer')}
+        {this.renderTooltip(this.props.disabled ? 'not-allowed' : 'pointer')}
       </span>
-    ),
-    [shouldShowText, text, renderTooltip, disabled],
-  );
-
-  if (!wrapped) {
-    return renderNotWrapped();
+    );
+  }
+
+  render() {
+    const { wrapped } = this.props;
+    if (!wrapped) {
+      return this.renderNotWrapped();
+    }
+    return this.renderLink();
   }
-  return renderLink();
 }
 
 export const CopyToClipboard = withToasts(CopyToClip);

superset-frontend/src/components/Datasource/components/CollectionTable/CollectionTable.test.tsx

@@ -32,5 +32,5 @@ test('renders a table', () => {
   const tableBody = container.querySelector('.ant-table-tbody');
   expect(tableBody).toBeInTheDocument();
   const rows = tableBody?.getElementsByTagName('tr');
-  expect(rows).toHaveLength(mockDatasource['7__table'].columns.length);
+  expect(rows).toHaveLength(mockDatasource['7__table'].columns.length + 1);
 });

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

@@ -16,14 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import {
-  ReactNode,
-  useState,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-} from 'react';
+import { PureComponent, ReactNode } from 'react';
 import { nanoid } from 'nanoid';
 import { t } from '@apache-superset/core/translation';
 import { styled, css, SupersetTheme } from '@apache-superset/core/theme';
@@ -40,8 +33,8 @@ import Fieldset from '../Fieldset';
 import { recurseReactClone } from '../../utils';
 import {
   type CRUDCollectionProps,
+  type CRUDCollectionState,
   type Sort,
-  SortOrder as SortOrderEnum,
 } from '../../types';
 
 const CrudButtonWrapper = styled.div`
@@ -59,18 +52,18 @@ const StyledButtonWrapper = styled.span`
   `}
 `;
 
-type CollectionItem = { id: string | number; [key: string]: unknown };
+type CollectionItem = { id: string | number; [key: string]: any };
 
 function createKeyedCollection(arr: Array<object>) {
   const collectionArray = arr.map(
-    (o: Record<string, unknown>) =>
+    (o: any) =>
       ({
         ...o,
-        id: o.id != null ? o.id : nanoid(),
+        id: o.id || nanoid(),
       }) as CollectionItem,
   );
 
-  const collection: Record<PropertyKey, CollectionItem> = {};
+  const collection: Record<PropertyKey, any> = {};
   collectionArray.forEach((o: CollectionItem) => {
     collection[o.id] = o;
   });
@@ -81,317 +74,270 @@ function createKeyedCollection(arr: Array<object>) {
   };
 }
 
-export default function CRUDCollection({
-  allowAddItem = false,
-  allowDeletes = false,
-  collection: propsCollection,
-  columnLabels,
-  columnLabelTooltips,
-  emptyMessage = t('No items'),
-  expandFieldset,
-  itemGenerator,
-  itemCellProps,
-  itemRenderers,
-  onChange,
-  tableColumns,
-  sortColumns = [],
-  stickyHeader = false,
-  pagination = false,
-  filterTerm,
-  filterFields,
-}: CRUDCollectionProps) {
-  const [expandedColumns, setExpandedColumns] = useState<
-    Record<PropertyKey, boolean>
-  >({});
-  // Seed both pieces of state from a single createKeyedCollection() pass so
-  // that items lacking an `id` get one consistent set of synthetic ids
-  // (matching the prior class component, which keyed the collection once).
-  const initialKeyed = useRef<ReturnType<typeof createKeyedCollection>>();
-  if (!initialKeyed.current) {
-    initialKeyed.current = createKeyedCollection(propsCollection);
+export default class CRUDCollection extends PureComponent<
+  CRUDCollectionProps,
+  CRUDCollectionState
+> {
+  constructor(props: CRUDCollectionProps) {
+    super(props);
+
+    const { collection, collectionArray } = createKeyedCollection(
+      props.collection,
+    );
+
+    // Get initial page size from pagination prop
+    const initialPageSize =
+      typeof props.pagination === 'object' && props.pagination?.pageSize
+        ? props.pagination.pageSize
+        : 10;
+
+    this.state = {
+      expandedColumns: {},
+      collection,
+      collectionArray,
+      sortColumn: '',
+      sort: 0,
+      currentPage: 1,
+      pageSize: initialPageSize,
+    };
+    this.onAddItem = this.onAddItem.bind(this);
+    this.renderExpandableSection = this.renderExpandableSection.bind(this);
+    this.getLabel = this.getLabel.bind(this);
+    this.onFieldsetChange = this.onFieldsetChange.bind(this);
+    this.changeCollection = this.changeCollection.bind(this);
+    this.handleTableChange = this.handleTableChange.bind(this);
+    this.buildTableColumns = this.buildTableColumns.bind(this);
+    this.toggleExpand = this.toggleExpand.bind(this);
   }
-  const [collection, setCollection] = useState<
-    Record<PropertyKey, CollectionItem>
-  >(() => initialKeyed.current!.collection);
-  const [collectionArray, setCollectionArray] = useState<CollectionItem[]>(
-    () => initialKeyed.current!.collectionArray,
-  );
-  const [sortColumn, setSortColumn] = useState<string>('');
-  const [sort, setSort] = useState<SortOrderEnum>(SortOrderEnum.Unsorted);
-  // Controlled pagination: tracked so that filtering can clamp currentPage
-  // back to a valid page (avoids the user being stranded on an empty page
-  // when filterTerm shrinks the result set).
-  const [pageSize, setPageSize] = useState<number>(() =>
-    typeof pagination === 'object' && pagination?.pageSize
-      ? pagination.pageSize
-      : 10,
-  );
-  const [currentPage, setCurrentPage] = useState<number>(1);
 
-  // Sync with props.collection changes
-  useEffect(() => {
-    const { collection: newCollection, collectionArray: newCollectionArray } =
-      createKeyedCollection(propsCollection);
-    setCollection(newCollection);
-    setCollectionArray(newCollectionArray);
-  }, [propsCollection]);
+  componentDidUpdate(prevProps: CRUDCollectionProps) {
+    if (this.props.collection !== prevProps.collection) {
+      const { collection, collectionArray } = createKeyedCollection(
+        this.props.collection,
+      );
 
-  const onCellChange = useCallback(
-    (id: string | number, col: string, val: unknown) => {
-      setCollection(prevCollection => {
-        const updatedCollection = {
-          ...prevCollection,
-          [id]: {
-            ...prevCollection[id],
-            [col]: val,
-          },
-        };
-        return updatedCollection;
-      });
+      this.setState(prevState => ({
+        collection,
+        collectionArray,
+        expandedColumns: prevState.expandedColumns,
+      }));
+    }
+  }
 
-      setCollectionArray(prevCollectionArray => {
-        const updatedCollectionArray = prevCollectionArray.map(item => {
-          if (item.id === id) {
-            return {
-              ...item,
-              [col]: val,
-            };
-          }
-          return item;
-        });
+  onCellChange(id: string | number, col: string, val: unknown) {
+    this.setState(prevState => {
+      const updatedCollection = {
+        ...prevState.collection,
+        [id]: {
+          ...prevState.collection[id],
+          [col]: val,
+        },
+      };
+      const updatedCollectionArray = prevState.collectionArray.map(item =>
+        item.id === id ? updatedCollection[id] : item,
+      );
 
-        if (onChange) {
-          onChange(updatedCollectionArray);
-        }
-
-        return updatedCollectionArray;
-      });
-    },
-    [onChange],
-  );
-
-  const changeCollection = useCallback(
-    (
-      newCollection: Record<PropertyKey, CollectionItem>,
-      currentCollectionArray: CollectionItem[],
-    ) => {
-      // Preserve existing order instead of recreating from Object.keys()
-      const existingIds = new Set(currentCollectionArray.map(item => item.id));
-      const newCollectionArray: CollectionItem[] = [];
-
-      // First pass: preserve existing order and update items
-      for (const existingItem of currentCollectionArray) {
-        if (newCollection[existingItem.id]) {
-          newCollectionArray.push(newCollection[existingItem.id]);
-        }
+      if (this.props.onChange) {
+        this.props.onChange(updatedCollectionArray);
       }
+      return {
+        collection: updatedCollection,
+        collectionArray: updatedCollectionArray,
+      };
+    });
+  }
 
-      // Second pass: add new items
-      for (const item of Object.values(newCollection)) {
-        if (!existingIds.has(item.id)) {
-          newCollectionArray.push(item);
-        }
-      }
-
-      setCollection(newCollection);
-      setCollectionArray(newCollectionArray);
-
-      if (onChange) {
-        onChange(newCollectionArray);
-      }
-    },
-    [onChange],
-  );
-
-  const deleteItem = useCallback(
-    (id: string | number) => {
-      setCollection(prevCollection => {
-        const newColl = { ...prevCollection };
-        delete newColl[id];
-        return newColl;
-      });
-
-      setCollectionArray(prevCollectionArray => {
-        const newCollectionArray = prevCollectionArray.filter(
-          item => item.id !== id,
-        );
-
-        if (onChange) {
-          onChange(newCollectionArray);
-        }
-
-        return newCollectionArray;
-      });
-    },
-    [onChange],
-  );
-
-  const onAddItem = useCallback(() => {
-    if (itemGenerator) {
-      let newItem = itemGenerator() as CollectionItem;
+  onAddItem() {
+    if (this.props.itemGenerator) {
+      let newItem = this.props.itemGenerator();
       const shouldStartExpanded = newItem.expanded === true;
-      if (newItem.id == null) {
+      if (!newItem.id) {
         newItem = { ...newItem, id: nanoid() };
       }
       delete newItem.expanded;
 
-      setCollection(prevCollection => ({
-        ...prevCollection,
-        [newItem.id]: newItem,
-      }));
+      this.setState(
+        prevState => {
+          const newCollection = {
+            ...prevState.collection,
+            [newItem.id]: newItem,
+          };
+          const newExpandedColumns = shouldStartExpanded
+            ? { ...prevState.expandedColumns, [newItem.id]: true }
+            : prevState.expandedColumns;
+          const newCollectionArray = [newItem, ...prevState.collectionArray];
 
-      setCollectionArray(prevCollectionArray => {
-        const newCollectionArray = [newItem, ...prevCollectionArray];
+          return {
+            collection: newCollection,
+            collectionArray: newCollectionArray,
+            expandedColumns: newExpandedColumns,
+          };
+        },
+        () => {
+          if (this.props.onChange) {
+            this.props.onChange(this.state.collectionArray);
+          }
+        },
+      );
+    }
+  }
 
-        if (onChange) {
-          onChange(newCollectionArray);
-        }
+  onFieldsetChange(item: any) {
+    this.changeCollection({
+      ...this.state.collection,
+      [item.id]: item,
+    });
+  }
 
-        return newCollectionArray;
-      });
+  getLabel(col: any): string {
+    const { columnLabels } = this.props;
+    let label = columnLabels?.[col] ? columnLabels[col] : col;
+    if (label.startsWith('__')) {
+      label = '';
+    }
+    return label;
+  }
 
-      if (shouldStartExpanded) {
-        setExpandedColumns(prev => ({ ...prev, [newItem.id]: true }));
+  getTooltip(col: string): string | undefined {
+    const { columnLabelTooltips } = this.props;
+    return columnLabelTooltips?.[col];
+  }
+
+  changeCollection(collection: any) {
+    // Preserve existing order instead of recreating from Object.keys()
+    const existingIds = new Set(
+      this.state.collectionArray.map(item => item.id),
+    );
+    const newCollectionArray: CollectionItem[] = [];
+
+    // First pass: preserve existing order and update items
+    for (const existingItem of this.state.collectionArray) {
+      if (collection[existingItem.id]) {
+        newCollectionArray.push(collection[existingItem.id]);
       }
     }
-  }, [itemGenerator, onChange]);
 
-  const onFieldsetChange = useCallback(
-    (item: CollectionItem) => {
-      changeCollection(
-        {
-          ...collection,
-          [item.id]: item,
-        },
-        collectionArray,
-      );
-    },
-    [changeCollection, collection, collectionArray],
-  );
-
-  const getLabel = useCallback(
-    (col: string): string => {
-      let label = columnLabels?.[col] ? columnLabels[col] : col;
-      if (label.startsWith('__')) {
-        label = '';
+    // Second pass: add new items
+    for (const item of Object.values(collection) as CollectionItem[]) {
+      if (!existingIds.has(item.id)) {
+        newCollectionArray.push(item);
       }
-      return label;
-    },
-    [columnLabels],
-  );
+    }
 
-  const getTooltip = useCallback(
-    (col: string): string | undefined => columnLabelTooltips?.[col],
-    [columnLabelTooltips],
-  );
+    this.setState({ collection, collectionArray: newCollectionArray });
 
-  const toggleExpand = useCallback((id: string | number) => {
-    setExpandedColumns(prev => ({
-      ...prev,
-      [id]: !prev[id],
+    if (this.props.onChange) {
+      this.props.onChange(newCollectionArray);
+    }
+  }
+
+  deleteItem(id: string | number) {
+    const newColl = { ...this.state.collection };
+    delete newColl[id];
+    this.changeCollection(newColl);
+  }
+
+  toggleExpand(id: any) {
+    this.setState(prevState => ({
+      expandedColumns: {
+        ...prevState.expandedColumns,
+        [id]: !prevState.expandedColumns[id],
+      },
     }));
-  }, []);
+  }
 
-  const handleTableChange = useCallback(
-    (
-      paginationEvt: TablePaginationConfig,
-      _filters: Record<string, FilterValue | null>,
-      sorter: SorterResult<CollectionItem> | SorterResult<CollectionItem>[],
-    ) => {
-      if (
-        paginationEvt.current !== undefined &&
-        paginationEvt.pageSize !== undefined
-      ) {
-        setCurrentPage(paginationEvt.current);
-        setPageSize(paginationEvt.pageSize);
-      }
-      const columnSorter = Array.isArray(sorter) ? sorter[0] : sorter;
-      let newSortColumn = '';
-      let newSortOrder = SortOrderEnum.Unsorted;
+  handleTableChange(
+    pagination: TablePaginationConfig,
+    _filters: Record<string, FilterValue | null>,
+    sorter: SorterResult<CollectionItem> | SorterResult<CollectionItem>[],
+  ) {
+    // Handle pagination changes
+    if (pagination.current !== undefined && pagination.pageSize !== undefined) {
+      this.setState({
+        currentPage: pagination.current,
+        pageSize: pagination.pageSize,
+      });
+    }
 
-      if (columnSorter?.columnKey && columnSorter?.order) {
-        newSortColumn = columnSorter.columnKey as string;
-        newSortOrder =
-          columnSorter.order === 'ascend'
-            ? SortOrderEnum.Asc
-            : SortOrderEnum.Desc;
-      }
+    // Handle sorting changes
+    const columnSorter = Array.isArray(sorter) ? sorter[0] : sorter;
+    let newSortColumn = '';
+    let newSortOrder = 0;
 
-      const col = newSortColumn;
+    if (columnSorter?.columnKey && columnSorter?.order) {
+      newSortColumn = columnSorter.columnKey as string;
+      newSortOrder = columnSorter.order === 'ascend' ? 1 : 2;
+    }
 
-      if (
-        sortColumns?.includes(col) ||
-        newSortOrder === SortOrderEnum.Unsorted
-      ) {
-        let sortedArray = [...propsCollection] as CollectionItem[];
+    const { sortColumns } = this.props;
+    const col = newSortColumn;
 
-        if (newSortOrder !== SortOrderEnum.Unsorted) {
-          const compareSort = (m: Sort, n: Sort) => {
-            if (typeof m === 'string' && typeof n === 'string') {
-              return (m || '').localeCompare(n || '');
-            }
-            if (typeof m === 'number' && typeof n === 'number') {
-              return m - n;
-            }
-            if (typeof m === 'boolean' && typeof n === 'boolean') {
-              return m === n ? 0 : m ? 1 : -1;
-            }
-            const mStr = String(m ?? '');
-            const nStr = String(n ?? '');
-            return mStr.localeCompare(nStr);
-          };
+    if (sortColumns?.includes(col) || newSortOrder === 0) {
+      let sortedArray = [...this.props.collection];
 
-          sortedArray.sort((a: CollectionItem, b: CollectionItem) =>
-            compareSort(a[col] as Sort, b[col] as Sort),
-          );
-          if (newSortOrder === SortOrderEnum.Desc) {
-            sortedArray.reverse();
+      if (newSortOrder !== 0) {
+        const compareSort = (m: Sort, n: Sort) => {
+          if (typeof m === 'string' && typeof n === 'string') {
+            return (m || '').localeCompare(n || '');
           }
-        } else {
-          const { collectionArray: resetArray } =
-            createKeyedCollection(propsCollection);
-          sortedArray = resetArray;
+          if (typeof m === 'number' && typeof n === 'number') {
+            return m - n;
+          }
+          if (typeof m === 'boolean' && typeof n === 'boolean') {
+            return m === n ? 0 : m ? 1 : -1;
+          }
+          const mStr = String(m ?? '');
+          const nStr = String(n ?? '');
+          return mStr.localeCompare(nStr);
+        };
+
+        sortedArray.sort((a: any, b: any) => compareSort(a[col], b[col]));
+        if (newSortOrder === 2) {
+          sortedArray.reverse();
         }
-
-        setCollectionArray(sortedArray);
-        setSortColumn(newSortColumn);
-        setSort(newSortOrder);
+      } else {
+        const { collectionArray } = createKeyedCollection(
+          this.props.collection,
+        );
+        sortedArray = collectionArray;
       }
-    },
-    [propsCollection, sortColumns],
-  );
 
-  const renderExpandableSection = useCallback(
-    (item: CollectionItem): ReactNode => {
-      const propsGenerator = () => ({ item, onChange: onFieldsetChange });
-      return recurseReactClone(expandFieldset, Fieldset, propsGenerator);
-    },
-    [expandFieldset, onFieldsetChange],
-  );
+      this.setState({
+        collectionArray: sortedArray,
+        sortColumn: newSortColumn,
+        sort: newSortOrder,
+      });
+    }
+  }
 
-  const renderCell = useCallback(
-    (record: CollectionItem, col: string): ReactNode => {
-      const renderer = itemRenderers?.[col];
-      const val = record[col];
-      const cellOnChange = (newVal: unknown) =>
-        onCellChange(record.id, col, newVal);
-      return renderer
-        ? renderer(val, cellOnChange, getLabel(col), record)
-        : (val as ReactNode);
-    },
-    [itemRenderers, onCellChange, getLabel],
-  );
+  renderExpandableSection(item: any): ReactNode {
+    const propsGenerator = () => ({ item, onChange: this.onFieldsetChange });
+    return recurseReactClone(
+      this.props.expandFieldset,
+      Fieldset,
+      propsGenerator,
+    );
+  }
 
-  const antdColumns = useMemo((): ColumnsType<CollectionItem> => {
-    const columns: ColumnsType<CollectionItem> = tableColumns.map(col => {
-      const label = getLabel(col);
-      const tooltip = getTooltip(col);
+  renderCell(record: any, col: any): ReactNode {
+    const renderer = this.props.itemRenderers?.[col];
+    const val = record[col];
+    const onChange = this.onCellChange.bind(this, record.id, col);
+    return renderer ? renderer(val, onChange, this.getLabel(col), record) : val;
+  }
+
+  buildTableColumns() {
+    const { tableColumns, allowDeletes, sortColumns = [] } = this.props;
+
+    const antdColumns: ColumnsType = tableColumns.map(col => {
+      const label = this.getLabel(col);
+      const tooltip = this.getTooltip(col);
       const isSortable = sortColumns.includes(col);
       const currentSortOrder: SortOrder | null | undefined =
-        sortColumn === col
-          ? sort === SortOrderEnum.Asc
+        this.state.sortColumn === col
+          ? this.state.sort === 1
             ? 'ascend'
-            : sort === SortOrderEnum.Desc
+            : this.state.sort === 2
               ? 'descend'
               : null
           : null;
@@ -415,10 +361,10 @@ export default function CRUDCollection({
             )}
           </>
         ),
-        render: (_text: unknown, record: CollectionItem) =>
-          renderCell(record, col),
+        render: (text: any, record: CollectionItem) =>
+          this.renderCell(record, col),
         onCell: (record: CollectionItem) => {
-          const cellPropsFn = itemCellProps?.[col];
+          const cellPropsFn = this.props.itemCellProps?.[col];
           const val = record[col];
           return cellPropsFn ? cellPropsFn(val, label, record) : {};
         },
@@ -428,7 +374,7 @@ export default function CRUDCollection({
     });
 
     if (allowDeletes) {
-      columns.push({
+      antdColumns.push({
         key: '__actions',
         dataIndex: '__actions',
         sorter: false,
@@ -452,7 +398,7 @@ export default function CRUDCollection({
               data-test="crud-delete-icon"
               role="button"
               tabIndex={0}
-              onClick={() => deleteItem(record.id)}
+              onClick={() => this.deleteItem(record.id)}
               iconSize="l"
               iconColor="inherit"
             />
@@ -461,112 +407,103 @@ export default function CRUDCollection({
       });
     }
 
-    return columns;
-  }, [
-    tableColumns,
-    getLabel,
-    getTooltip,
-    sortColumns,
-    sortColumn,
-    sort,
-    renderCell,
-    itemCellProps,
-    allowDeletes,
-    deleteItem,
-  ]);
+    return antdColumns as ColumnsType<CollectionItem>;
+  }
 
-  const displayData = useMemo(() => {
-    if (filterTerm && filterFields?.length) {
-      return collectionArray.filter(item =>
-        filterFields.some(field =>
-          String(item[field] ?? '')
-            .toLowerCase()
-            .includes(filterTerm.toLowerCase()),
-        ),
-      );
-    }
-    return collectionArray;
-  }, [collectionArray, filterTerm, filterFields]);
+  render() {
+    const {
+      stickyHeader,
+      emptyMessage = t('No items'),
+      expandFieldset,
+      pagination = false,
+      filterTerm,
+      filterFields,
+    } = this.props;
 
-  const paginationConfig = useMemo((): false | TablePaginationConfig => {
-    if (pagination === false || pagination === undefined) {
-      return false;
-    }
-    // Clamp currentPage to the valid range based on the filtered data
-    // length — without this, filtering down to fewer rows could leave the
-    // user on an empty page until they click somewhere.
+    const displayData =
+      filterTerm && filterFields?.length
+        ? this.state.collectionArray.filter(item =>
+            filterFields.some(field =>
+              String(item[field] ?? '')
+                .toLowerCase()
+                .includes(filterTerm.toLowerCase()),
+            ),
+          )
+        : this.state.collectionArray;
+
+    const tableColumns = this.buildTableColumns();
+    const expandedRowKeys = Object.keys(this.state.expandedColumns).filter(
+      id => this.state.expandedColumns[id],
+    );
+
+    const expandableConfig = expandFieldset
+      ? {
+          expandedRowRender: (record: CollectionItem) =>
+            this.renderExpandableSection(record),
+          rowExpandable: () => true,
+          expandedRowKeys,
+          onExpand: (expanded: boolean, record: CollectionItem) => {
+            this.toggleExpand(record.id);
+          },
+        }
+      : undefined;
+
+    // Build controlled pagination config, clamping currentPage to valid range
+    // based on displayData (filtered) length, not the full collection
+    const { pageSize, currentPage: statePage } = this.state;
     const totalItems = displayData.length;
     const maxPage = totalItems > 0 ? Math.ceil(totalItems / pageSize) : 1;
-    const clampedPage = Math.min(currentPage, maxPage);
-    return {
-      ...(typeof pagination === 'object' ? pagination : {}),
-      current: clampedPage,
-      pageSize,
-      total: totalItems,
-    };
-  }, [pagination, displayData.length, pageSize, currentPage]);
+    const currentPage = Math.min(statePage, maxPage);
+    const paginationConfig: false | TablePaginationConfig | undefined =
+      pagination === false || pagination === undefined
+        ? pagination
+        : {
+            ...(typeof pagination === 'object' ? pagination : {}),
+            current: currentPage,
+            pageSize,
+            total: totalItems,
+          };
 
-  const expandedRowKeys = useMemo(
-    () => Object.keys(expandedColumns).filter(id => expandedColumns[id]),
-    [expandedColumns],
-  );
-
-  const expandableConfig = useMemo(
-    () =>
-      expandFieldset
-        ? {
-            expandedRowRender: (record: CollectionItem) =>
-              renderExpandableSection(record),
-            rowExpandable: () => true,
-            expandedRowKeys,
-            onExpand: (_expanded: boolean, record: CollectionItem) => {
-              toggleExpand(record.id);
-            },
+    return (
+      <>
+        <CrudButtonWrapper>
+          {this.props.allowAddItem && (
+            <StyledButtonWrapper>
+              <Button
+                buttonSize="small"
+                buttonStyle="secondary"
+                onClick={this.onAddItem}
+                data-test="add-item-button"
+              >
+                <Icons.PlusOutlined
+                  iconSize="m"
+                  data-test="crud-add-table-item"
+                />
+                {t('Add item')}
+              </Button>
+            </StyledButtonWrapper>
+          )}
+        </CrudButtonWrapper>
+        <Table<CollectionItem>
+          data-test="crud-table"
+          columns={tableColumns}
+          data={displayData as CollectionItem[]}
+          rowKey={(record: CollectionItem) => String(record.id)}
+          sticky={stickyHeader}
+          pagination={paginationConfig}
+          onChange={this.handleTableChange}
+          locale={{ emptyText: emptyMessage }}
+          css={
+            stickyHeader &&
+            css`
+              overflow: auto;
+            `
           }
-        : undefined,
-    [expandFieldset, renderExpandableSection, expandedRowKeys, toggleExpand],
-  );
-
-  return (
-    <>
-      <CrudButtonWrapper>
-        {allowAddItem && (
-          <StyledButtonWrapper>
-            <Button
-              buttonSize="small"
-              buttonStyle="secondary"
-              onClick={onAddItem}
-              data-test="add-item-button"
-            >
-              <Icons.PlusOutlined
-                iconSize="m"
-                data-test="crud-add-table-item"
-              />
-              {t('Add item')}
-            </Button>
-          </StyledButtonWrapper>
-        )}
-      </CrudButtonWrapper>
-      <Table<CollectionItem>
-        data-test="crud-table"
-        columns={antdColumns}
-        data={displayData}
-        rowKey={(record: CollectionItem) => String(record.id)}
-        sticky={stickyHeader}
-        pagination={paginationConfig}
-        onChange={handleTableChange}
-        locale={{ emptyText: emptyMessage }}
-        css={
-          stickyHeader &&
-          css`
-            height: 350px;
-            overflow: auto;
-          `
-        }
-        expandable={expandableConfig}
-        size={TableSize.Middle}
-        tableLayout="auto"
-      />
-    </>
-  );
+          expandable={expandableConfig}
+          size={TableSize.Middle}
+          tableLayout="auto"
+        />
+      </>
+    );
+  }
 }

superset-frontend/src/components/Datasource/components/DatasourceEditor/tests/DatasourceEditor.test.tsx

@@ -337,8 +337,7 @@ test('calls onChange with empty SQL when switching to physical dataset', async (
 
   // Assert that the latest onChange call has empty SQL
   expect(testProps.onChange).toHaveBeenCalled();
-  const lastCallIndex = testProps.onChange.mock.calls.length - 1;
-  const updatedDatasource = testProps.onChange.mock.calls[lastCallIndex];
+  const updatedDatasource = testProps.onChange.mock.calls[0];
   expect(updatedDatasource[0].sql).toBe('');
 });
 

superset-frontend/src/components/Datasource/components/DatasourceEditor/tests/DatasourceEditorCurrency.test.tsx

@@ -105,12 +105,11 @@ test('changes currency position from prefix to suffix', async () => {
   await selectOption('Suffix', 'Currency prefix or suffix');
 
   await waitFor(() => {
-    expect(testProps.onChange).toHaveBeenCalled();
+    expect(testProps.onChange).toHaveBeenCalledTimes(1);
   });
 
-  // Verify the exact call arguments - check the latest call
-  const lastCallIndex = testProps.onChange.mock.calls.length - 1;
-  const callArg = testProps.onChange.mock.calls[lastCallIndex][0];
+  // Verify the exact call arguments
+  const callArg = testProps.onChange.mock.calls[0][0];
   const metrics = callArg.metrics || [];
   const updatedMetric = metrics.find(
     (m: MetricType) => m.currency?.symbolPosition === 'suffix',
@@ -127,12 +126,11 @@ test('changes currency symbol from USD to GBP', async () => {
   await selectOption('£ (GBP)', 'Currency symbol');
 
   await waitFor(() => {
-    expect(testProps.onChange).toHaveBeenCalled();
+    expect(testProps.onChange).toHaveBeenCalledTimes(1);
   });
 
-  // Verify the exact call arguments - check the latest call
-  const lastCallIndex = testProps.onChange.mock.calls.length - 1;
-  const callArg = testProps.onChange.mock.calls[lastCallIndex][0];
+  // Verify the exact call arguments
+  const callArg = testProps.onChange.mock.calls[0][0];
   const metrics = callArg.metrics || [];
   const updatedMetric = metrics.find(
     (m: MetricType) => m.currency?.symbol === 'GBP',

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

@@ -21,7 +21,6 @@ import { t } from '@apache-superset/core/translation';
 import { ErrorAlert } from '../ErrorMessage';
 import type { ErrorBoundaryProps, ErrorBoundaryState } from './types';
 
-// eslint-disable-next-line react-prefer-function-component/react-prefer-function-component -- componentDidCatch requires class component
 export class ErrorBoundary extends Component<
   ErrorBoundaryProps,
   ErrorBoundaryState

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

@@ -29,13 +29,14 @@ import {
 import fetchMock from 'fetch-mock';
 
 import * as saveModalActions from 'src/explore/actions/saveModalActions';
-import SaveModal, {
-  createRedirectParams,
-  addChartToDashboard,
-} from 'src/explore/components/SaveModal';
+import SaveModal, { PureSaveModal } from 'src/explore/components/SaveModal';
+import * as dashboardStateActions from 'src/dashboard/actions/dashboardState';
 import { CHART_WIDTH } from 'src/dashboard/constants';
 import { GRID_COLUMN_COUNT } from 'src/dashboard/util/constants';
 
+// Cast PureSaveModal to `any` to allow instantiation with partial props in tests
+const TestSaveModal = PureSaveModal as any;
+
 jest.mock('@superset-ui/core/components/Select', () => ({
   ...jest.requireActual('@superset-ui/core/components/Select/AsyncSelect'),
   AsyncSelect: ({ onChange }: { onChange: (val: any) => void }) => (
@@ -399,31 +400,139 @@ test('renders InfoTooltip icon next to Dataset Name label when datasource type i
   expect(labelContainer).toContainElement(infoTooltip);
 });
 
-test('createRedirectParams sets slice_id in the URLSearchParams', () => {
-  const result = createRedirectParams(
-    '?name=John&age=30',
+test('make sure slice_id in the URLSearchParams before the redirect', () => {
+  const myProps = {
+    ...defaultProps,
+    slice: { slice_id: 1, slice_name: 'title', owners: [1] },
+    actions: {
+      setFormData: jest.fn(),
+      updateSlice: jest.fn(() => Promise.resolve({ id: 1 })),
+      getSliceDashboards: jest.fn(),
+    },
+    user: { userId: 1 },
+    history: {
+      replace: jest.fn(),
+    },
+    dispatch: jest.fn(),
+  };
+
+  const saveModal = new TestSaveModal(myProps);
+  const result = saveModal.handleRedirect(
+    'https://example.com/?name=John&age=30',
     { id: 1 },
-    'overwrite',
   );
   expect(result.get('slice_id')).toEqual('1');
-  expect(result.get('save_action')).toEqual('overwrite');
 });
 
-test('createRedirectParams removes form_data_key from URL parameters', () => {
+test('removes form_data_key from URL parameters after save', () => {
+  const myProps = {
+    ...defaultProps,
+    slice: { slice_id: 1, slice_name: 'title', owners: [1] },
+    actions: {
+      setFormData: jest.fn(),
+      updateSlice: jest.fn(() => Promise.resolve({ id: 1 })),
+      getSliceDashboards: jest.fn(),
+    },
+    user: { userId: 1 },
+    history: {
+      replace: jest.fn(),
+    },
+    dispatch: jest.fn(),
+  };
+
+  const saveModal = new TestSaveModal(myProps);
+
   // Test with form_data_key in the URL
   const urlWithFormDataKey = '?form_data_key=12345&other_param=value';
-  const result = createRedirectParams(
-    urlWithFormDataKey,
-    { id: 1 },
-    'overwrite',
-  );
+  const result = saveModal.handleRedirect(urlWithFormDataKey, { id: 1 });
 
   // form_data_key should be removed
   expect(result.has('form_data_key')).toBe(false);
   // other parameters should remain
   expect(result.get('other_param')).toEqual('value');
   expect(result.get('slice_id')).toEqual('1');
-  expect(result.get('save_action')).toEqual('overwrite');
+  expect(result.has('save_action')).toBe(false);
+});
+
+test('dispatches removeChartState when saving and going to dashboard', async () => {
+  // Spy on the removeChartState action creator
+  const removeChartStateSpy = jest.spyOn(
+    dashboardStateActions,
+    'removeChartState',
+  );
+
+  // Mock the dashboard API response
+  const dashboardId = 123;
+  const dashboardUrl = '/superset/dashboard/test-dashboard/';
+  fetchMock.get(`glob:*/api/v1/dashboard/${dashboardId}*`, {
+    result: {
+      id: dashboardId,
+      dashboard_title: 'Test Dashboard',
+      url: dashboardUrl,
+    },
+  });
+
+  const mockDispatch = jest.fn();
+  const mockHistory = {
+    push: jest.fn(),
+    replace: jest.fn(),
+  };
+  const chartId = 42;
+  const mockUpdateSlice = jest.fn(() => Promise.resolve({ id: chartId }));
+  const mockSetFormData = jest.fn();
+
+  const myProps = {
+    ...defaultProps,
+    slice: { slice_id: 1, slice_name: 'title', owners: [1] },
+    actions: {
+      setFormData: mockSetFormData,
+      updateSlice: mockUpdateSlice,
+      getSliceDashboards: jest.fn(() => Promise.resolve([])),
+      saveSliceFailed: jest.fn(),
+    },
+    user: { userId: 1 },
+    history: mockHistory,
+    dispatch: mockDispatch,
+  };
+
+  const saveModal = new TestSaveModal(myProps);
+  saveModal.state = {
+    action: 'overwrite',
+    newSliceName: 'test chart',
+    datasetName: 'test dataset',
+    dashboard: { label: 'Test Dashboard', value: dashboardId },
+    saveStatus: null,
+    isLoading: false,
+    tabsData: [],
+  };
+
+  // Mock onHide to prevent errors
+  saveModal.onHide = jest.fn();
+
+  // Trigger save and go to dashboard (gotodash = true)
+  await saveModal.saveOrOverwrite(true);
+
+  // Wait for async operations
+  await waitFor(() => {
+    expect(mockUpdateSlice).toHaveBeenCalled();
+    expect(mockSetFormData).toHaveBeenCalled();
+  });
+
+  // Verify removeChartState was called with the correct chart ID
+  expect(removeChartStateSpy).toHaveBeenCalledWith(chartId);
+
+  // Verify the action was dispatched (check the action object directly)
+  expect(mockDispatch).toHaveBeenCalled();
+  expect(mockDispatch).toHaveBeenCalledWith({
+    type: 'REMOVE_CHART_STATE',
+    chartId,
+  });
+
+  // Verify navigation happened
+  expect(mockHistory.push).toHaveBeenCalled();
+
+  // Clean up
+  removeChartStateSpy.mockRestore();
 });
 
 test('disables tab selector when no dashboard selected', () => {
@@ -444,6 +553,234 @@ test('renders tab selector when saving as', async () => {
   expect(tabSelector).toBeDisabled();
 });
 
+test('onDashboardChange triggers tabs load for existing dashboard', async () => {
+  const dashboardId = mockEvent.value;
+
+  fetchMock.get(`glob:*/api/v1/dashboard/${dashboardId}/tabs`, {
+    json: {
+      result: {
+        tab_tree: [
+          { value: 'tab1', title: 'Main Tab' },
+          { value: 'tab2', title: 'Tab' },
+        ],
+      },
+    },
+  });
+  const component = new TestSaveModal(defaultProps);
+  const loadTabsMock = jest
+    .fn()
+    .mockResolvedValue([{ value: 'tab1', title: 'Main Tab' }]);
+  component.loadTabs = loadTabsMock;
+  await component.onDashboardChange({
+    value: dashboardId,
+    label: 'Test Dashboard',
+  });
+  expect(loadTabsMock).toHaveBeenCalledWith(dashboardId);
+});
+
+test('onTabChange correctly updates selectedTab via forceUpdate', () => {
+  const component = new TestSaveModal(defaultProps);
+
+  component.state = {
+    ...component.state,
+    tabsData: [
+      {
+        value: 'tab1',
+        title: 'Main Tab',
+        key: 'tab1',
+        children: [
+          {
+            value: 'tab2',
+            title: 'Analytics Tab',
+            key: 'tab2',
+          },
+        ],
+      },
+    ],
+  };
+
+  component.setState = function (this: any, stateUpdate: any) {
+    if (typeof stateUpdate === 'function') {
+      this.state = { ...this.state, ...stateUpdate(this.state) };
+    } else {
+      this.state = { ...this.state, ...stateUpdate };
+    }
+  }.bind(component);
+
+  component.onTabChange('tab2');
+
+  expect(component.state.selectedTab).toEqual({
+    value: 'tab2',
+    label: 'Analytics Tab',
+  });
+});
+
+const ownerUser = {
+  userId: 1,
+  username: 'testuser',
+  firstName: 'Test',
+  lastName: 'User',
+  isActive: true,
+  isAnonymous: false,
+  permissions: {},
+  roles: { Alpha: [['can_write', 'Dashboard']] as [string, string][] },
+  groups: [],
+};
+
+const makeMetadataDashboard = (id: number, title: string) => ({
+  id,
+  dashboard_title: title,
+  owners: [{ id: 1, first_name: 'Test', last_name: 'User' }],
+  extra_owners: [],
+  roles: [],
+  url: `/superset/dashboard/${id}/`,
+  slug: null,
+  thumbnail_url: null,
+  published: true,
+  changed_by_name: 'Test User',
+  changed_by: { id: 1, first_name: 'Test', last_name: 'User' },
+  changed_on: '2024-01-01',
+  charts: [],
+});
+
+test('pre-populates dashboard from metadata.dashboards when dashboardId prop is absent', async () => {
+  const dashboardId = 5;
+  const dashboardTitle = 'Chart Dashboard';
+
+  const myProps = {
+    ...defaultProps,
+    dashboardId: null,
+    metadata: {
+      dashboards: [{ id: dashboardId, dashboard_title: dashboardTitle }],
+      owners: ['Test User'],
+      created_on_humanized: '2 days ago',
+      changed_on_humanized: '1 day ago',
+    },
+    user: ownerUser,
+    slice: { slice_id: 1, slice_name: 'My Chart', owners: [1] },
+    dispatch: jest.fn(),
+    addDangerToast: jest.fn(),
+  };
+
+  const component = new TestSaveModal(myProps);
+  const mockFull = makeMetadataDashboard(dashboardId, dashboardTitle);
+
+  component.loadDashboard = jest.fn().mockResolvedValue(mockFull);
+  component.loadTabs = jest.fn().mockResolvedValue([]);
+
+  const stateUpdates: any[] = [];
+  component.setState = jest.fn((update: any) => {
+    stateUpdates.push(update);
+  });
+
+  try {
+    sessionStorage.clear();
+  } catch (_) {
+    // ignore
+  }
+
+  await component.componentDidMount();
+
+  expect(component.loadDashboard).toHaveBeenCalledWith(dashboardId);
+  expect(stateUpdates).toContainEqual({
+    dashboard: { label: dashboardTitle, value: dashboardId },
+  });
+  expect(component.loadTabs).toHaveBeenCalledWith(dashboardId);
+});
+
+test('skips non-editable dashboards and picks the first editable one from metadata', async () => {
+  const editableId = 7;
+  const editableTitle = 'Editable Dashboard';
+
+  const myProps = {
+    ...defaultProps,
+    dashboardId: null,
+    metadata: {
+      dashboards: [
+        { id: 6, dashboard_title: 'Not Mine' },
+        { id: editableId, dashboard_title: editableTitle },
+      ],
+      owners: ['Test User'],
+      created_on_humanized: '2 days ago',
+      changed_on_humanized: '1 day ago',
+    },
+    user: ownerUser,
+    slice: { slice_id: 1, slice_name: 'My Chart', owners: [1] },
+    dispatch: jest.fn(),
+    addDangerToast: jest.fn(),
+  };
+
+  const component = new TestSaveModal(myProps);
+
+  const notMine = makeMetadataDashboard(6, 'Not Mine');
+  notMine.owners = [{ id: 99, first_name: 'Other', last_name: 'Owner' }];
+  const editable = makeMetadataDashboard(editableId, editableTitle);
+
+  component.loadDashboard = jest
+    .fn()
+    .mockImplementation((id: number) =>
+      Promise.resolve(id === 6 ? notMine : editable),
+    );
+  component.loadTabs = jest.fn().mockResolvedValue([]);
+
+  const stateUpdates: any[] = [];
+  component.setState = jest.fn((update: any) => {
+    stateUpdates.push(update);
+  });
+
+  try {
+    sessionStorage.clear();
+  } catch (_) {
+    // ignore
+  }
+
+  await component.componentDidMount();
+
+  expect(stateUpdates).toContainEqual({
+    dashboard: { label: editableTitle, value: editableId },
+  });
+  expect(component.loadTabs).toHaveBeenCalledWith(editableId);
+});
+
+test('does not use metadata fallback when dashboardId prop is set', async () => {
+  const propDashboardId = 3;
+  const propDashboardTitle = 'Prop Dashboard';
+
+  const myProps = {
+    ...defaultProps,
+    dashboardId: propDashboardId,
+    metadata: {
+      dashboards: [{ id: 99, dashboard_title: 'Should Not Be Used' }],
+      owners: ['Test User'],
+      created_on_humanized: '2 days ago',
+      changed_on_humanized: '1 day ago',
+    },
+    user: ownerUser,
+    slice: { slice_id: 1, slice_name: 'My Chart', owners: [1] },
+    dispatch: jest.fn(),
+    addDangerToast: jest.fn(),
+  };
+
+  const component = new TestSaveModal(myProps);
+  const mockFull = makeMetadataDashboard(propDashboardId, propDashboardTitle);
+
+  component.loadDashboard = jest.fn().mockResolvedValue(mockFull);
+  component.loadTabs = jest.fn().mockResolvedValue([]);
+
+  const stateUpdates: any[] = [];
+  component.setState = jest.fn((update: any) => {
+    stateUpdates.push(update);
+  });
+
+  await component.componentDidMount();
+
+  expect(component.loadDashboard).toHaveBeenCalledWith(propDashboardId);
+  expect(component.loadDashboard).not.toHaveBeenCalledWith(99);
+  expect(stateUpdates).toContainEqual({
+    dashboard: { label: propDashboardTitle, value: propDashboardId },
+  });
+});
+
 test('chart placement logic finds row with available space', () => {
   // Test case 1: Row has space (8 + 4 = 12 <= 12)
   const positionJson1 = {
@@ -530,7 +867,7 @@ test('chart placement logic finds row with available space', () => {
   expect(findRowWithSpace(positionJson3, ['row1'])).toBeNull();
 });
 
-test('addChartToDashboard successfully adds chart to existing row with space', async () => {
+test('addChartToDashboardTab successfully adds chart to existing row with space', async () => {
   const dashboardId = 123;
   const chartId = 456;
   const tabId = 'TABS_ID';
@@ -572,11 +909,18 @@ test('addChartToDashboard successfully adds chart to existing row with space', a
     json: { result: mockDashboard },
   });
 
+  const component = new TestSaveModal(defaultProps);
+
   const mockNanoid = jest.spyOn(require('nanoid'), 'nanoid');
   mockNanoid.mockReturnValue('test-id');
 
   try {
-    await addChartToDashboard(dashboardId, chartId, tabId, sliceName);
+    await component.addChartToDashboardTab(
+      dashboardId,
+      chartId,
+      tabId,
+      sliceName,
+    );
 
     expect(SupersetClient.get).toHaveBeenCalledWith({
       endpoint: `/api/v1/dashboard/${dashboardId}`,
@@ -602,7 +946,7 @@ test('addChartToDashboard successfully adds chart to existing row with space', a
   }
 });
 
-test('addChartToDashboard creates new row when no existing row has space', async () => {
+test('addChartToDashboardTab creates new row when no existing row has space', async () => {
   const dashboardId = 123;
   const chartId = 456;
   const tabId = 'TABS_ID';
@@ -656,12 +1000,19 @@ test('addChartToDashboard creates new row when no existing row has space', async
     });
   });
 
+  const component = new TestSaveModal(defaultProps);
+
   const mockRowId = 'test-row-id';
   const mockNanoid = jest.spyOn(require('nanoid'), 'nanoid');
   mockNanoid.mockReturnValueOnce(mockRowId);
 
   try {
-    await addChartToDashboard(dashboardId, chartId, tabId, sliceName);
+    await component.addChartToDashboardTab(
+      dashboardId,
+      chartId,
+      tabId,
+      sliceName,
+    );
 
     expect(SupersetClient.put).toHaveBeenCalled();
     const body = JSON.parse(putRequestBody.body);
@@ -683,7 +1034,7 @@ test('addChartToDashboard creates new row when no existing row has space', async
   }
 });
 
-test('addChartToDashboard handles empty position_json', async () => {
+test('addChartToDashboardTab handles empty position_json', async () => {
   const dashboardId = 123;
   const chartId = 456;
   const tabId = 'TABS_ID';
@@ -706,12 +1057,14 @@ test('addChartToDashboard handles empty position_json', async () => {
     json: { result: mockDashboard },
   });
 
+  const component = new TestSaveModal(defaultProps);
+
   const mockNanoid = jest.spyOn(require('nanoid'), 'nanoid');
   mockNanoid.mockReturnValue('test-id');
 
   try {
     await expect(
-      addChartToDashboard(dashboardId, chartId, tabId, sliceName),
+      component.addChartToDashboardTab(dashboardId, chartId, tabId, sliceName),
     ).rejects.toThrow(`Tab ${tabId} not found in positionJson`);
   } finally {
     SupersetClient.get = originalGet;

superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { connect } from 'react-redux';
-import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { PureComponent } from 'react';
 import { t } from '@apache-superset/core/translation';
 import {
   HandlerFunction,
@@ -25,7 +25,7 @@ import {
   Payload,
   QueryFormData,
 } from '@superset-ui/core';
-import { SupersetTheme, useTheme } from '@apache-superset/core/theme';
+import { SupersetTheme, withTheme } from '@apache-superset/core/theme';
 import {
   AsyncEsmComponent,
   List,
@@ -72,7 +72,7 @@ export interface Props {
   value: Annotation[];
   onChange: (annotations: Annotation[]) => void;
   refreshAnnotationData: (payload: Payload) => void;
-  theme?: SupersetTheme;
+  theme: SupersetTheme;
 }
 
 export interface PopoverState {
@@ -80,200 +80,200 @@ export interface PopoverState {
   addedAnnotationIndex: number | null;
 }
 
-function AnnotationLayerControl({
-  colorScheme,
-  annotationError = {},
-  annotationQuery = {},
-  vizType = '',
-  validationErrors,
-  name,
-  actions,
-  value = [],
-  onChange = () => {},
-  refreshAnnotationData,
-}: Props) {
-  const theme = useTheme();
-  const [popoverVisible, setPopoverVisible] = useState<
-    Record<number | string, boolean>
-  >({});
-  const [addedAnnotationIndex, setAddedAnnotationIndex] = useState<
-    number | null
-  >(null);
+const defaultProps = {
+  vizType: '',
+  value: [],
+  annotationError: {},
+  annotationQuery: {},
+  onChange: () => {},
+};
+class AnnotationLayerControl extends PureComponent<Props, PopoverState> {
+  static defaultProps = defaultProps;
 
-  // componentDidMount - preload the AnnotationLayer component and dependent libraries i.e. mathjs
-  useEffect(() => {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      popoverVisible: {},
+      addedAnnotationIndex: null,
+    };
+    this.addAnnotationLayer = this.addAnnotationLayer.bind(this);
+    this.removeAnnotationLayer = this.removeAnnotationLayer.bind(this);
+    this.handleVisibleChange = this.handleVisibleChange.bind(this);
+  }
+
+  componentDidMount() {
+    // preload the AnnotationLayer component and dependent libraries i.e. mathjs
     AnnotationLayer.preload();
-  }, []);
+  }
 
-  // componentDidUpdate - sync validation errors
-  useEffect(() => {
+  componentDidUpdate(prevProps: Props) {
+    const { name, annotationError, validationErrors, value } = this.props;
     if (
       (Object.keys(annotationError).length && !validationErrors.length) ||
       (!Object.keys(annotationError).length && validationErrors.length)
     ) {
-      actions.setControlValue(name, value, Object.keys(annotationError));
+      if (
+        annotationError !== prevProps.annotationError ||
+        validationErrors !== prevProps.validationErrors ||
+        value !== prevProps.value
+      ) {
+        this.props.actions.setControlValue(
+          name,
+          value,
+          Object.keys(annotationError),
+        );
+      }
     }
-  }, [annotationError, validationErrors, value, actions, name]);
+  }
 
-  const addAnnotationLayer = useCallback(
-    (originalAnnotation: Annotation | null, newAnnotation: Annotation) => {
-      let annotations = value;
-      if (originalAnnotation && annotations.includes(originalAnnotation)) {
-        annotations = annotations.map(anno =>
-          anno === originalAnnotation ? newAnnotation : anno,
-        );
-      } else {
-        annotations = [...annotations, newAnnotation];
-        setAddedAnnotationIndex(annotations.length - 1);
-      }
-
-      refreshAnnotationData({
-        annotation: newAnnotation,
-        force: true,
-      });
-
-      onChange(annotations);
-    },
-    [value, refreshAnnotationData, onChange],
-  );
-
-  const handleVisibleChange = useCallback(
-    (visible: boolean, popoverKey: number | string) => {
-      setPopoverVisible(prev => ({
-        ...prev,
-        [popoverKey]: visible,
-      }));
-    },
-    [],
-  );
-
-  const removeAnnotationLayer = useCallback(
-    (annotation: Annotation | null) => {
-      const annotations = value.filter(anno => anno !== annotation);
-      // So scrollbar doesnt get stuck on hidden
-      const element = getSectionContainerElement();
-      if (element) {
-        element.style.setProperty('overflow-y', 'auto', 'important');
-      }
-      onChange(annotations);
-    },
-    [value, onChange],
-  );
-
-  const renderPopover = useCallback(
-    (
-      popoverKey: number | string,
-      annotation: Annotation | null,
-      error: string,
-    ) => {
-      const id = annotation?.name || '_new';
-
-      return (
-        <div id={`annotation-pop-${id}`} data-test="popover-content">
-          <AnnotationLayer
-            {...(annotation || {})}
-            error={error}
-            colorScheme={colorScheme}
-            vizType={vizType}
-            addAnnotationLayer={(newAnnotation: Annotation) =>
-              addAnnotationLayer(annotation, newAnnotation)
-            }
-            removeAnnotationLayer={() => removeAnnotationLayer(annotation)}
-            close={() => {
-              handleVisibleChange(false, popoverKey);
-              setAddedAnnotationIndex(null);
-            }}
-          />
-        </div>
+  addAnnotationLayer = (
+    originalAnnotation: Annotation | null,
+    newAnnotation: Annotation,
+  ) => {
+    let annotations = this.props.value;
+    if (originalAnnotation && annotations.includes(originalAnnotation)) {
+      annotations = annotations.map(anno =>
+        anno === originalAnnotation ? newAnnotation : anno,
       );
-    },
-    [
-      colorScheme,
-      vizType,
-      addAnnotationLayer,
-      removeAnnotationLayer,
-      handleVisibleChange,
-    ],
-  );
+    } else {
+      annotations = [...annotations, newAnnotation];
+      this.setState({ addedAnnotationIndex: annotations.length - 1 });
+    }
 
-  const renderInfo = useCallback(
-    (anno: Annotation) => {
-      if (annotationQuery[anno.name]) {
-        return (
-          <Icons.SyncOutlined iconColor={theme.colorPrimary} iconSize="m" />
-        );
-      }
-      if (annotationError[anno.name]) {
-        return (
-          <InfoTooltip
-            label="validation-errors"
-            type="error"
-            tooltip={annotationError[anno.name]}
-          />
-        );
-      }
-      if (!anno.show) {
-        return <span style={{ color: theme.colorError }}> {t('Hidden')} </span>;
-      }
-      return '';
-    },
-    [annotationQuery, annotationError, theme],
-  );
+    this.props.refreshAnnotationData({
+      annotation: newAnnotation,
+      force: true,
+    });
 
-  const addedAnnotation = useMemo(
-    () => (addedAnnotationIndex !== null ? value[addedAnnotationIndex] : null),
-    [addedAnnotationIndex, value],
-  );
+    this.props.onChange(annotations);
+  };
 
-  const annotations = value.map((anno, i) => (
-    <ControlPopover
-      key={i}
-      trigger="click"
-      title={t('Edit annotation layer')}
-      css={thm => ({
-        '&:hover': {
-          cursor: 'pointer',
-          backgroundColor: thm.colorFillContentHover,
-        },
-      })}
-      content={renderPopover(i, anno, annotationError[anno.name])}
-      open={popoverVisible[i]}
-      onOpenChange={visible => handleVisibleChange(visible, i)}
-    >
-      <CustomListItem selectable>
-        <span>{anno.name}</span>
-        <span style={{ float: 'right' }}>{renderInfo(anno)}</span>
-      </CustomListItem>
-    </ControlPopover>
-  ));
+  handleVisibleChange = (visible: boolean, popoverKey: number | string) => {
+    this.setState(prevState => ({
+      popoverVisible: { ...prevState.popoverVisible, [popoverKey]: visible },
+    }));
+  };
 
-  const addLayerPopoverKey = 'add';
+  removeAnnotationLayer(annotation: Annotation | null) {
+    const annotations = this.props.value.filter(anno => anno !== annotation);
+    // So scrollbar doesnt get stuck on hidden
+    const element = getSectionContainerElement();
+    if (element) {
+      element.style.setProperty('overflow-y', 'auto', 'important');
+    }
+    this.props.onChange(annotations);
+  }
 
-  return (
-    <div>
-      <List bordered css={thm => ({ borderRadius: thm.borderRadius })}>
-        {annotations}
-        <ControlPopover
-          trigger="click"
-          content={renderPopover(addLayerPopoverKey, addedAnnotation, '')}
-          title={t('Add annotation layer')}
-          open={popoverVisible[addLayerPopoverKey]}
-          destroyOnHidden
-          onOpenChange={visible =>
-            handleVisibleChange(visible, addLayerPopoverKey)
+  renderPopover = (
+    popoverKey: number | string,
+    annotation: Annotation | null,
+    error: string,
+  ) => {
+    const id = annotation?.name || '_new';
+
+    return (
+      <div id={`annotation-pop-${id}`} data-test="popover-content">
+        <AnnotationLayer
+          {...(annotation || {})}
+          error={error}
+          colorScheme={this.props.colorScheme}
+          vizType={this.props.vizType}
+          addAnnotationLayer={(newAnnotation: Annotation) =>
+            this.addAnnotationLayer(annotation, newAnnotation)
           }
-        >
-          <CustomListItem selectable>
-            <Icons.PlusOutlined
-              iconSize="m"
-              data-test="add-annotation-layer-button"
-            />
-            {t('Add annotation layer')}
-          </CustomListItem>
-        </ControlPopover>
-      </List>
-    </div>
-  );
+          removeAnnotationLayer={() => this.removeAnnotationLayer(annotation)}
+          close={() => {
+            this.handleVisibleChange(false, popoverKey);
+            this.setState({ addedAnnotationIndex: null });
+          }}
+        />
+      </div>
+    );
+  };
+
+  renderInfo(anno: Annotation) {
+    const { annotationError, annotationQuery, theme } = this.props;
+    if (annotationQuery[anno.name]) {
+      return <Icons.SyncOutlined iconColor={theme.colorPrimary} iconSize="m" />;
+    }
+    if (annotationError[anno.name]) {
+      return (
+        <InfoTooltip
+          label="validation-errors"
+          type="error"
+          tooltip={annotationError[anno.name]}
+        />
+      );
+    }
+    if (!anno.show) {
+      return <span style={{ color: theme.colorError }}> {t('Hidden')} </span>;
+    }
+    return '';
+  }
+
+  render() {
+    const { addedAnnotationIndex } = this.state;
+    const addedAnnotation =
+      addedAnnotationIndex !== null
+        ? this.props.value[addedAnnotationIndex]
+        : null;
+    const annotations = this.props.value.map((anno, i) => (
+      <ControlPopover
+        key={i}
+        trigger="click"
+        title={t('Edit annotation layer')}
+        css={theme => ({
+          '&:hover': {
+            cursor: 'pointer',
+            backgroundColor: theme.colorFillContentHover,
+          },
+        })}
+        content={this.renderPopover(
+          i,
+          anno,
+          this.props.annotationError[anno.name],
+        )}
+        open={this.state.popoverVisible[i]}
+        onOpenChange={visible => this.handleVisibleChange(visible, i)}
+      >
+        <CustomListItem selectable>
+          <span>{anno.name}</span>
+          <span style={{ float: 'right' }}>{this.renderInfo(anno)}</span>
+        </CustomListItem>
+      </ControlPopover>
+    ));
+    const addLayerPopoverKey = 'add';
+
+    return (
+      <div>
+        <List bordered css={theme => ({ borderRadius: theme.borderRadius })}>
+          {annotations}
+          <ControlPopover
+            trigger="click"
+            content={this.renderPopover(
+              addLayerPopoverKey,
+              addedAnnotation,
+              '',
+            )}
+            title={t('Add annotation layer')}
+            open={this.state.popoverVisible[addLayerPopoverKey]}
+            destroyOnHidden
+            onOpenChange={visible =>
+              this.handleVisibleChange(visible, addLayerPopoverKey)
+            }
+          >
+            <CustomListItem selectable>
+              <Icons.PlusOutlined
+                iconSize="m"
+                data-test="add-annotation-layer-button"
+              />
+              {t('Add annotation layer')}
+            </CustomListItem>
+          </ControlPopover>
+        </List>
+      </div>
+    );
+  }
 }
 
 // Tried to hook this up through stores/control.jsx instead of using redux
@@ -316,11 +316,9 @@ function mapDispatchToProps(
   };
 }
 
-// Was a PureComponent before the FC conversion; preserve shallow-equal skip
-// for downstream consumers (the connect HOC compares its own derived props,
-// but the component itself still benefits from memo for parent re-renders
-// that don't change props).
+const themedAnnotationLayerControl = withTheme(AnnotationLayerControl);
+
 export default connect(
   mapStateToProps,
   mapDispatchToProps,
-)(memo(AnnotationLayerControl));
+)(themedAnnotationLayerControl);

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

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useCallback, type ReactNode } from 'react';
+import { Component, type ReactNode } from 'react';
 import { styled, css } from '@apache-superset/core/theme';
 import { Checkbox } from '@superset-ui/core/components';
 import ControlHeader from '../ControlHeader';
@@ -47,29 +47,32 @@ const CheckBoxControlWrapper = styled.div`
   `}
 `;
 
-export default function CheckboxControl({
-  value = false,
-  label,
-  onChange = () => {},
-  ...restProps
-}: CheckboxControlProps): JSX.Element {
-  const handleChange = useCallback((): void => {
-    onChange(!value);
-  }, [onChange, value]);
+export default class CheckboxControl extends Component<CheckboxControlProps> {
+  static defaultProps = {
+    value: false,
+    onChange: () => {},
+  };
 
-  const checkbox = <Checkbox onChange={handleChange} checked={!!value} />;
+  onChange = (): void => {
+    this.props.onChange?.(!this.props.value);
+  };
 
-  if (label) {
-    return (
-      <CheckBoxControlWrapper>
-        <ControlHeader
-          {...restProps}
-          label={label}
-          leftNode={checkbox}
-          onClick={handleChange}
-        />
-      </CheckBoxControlWrapper>
-    );
+  renderCheckbox(): ReactNode {
+    return <Checkbox onChange={this.onChange} checked={!!this.props.value} />;
+  }
+
+  render(): ReactNode {
+    if (this.props.label) {
+      return (
+        <CheckBoxControlWrapper>
+          <ControlHeader
+            {...this.props}
+            leftNode={this.renderCheckbox()}
+            onClick={this.onChange}
+          />
+        </CheckBoxControlWrapper>
+      );
+    }
+    return this.renderCheckbox();
   }
-  return checkbox;
 }

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

@@ -20,16 +20,10 @@
 import type React from 'react';
 import { Route } from 'react-router-dom';
 import fetchMock from 'fetch-mock';
-import {
-  DatasourceType,
-  JsonObject,
-  JsonResponse,
-  SupersetClient,
-} from '@superset-ui/core';
+import { DatasourceType, JsonObject, SupersetClient } from '@superset-ui/core';
 import {
   render,
   screen,
-  act,
   userEvent,
   waitFor,
 } from 'spec/helpers/testing-library';
@@ -37,10 +31,11 @@ import { fallbackExploreInitialData } from 'src/explore/fixtures';
 import type { ColumnObject } from 'src/features/datasets/types';
 import DatasourceControl from '.';
 
-// Mock DatasourceEditor to avoid mounting the full 2500+ line editor tree.
-// The heavy editor (with CollectionTable, FilterableTable, DatabaseSelector, etc.)
+// Mock DatasourceEditor to avoid mounting the full 2,500+ line editor tree.
+// The heavy editor (CollectionTable, FilterableTable, DatabaseSelector, etc.)
 // causes OOM in CI when rendered repeatedly. These tests only need to verify
 // DatasourceControl's callback wiring through the modal save flow.
+// Editor internals are tested in DatasourceEditor.test.tsx.
 jest.mock('src/components/Datasource/components/DatasourceEditor', () => ({
   __esModule: true,
   default: () =>
@@ -51,16 +46,8 @@ jest.mock('src/components/Datasource/components/DatasourceEditor', () => ({
     ),
 }));
 
-const SupersetClientGet = jest.spyOn(SupersetClient, 'get');
-
-let originalLocation: Location;
-
-beforeEach(() => {
-  originalLocation = window.location;
-});
-
 afterEach(() => {
-  window.location = originalLocation;
+  jest.restoreAllMocks();
 
   try {
     const unmatched = fetchMock.callHistory.calls('unmatched');
@@ -72,16 +59,10 @@ afterEach(() => {
     }
   } finally {
     fetchMock.clearHistory().removeRoutes();
-    jest.clearAllMocks(); // Clears mock history but keeps spy in place
+    jest.restoreAllMocks();
   }
 });
 
-afterAll(() => {
-  // Restore the module-scope SupersetClient.get spy so it doesn't leak its
-  // mocked behavior into other test files running in the same Jest worker.
-  SupersetClientGet.mockRestore();
-});
-
 interface TestDatasource {
   id?: number;
   name: string;
@@ -270,16 +251,16 @@ test('Should show SQL Lab for sql_lab role', async () => {
 
 test('Click on Swap dataset option', async () => {
   const props = createProps();
-  SupersetClientGet.mockImplementationOnce(
-    async ({ endpoint }: { endpoint: string }) => {
+  jest
+    .spyOn(SupersetClient, 'get')
+    .mockImplementation(async ({ endpoint }: { endpoint: string }) => {
       if (endpoint.includes('_info')) {
         return {
           json: { permissions: ['can_read', 'can_write'] },
-        } as unknown as JsonResponse;
+        } as any;
       }
-      return { json: { result: [] } } as unknown as JsonResponse;
-    },
-  );
+      return { json: { result: [] } } as any;
+    });
 
   render(<DatasourceControl {...props} />, {
     useRedux: true,
@@ -287,9 +268,8 @@ test('Click on Swap dataset option', async () => {
   });
   await userEvent.click(screen.getByTestId('datasource-menu-trigger'));
 
-  await act(async () => {
-    await userEvent.click(screen.getByText('Swap dataset'));
-  });
+  await userEvent.click(screen.getByText('Swap dataset'));
+
   expect(
     screen.getByText(
       'Changing the dataset may break the chart if the chart relies on columns or metadata that does not exist in the target dataset',
@@ -307,11 +287,11 @@ test('Click on Edit dataset', async () => {
   });
   await userEvent.click(screen.getByTestId('datasource-menu-trigger'));
 
-  await act(async () => {
-    await userEvent.click(screen.getByText('Edit dataset'));
-  });
+  await userEvent.click(screen.getByText('Edit dataset'));
 
-  expect(screen.getByTestId('mock-datasource-editor')).toBeInTheDocument();
+  expect(
+    await screen.findByTestId('mock-datasource-editor'),
+  ).toBeInTheDocument();
 });
 
 test('Edit dataset should be disabled when user is not admin', async () => {
@@ -356,9 +336,7 @@ test('Click on View in SQL Lab', async () => {
 
   expect(queryByTestId('mock-sqllab-route')).not.toBeInTheDocument();
 
-  await act(async () => {
-    await userEvent.click(screen.getByText('View in SQL Lab'));
-  });
+  await userEvent.click(screen.getByText('View in SQL Lab'));
 
   expect(getByTestId('mock-sqllab-route')).toBeInTheDocument();
   expect(JSON.parse(`${getByTestId('mock-sqllab-route').textContent}`)).toEqual(
@@ -596,7 +574,7 @@ test('should show forbidden dataset state', () => {
   expect(screen.getByText(error.statusText)).toBeVisible();
 });
 
-test('should allow creating new metrics in dataset editor', async () => {
+test('should fire onDatasourceSave when saving with new metrics', async () => {
   const props = createProps({
     datasource: { ...mockDatasource, metrics: [] },
   });
@@ -606,18 +584,21 @@ test('should allow creating new metrics in dataset editor', async () => {
     useRouter: true,
   });
 
-  // The GET response after save includes the new metric
   await openAndSaveChanges({
     ...mockDatasource,
     metrics: [{ id: 1, metric_name: 'test_metric' }],
   });
 
   await waitFor(() => {
-    expect(props.onDatasourceSave).toHaveBeenCalled();
+    expect(props.onDatasourceSave).toHaveBeenCalledWith(
+      expect.objectContaining({
+        metrics: [{ id: 1, metric_name: 'test_metric' }],
+      }),
+    );
   });
 });
 
-test('should allow deleting metrics in dataset editor', async () => {
+test('should fire onDatasourceSave when saving with removed metrics', async () => {
   const props = createProps({
     datasource: {
       ...mockDatasource,
@@ -630,11 +611,12 @@ test('should allow deleting metrics in dataset editor', async () => {
     useRouter: true,
   });
 
-  // The GET response after save reflects the metric was deleted
   await openAndSaveChanges({ ...mockDatasource, metrics: [] });
 
   await waitFor(() => {
-    expect(props.onDatasourceSave).toHaveBeenCalled();
+    expect(props.onDatasourceSave).toHaveBeenCalledWith(
+      expect.objectContaining({ metrics: [] }),
+    );
   });
 });
 
@@ -646,41 +628,14 @@ test('should handle metric save confirmation modal', async () => {
     useRouter: true,
   });
 
-  // Set up fetch mocks for the save flow
-  fetchMock.removeRoute(getDbWithQuery);
-  fetchMock.get(getDbWithQuery, { result: [] }, { name: getDbWithQuery });
-  fetchMock.removeRoute(putDatasetWithAllMockRouteName);
-  fetchMock.put(
-    putDatasetWithAll,
-    {},
-    { name: putDatasetWithAllMockRouteName },
-  );
-  fetchMock.removeRoute(getDatasetWithAllMockRouteName);
-  fetchMock.get(
-    getDatasetWithAll,
-    { result: mockDatasource },
-    { name: getDatasetWithAllMockRouteName },
-  );
-
-  // Open edit dataset modal
-  await userEvent.click(screen.getByTestId('datasource-menu-trigger'));
-  await userEvent.click(await screen.findByTestId('edit-dataset'));
-
-  // Click save to trigger confirmation modal
-  await userEvent.click(await screen.findByTestId('datasource-modal-save'));
-
-  // Verify confirmation modal appears
-  expect(await screen.findByText('OK')).toBeInTheDocument();
-
-  // Confirm save
-  await userEvent.click(screen.getByText('OK'));
+  await openAndSaveChanges(mockDatasource);
 
   await waitFor(() => {
     expect(props.onDatasourceSave).toHaveBeenCalled();
   });
 });
 
-test('should verify DatasourceControl callback fires on save', async () => {
+test('should fire onDatasourceSave callback on save', async () => {
   const mockOnDatasourceSave = jest.fn();
   const props = createProps({
     datasource: mockDatasource,
@@ -692,23 +647,14 @@ test('should verify DatasourceControl callback fires on save', async () => {
     useRouter: true,
   });
 
-  expect(screen.getByTestId('datasource-control')).toBeInTheDocument();
-
   await openAndSaveChanges(mockDatasource);
 
   await waitFor(() => {
-    expect(mockOnDatasourceSave).toHaveBeenCalled();
+    expect(mockOnDatasourceSave).toHaveBeenCalledWith(
+      expect.objectContaining({
+        id: expect.any(Number),
+        name: expect.any(String),
+      }),
+    );
   });
-
-  // Verify callback received a datasource object
-  expect(mockOnDatasourceSave).toHaveBeenCalledWith(
-    expect.objectContaining({
-      id: expect.any(Number),
-      name: expect.any(String),
-    }),
-  );
 });
-
-// Note: Cross-component integration test removed due to complex Redux/user context setup
-// The existing callback tests provide sufficient coverage for metric creation workflows
-// Future enhancement could add MetricsControl integration when test infrastructure supports it

superset-frontend/src/explore/components/controls/DatasourceControl/index.tsx

@@ -18,10 +18,15 @@
  * under the License.
  */
 
-import React, { useState, useCallback } from 'react';
+import React, { PureComponent } from 'react';
 import { DatasourceType, SupersetClient, Datasource } from '@superset-ui/core';
 import { t } from '@apache-superset/core/translation';
-import { css, styled, useTheme } from '@apache-superset/core/theme';
+import {
+  css,
+  styled,
+  withTheme,
+  type SupersetTheme,
+} from '@apache-superset/core/theme';
 import { getTemporalColumns } from '@superset-ui/chart-controls';
 import { getUrlParam } from 'src/utils/urlUtils';
 import {
@@ -41,6 +46,7 @@ import { Icons } from '@superset-ui/core/components/Icons';
 import WarningIconWithTooltip from '@superset-ui/core/components/WarningIconWithTooltip';
 import { URL_PARAMS } from 'src/constants';
 import { getDatasourceAsSaveableDataset } from 'src/utils/datasourceUtils';
+import { datasetLabelLower } from 'src/features/semanticLayers/label';
 import {
   userHasPermission,
   isUserAdmin,
@@ -50,7 +56,6 @@ import ViewQueryModalFooter from 'src/explore/components/controls/ViewQueryModal
 import ViewQuery from 'src/explore/components/controls/ViewQuery';
 import { SaveDatasetModal } from 'src/SqlLab/components/SaveDatasetModal';
 import { safeStringify } from 'src/utils/safeStringify';
-import { datasetLabelLower } from 'src/features/semanticLayers/label';
 import { Link } from 'react-router-dom';
 
 // Extended Datasource interface with all properties used in this component
@@ -89,7 +94,7 @@ interface FormData {
   [key: string]: unknown;
 }
 
-interface DatasourceControlProps {
+export interface DatasourceControlProps {
   actions: DatasourceControlActions;
   onChange?: () => void;
   value?: string | null;
@@ -97,6 +102,7 @@ interface DatasourceControlProps {
   form_data?: FormData;
   isEditable?: boolean;
   onDatasourceSave?: ((datasource: ExtendedDatasource) => void) | null;
+  theme: SupersetTheme;
   user: User;
   // ControlHeader-related props
   hovered?: boolean;
@@ -108,6 +114,20 @@ interface DatasourceControlProps {
   name?: string;
 }
 
+interface DatasourceControlState {
+  showEditDatasourceModal: boolean;
+  showChangeDatasourceModal: boolean;
+  showSaveDatasetModal: boolean;
+  showDatasource?: boolean;
+}
+
+const defaultProps = {
+  onChange: () => {},
+  onDatasourceSave: null,
+  value: null,
+  isEditable: true,
+};
+
 const getDatasetType = (datasource: ExtendedDatasource): string => {
   if (datasource.type === 'query') {
     return 'query';
@@ -217,388 +237,413 @@ const preventRouterLinkWhileMetaClicked = (evt: React.MouseEvent) => {
   }
 };
 
-export default function DatasourceControl({
-  actions,
-  onChange = () => {},
-  value = null,
-  datasource,
-  form_data,
-  isEditable = true,
-  onDatasourceSave = null,
-  user,
-}: DatasourceControlProps) {
-  const theme = useTheme();
+class DatasourceControl extends PureComponent<
+  DatasourceControlProps,
+  DatasourceControlState
+> {
+  static defaultProps = defaultProps;
 
-  const [showEditDatasourceModal, setShowEditDatasourceModal] = useState(false);
-  const [showChangeDatasourceModal, setShowChangeDatasourceModal] =
-    useState(false);
-  const [showSaveDatasetModal, setShowSaveDatasetModal] = useState(false);
+  constructor(props: DatasourceControlProps) {
+    super(props);
+    this.state = {
+      showEditDatasourceModal: false,
+      showChangeDatasourceModal: false,
+      showSaveDatasetModal: false,
+    };
+  }
 
-  const handleDatasourceSave = useCallback(
-    (savedDatasource: Datasource) => {
-      // Cast to ExtendedDatasource for the component's internal use
-      actions.changeDatasource(savedDatasource as ExtendedDatasource);
-      // Cast datasource for getTemporalColumns which expects Dataset | QueryResponse
-      const { temporalColumns, defaultTemporalColumn } = getTemporalColumns(
-        savedDatasource as Parameters<typeof getTemporalColumns>[0],
+  onDatasourceSave = (datasource: Datasource) => {
+    // Cast to ExtendedDatasource for the component's internal use
+    this.props.actions.changeDatasource(datasource as ExtendedDatasource);
+    // Cast datasource for getTemporalColumns which expects Dataset | QueryResponse
+    const { temporalColumns, defaultTemporalColumn } = getTemporalColumns(
+      datasource as Parameters<typeof getTemporalColumns>[0],
+    );
+    const { columns } = datasource;
+    // the current granularity_sqla might not be a temporal column anymore
+    const timeCol = this.props.form_data?.granularity_sqla;
+    const isGranularitySqlaTemporal = columns.find(
+      ({ column_name }) => column_name === timeCol,
+    )?.is_dttm;
+    // the current main_dttm_col might not be a temporal column anymore
+    const isDefaultTemporal = columns.find(
+      ({ column_name }) => column_name === defaultTemporalColumn,
+    )?.is_dttm;
+
+    // if the current granularity_sqla is empty or it is not a temporal column anymore
+    // let's update the control value
+    if (datasource.type === 'table' && !isGranularitySqlaTemporal) {
+      const temporalColumn = isDefaultTemporal
+        ? defaultTemporalColumn
+        : temporalColumns?.[0];
+      this.props.actions.setControlValue(
+        'granularity_sqla',
+        temporalColumn || null,
       );
-      const { columns } = savedDatasource;
-      // the granularity_sqla might not be a temporal column anymore
-      const timeCol = form_data?.granularity_sqla;
-      const isGranularitySqlaTemporal = columns.find(
-        ({ column_name }) => column_name === timeCol,
-      )?.is_dttm;
-      // the main_dttm_col might not be a temporal column anymore
-      const isDefaultTemporal = columns.find(
-        ({ column_name }) => column_name === defaultTemporalColumn,
-      )?.is_dttm;
-
-      // if granularity_sqla is empty or it is not a temporal column anymore
-      // let's update the control value
-      if (savedDatasource.type === 'table' && !isGranularitySqlaTemporal) {
-        const temporalColumn = isDefaultTemporal
-          ? defaultTemporalColumn
-          : temporalColumns?.[0];
-        actions.setControlValue('granularity_sqla', temporalColumn || null);
-      }
-
-      if (onDatasourceSave) {
-        onDatasourceSave(savedDatasource);
-      }
-    },
-    [actions, form_data?.granularity_sqla, onDatasourceSave],
-  );
-
-  const toggleChangeDatasourceModal = useCallback(() => {
-    setShowChangeDatasourceModal(prev => !prev);
-  }, []);
-
-  const toggleEditDatasourceModal = useCallback(() => {
-    setShowEditDatasourceModal(prev => !prev);
-  }, []);
-
-  const toggleSaveDatasetModal = useCallback(() => {
-    setShowSaveDatasetModal(prev => !prev);
-  }, []);
-
-  const handleMenuItemClick = useCallback(
-    ({ key }: { key: string }) => {
-      switch (key) {
-        case CHANGE_DATASET:
-          toggleChangeDatasourceModal();
-          break;
-
-        case EDIT_DATASET:
-          toggleEditDatasourceModal();
-          break;
-
-        case VIEW_IN_SQL_LAB:
-          {
-            const payload = {
-              datasourceKey: `${datasource.id}__${datasource.type}`,
-              sql: datasource.sql,
-            };
-            SupersetClient.postForm('/sqllab/', {
-              form_data: safeStringify(payload),
-            });
-          }
-          break;
-
-        case SAVE_AS_DATASET:
-          toggleSaveDatasetModal();
-          break;
-
-        default:
-          break;
-      }
-    },
-    [
-      datasource,
-      toggleChangeDatasourceModal,
-      toggleEditDatasourceModal,
-      toggleSaveDatasetModal,
-    ],
-  );
-
-  let extra;
-  if (datasource?.extra) {
-    if (typeof datasource.extra === 'string') {
-      try {
-        extra = JSON.parse(datasource.extra);
-      } catch {} // eslint-disable-line no-empty
-    } else {
-      extra = datasource.extra; // eslint-disable-line prefer-destructuring
     }
-  }
-  const isMissingDatasource = !datasource?.id || Boolean(extra?.error);
-  let isMissingParams = false;
-  if (isMissingDatasource) {
-    const datasourceId = getUrlParam(URL_PARAMS.datasourceId);
-    const sliceId = getUrlParam(URL_PARAMS.sliceId);
 
-    if (!datasourceId && !sliceId) {
-      isMissingParams = true;
+    if (this.props.onDatasourceSave) {
+      this.props.onDatasourceSave(datasource);
     }
-  }
-
-  const allowEdit =
-    datasource.owners?.map(o => o.id || o.value).includes(user.userId) ||
-    isUserAdmin(user);
-
-  const canAccessSqlLab = userHasPermission(user, 'SQL Lab', 'menu_access');
-
-  const editText = t('Edit %s', datasetLabelLower());
-  const requestedQuery = {
-    datasourceKey: `${datasource.id}__${datasource.type}`,
-    sql: datasource.sql,
   };
-  const defaultDatasourceMenuItems = [];
-  if (isEditable && !isMissingDatasource) {
-    defaultDatasourceMenuItems.push({
-      key: EDIT_DATASET,
-      label: !allowEdit ? (
-        <Tooltip
-          title={t(
-            'You must be a %s owner in order to edit. Please reach out to a %s owner to request modifications or edit access.',
-            datasetLabelLower(),
-            datasetLabelLower(),
-          )}
-        >
-          {editText}
-        </Tooltip>
-      ) : (
-        editText
-      ),
-      disabled: !allowEdit,
-      'data-test': 'edit-dataset',
-    });
-  }
 
-  defaultDatasourceMenuItems.push({
-    key: CHANGE_DATASET,
-    label: t('Swap %s', datasetLabelLower()),
-  });
+  toggleShowDatasource = () => {
+    this.setState(({ showDatasource }) => ({
+      showDatasource: !showDatasource,
+    }));
+  };
 
-  if (!isMissingDatasource && canAccessSqlLab) {
-    defaultDatasourceMenuItems.push({
-      key: VIEW_IN_SQL_LAB,
-      label: (
-        <Link
-          to={{
-            pathname: '/sqllab',
-            state: { requestedQuery },
-          }}
-          onClick={preventRouterLinkWhileMetaClicked}
-        >
-          {t('View in SQL Lab')}
-        </Link>
-      ),
-    });
-  }
+  toggleChangeDatasourceModal = () => {
+    this.setState(({ showChangeDatasourceModal }) => ({
+      showChangeDatasourceModal: !showChangeDatasourceModal,
+    }));
+  };
 
-  const defaultDatasourceMenu = (
-    <Menu onClick={handleMenuItemClick} items={defaultDatasourceMenuItems} />
-  );
+  toggleEditDatasourceModal = () => {
+    this.setState(({ showEditDatasourceModal }) => ({
+      showEditDatasourceModal: !showEditDatasourceModal,
+    }));
+  };
 
-  const queryDatasourceMenuItems = [
-    {
-      key: QUERY_PREVIEW,
-      label: (
-        <ModalTrigger
-          triggerNode={
-            <div data-test="view-query-menu-item">{t('Query preview')}</div>
-          }
-          modalTitle={t('Query preview')}
-          modalBody={
-            <ViewQuery
-              sql={datasource?.sql || datasource?.select_star || ''}
-              datasource={`${datasource.id}__${datasource.type}`}
-            />
-          }
-          modalFooter={
-            <ViewQueryModalFooter
-              changeDatasource={toggleSaveDatasetModal}
-              datasource={{
-                id: String(datasource.id),
-                sql: datasource.sql || '',
-                type: datasource.type,
-              }}
-            />
-          }
-          draggable={false}
-          resizable={false}
-          responsive
-        />
-      ),
-    },
-  ];
+  toggleSaveDatasetModal = () => {
+    this.setState(({ showSaveDatasetModal }) => ({
+      showSaveDatasetModal: !showSaveDatasetModal,
+    }));
+  };
 
-  if (canAccessSqlLab) {
-    queryDatasourceMenuItems.push({
-      key: VIEW_IN_SQL_LAB,
-      label: (
-        <Link
-          to={{
-            pathname: '/sqllab',
-            state: { requestedQuery },
-          }}
-          onClick={preventRouterLinkWhileMetaClicked}
-        >
-          {t('View in SQL Lab')}
-        </Link>
-      ),
-    });
-  }
+  handleMenuItemClick = ({ key }: { key: string }) => {
+    switch (key) {
+      case CHANGE_DATASET:
+        this.toggleChangeDatasourceModal();
+        break;
 
-  queryDatasourceMenuItems.push({
-    key: SAVE_AS_DATASET,
-    label: <span>{t('Save as %s', datasetLabelLower())}</span>,
-  });
+      case EDIT_DATASET:
+        this.toggleEditDatasourceModal();
+        break;
 
-  const queryDatasourceMenu = (
-    <Menu onClick={handleMenuItemClick} items={queryDatasourceMenuItems} />
-  );
+      case VIEW_IN_SQL_LAB:
+        {
+          const { datasource } = this.props;
+          const payload = {
+            datasourceKey: `${datasource.id}__${datasource.type}`,
+            sql: datasource.sql,
+          };
+          SupersetClient.postForm('/sqllab/', {
+            form_data: safeStringify(payload),
+          });
+        }
+        break;
 
-  const { health_check_message: healthCheckMessage } = datasource;
+      case SAVE_AS_DATASET:
+        this.toggleSaveDatasetModal();
+        break;
 
-  const titleText =
-    isMissingDatasource && !datasource.name
-      ? t('Missing %s', datasetLabelLower())
-      : getDatasourceTitle(datasource);
+      default:
+        break;
+    }
+  };
 
-  const tooltip = titleText;
+  render() {
+    const {
+      showChangeDatasourceModal,
+      showEditDatasourceModal,
+      showSaveDatasetModal,
+    } = this.state;
+    const { datasource, onChange, theme } = this.props;
+    let extra;
+    if (datasource?.extra) {
+      if (typeof datasource.extra === 'string') {
+        try {
+          extra = JSON.parse(datasource.extra);
+        } catch {} // eslint-disable-line no-empty
+      } else {
+        extra = datasource.extra; // eslint-disable-line prefer-destructuring
+      }
+    }
+    const isMissingDatasource = !datasource?.id || Boolean(extra?.error);
+    let isMissingParams = false;
+    if (isMissingDatasource) {
+      const datasourceId = getUrlParam(URL_PARAMS.datasourceId);
+      const sliceId = getUrlParam(URL_PARAMS.sliceId);
 
-  return (
-    <Styles data-test="datasource-control" className="DatasourceControl">
-      <div className="data-container">
-        {datasourceIconLookup[getDatasetType(datasource)]}
-        {renderDatasourceTitle(titleText, tooltip)}
-        {healthCheckMessage && (
-          <Tooltip title={healthCheckMessage}>
-            <Icons.WarningOutlined
-              css={css`
-                margin-left: ${theme.sizeUnit * 2}px;
-              `}
-              iconColor={theme.colorWarning}
-            />
-          </Tooltip>
-        )}
-        {extra?.warning_markdown && (
-          <WarningIconWithTooltip warningMarkdown={extra.warning_markdown} />
-        )}
-        <Dropdown
-          popupRender={() =>
-            datasource.type === DatasourceType.Query
-              ? queryDatasourceMenu
-              : defaultDatasourceMenu
-          }
-          trigger={['click']}
-          data-test="datasource-menu"
-        >
-          <Icons.MoreOutlined
-            iconSize="xl"
-            iconColor={theme.colorPrimary}
-            className="datasource-modal-trigger"
-            data-test="datasource-menu-trigger"
-          />
-        </Dropdown>
-      </div>
-      {/* missing dataset */}
-      {isMissingDatasource && isMissingParams && (
-        <div className="error-alert">
-          <ErrorAlert
-            type="warning"
-            message={t('Missing URL parameters')}
-            description={t(
-              'The URL is missing the dataset_id or slice_id parameters.',
+      if (!datasourceId && !sliceId) {
+        isMissingParams = true;
+      }
+    }
+
+    const { user } = this.props;
+    const allowEdit =
+      datasource.owners?.map(o => o.id || o.value).includes(user.userId) ||
+      isUserAdmin(user);
+
+    const canAccessSqlLab = userHasPermission(user, 'SQL Lab', 'menu_access');
+
+    const editText = t('Edit %s', datasetLabelLower());
+    const requestedQuery = {
+      datasourceKey: `${datasource.id}__${datasource.type}`,
+      sql: datasource.sql,
+    };
+    const defaultDatasourceMenuItems = [];
+    if (this.props.isEditable && !isMissingDatasource) {
+      defaultDatasourceMenuItems.push({
+        key: EDIT_DATASET,
+        label: !allowEdit ? (
+          <Tooltip
+            title={t(
+              'You must be a %s owner in order to edit. Please reach out to a %s owner to request modifications or edit access.',
+              datasetLabelLower(),
+              datasetLabelLower(),
             )}
+          >
+            {editText}
+          </Tooltip>
+        ) : (
+          editText
+        ),
+        disabled: !allowEdit,
+        'data-test': 'edit-dataset',
+      });
+    }
+
+    defaultDatasourceMenuItems.push({
+      key: CHANGE_DATASET,
+      label: t('Swap %s', datasetLabelLower()),
+    });
+
+    if (!isMissingDatasource && canAccessSqlLab) {
+      defaultDatasourceMenuItems.push({
+        key: VIEW_IN_SQL_LAB,
+        label: (
+          <Link
+            to={{
+              pathname: '/sqllab',
+              state: { requestedQuery },
+            }}
+            onClick={preventRouterLinkWhileMetaClicked}
+          >
+            {t('View in SQL Lab')}
+          </Link>
+        ),
+      });
+    }
+
+    const defaultDatasourceMenu = (
+      <Menu
+        onClick={this.handleMenuItemClick}
+        items={defaultDatasourceMenuItems}
+      />
+    );
+
+    const queryDatasourceMenuItems = [
+      {
+        key: QUERY_PREVIEW,
+        label: (
+          <ModalTrigger
+            triggerNode={
+              <div data-test="view-query-menu-item">{t('Query preview')}</div>
+            }
+            modalTitle={t('Query preview')}
+            modalBody={
+              <ViewQuery
+                sql={datasource?.sql || datasource?.select_star || ''}
+                datasource={`${datasource.id}__${datasource.type}`}
+              />
+            }
+            modalFooter={
+              <ViewQueryModalFooter
+                changeDatasource={this.toggleSaveDatasetModal}
+                datasource={{
+                  id: String(datasource.id),
+                  sql: datasource.sql || '',
+                  type: datasource.type,
+                }}
+              />
+            }
+            draggable={false}
+            resizable={false}
+            responsive
           />
-        </div>
-      )}
-      {isMissingDatasource && !isMissingParams && (
-        <div className="error-alert">
-          {extra?.error ? (
-            <ErrorMessageWithStackTrace
-              title={extra.error.statusText || extra.error.message}
-              subtitle={
-                extra.error.statusText ? extra.error.message : undefined
-              }
-              error={extra.error}
-              source="explore"
+        ),
+      },
+    ];
+
+    if (canAccessSqlLab) {
+      queryDatasourceMenuItems.push({
+        key: VIEW_IN_SQL_LAB,
+        label: (
+          <Link
+            to={{
+              pathname: '/sqllab',
+              state: { requestedQuery },
+            }}
+            onClick={preventRouterLinkWhileMetaClicked}
+          >
+            {t('View in SQL Lab')}
+          </Link>
+        ),
+      });
+    }
+
+    queryDatasourceMenuItems.push({
+      key: SAVE_AS_DATASET,
+      label: <span>{t('Save as %s', datasetLabelLower())}</span>,
+    });
+
+    const queryDatasourceMenu = (
+      <Menu
+        onClick={this.handleMenuItemClick}
+        items={queryDatasourceMenuItems}
+      />
+    );
+
+    const { health_check_message: healthCheckMessage } = datasource;
+
+    const titleText =
+      isMissingDatasource && !datasource.name
+        ? t('Missing %s', datasetLabelLower())
+        : getDatasourceTitle(datasource);
+
+    const tooltip = titleText;
+
+    return (
+      <Styles data-test="datasource-control" className="DatasourceControl">
+        <div className="data-container">
+          {datasourceIconLookup[getDatasetType(datasource)]}
+          {renderDatasourceTitle(titleText, tooltip)}
+          {healthCheckMessage && (
+            <Tooltip title={healthCheckMessage}>
+              <Icons.WarningOutlined
+                css={css`
+                  margin-left: ${theme.sizeUnit * 2}px;
+                `}
+                iconColor={theme.colorWarning}
+              />
+            </Tooltip>
+          )}
+          {extra?.warning_markdown && (
+            <WarningIconWithTooltip warningMarkdown={extra.warning_markdown} />
+          )}
+          <Dropdown
+            popupRender={() =>
+              datasource.type === DatasourceType.Query
+                ? queryDatasourceMenu
+                : defaultDatasourceMenu
+            }
+            trigger={['click']}
+            data-test="datasource-menu"
+          >
+            <Icons.MoreOutlined
+              iconSize="xl"
+              iconColor={theme.colorPrimary}
+              className="datasource-modal-trigger"
+              data-test="datasource-menu-trigger"
             />
-          ) : (
+          </Dropdown>
+        </div>
+        {/* missing dataset */}
+        {isMissingDatasource && isMissingParams && (
+          <div className="error-alert">
             <ErrorAlert
               type="warning"
-              message={t('Missing %s', datasetLabelLower())}
-              descriptionPre={false}
-              descriptionDetailsCollapsed={false}
-              descriptionDetails={
-                <>
-                  <p>
-                    {t(
-                      'The %s linked to this chart may have been deleted.',
-                      datasetLabelLower(),
-                    )}
-                  </p>
-                  <p>
-                    <Button
-                      buttonStyle="primary"
-                      onClick={() =>
-                        handleMenuItemClick({ key: CHANGE_DATASET })
-                      }
-                    >
-                      {t('Swap %s', datasetLabelLower())}
-                    </Button>
-                  </p>
-                </>
-              }
+              message={t('Missing URL parameters')}
+              description={t(
+                'The URL is missing the dataset_id or slice_id parameters.',
+              )}
             />
-          )}
-        </div>
-      )}
-      {showEditDatasourceModal &&
-        (String(datasource.type) === 'semantic_view' ? (
-          <SemanticViewEditModal
-            show={showEditDatasourceModal}
-            onHide={toggleEditDatasourceModal}
-            onSave={() => handleDatasourceSave(datasource)}
-            semanticView={{
-              id: datasource.id,
-              table_name: datasource.name,
-              description: datasource.description,
-              cache_timeout: datasource.cache_timeout,
-            }}
+          </div>
+        )}
+        {isMissingDatasource && !isMissingParams && (
+          <div className="error-alert">
+            {extra?.error ? (
+              <ErrorMessageWithStackTrace
+                title={extra.error.statusText || extra.error.message}
+                subtitle={
+                  extra.error.statusText ? extra.error.message : undefined
+                }
+                error={extra.error}
+                source="explore"
+              />
+            ) : (
+              <ErrorAlert
+                type="warning"
+                message={t('Missing %s', datasetLabelLower())}
+                descriptionPre={false}
+                descriptionDetailsCollapsed={false}
+                descriptionDetails={
+                  <>
+                    <p>
+                      {t(
+                        'The %s linked to this chart may have been deleted.',
+                        datasetLabelLower(),
+                      )}
+                    </p>
+                    <p>
+                      <Button
+                        buttonStyle="primary"
+                        onClick={() =>
+                          this.handleMenuItemClick({ key: CHANGE_DATASET })
+                        }
+                      >
+                        {t('Swap %s', datasetLabelLower())}
+                      </Button>
+                    </p>
+                  </>
+                }
+              />
+            )}
+          </div>
+        )}
+        {showEditDatasourceModal &&
+          (String(datasource.type) === 'semantic_view' ? (
+            <SemanticViewEditModal
+              show={showEditDatasourceModal}
+              onHide={this.toggleEditDatasourceModal}
+              onSave={() => this.onDatasourceSave(datasource)}
+              semanticView={{
+                id: datasource.id,
+                table_name: datasource.name,
+                description: datasource.description,
+                cache_timeout: datasource.cache_timeout,
+              }}
+            />
+          ) : (
+            <DatasourceModal
+              datasource={datasource}
+              show={showEditDatasourceModal}
+              onDatasourceSave={this.onDatasourceSave}
+              onHide={this.toggleEditDatasourceModal}
+            />
+          ))}
+        {showChangeDatasourceModal && (
+          <ChangeDatasourceModal
+            onDatasourceSave={this.onDatasourceSave}
+            onHide={this.toggleChangeDatasourceModal}
+            show={showChangeDatasourceModal}
+            onChange={onChange}
           />
-        ) : (
-          <DatasourceModal
-            datasource={datasource}
-            show={showEditDatasourceModal}
-            onDatasourceSave={handleDatasourceSave}
-            onHide={toggleEditDatasourceModal}
+        )}
+        {showSaveDatasetModal && (
+          <SaveDatasetModal
+            visible={showSaveDatasetModal}
+            onHide={this.toggleSaveDatasetModal}
+            buttonTextOnSave={t('Save')}
+            buttonTextOnOverwrite={t('Overwrite')}
+            modalDescription={t(
+              'Save this query as a virtual dataset to continue exploring',
+            )}
+            datasource={getDatasourceAsSaveableDataset(datasource)}
+            openWindow={false}
+            formData={this.props.form_data}
           />
-        ))}
-      {showChangeDatasourceModal && (
-        <ChangeDatasourceModal
-          onDatasourceSave={handleDatasourceSave}
-          onHide={toggleChangeDatasourceModal}
-          show={showChangeDatasourceModal}
-          onChange={onChange}
-        />
-      )}
-      {showSaveDatasetModal && (
-        <SaveDatasetModal
-          visible={showSaveDatasetModal}
-          onHide={toggleSaveDatasetModal}
-          buttonTextOnSave={t('Save')}
-          buttonTextOnOverwrite={t('Overwrite')}
-          modalDescription={t(
-            'Save this query as a virtual dataset to continue exploring',
-          )}
-          datasource={getDatasourceAsSaveableDataset(datasource)}
-          openWindow={false}
-          formData={form_data}
-        />
-      )}
-    </Styles>
-  );
+        )}
+      </Styles>
+    );
+  }
 }
+
+// withTheme injects the theme prop, so we need to cast the component type
+export default withTheme(
+  DatasourceControl as React.ComponentType<
+    Omit<DatasourceControlProps, 'theme'>
+  >,
+);

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/index.tsx

@@ -16,16 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import {
-  useState,
-  useCallback,
-  useEffect,
-  useMemo,
-  type ReactNode,
-} from 'react';
+import { Component, ReactNode } from 'react';
 import { SupersetClient, ensureIsArray } from '@superset-ui/core';
 import { logging } from '@apache-superset/core/utils';
 import { t } from '@apache-superset/core/translation';
+import { withTheme, type SupersetTheme } from '@apache-superset/core/theme';
+
 import ControlHeader from 'src/explore/components/ControlHeader';
 import AdhocMetric, {
   isDictionaryForAdhocMetric,
@@ -34,6 +30,7 @@ import {
   Operators,
   OPERATOR_ENUM_TO_OPERATOR_TYPE,
 } from 'src/explore/constants';
+import FilterDefinitionOption from 'src/explore/components/controls/MetricControl/FilterDefinitionOption';
 import {
   AddControlLabel,
   HeaderContainer,
@@ -88,10 +85,7 @@ export interface AdhocFilterControlProps {
     filter: AdhocFilter,
     allFilters: AdhocFilter[],
   ) => string | boolean | undefined;
-  // Control-header props are forwarded through to <ControlHeader />, mirroring
-  // the legacy class component's {...this.props} spread (validation styling,
-  // description/warning tooltips, renderTrigger, hovered state).
-  [key: string]: unknown;
+  theme?: SupersetTheme;
 }
 
 interface FilterOption {
@@ -102,6 +96,12 @@ interface FilterOption {
   [key: string]: unknown;
 }
 
+interface AdhocFilterControlState {
+  values: AdhocFilter[];
+  options: FilterOption[];
+  partitionColumn: string | null;
+}
+
 const { warning } = Modal;
 
 function optionsForSelect(props: AdhocFilterControlProps): FilterOption[] {
@@ -146,55 +146,71 @@ function optionsForSelect(props: AdhocFilterControlProps): FilterOption[] {
     );
 }
 
-function AdhocFilterControl({
-  label,
-  name = '',
-  sections,
-  operators,
-  onChange = () => {},
-  value,
-  datasource,
-  columns = [],
-  savedMetrics = [],
-  selectedMetrics = [],
-  canDelete,
-  ...restProps
-}: AdhocFilterControlProps) {
-  const [values, setValues] = useState<AdhocFilter[]>(() =>
-    (value || []).map(filter =>
+class AdhocFilterControl extends Component<
+  AdhocFilterControlProps,
+  AdhocFilterControlState
+> {
+  optionRenderer: (option: FilterOption) => JSX.Element;
+  valueRenderer: (adhocFilter: AdhocFilter, index: number) => JSX.Element;
+
+  constructor(props: AdhocFilterControlProps) {
+    super(props);
+    this.onRemoveFilter = this.onRemoveFilter.bind(this);
+    this.onNewFilter = this.onNewFilter.bind(this);
+    this.onFilterEdit = this.onFilterEdit.bind(this);
+    this.moveLabel = this.moveLabel.bind(this);
+    this.onChange = this.onChange.bind(this);
+    this.mapOption = this.mapOption.bind(this);
+    this.getMetricExpression = this.getMetricExpression.bind(this);
+    this.removeFilter = this.removeFilter.bind(this);
+
+    const filters = (this.props.value || []).map(filter =>
       isDictionaryForAdhocFilter(filter) ? new AdhocFilter(filter) : filter,
-    ),
-  );
-  const [partitionColumn, setPartitionColumn] = useState<string | null>(null);
+    );
 
-  const options = useMemo(
-    () =>
-      optionsForSelect({
-        columns,
-        selectedMetrics,
-        savedMetrics,
-      }),
-    [columns, selectedMetrics, savedMetrics],
-  );
+    this.optionRenderer = option => <FilterDefinitionOption option={option} />;
+    this.valueRenderer = (adhocFilter, index) => (
+      <AdhocFilterOption
+        key={index}
+        index={index}
+        adhocFilter={adhocFilter}
+        onFilterEdit={this.onFilterEdit}
+        options={this.state.options}
+        sections={this.props.sections}
+        operators={this.props.operators as Operators[] | undefined}
+        datasource={this.props.datasource}
+        onRemoveFilter={e => {
+          e.stopPropagation();
+          this.onRemoveFilter(index);
+        }}
+        onMoveLabel={this.moveLabel}
+        onDropLabel={() => this.props.onChange?.(this.state.values)}
+        partitionColumn={this.state.partitionColumn}
+      />
+    );
+    this.state = {
+      values: filters,
+      options: optionsForSelect(this.props),
+      partitionColumn: null,
+    };
+  }
 
-  useEffect(() => {
-    // Clear stale partition state before (re)resolving; only 1-partition-key
-    // datasources end up setting a value below.
-    setPartitionColumn(null);
+  componentDidMount() {
+    const { datasource } = this.props;
     if (datasource && datasource.type === 'table') {
       const dbId = datasource.database?.id;
       const {
-        datasource_name: dsName,
+        datasource_name: name,
         catalog,
         schema,
         is_sqllab_view: isSqllabView,
       } = datasource;
 
-      if (!isSqllabView && dbId && dsName && schema) {
+      if (!isSqllabView && dbId && name && schema) {
         SupersetClient.get({
           endpoint: `/api/v1/database/${dbId}/table_metadata/extra/${toQueryString(
             {
-              name: dsName,
+              name,
               catalog,
               schema,
             },
@@ -203,14 +219,14 @@ function AdhocFilterControl({
           .then(({ json }) => {
             if (json && json.partitions) {
               const { partitions } = json;
-              // only show latest_partition option when the table datasource
-              // has exactly 1 partition key.
+              // for now only show latest_partition option
+              // when table datasource has only 1 partition key.
               if (
                 partitions &&
                 partitions.cols &&
                 Object.keys(partitions.cols).length === 1
               ) {
-                setPartitionColumn(partitions.cols[0]);
+                this.setState({ partitionColumn: partitions.cols[0] });
               }
             }
           })
@@ -219,205 +235,174 @@ function AdhocFilterControl({
           });
       }
     }
-  }, [datasource]);
+  }
 
-  useEffect(() => {
-    if (value !== undefined) {
-      setValues(
-        (value || []).map(filter =>
+  componentDidUpdate(prevProps: AdhocFilterControlProps): void {
+    if (this.props.columns !== prevProps.columns) {
+      this.setState({ options: optionsForSelect(this.props) });
+    }
+    if (this.props.value !== prevProps.value) {
+      this.setState({
+        values: (this.props.value || []).map(filter =>
           isDictionaryForAdhocFilter(filter) ? new AdhocFilter(filter) : filter,
         ),
+      });
+    }
+  }
+
+  removeFilter(index: number): void {
+    const valuesCopy = [...this.state.values];
+    valuesCopy.splice(index, 1);
+    this.setState(prevState => ({
+      ...prevState,
+      values: valuesCopy,
+    }));
+    this.props.onChange?.(valuesCopy);
+  }
+
+  onRemoveFilter(index: number): void {
+    const { canDelete } = this.props;
+    const { values } = this.state;
+    const result = canDelete?.(values[index], values);
+    if (typeof result === 'string') {
+      warning({ title: t('Warning'), content: result });
+      return;
+    }
+    this.removeFilter(index);
+  }
+
+  onNewFilter(newFilter: FilterOption | AdhocFilter): void {
+    const mappedOption = this.mapOption(newFilter);
+    if (mappedOption) {
+      this.setState(
+        prevState => ({
+          ...prevState,
+          values: [...prevState.values, mappedOption],
+        }),
+        () => {
+          this.props.onChange?.(this.state.values);
+        },
       );
     }
-  }, [value]);
+  }
 
-  const getMetricExpression = useCallback(
-    (savedMetricName: string): string => {
-      const metric = savedMetrics?.find(
-        savedMetric => savedMetric.metric_name === savedMetricName,
-      );
-      return metric?.expression ?? '';
-    },
-    [savedMetrics],
-  );
+  onFilterEdit(changedFilter: AdhocFilter): void {
+    this.props.onChange?.(
+      this.state.values.map(value => {
+        if (value.filterOptionName === changedFilter.filterOptionName) {
+          return changedFilter;
+        }
+        return value;
+      }),
+    );
+  }
 
-  const mapOption = useCallback(
-    (option: FilterOption | AdhocFilter): AdhocFilter | null => {
-      // already a AdhocFilter, skip
-      if (option instanceof AdhocFilter) {
-        return option;
-      }
-      // via datasource saved metric
-      if (option.saved_metric_name) {
-        return new AdhocFilter({
-          expressionType: ExpressionTypes.Sql,
-          subject: getMetricExpression(option.saved_metric_name),
-          operator:
-            OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.GreaterThan].operation,
-          comparator: 0,
-          clause: Clauses.Having,
-        });
-      }
-      // has a custom label, meaning it's custom column
-      if (option.label) {
-        return new AdhocFilter({
-          expressionType: ExpressionTypes.Sql,
-          subject: new AdhocMetric(option).translateToSql(),
-          operator:
-            OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.GreaterThan].operation,
-          comparator: 0,
-          clause: Clauses.Having,
-        });
-      }
-      // add a new filter item
-      if (option.column_name) {
-        return new AdhocFilter({
-          expressionType: ExpressionTypes.Simple,
-          subject: option.column_name,
-          operator: OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.Equals].operation,
-          comparator: '',
-          clause: Clauses.Where,
-          isNew: true,
-        });
-      }
-      return null;
-    },
-    [getMetricExpression],
-  );
+  onChange(opts: FilterOption[] | null): void {
+    const options = (opts || [])
+      .map(option => this.mapOption(option))
+      .filter((option): option is AdhocFilter => option !== null);
+    this.props.onChange?.(options);
+  }
 
-  const removeFilter = useCallback(
-    (index: number) => {
-      const valuesCopy = [...values];
-      valuesCopy.splice(index, 1);
-      setValues(valuesCopy);
-      onChange?.(valuesCopy);
-    },
-    [values, onChange],
-  );
+  getMetricExpression(savedMetricName: string): string {
+    const metric = this.props.savedMetrics?.find(
+      savedMetric => savedMetric.metric_name === savedMetricName,
+    );
+    return metric?.expression ?? '';
+  }
 
-  const onRemoveFilter = useCallback(
-    (index: number) => {
-      const result = canDelete?.(values[index], values);
-      if (typeof result === 'string') {
-        warning({ title: t('Warning'), content: result });
-        return;
-      }
-      removeFilter(index);
-    },
-    [canDelete, values, removeFilter],
-  );
+  moveLabel(dragIndex: number, hoverIndex: number): void {
+    const { values } = this.state;
 
-  const onFilterEdit = useCallback(
-    (changedFilter: AdhocFilter) => {
-      onChange?.(
-        values.map(val => {
-          if (val.filterOptionName === changedFilter.filterOptionName) {
-            return changedFilter;
-          }
-          return val;
-        }),
-      );
-    },
-    [values, onChange],
-  );
+    const newValues = [...values];
+    [newValues[hoverIndex], newValues[dragIndex]] = [
+      newValues[dragIndex],
+      newValues[hoverIndex],
+    ];
+    this.setState({ values: newValues });
+  }
 
-  const moveLabel = useCallback((dragIndex: number, hoverIndex: number) => {
-    setValues(prevValues => {
-      const newValues = [...prevValues];
-      [newValues[hoverIndex], newValues[dragIndex]] = [
-        newValues[dragIndex],
-        newValues[hoverIndex],
-      ];
-      return newValues;
-    });
-  }, []);
+  mapOption(option: FilterOption | AdhocFilter): AdhocFilter | null {
+    // already a AdhocFilter, skip
+    if (option instanceof AdhocFilter) {
+      return option;
+    }
+    // via datasource saved metric
+    if (option.saved_metric_name) {
+      return new AdhocFilter({
+        expressionType: ExpressionTypes.Sql,
+        subject: this.getMetricExpression(option.saved_metric_name),
+        operator:
+          OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.GreaterThan].operation,
+        comparator: 0,
+        clause: Clauses.Having,
+      });
+    }
+    // has a custom label, meaning it's custom column
+    if (option.label) {
+      return new AdhocFilter({
+        expressionType: ExpressionTypes.Sql,
+        subject: new AdhocMetric(option).translateToSql(),
+        operator:
+          OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.GreaterThan].operation,
+        comparator: 0,
+        clause: Clauses.Having,
+      });
+    }
+    // add a new filter item
+    if (option.column_name) {
+      return new AdhocFilter({
+        expressionType: ExpressionTypes.Simple,
+        subject: option.column_name,
+        operator: OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.Equals].operation,
+        comparator: '',
+        clause: Clauses.Where,
+        isNew: true,
+      });
+    }
+    return null;
+  }
 
-  const onDropLabel = useCallback(() => {
-    onChange?.(values);
-  }, [onChange, values]);
-
-  const onNewFilter = useCallback(
-    (newFilter: FilterOption | AdhocFilter) => {
-      const mappedOption = mapOption(newFilter);
-      if (mappedOption) {
-        const newValues = [...values, mappedOption];
-        setValues(newValues);
-        onChange?.(newValues);
-      }
-    },
-    [mapOption, values, onChange],
-  );
-
-  const valueRenderer = useCallback(
-    (adhocFilter: AdhocFilter, index: number) => (
-      <AdhocFilterOption
-        key={index}
-        index={index}
-        adhocFilter={adhocFilter}
-        onFilterEdit={onFilterEdit}
-        options={options}
-        sections={sections}
-        operators={operators as Operators[] | undefined}
-        datasource={datasource}
-        onRemoveFilter={e => {
-          e.stopPropagation();
-          onRemoveFilter(index);
-        }}
-        onMoveLabel={moveLabel}
-        onDropLabel={onDropLabel}
-        partitionColumn={partitionColumn}
-      />
-    ),
-    [
-      onFilterEdit,
-      options,
-      sections,
-      operators,
-      datasource,
-      onRemoveFilter,
-      moveLabel,
-      onDropLabel,
-      partitionColumn,
-    ],
-  );
-
-  const addNewFilterPopoverTrigger = useCallback(
-    (trigger: ReactNode) => (
+  addNewFilterPopoverTrigger(trigger: ReactNode): JSX.Element {
+    return (
       <AdhocFilterPopoverTrigger
-        operators={operators as Operators[] | undefined}
-        sections={sections}
+        operators={this.props.operators as Operators[] | undefined}
+        sections={this.props.sections}
         adhocFilter={new AdhocFilter({})}
-        datasource={(datasource as Record<string, unknown>) || {}}
-        options={options}
-        onFilterEdit={onNewFilter}
-        partitionColumn={partitionColumn ?? undefined}
+        datasource={(this.props.datasource as Record<string, unknown>) || {}}
+        options={this.state.options}
+        onFilterEdit={this.onNewFilter}
+        partitionColumn={this.state.partitionColumn ?? undefined}
       >
         {trigger}
       </AdhocFilterPopoverTrigger>
-    ),
-    [operators, sections, datasource, options, onNewFilter, partitionColumn],
-  );
+    );
+  }
 
-  return (
-    <div className="metrics-select" data-test="adhoc-filter-control">
-      <HeaderContainer>
-        <ControlHeader {...restProps} label={label} name={name} />
-      </HeaderContainer>
-      <LabelsContainer>
-        {[
-          ...(values.length > 0
-            ? values.map((val, index) => valueRenderer(val, index))
-            : []),
-          addNewFilterPopoverTrigger(
-            <AddControlLabel role="button" data-test="add-filter-button">
-              <Icons.PlusOutlined iconSize="m" />
-              {t('Add filter')}
-            </AddControlLabel>,
-          ),
-        ]}
-      </LabelsContainer>
-    </div>
-  );
+  render() {
+    return (
+      <div className="metrics-select" data-test="adhoc-filter-control">
+        <HeaderContainer>
+          <ControlHeader {...this.props} name={this.props.name ?? ''} />
+        </HeaderContainer>
+        <LabelsContainer>
+          {[
+            ...(this.state.values.length > 0
+              ? this.state.values.map((value, index) =>
+                  this.valueRenderer(value, index),
+                )
+              : []),
+            this.addNewFilterPopoverTrigger(
+              <AddControlLabel role="button" data-test="add-filter-button">
+                <Icons.PlusOutlined iconSize="m" />
+                {t('Add filter')}
+              </AddControlLabel>,
+            ),
+          ]}
+        </LabelsContainer>
+      </div>
+    );
+  }
 }
 
-export default AdhocFilterControl;
+export default withTheme(AdhocFilterControl);

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.tsx

@@ -17,13 +17,14 @@
  * under the License.
  */
 import type React from 'react';
-import { useRef, useState, useCallback, useEffect } from 'react';
-import type { SupersetTheme } from '@apache-superset/core/theme';
+import { createRef, Component, type RefObject } from 'react';
+import { type SupersetTheme } from '@apache-superset/core/theme';
 import { Button, Icons, Select } from '@superset-ui/core/components';
 import { ErrorBoundary } from 'src/components';
 import { SupersetClient } from '@superset-ui/core';
 import { t } from '@apache-superset/core/translation';
 import { styled } from '@apache-superset/core/theme';
+
 import Tabs from '@superset-ui/core/components/Tabs';
 import AdhocFilter from 'src/explore/components/controls/FilterControl/AdhocFilter';
 import AdhocFilterEditPopoverSimpleTabContent from 'src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent';
@@ -65,6 +66,17 @@ interface AdhocFilterEditPopoverProps {
   requireSave?: boolean;
 }
 
+interface AdhocFilterEditPopoverState {
+  adhocFilter: AdhocFilter;
+  width: number;
+  height: number;
+  activeKey: string;
+  isSimpleTabValid: boolean;
+  selectedLayers: LayerOption[];
+  layerOptions: LayerOption[];
+  hasLayerFilterScopeChanged: boolean;
+}
+
 const FilterPopoverContentContainer = styled.div`
   #filter-edit-popover {
     max-width: none;
@@ -90,344 +102,373 @@ const LayerSelectContainer = styled.div`
   margin-bottom: ${({ theme }) => theme.marginXXL}px;
 `;
 
-function AdhocFilterEditPopover({
-  adhocFilter: propsAdhocFilter,
-  onChange,
-  onClose,
-  onResize,
-  options,
-  datasource,
-  partitionColumn,
-  operators,
-  requireSave,
-  ...popoverProps
-}: AdhocFilterEditPopoverProps) {
-  const popoverContentRef = useRef<HTMLDivElement>(null);
+export default class AdhocFilterEditPopover extends Component<
+  AdhocFilterEditPopoverProps,
+  AdhocFilterEditPopoverState
+> {
+  popoverContentRef: RefObject<HTMLDivElement>;
 
-  const dragStartRef = useRef({
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0,
-  });
+  dragStartX = 0;
 
-  const [adhocFilter, setAdhocFilter] = useState<AdhocFilter>(propsAdhocFilter);
-  const [width, setWidth] = useState(POPOVER_INITIAL_WIDTH);
-  const [height, setHeight] = useState(POPOVER_INITIAL_HEIGHT);
-  const [isSimpleTabValid, setIsSimpleTabValid] = useState(true);
-  const [selectedLayers, setSelectedLayers] = useState<LayerOption[]>([
-    { id: null, value: -1, label: 'All' },
-  ]);
-  const [layerOptions, setLayerOptions] = useState<LayerOption[]>([]);
-  const [hasLayerFilterScopeChanged, setHasLayerFilterScopeChanged] =
-    useState(false);
+  dragStartY = 0;
 
-  const loadLayerOptions = useCallback(
-    (page: number, pageSize: number) => {
-      const query = rison.encode({
-        columns: ['id', 'slice_name', 'viz_type'],
-        filters: [{ col: 'viz_type', opr: 'sw', value: 'deck' }],
-        page,
-        page_size: pageSize,
-        order_column: 'slice_name',
-        order_direction: 'asc',
-      });
+  dragStartWidth = 0;
 
-      return SupersetClient.get({
-        endpoint: `/api/v1/chart/?q=${query}`,
-      }).then(response => {
-        if (!response?.json?.result) {
-          return {
-            data: [
-              {
-                id: null,
-                value: -1,
-                label: 'All',
-              },
-            ],
-            totalCount: 1,
-          };
-        }
+  dragStartHeight = 0;
 
-        const deckSlices = (propsAdhocFilter?.deck_slices || []) as number[];
+  constructor(props: AdhocFilterEditPopoverProps) {
+    super(props);
+    this.onSave = this.onSave.bind(this);
+    this.onDragDown = this.onDragDown.bind(this);
+    this.onMouseMove = this.onMouseMove.bind(this);
+    this.onMouseUp = this.onMouseUp.bind(this);
+    this.onAdhocFilterChange = this.onAdhocFilterChange.bind(this);
+    this.setSimpleTabIsValid = this.setSimpleTabIsValid.bind(this);
+    this.adjustHeight = this.adjustHeight.bind(this);
+    this.onTabChange = this.onTabChange.bind(this);
+    this.loadLayerOptions = this.loadLayerOptions.bind(this);
+    this.onLayerChange = this.onLayerChange.bind(this);
 
-        const list = [
-          {
-            id: null,
-            value: -1,
-            label: 'All',
-          },
-          ...response.json.result
-            .map((item: { id: number; slice_name: string }) => {
-              const sliceIndex = deckSlices.indexOf(item.id);
-              return {
-                id: item.id,
-                value: sliceIndex >= 0 ? sliceIndex : item.id,
-                label: item.slice_name,
-                sliceIndex,
-              };
-            })
-            .filter((item: { sliceIndex: number }) => item.sliceIndex !== -1)
-            .map(
-              ({
-                sliceIndex,
-                ...item
-              }: {
-                sliceIndex: number;
-                id: number;
-                value: number;
-                label: string;
-              }) => item,
-            ),
-        ];
-
-        return {
-          data: list,
-          totalCount: list.length,
-        };
-      });
-    },
-    [propsAdhocFilter?.deck_slices],
-  );
-
-  const onMouseMove = useCallback(
-    (e: MouseEvent) => {
-      onResize();
-      setWidth(
-        Math.max(
-          dragStartRef.current.width + (e.clientX - dragStartRef.current.x),
-          POPOVER_INITIAL_WIDTH,
-        ),
-      );
-      setHeight(
-        Math.max(
-          dragStartRef.current.height + (e.clientY - dragStartRef.current.y),
-          POPOVER_INITIAL_HEIGHT,
-        ),
-      );
-    },
-    [onResize],
-  );
-
-  const onMouseUp = useCallback(() => {
-    document.removeEventListener('mousemove', onMouseMove);
-  }, [onMouseMove]);
-
-  // Listener lifecycle: re-bind only when the handler identities change.
-  useEffect(() => {
-    document.addEventListener('mouseup', onMouseUp);
-    return () => {
-      document.removeEventListener('mouseup', onMouseUp);
-      document.removeEventListener('mousemove', onMouseMove);
+    this.state = {
+      adhocFilter: this.props.adhocFilter,
+      width: POPOVER_INITIAL_WIDTH,
+      height: POPOVER_INITIAL_HEIGHT,
+      activeKey: this.props?.adhocFilter?.expressionType || 'SIMPLE',
+      isSimpleTabValid: true,
+      selectedLayers: [{ id: null, value: -1, label: 'All' }],
+      layerOptions: [],
+      hasLayerFilterScopeChanged: false,
     };
-  }, [onMouseMove, onMouseUp]);
 
-  // One-time layer-options load, mirroring the class componentDidMount.
-  useEffect(() => {
-    const deckSlices = propsAdhocFilter?.deck_slices as number[] | undefined;
+    this.popoverContentRef = createRef();
+  }
+
+  componentDidMount() {
+    document.addEventListener('mouseup', this.onMouseUp);
+
+    // Load layer options if deck_slices exist
+    const deckSlices = this.props.adhocFilter?.deck_slices as
+      | number[]
+      | undefined;
     if (deckSlices && deckSlices.length > 0) {
-      loadLayerOptions(0, 100).then(result => {
-        setLayerOptions(result.data);
-        const layerFilterScope = propsAdhocFilter?.layerFilterScope as
+      this.loadLayerOptions(0, 100).then(result => {
+        this.setState({ layerOptions: result.data });
+        const layerFilterScope = this.props.adhocFilter?.layerFilterScope as
           | number[]
           | undefined;
         if (layerFilterScope) {
-          const layers = layerFilterScope
-            .map(item => result.data.find(option => option.value === item))
-            .filter(Boolean) as LayerOption[];
-          setSelectedLayers(layers);
+          const selectedLayers = layerFilterScope.map(item => {
+            const layerOption = result.data.find(
+              option => option.value === item,
+            );
+            return layerOption;
+          });
+          this.setState({
+            selectedLayers: selectedLayers.filter(Boolean) as LayerOption[],
+          });
         }
       });
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- one-shot: mirrors componentDidMount, initial load only
-  }, []);
+  }
 
-  const onAdhocFilterChange = useCallback((filter: AdhocFilter) => {
-    setAdhocFilter(filter);
-  }, []);
+  componentWillUnmount() {
+    document.removeEventListener('mouseup', this.onMouseUp);
+    document.removeEventListener('mousemove', this.onMouseMove);
+  }
 
-  const setSimpleTabIsValid = useCallback((isValid: boolean) => {
-    setIsSimpleTabValid(isValid);
-  }, []);
+  onAdhocFilterChange(adhocFilter: AdhocFilter): void {
+    this.setState({ adhocFilter });
+  }
 
-  const onSave = useCallback(() => {
-    const deckSlices = adhocFilter.deck_slices as number[] | undefined;
+  setSimpleTabIsValid(isValid: boolean): void {
+    this.setState({ isSimpleTabValid: isValid });
+  }
+
+  onSave() {
+    const deckSlices = this.state.adhocFilter.deck_slices as
+      | number[]
+      | undefined;
     const hasDeckSlices = deckSlices && deckSlices.length > 0;
 
     if (!hasDeckSlices) {
-      onChange(adhocFilter);
-      onClose();
+      this.props.onChange(this.state.adhocFilter);
+      this.props.onClose();
       return;
     }
     // Update layer filter scope for deck multi
-    const layers = selectedLayers.map(item => {
+    const selectedLayers = this.state.selectedLayers.map(item => {
       if (isObject(item)) {
         return item.value;
       }
       return item;
     });
-    const correctedAdhocFilter = adhocFilter.duplicateWith({
-      layerFilterScope: layers,
+    const correctedAdhocFilter = this.state.adhocFilter.duplicateWith({
+      layerFilterScope: selectedLayers,
     });
-    setHasLayerFilterScopeChanged(false);
-    onChange(correctedAdhocFilter);
-    onClose();
-  }, [adhocFilter, onChange, onClose, selectedLayers]);
+    this.setState({ hasLayerFilterScopeChanged: false });
+    this.props.onChange(correctedAdhocFilter);
+    this.props.onClose();
+  }
 
-  const onDragDown = useCallback(
-    (e: React.MouseEvent) => {
-      dragStartRef.current = {
-        x: e.clientX,
-        y: e.clientY,
-        width,
-        height,
-      };
-      document.addEventListener('mousemove', onMouseMove);
-    },
-    [width, height, onMouseMove],
-  );
+  onDragDown(e: React.MouseEvent): void {
+    this.dragStartX = e.clientX;
+    this.dragStartY = e.clientY;
+    this.dragStartWidth = this.state.width;
+    this.dragStartHeight = this.state.height;
+    document.addEventListener('mousemove', this.onMouseMove);
+  }
 
-  const adjustHeight = useCallback((heightDifference: number) => {
-    setHeight(prevHeight => prevHeight + heightDifference);
-  }, []);
+  onMouseMove(e: MouseEvent): void {
+    this.props.onResize();
+    this.setState({
+      width: Math.max(
+        this.dragStartWidth + (e.clientX - this.dragStartX),
+        POPOVER_INITIAL_WIDTH,
+      ),
+      height: Math.max(
+        this.dragStartHeight + (e.clientY - this.dragStartY),
+        POPOVER_INITIAL_HEIGHT,
+      ),
+    });
+  }
 
-  const onLayerChange = useCallback(
-    (selectedValue: LayerOption[] | number[] | null) => {
-      let updatedSelectedLayers: LayerOption[] =
-        (selectedValue as LayerOption[]) || [];
+  onMouseUp() {
+    document.removeEventListener('mousemove', this.onMouseMove);
+  }
 
-      if (!selectedValue || selectedValue.length === 0) {
-        updatedSelectedLayers = [{ id: null, value: -1, label: 'All' }];
-      } else if (
-        selectedValue.length > 1 &&
-        selectedValue.some(
-          (item: LayerOption | number) =>
-            (typeof item === 'object' && item.value === -1) || item === -1,
-        )
-      ) {
-        const lastItem = selectedValue[selectedValue.length - 1];
-        if (
-          (typeof lastItem === 'object' && lastItem.value === -1) ||
-          lastItem === -1
-        ) {
-          updatedSelectedLayers = [{ id: null, value: -1, label: 'All' }];
-        } else {
-          updatedSelectedLayers = (selectedValue as LayerOption[]).filter(
-            (item: LayerOption) => item.value !== -1,
-          );
-        }
+  onTabChange(activeKey: string) {
+    this.setState({
+      activeKey,
+    });
+  }
+
+  adjustHeight(heightDifference: number) {
+    this.setState(state => ({ height: state.height + heightDifference }));
+  }
+
+  loadLayerOptions(page: number, pageSize: number) {
+    const query = rison.encode({
+      columns: ['id', 'slice_name', 'viz_type'],
+      filters: [{ col: 'viz_type', opr: 'sw', value: 'deck' }],
+      page,
+      page_size: pageSize,
+      order_column: 'slice_name',
+      order_direction: 'asc',
+    });
+
+    return SupersetClient.get({
+      endpoint: `/api/v1/chart/?q=${query}`,
+    }).then(response => {
+      if (!response?.json?.result) {
+        return {
+          data: [
+            {
+              id: null,
+              value: -1,
+              label: 'All',
+            },
+          ],
+          totalCount: 1,
+        };
       }
 
-      setSelectedLayers(updatedSelectedLayers);
-      setHasLayerFilterScopeChanged(true);
-    },
-    [],
-  );
+      const deckSlices = (this.props.adhocFilter?.deck_slices ||
+        []) as number[];
 
-  const stateIsValid = adhocFilter.isValid();
-  const hasUnsavedChanges =
-    requireSave ||
-    !adhocFilter.equals(propsAdhocFilter) ||
-    hasLayerFilterScopeChanged;
+      const list = [
+        {
+          id: null,
+          value: -1,
+          label: 'All',
+        },
+        ...response.json.result
+          .map((item: { id: number; slice_name: string }) => {
+            const sliceIndex = deckSlices.indexOf(item.id);
+            return {
+              id: item.id,
+              value: sliceIndex >= 0 ? sliceIndex : item.id,
+              label: item.slice_name,
+              sliceIndex,
+            };
+          })
+          .filter((item: { sliceIndex: number }) => item.sliceIndex !== -1)
+          .map(
+            ({
+              sliceIndex,
+              ...item
+            }: {
+              sliceIndex: number;
+              id: number;
+              value: number;
+              label: string;
+            }) => item,
+          ),
+      ];
 
-  const renderDeckSlices = adhocFilter.deck_slices as number[] | undefined;
-  const hasDeckSlices = renderDeckSlices && renderDeckSlices.length > 0;
+      return {
+        data: list,
+        totalCount: list.length,
+      };
+    });
+  }
 
-  return (
-    <FilterPopoverContentContainer
-      id="filter-edit-popover"
-      {...popoverProps}
-      data-test="filter-edit-popover"
-      ref={popoverContentRef}
-    >
-      <Tabs
-        id="adhoc-filter-edit-tabs"
-        defaultActiveKey={adhocFilter.expressionType}
-        className="adhoc-filter-edit-tabs"
-        data-test="adhoc-filter-edit-tabs"
-        style={{ minHeight: height, width }}
-        allowOverflow
-        items={[
-          {
-            key: ExpressionTypes.Simple,
-            label: t('Simple'),
-            children: (
-              <ErrorBoundary>
-                <AdhocFilterEditPopoverSimpleTabContent
-                  operators={operators as Operators[] | undefined}
-                  adhocFilter={adhocFilter}
-                  onChange={onAdhocFilterChange}
-                  options={options as ColumnType[]}
-                  datasource={datasource as unknown as Dataset}
-                  onHeightChange={adjustHeight}
-                  partitionColumn={partitionColumn}
-                  popoverRef={popoverContentRef.current}
-                  validHandler={setSimpleTabIsValid}
-                />
-              </ErrorBoundary>
-            ),
-          },
-          ...(datasource?.type === 'semantic_view'
-            ? []
-            : [
-                {
-                  key: ExpressionTypes.Sql,
-                  label: t('Custom SQL'),
-                  children: (
-                    <ErrorBoundary>
-                      <AdhocFilterEditPopoverSqlTabContent
-                        adhocFilter={adhocFilter}
-                        onChange={onAdhocFilterChange}
-                        options={options}
-                        height={height}
-                        datasource={datasource}
-                      />
-                    </ErrorBoundary>
-                  ),
-                },
-              ]),
-        ]}
-      />
-      {hasDeckSlices && (
-        <LayerSelectContainer>
-          <Select
-            options={layerOptions}
-            onChange={onLayerChange as unknown as (value: unknown) => void}
-            value={selectedLayers}
-            mode="multiple"
-          />
-        </LayerSelectContainer>
-      )}
+  onLayerChange(selectedValue: LayerOption[] | number[] | null) {
+    let updatedSelectedLayers: LayerOption[] =
+      (selectedValue as LayerOption[]) || [];
 
-      <FilterActionsContainer>
-        <Button
-          buttonStyle="secondary"
-          buttonSize="small"
-          onClick={onClose}
-          cta
-        >
-          {t('Close')}
-        </Button>
-        <Button
-          data-test="adhoc-filter-edit-popover-save-button"
-          disabled={!stateIsValid || !isSimpleTabValid || !hasUnsavedChanges}
-          buttonStyle="primary"
-          buttonSize="small"
-          onClick={onSave}
-          cta
-        >
-          {t('Save')}
-        </Button>
-        <Icons.ArrowsAltOutlined
-          role="button"
-          aria-label={t('Resize')}
-          tabIndex={0}
-          onMouseDown={onDragDown}
-          className="edit-popover-resize"
+    if (!selectedValue || selectedValue.length === 0) {
+      updatedSelectedLayers = [{ id: null, value: -1, label: 'All' }];
+    } else if (
+      selectedValue.length > 1 &&
+      selectedValue.some(
+        (item: LayerOption | number) =>
+          (typeof item === 'object' && item.value === -1) || item === -1,
+      )
+    ) {
+      const lastItem = selectedValue[selectedValue.length - 1];
+      if (
+        (typeof lastItem === 'object' && lastItem.value === -1) ||
+        lastItem === -1
+      ) {
+        updatedSelectedLayers = [{ id: null, value: -1, label: 'All' }];
+      } else {
+        updatedSelectedLayers = (selectedValue as LayerOption[]).filter(
+          (item: LayerOption) => item.value !== -1,
+        );
+      }
+    }
+
+    this.setState({ selectedLayers: updatedSelectedLayers });
+    this.setState({ hasLayerFilterScopeChanged: true });
+  }
+
+  render() {
+    const {
+      adhocFilter: propsAdhocFilter,
+      options,
+      onChange,
+      onClose,
+      onResize,
+      datasource,
+      partitionColumn,
+      theme,
+      operators,
+      requireSave,
+      ...popoverProps
+    } = this.props;
+
+    const { adhocFilter, selectedLayers, hasLayerFilterScopeChanged } =
+      this.state;
+    const stateIsValid = adhocFilter.isValid();
+    const hasUnsavedChanges =
+      requireSave ||
+      !adhocFilter.equals(propsAdhocFilter) ||
+      hasLayerFilterScopeChanged;
+
+    const renderDeckSlices = adhocFilter.deck_slices as number[] | undefined;
+    const hasDeckSlices = renderDeckSlices && renderDeckSlices.length > 0;
+
+    return (
+      <FilterPopoverContentContainer
+        id="filter-edit-popover"
+        {...popoverProps}
+        data-test="filter-edit-popover"
+        ref={this.popoverContentRef}
+      >
+        <Tabs
+          id="adhoc-filter-edit-tabs"
+          defaultActiveKey={adhocFilter.expressionType}
+          className="adhoc-filter-edit-tabs"
+          data-test="adhoc-filter-edit-tabs"
+          style={{ minHeight: this.state.height, width: this.state.width }}
+          allowOverflow
+          onChange={this.onTabChange}
+          items={[
+            {
+              key: ExpressionTypes.Simple,
+              label: t('Simple'),
+              children: (
+                <ErrorBoundary>
+                  <AdhocFilterEditPopoverSimpleTabContent
+                    operators={operators as Operators[] | undefined}
+                    adhocFilter={this.state.adhocFilter}
+                    onChange={this.onAdhocFilterChange}
+                    options={options as ColumnType[]}
+                    datasource={datasource as unknown as Dataset}
+                    onHeightChange={this.adjustHeight}
+                    partitionColumn={partitionColumn}
+                    popoverRef={this.popoverContentRef.current}
+                    validHandler={this.setSimpleTabIsValid}
+                  />
+                </ErrorBoundary>
+              ),
+            },
+            ...(datasource?.type === 'semantic_view'
+              ? []
+              : [
+                  {
+                    key: ExpressionTypes.Sql,
+                    label: t('Custom SQL'),
+                    children: (
+                      <ErrorBoundary>
+                        <AdhocFilterEditPopoverSqlTabContent
+                          adhocFilter={this.state.adhocFilter}
+                          onChange={this.onAdhocFilterChange}
+                          options={this.props.options}
+                          height={this.state.height}
+                          datasource={datasource}
+                        />
+                      </ErrorBoundary>
+                    ),
+                  },
+                ]),
+          ]}
         />
-      </FilterActionsContainer>
-    </FilterPopoverContentContainer>
-  );
-}
+        {hasDeckSlices && (
+          <LayerSelectContainer>
+            <Select
+              options={this.state.layerOptions}
+              onChange={
+                this.onLayerChange as unknown as (value: unknown) => void
+              }
+              value={selectedLayers}
+              mode="multiple"
+            />
+          </LayerSelectContainer>
+        )}
 
-export default AdhocFilterEditPopover;
+        <FilterActionsContainer>
+          <Button
+            buttonStyle="secondary"
+            buttonSize="small"
+            onClick={this.props.onClose}
+            cta
+          >
+            {t('Close')}
+          </Button>
+          <Button
+            data-test="adhoc-filter-edit-popover-save-button"
+            disabled={
+              !stateIsValid ||
+              !this.state.isSimpleTabValid ||
+              !hasUnsavedChanges
+            }
+            buttonStyle="primary"
+            buttonSize="small"
+            onClick={this.onSave}
+            cta
+          >
+            {t('Save')}
+          </Button>
+          <Icons.ArrowsAltOutlined
+            role="button"
+            aria-label={t('Resize')}
+            tabIndex={0}
+            onMouseDown={this.onDragDown}
+            className="edit-popover-resize"
+          />
+        </FilterActionsContainer>
+      </FilterPopoverContentContainer>
+    );
+  }
+}

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger/index.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { memo, useState, useCallback, type ReactNode } from 'react';
+import { PureComponent, ReactNode } from 'react';
 import { OptionSortType } from 'src/explore/types';
 import AdhocFilterEditPopover from 'src/explore/components/controls/FilterControl/AdhocFilterEditPopover';
 import AdhocFilter from 'src/explore/components/controls/FilterControl/AdhocFilter';
@@ -40,81 +40,84 @@ interface AdhocFilterPopoverTriggerProps {
   children?: ReactNode;
 }
 
-function AdhocFilterPopoverTrigger({
-  sections,
-  operators,
-  adhocFilter,
-  options,
-  datasource,
-  onFilterEdit,
-  partitionColumn,
-  isControlledComponent,
-  visible: propsVisible,
-  togglePopover: propsTogglePopover,
-  closePopover: propsClosePopover,
-  requireSave,
-  children,
-}: AdhocFilterPopoverTriggerProps) {
-  const [popoverVisible, setPopoverVisible] = useState(false);
-  const [, forceUpdate] = useState({});
-
-  const onPopoverResize = useCallback(() => {
-    forceUpdate({});
-  }, []);
-
-  const internalClosePopover = useCallback(() => {
-    setPopoverVisible(false);
-  }, []);
-
-  const internalTogglePopover = useCallback((visible: boolean) => {
-    setPopoverVisible(visible);
-  }, []);
-
-  const { visible, togglePopover, closePopover } = isControlledComponent
-    ? {
-        visible: propsVisible,
-        togglePopover: propsTogglePopover,
-        closePopover: propsClosePopover,
-      }
-    : {
-        visible: popoverVisible,
-        togglePopover: internalTogglePopover,
-        closePopover: internalClosePopover,
-      };
-
-  const overlayContent = (
-    <ExplorePopoverContent>
-      <AdhocFilterEditPopover
-        adhocFilter={adhocFilter}
-        options={options}
-        datasource={datasource}
-        partitionColumn={partitionColumn}
-        onResize={onPopoverResize}
-        onClose={closePopover ?? (() => {})}
-        sections={sections}
-        operators={operators}
-        onChange={onFilterEdit}
-        requireSave={requireSave}
-      />
-    </ExplorePopoverContent>
-  );
-
-  return (
-    <ControlPopover
-      trigger="click"
-      content={overlayContent}
-      defaultOpen={visible}
-      open={visible}
-      onOpenChange={togglePopover}
-      destroyOnHidden
-    >
-      {/* Wrap in span so the Popover can attach a ref without relying
-          on findDOMNode (deprecated in React 18+). */}
-      <span>{children}</span>
-    </ControlPopover>
-  );
+interface AdhocFilterPopoverTriggerState {
+  popoverVisible: boolean;
 }
 
-// Was a PureComponent before the FC conversion; preserve shallow-equal skip
-// (rendered once per chart filter row in the control panel).
-export default memo(AdhocFilterPopoverTrigger);
+class AdhocFilterPopoverTrigger extends PureComponent<
+  AdhocFilterPopoverTriggerProps,
+  AdhocFilterPopoverTriggerState
+> {
+  constructor(props: AdhocFilterPopoverTriggerProps) {
+    super(props);
+    this.onPopoverResize = this.onPopoverResize.bind(this);
+    this.closePopover = this.closePopover.bind(this);
+    this.togglePopover = this.togglePopover.bind(this);
+    this.state = {
+      popoverVisible: false,
+    };
+  }
+
+  onPopoverResize() {
+    this.forceUpdate();
+  }
+
+  closePopover() {
+    this.togglePopover(false);
+  }
+
+  togglePopover(visible: boolean) {
+    this.setState({
+      popoverVisible: visible,
+    });
+  }
+
+  render() {
+    const { adhocFilter, isControlledComponent } = this.props;
+
+    const { visible, togglePopover, closePopover } = isControlledComponent
+      ? {
+          visible: this.props.visible,
+          togglePopover: this.props.togglePopover,
+          closePopover: this.props.closePopover,
+        }
+      : {
+          visible: this.state.popoverVisible,
+          togglePopover: this.togglePopover,
+          closePopover: this.closePopover,
+        };
+    const overlayContent = (
+      <ExplorePopoverContent>
+        <AdhocFilterEditPopover
+          adhocFilter={adhocFilter}
+          options={this.props.options}
+          datasource={this.props.datasource}
+          partitionColumn={this.props.partitionColumn}
+          onResize={this.onPopoverResize}
+          onClose={closePopover ?? (() => {})}
+          sections={this.props.sections}
+          operators={this.props.operators}
+          onChange={this.props.onFilterEdit}
+          requireSave={this.props.requireSave}
+        />
+      </ExplorePopoverContent>
+    );
+
+    return (
+      <ControlPopover
+        trigger="click"
+        content={overlayContent}
+        defaultOpen={visible}
+        open={visible}
+        onOpenChange={togglePopover}
+        destroyOnHidden
+      >
+        {/* Wrap in span so the Popover can attach a ref without relying
+            on findDOMNode (deprecated in React 18+). */}
+        <span>{this.props.children}</span>
+      </ControlPopover>
+    );
+  }
+}
+
+export default AdhocFilterPopoverTrigger;

superset-frontend/src/explore/components/controls/FixedOrMetricControl/index.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { memo, useState, useCallback } from 'react';
+import { Component } from 'react';
 import { t } from '@apache-superset/core/translation';
 import { Collapse, Label } from '@superset-ui/core/components';
 import TextControl from 'src/explore/components/controls/TextControl';
@@ -56,162 +56,148 @@ interface FixedOrMetricControlProps {
   isFloat?: boolean;
   datasource: DatasourceType;
   default?: ControlValue;
-  // ControlHeader props that may be passed through
-  name?: string;
-  label?: React.ReactNode;
-  description?: React.ReactNode;
-  // Remaining control-header props (validationErrors, hovered, warning,
-  // renderTrigger, ...) are forwarded to <ControlHeader />, mirroring the
-  // legacy class component's {...this.props} spread.
-  [key: string]: unknown;
+}
+
+interface FixedOrMetricControlState {
+  type: 'fix' | 'metric';
+  fixedValue: string | number;
+  metricValue: MetricValue | null;
 }
 
 const DEFAULT_VALUE: ControlValue = { type: controlTypes.fixed, value: 5 };
 
-// Was a PureComponent before the FC conversion; preserve shallow-equal skip.
-function FixedOrMetricControl({
-  onChange = () => {},
-  value,
-  datasource,
-  default: defaultValue = DEFAULT_VALUE,
-  name,
-  label,
-  description,
-  ...restProps
-}: FixedOrMetricControlProps) {
-  const initialType = (value?.type ??
-    defaultValue?.type ??
-    controlTypes.fixed) as 'fix' | 'metric';
-  const initialRawValue = value?.value ?? defaultValue?.value ?? '100';
-  const initialFixedValue =
-    initialType === controlTypes.fixed && typeof initialRawValue !== 'object'
-      ? initialRawValue
-      : '';
-  const initialMetricValue =
-    initialType === controlTypes.metric && typeof initialRawValue === 'object'
-      ? (initialRawValue as MetricValue)
+export default class FixedOrMetricControl extends Component<
+  FixedOrMetricControlProps,
+  FixedOrMetricControlState
+> {
+  constructor(props: FixedOrMetricControlProps) {
+    super(props);
+    this.onChange = this.onChange.bind(this);
+    this.setType = this.setType.bind(this);
+    this.setFixedValue = this.setFixedValue.bind(this);
+    this.setMetric = this.setMetric.bind(this);
+    const defaultValue = props.default ?? DEFAULT_VALUE;
+    const type = (props.value?.type ??
+      defaultValue.type ??
+      controlTypes.fixed) as 'fix' | 'metric';
+    const rawValue = props.value?.value ?? defaultValue.value ?? '100';
+    const fixedValue =
+      type === controlTypes.fixed && typeof rawValue !== 'object'
+        ? rawValue
+        : '';
+    const metricValue =
+      type === controlTypes.metric && typeof rawValue === 'object'
+        ? (rawValue as MetricValue)
+        : null;
+    this.state = {
+      type,
+      fixedValue,
+      metricValue,
+    };
+  }
+
+  onChange(): void {
+    this.props.onChange?.({
+      type: this.state.type,
+      value:
+        this.state.type === controlTypes.fixed
+          ? this.state.fixedValue
+          : (this.state.metricValue ?? undefined),
+    });
+  }
+
+  setType(type: 'fix' | 'metric'): void {
+    this.setState({ type }, this.onChange);
+  }
+
+  setFixedValue(fixedValue: string | number): void {
+    this.setState({ fixedValue }, this.onChange);
+  }
+
+  setMetric(metricValue: MetricValue | null): void {
+    this.setState({ metricValue }, this.onChange);
+  }
+
+  render() {
+    const value = this.props.value ?? this.props.default ?? DEFAULT_VALUE;
+    const type = value?.type ?? controlTypes.fixed;
+    const columns = this.props.datasource
+      ? this.props.datasource.columns
       : null;
-
-  const [type, setTypeState] = useState<'fix' | 'metric'>(initialType);
-  const [fixedValue, setFixedValueState] = useState<string | number>(
-    initialFixedValue,
-  );
-  const [metricValue, setMetricValueState] = useState<MetricValue | null>(
-    initialMetricValue,
-  );
-
-  const setType = useCallback(
-    (newType: 'fix' | 'metric') => {
-      setTypeState(newType);
-      onChange({
-        type: newType,
-        value:
-          newType === controlTypes.fixed
-            ? fixedValue
-            : (metricValue ?? undefined),
-      });
-    },
-    [fixedValue, metricValue, onChange],
-  );
-
-  const setFixedValue = useCallback(
-    (newFixedValue: string | number) => {
-      setFixedValueState(newFixedValue);
-      onChange({
-        type,
-        value: newFixedValue,
-      });
-    },
-    [type, onChange],
-  );
-
-  const setMetric = useCallback(
-    (newMetricValue: MetricValue | null) => {
-      setMetricValueState(newMetricValue);
-      onChange({
-        type,
-        value: newMetricValue ?? undefined,
-      });
-    },
-    [type, onChange],
-  );
-
-  const displayValue = value ?? defaultValue;
-  const displayType = displayValue?.type ?? controlTypes.fixed;
-  const columns = datasource ? datasource.columns : null;
-  const metrics = datasource ? datasource.metrics : null;
-
-  return (
-    <div>
-      <ControlHeader
-        {...restProps}
-        name={name}
-        label={label}
-        description={description}
-      />
-      <Collapse
-        ghost
-        items={[
-          {
-            key: 'fixed-or-metric',
-            showArrow: false,
-            label: (
-              <Label>
-                {type === controlTypes.fixed && <span>{fixedValue}</span>}
-                {type === controlTypes.metric && (
-                  <span>
-                    <span>{t('metric')}: </span>
-                    <strong>{metricValue ? metricValue.label : null}</strong>
-                  </span>
-                )}
-              </Label>
-            ),
-            children: (
-              <div className="well">
-                <PopoverSection
-                  title={t('Fixed')}
-                  isSelected={displayType === controlTypes.fixed}
-                  onSelect={() => {
-                    setType(controlTypes.fixed);
-                  }}
-                >
-                  <TextControl
-                    isFloat
-                    onChange={setFixedValue}
-                    onFocus={() => {
-                      setType(controlTypes.fixed);
-                      return {};
+    const metrics = this.props.datasource
+      ? this.props.datasource.metrics
+      : null;
+    return (
+      <div>
+        <ControlHeader {...this.props} />
+        <Collapse
+          ghost
+          items={[
+            {
+              key: 'fixed-or-metric',
+              showArrow: false,
+              label: (
+                <Label>
+                  {this.state.type === controlTypes.fixed && (
+                    <span>{this.state.fixedValue}</span>
+                  )}
+                  {this.state.type === controlTypes.metric && (
+                    <span>
+                      <span>{t('metric')}: </span>
+                      <strong>
+                        {this.state.metricValue
+                          ? this.state.metricValue.label
+                          : null}
+                      </strong>
+                    </span>
+                  )}
+                </Label>
+              ),
+              children: (
+                <div className="well">
+                  <PopoverSection
+                    title={t('Fixed')}
+                    isSelected={type === controlTypes.fixed}
+                    onSelect={() => {
+                      this.setType(controlTypes.fixed);
                     }}
-                    value={fixedValue}
-                  />
-                </PopoverSection>
-                <PopoverSection
-                  title={t('Based on a metric')}
-                  isSelected={displayType === controlTypes.metric}
-                  onSelect={() => {
-                    setType(controlTypes.metric);
-                  }}
-                >
-                  <MetricsControl
-                    name="metric"
-                    columns={columns ?? undefined}
-                    savedMetrics={metrics ?? undefined}
-                    multi={false}
-                    onFocus={() => {
-                      setType(controlTypes.metric);
+                  >
+                    <TextControl
+                      isFloat
+                      onChange={this.setFixedValue}
+                      onFocus={() => {
+                        this.setType(controlTypes.fixed);
+                        return {};
+                      }}
+                      value={this.state.fixedValue}
+                    />
+                  </PopoverSection>
+                  <PopoverSection
+                    title={t('Based on a metric')}
+                    isSelected={type === controlTypes.metric}
+                    onSelect={() => {
+                      this.setType(controlTypes.metric);
                     }}
-                    onChange={setMetric}
-                    value={metricValue}
-                    datasource={datasource}
-                  />
-                </PopoverSection>
-              </div>
-            ),
-          },
-        ]}
-      />
-    </div>
-  );
+                  >
+                    <MetricsControl
+                      name="metric"
+                      columns={columns ?? undefined}
+                      savedMetrics={metrics ?? undefined}
+                      multi={false}
+                      onFocus={() => {
+                        this.setType(controlTypes.metric);
+                      }}
+                      onChange={this.setMetric}
+                      value={this.state.metricValue}
+                      datasource={this.props.datasource}
+                    />
+                  </PopoverSection>
+                </div>
+              ),
+            },
+          ]}
+        />
+      </div>
+    );
+  }
 }
-
-export default memo(FixedOrMetricControl);

superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 /* eslint-disable camelcase */
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { PureComponent, createRef } from 'react';
 import { useSelector } from 'react-redux';
 import { isDefined, ensureIsArray, DatasourceType } from '@superset-ui/core';
 import { t } from '@apache-superset/core/translation';
@@ -34,7 +34,6 @@ import {
   Tooltip,
 } from '@superset-ui/core/components';
 import sqlKeywords from 'src/SqlLab/utils/sqlKeywords';
-import { noOp } from 'src/utils/common';
 import {
   AGGREGATES_OPTIONS,
   POPOVER_INITIAL_HEIGHT,
@@ -49,7 +48,6 @@ import {
 } from 'src/explore/components/optionRenderers';
 import { getColumnKeywords } from 'src/explore/controlUtils/getColumnKeywords';
 import SQLEditorWithValidation from 'src/components/SQLEditorWithValidation';
-import type { ExplorePageState } from 'src/explore/types';
 import type { RefObject } from 'react';
 
 interface ColumnType {
@@ -96,6 +94,15 @@ interface AdhocMetricEditPopoverProps {
   datasource?: DatasourceInfo;
   isNewMetric?: boolean;
   isLabelModified?: boolean;
+  /** Names of metrics the user may select; null means no filtering. */
+  compatibleMetrics?: string[] | null;
+}
+
+interface AdhocMetricEditPopoverState {
+  adhocMetric: AdhocMetric;
+  savedMetric?: SavedMetricType;
+  width: number;
+  height: number;
 }
 
 const StyledSelect = styled(Select)`
@@ -112,510 +119,504 @@ const StyledSelect = styled(Select)`
 
 export const SAVED_TAB_KEY = 'SAVED';
 
-function AdhocMetricEditPopover({
-  onChange,
-  onClose,
-  onResize,
-  getCurrentTab = noOp,
-  getCurrentLabel,
-  handleDatasetModal,
-  adhocMetric: propsAdhocMetric,
-  columns = [],
-  savedMetricsOptions,
-  savedMetric: propsSavedMetric,
-  datasource,
-  isNewMetric = false,
-  isLabelModified,
-  ...popoverProps
-}: AdhocMetricEditPopoverProps) {
-  const [adhocMetric, setAdhocMetric] = useState<AdhocMetric>(propsAdhocMetric);
-  const [savedMetric, setSavedMetric] = useState<SavedMetricType | undefined>(
-    propsSavedMetric,
-  );
-  const [width, setWidth] = useState(POPOVER_INITIAL_WIDTH);
-  const [height, setHeight] = useState(POPOVER_INITIAL_HEIGHT);
+class AdhocMetricEditPopover extends PureComponent<
+  AdhocMetricEditPopoverProps,
+  AdhocMetricEditPopoverState
+> {
+  // "Saved" is a default tab unless there are no saved metrics for dataset
+  defaultActiveTabKey = this.getDefaultTab();
 
-  const compatibleMetrics = useSelector<
-    ExplorePageState,
-    string[] | null | undefined
-  >(state => state.explore?.compatibleMetrics);
+  editorRef: RefObject<editors.EditorHandle>;
 
-  const aceEditorRef = useRef<editors.EditorHandle>(null);
+  dragStartX = 0;
 
-  const dragStartRef = useRef({
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0,
-  });
+  dragStartY = 0;
 
-  const getDefaultTab = useCallback(() => {
+  dragStartWidth = 0;
+
+  dragStartHeight = 0;
+
+  constructor(props: AdhocMetricEditPopoverProps) {
+    super(props);
+    this.onSave = this.onSave.bind(this);
+    this.onResetStateAndClose = this.onResetStateAndClose.bind(this);
+    this.onColumnChange = this.onColumnChange.bind(this);
+    this.onAggregateChange = this.onAggregateChange.bind(this);
+    this.onSavedMetricChange = this.onSavedMetricChange.bind(this);
+    this.onSqlExpressionChange = this.onSqlExpressionChange.bind(this);
+    this.onDragDown = this.onDragDown.bind(this);
+    this.onMouseMove = this.onMouseMove.bind(this);
+    this.onMouseUp = this.onMouseUp.bind(this);
+    this.onTabChange = this.onTabChange.bind(this);
+    this.editorRef = createRef();
+    this.refreshEditor = this.refreshEditor.bind(this);
+    this.getDefaultTab = this.getDefaultTab.bind(this);
+
+    this.state = {
+      adhocMetric: this.props.adhocMetric,
+      savedMetric: this.props.savedMetric,
+      width: POPOVER_INITIAL_WIDTH,
+      height: POPOVER_INITIAL_HEIGHT,
+    };
+    document.addEventListener('mouseup', this.onMouseUp);
+  }
+
+  componentDidMount() {
+    this.props.getCurrentTab?.(this.defaultActiveTabKey);
+  }
+
+  componentDidUpdate(
+    _prevProps: AdhocMetricEditPopoverProps,
+    prevState: AdhocMetricEditPopoverState,
+  ) {
     if (
-      isDefined(propsAdhocMetric.column) ||
-      isDefined(propsAdhocMetric.sqlExpression)
+      prevState.adhocMetric?.sqlExpression !==
+        this.state.adhocMetric?.sqlExpression ||
+      prevState.adhocMetric?.aggregate !== this.state.adhocMetric?.aggregate ||
+      prevState.adhocMetric?.column?.column_name !==
+        this.state.adhocMetric?.column?.column_name ||
+      prevState.savedMetric?.metric_name !== this.state.savedMetric?.metric_name
     ) {
-      return propsAdhocMetric.expressionType;
+      this.props.getCurrentLabel?.({
+        savedMetricLabel:
+          this.state.savedMetric?.verbose_name ||
+          this.state.savedMetric?.metric_name,
+        adhocMetricLabel: this.state.adhocMetric?.getDefaultLabel(),
+      });
+    }
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('mouseup', this.onMouseUp);
+    document.removeEventListener('mousemove', this.onMouseMove);
+  }
+
+  getDefaultTab() {
+    const {
+      adhocMetric,
+      savedMetric,
+      savedMetricsOptions,
+      isNewMetric = false,
+    } = this.props;
+    if (isDefined(adhocMetric.column) || isDefined(adhocMetric.sqlExpression)) {
+      return adhocMetric.expressionType;
     }
     if (
-      (isNewMetric || propsSavedMetric?.metric_name) &&
+      (isNewMetric || savedMetric?.metric_name) &&
       Array.isArray(savedMetricsOptions) &&
       savedMetricsOptions.length > 0
     ) {
       return SAVED_TAB_KEY;
     }
-    return propsAdhocMetric.expressionType;
-  }, [propsAdhocMetric, propsSavedMetric, savedMetricsOptions, isNewMetric]);
+    return adhocMetric.expressionType;
+  }
 
-  const defaultActiveTabKey = useMemo(() => getDefaultTab(), [getDefaultTab]);
+  onSave() {
+    const { adhocMetric, savedMetric } = this.state;
 
-  const onMouseMove = useCallback(
-    (e: MouseEvent): void => {
-      onResize();
-      setWidth(
-        Math.max(
-          dragStartRef.current.width + (e.clientX - dragStartRef.current.x),
-          POPOVER_INITIAL_WIDTH,
-        ),
-      );
-      setHeight(
-        Math.max(
-          dragStartRef.current.height + (e.clientY - dragStartRef.current.y),
-          POPOVER_INITIAL_HEIGHT,
-        ),
-      );
-    },
-    [onResize],
-  );
-
-  const onMouseUp = useCallback((): void => {
-    document.removeEventListener('mousemove', onMouseMove);
-  }, [onMouseMove]);
-
-  useEffect(() => {
-    getCurrentTab(defaultActiveTabKey);
-  }, []);
-
-  useEffect(() => {
-    document.addEventListener('mouseup', onMouseUp);
-    return () => {
-      document.removeEventListener('mouseup', onMouseUp);
-      document.removeEventListener('mousemove', onMouseMove);
-    };
-  }, [onMouseUp, onMouseMove]);
-
-  const prevAdhocMetricRef = useRef(adhocMetric);
-  const prevSavedMetricRef = useRef(savedMetric);
-
-  useEffect(() => {
-    const prevAdhocMetric = prevAdhocMetricRef.current;
-    const prevSavedMetric = prevSavedMetricRef.current;
-
-    if (
-      prevAdhocMetric?.sqlExpression !== adhocMetric?.sqlExpression ||
-      prevAdhocMetric?.aggregate !== adhocMetric?.aggregate ||
-      prevAdhocMetric?.column?.column_name !==
-        adhocMetric?.column?.column_name ||
-      prevSavedMetric?.metric_name !== savedMetric?.metric_name
-    ) {
-      getCurrentLabel?.({
-        savedMetricLabel: savedMetric?.verbose_name || savedMetric?.metric_name,
-        adhocMetricLabel: adhocMetric?.getDefaultLabel(),
-      });
-    }
-
-    prevAdhocMetricRef.current = adhocMetric;
-    prevSavedMetricRef.current = savedMetric;
-  }, [adhocMetric, savedMetric, getCurrentLabel]);
-
-  const onSave = useCallback(() => {
     const metric = savedMetric?.metric_name ? savedMetric : adhocMetric;
-    const oldMetric = propsSavedMetric?.metric_name
-      ? propsSavedMetric
-      : propsAdhocMetric;
-    onChange(
+    const oldMetric = this.props.savedMetric?.metric_name
+      ? this.props.savedMetric
+      : this.props.adhocMetric;
+    this.props.onChange(
       {
         ...metric,
       } as Metric,
       oldMetric as Metric,
     );
-    onClose();
-  }, [
-    adhocMetric,
-    savedMetric,
-    propsSavedMetric,
-    propsAdhocMetric,
-    onChange,
-    onClose,
-  ]);
+    this.props.onClose();
+  }
 
-  const onResetStateAndClose = useCallback(() => {
-    setAdhocMetric(propsAdhocMetric);
-    setSavedMetric(propsSavedMetric);
-    onClose();
-  }, [propsAdhocMetric, propsSavedMetric, onClose]);
+  onResetStateAndClose() {
+    this.setState(
+      {
+        adhocMetric: this.props.adhocMetric,
+        savedMetric: this.props.savedMetric,
+      },
+      this.props.onClose,
+    );
+  }
 
-  const onColumnChange = useCallback(
-    (columnName: string): void => {
-      const column = columns.find(col => col.column_name === columnName);
-      setAdhocMetric(prevMetric =>
-        prevMetric.duplicateWith({
-          column,
-          expressionType: EXPRESSION_TYPES.SIMPLE,
-        }),
-      );
-      setSavedMetric(undefined);
-    },
-    [columns],
-  );
+  onColumnChange(columnName: string): void {
+    const column = this.props.columns?.find(
+      column => column.column_name === columnName,
+    );
+    this.setState(prevState => ({
+      adhocMetric: prevState.adhocMetric.duplicateWith({
+        column,
+        expressionType: EXPRESSION_TYPES.SIMPLE,
+      }),
+      savedMetric: undefined,
+    }));
+  }
 
-  const onAggregateChange = useCallback((aggregate: string | null): void => {
-    setAdhocMetric(prevMetric =>
-      prevMetric.duplicateWith({
+  onAggregateChange(aggregate: string | null): void {
+    // we construct this object explicitly to overwrite the value in the case aggregate is null
+    this.setState(prevState => ({
+      adhocMetric: prevState.adhocMetric.duplicateWith({
         aggregate,
         expressionType: EXPRESSION_TYPES.SIMPLE,
       }),
+      savedMetric: undefined,
+    }));
+  }
+
+  onSavedMetricChange(savedMetricName: string): void {
+    const savedMetric = this.props.savedMetricsOptions?.find(
+      metric => metric.metric_name === savedMetricName,
     );
-    setSavedMetric(undefined);
-  }, []);
+    this.setState(prevState => ({
+      savedMetric,
+      adhocMetric: prevState.adhocMetric.duplicateWith({
+        column: undefined,
+        aggregate: undefined,
+        sqlExpression: undefined,
+        expressionType: EXPRESSION_TYPES.SIMPLE,
+      }),
+    }));
+  }
 
-  const onSavedMetricChange = useCallback(
-    (savedMetricName: string): void => {
-      const metric = savedMetricsOptions?.find(
-        m => m.metric_name === savedMetricName,
-      );
-      setSavedMetric(metric);
-      setAdhocMetric(prevMetric =>
-        prevMetric.duplicateWith({
-          column: undefined,
-          aggregate: undefined,
-          sqlExpression: undefined,
-          expressionType: EXPRESSION_TYPES.SIMPLE,
-        }),
-      );
-    },
-    [savedMetricsOptions],
-  );
-
-  const onSqlExpressionChange = useCallback((sqlExpression: string): void => {
-    setAdhocMetric(prevMetric =>
-      prevMetric.duplicateWith({
+  onSqlExpressionChange(sqlExpression: string): void {
+    this.setState(prevState => ({
+      adhocMetric: prevState.adhocMetric.duplicateWith({
         sqlExpression,
         expressionType: EXPRESSION_TYPES.SQL,
       }),
-    );
-    setSavedMetric(undefined);
-  }, []);
+      savedMetric: undefined,
+    }));
+  }
 
-  const onDragDown = useCallback(
-    (e: React.MouseEvent): void => {
-      dragStartRef.current = {
-        x: e.clientX,
-        y: e.clientY,
-        width,
-        height,
-      };
-      document.addEventListener('mousemove', onMouseMove);
-    },
-    [width, height, onMouseMove],
-  );
+  onDragDown(e: React.MouseEvent): void {
+    this.dragStartX = e.clientX;
+    this.dragStartY = e.clientY;
+    this.dragStartWidth = this.state.width;
+    this.dragStartHeight = this.state.height;
+    document.addEventListener('mousemove', this.onMouseMove);
+  }
 
-  const refreshAceEditor = useCallback((): void => {
-    setTimeout(() => {
-      aceEditorRef.current?.resize?.();
-    }, 0);
-  }, []);
-
-  const onTabChange = useCallback(
-    (tab: string): void => {
-      refreshAceEditor();
-      getCurrentTab(tab);
-    },
-    [refreshAceEditor, getCurrentTab],
-  );
-
-  const renderColumnOption = useCallback(
-    (option: ColumnType): React.ReactNode => {
-      const column = { ...option };
-      if (
-        (column as unknown as { metric_name?: string }).metric_name &&
-        !column.verbose_name
-      ) {
-        column.verbose_name = (
-          column as unknown as { metric_name: string }
-        ).metric_name;
-      }
-      return <StyledColumnOption column={column} showType />;
-    },
-    [],
-  );
-
-  const renderMetricOption = useCallback(
-    (metric: SavedMetricType): React.ReactNode => (
-      <StyledMetricOption metric={metric} showType />
-    ),
-    [],
-  );
-
-  const columnsArray = columns;
-  const keywords = useMemo(
-    () =>
-      sqlKeywords.concat(
-        getColumnKeywords(
-          columnsArray as Parameters<typeof getColumnKeywords>[0],
-        ),
+  onMouseMove(e: MouseEvent): void {
+    this.props.onResize();
+    this.setState({
+      width: Math.max(
+        this.dragStartWidth + (e.clientX - this.dragStartX),
+        POPOVER_INITIAL_WIDTH,
       ),
-    [columnsArray],
-  );
+      height: Math.max(
+        this.dragStartHeight + (e.clientY - this.dragStartY),
+        POPOVER_INITIAL_HEIGHT,
+      ),
+    });
+  }
 
-  const columnValue =
-    (adhocMetric.column && adhocMetric.column.column_name) ||
-    adhocMetric.inferSqlExpressionColumn();
+  onMouseUp(): void {
+    document.removeEventListener('mousemove', this.onMouseMove);
+  }
 
-  const columnSelectProps = useMemo(
-    () => ({
+  onTabChange(tab: string): void {
+    this.refreshEditor();
+    this.props.getCurrentTab?.(tab);
+  }
+
+  refreshEditor(): void {
+    setTimeout(() => {
+      this.editorRef.current?.resize();
+    }, 0);
+  }
+
+  renderColumnOption(option: ColumnType): React.ReactNode {
+    const column = { ...option };
+    if (
+      (column as unknown as { metric_name?: string }).metric_name &&
+      !column.verbose_name
+    ) {
+      column.verbose_name = (
+        column as unknown as { metric_name: string }
+      ).metric_name;
+    }
+    return <StyledColumnOption column={column} showType />;
+  }
+
+  renderMetricOption(savedMetric: SavedMetricType): React.ReactNode {
+    return <StyledMetricOption metric={savedMetric} showType />;
+  }
+
+  render() {
+    const {
+      adhocMetric: propsAdhocMetric,
+      savedMetric: propsSavedMetric,
+      columns,
+      savedMetricsOptions,
+      onChange,
+      onClose,
+      onResize,
+      datasource,
+      isNewMetric = false,
+      isLabelModified,
+      ...popoverProps
+    } = this.props;
+    const { adhocMetric, savedMetric } = this.state;
+    const columnsArray = columns ?? [];
+    const keywords = sqlKeywords.concat(
+      getColumnKeywords(
+        columnsArray as Parameters<typeof getColumnKeywords>[0],
+      ),
+    );
+
+    const columnValue =
+      (adhocMetric.column && adhocMetric.column.column_name) ||
+      adhocMetric.inferSqlExpressionColumn();
+
+    // autofocus on column if there's no value in column; otherwise autofocus on aggregate
+    const columnSelectProps = {
       ariaLabel: t('Select column'),
       placeholder: t('%s column(s)', columnsArray.length),
       value: columnValue,
-      onChange: onColumnChange,
+      onChange: this.onColumnChange,
       allowClear: true,
       autoFocus: !columnValue,
-    }),
-    [columnsArray.length, columnValue, onColumnChange],
-  );
+    };
 
-  const aggregateSelectProps = useMemo(
-    () => ({
+    const aggregateSelectProps = {
       ariaLabel: t('Select aggregate options'),
       placeholder: t('%s aggregates(s)', AGGREGATES_OPTIONS.length),
       value:
         adhocMetric.aggregate ??
         adhocMetric.inferSqlExpressionAggregate() ??
         undefined,
-      onChange: onAggregateChange as (value: unknown) => void,
+      onChange: this.onAggregateChange as (value: unknown) => void,
       allowClear: true,
       autoFocus: !!columnValue,
-    }),
-    [adhocMetric, columnValue, onAggregateChange],
-  );
+    };
 
-  const savedSelectProps = useMemo(
-    () => ({
+    const savedSelectProps = {
       ariaLabel: t('Select saved metrics'),
       placeholder: t('%s saved metric(s)', savedMetricsOptions?.length ?? 0),
       value: savedMetric?.metric_name,
-      onChange: onSavedMetricChange,
+      onChange: this.onSavedMetricChange,
       allowClear: true,
       autoFocus: true,
-    }),
-    [
-      savedMetricsOptions?.length,
-      savedMetric?.metric_name,
-      onSavedMetricChange,
-    ],
-  );
+    };
 
-  const stateIsValid = adhocMetric.isValid() || savedMetric?.metric_name;
-  const hasUnsavedChanges =
-    isLabelModified ||
-    isNewMetric ||
-    !adhocMetric.equals(propsAdhocMetric) ||
-    (!(
-      typeof savedMetric?.metric_name === 'undefined' &&
-      typeof propsSavedMetric?.metric_name === 'undefined'
-    ) &&
-      savedMetric?.metric_name !== propsSavedMetric?.metric_name);
+    const stateIsValid = adhocMetric.isValid() || savedMetric?.metric_name;
+    const hasUnsavedChanges =
+      isLabelModified ||
+      isNewMetric ||
+      !adhocMetric.equals(propsAdhocMetric) ||
+      (!(
+        typeof savedMetric?.metric_name === 'undefined' &&
+        typeof propsSavedMetric?.metric_name === 'undefined'
+      ) &&
+        savedMetric?.metric_name !== propsSavedMetric?.metric_name);
 
-  let extra: ExtraConfig = {};
-  if (datasource?.extra && typeof datasource.extra === 'string') {
-    try {
-      extra = JSON.parse(datasource.extra) as ExtraConfig;
-    } catch {} // eslint-disable-line no-empty
-  }
+    let extra: ExtraConfig = {};
+    if (datasource?.extra && typeof datasource.extra === 'string') {
+      try {
+        extra = JSON.parse(datasource.extra) as ExtraConfig;
+      } catch {} // eslint-disable-line no-empty
+    }
 
-  return (
-    <Form
-      layout="vertical"
-      id="metrics-edit-popover"
-      data-test="metrics-edit-popover"
-      {...popoverProps}
-    >
-      <Tabs
-        id="adhoc-metric-edit-tabs"
-        data-test="adhoc-metric-edit-tabs"
-        defaultActiveKey={defaultActiveTabKey}
-        className="adhoc-metric-edit-tabs"
-        style={{ height, width }}
-        onChange={onTabChange}
-        allowOverflow
-        items={[
-          {
-            key: SAVED_TAB_KEY,
-            label: t('Saved'),
-            children:
-              ensureIsArray(savedMetricsOptions).length > 0 ? (
-                <FormItem label={t('Saved metric')}>
-                  <StyledSelect
-                    options={[...ensureIsArray(savedMetricsOptions)]
-                      .sort((a, b) =>
-                        (a.metric_name ?? '').localeCompare(
-                          b.metric_name ?? '',
-                        ),
-                      )
-                      .map(metric => ({
-                        value: metric.metric_name,
-                        label: renderMetricOption(metric),
-                        key: metric.id,
-                        metric_name: metric.metric_name,
-                        verbose_name: metric.verbose_name ?? '',
-                        disabled:
-                          compatibleMetrics != null &&
-                          !compatibleMetrics.includes(metric.metric_name),
-                      }))}
-                    optionFilterProps={['metric_name', 'verbose_name']}
-                    {...savedSelectProps}
+    return (
+      <Form
+        layout="vertical"
+        id="metrics-edit-popover"
+        data-test="metrics-edit-popover"
+        {...popoverProps}
+      >
+        <Tabs
+          id="adhoc-metric-edit-tabs"
+          data-test="adhoc-metric-edit-tabs"
+          defaultActiveKey={this.defaultActiveTabKey}
+          className="adhoc-metric-edit-tabs"
+          style={{ height: this.state.height, width: this.state.width }}
+          onChange={this.onTabChange}
+          allowOverflow
+          items={[
+            {
+              key: SAVED_TAB_KEY,
+              label: t('Saved'),
+              children:
+                ensureIsArray(savedMetricsOptions).length > 0 ? (
+                  <FormItem label={t('Saved metric')}>
+                    <StyledSelect
+                      options={[...ensureIsArray(savedMetricsOptions)]
+                        .sort((a, b) =>
+                          (a.metric_name ?? '').localeCompare(
+                            b.metric_name ?? '',
+                          ),
+                        )
+                        .map(savedMetric => ({
+                          value: savedMetric.metric_name,
+                          label: this.renderMetricOption(savedMetric),
+                          key: savedMetric.id,
+                          metric_name: savedMetric.metric_name,
+                          verbose_name: savedMetric.verbose_name ?? '',
+                          disabled:
+                            this.props.compatibleMetrics != null &&
+                            !this.props.compatibleMetrics.includes(
+                              savedMetric.metric_name,
+                            ),
+                        }))}
+                      optionFilterProps={['metric_name', 'verbose_name']}
+                      {...savedSelectProps}
+                    />
+                  </FormItem>
+                ) : datasource?.type === DatasourceType.Table ? (
+                  <EmptyState
+                    image="empty.svg"
+                    size="small"
+                    title={t('No saved metrics found')}
+                    description={t(
+                      'Add metrics to dataset in "Edit datasource" modal',
+                    )}
                   />
-                </FormItem>
-              ) : datasource?.type === DatasourceType.Table ? (
-                <EmptyState
-                  image="empty.svg"
-                  size="small"
-                  title={t('No saved metrics found')}
-                  description={t(
-                    'Add metrics to dataset in "Edit datasource" modal',
+                ) : (
+                  <EmptyState
+                    image="empty.svg"
+                    size="small"
+                    title={t('No saved metrics found')}
+                    description={
+                      <>
+                        <span
+                          tabIndex={0}
+                          role="button"
+                          onClick={() => {
+                            this.props.handleDatasetModal?.(true);
+                            this.props.onClose();
+                          }}
+                        >
+                          {t('Create a dataset')}
+                        </span>
+                        {t(' to add metrics')}
+                      </>
+                    }
+                  />
+                ),
+            },
+            {
+              key: EXPRESSION_TYPES.SIMPLE,
+              label: extra.disallow_adhoc_metrics ? (
+                <Tooltip
+                  title={t(
+                    'Simple ad-hoc metrics are not enabled for this dataset',
                   )}
-                />
+                >
+                  {t('Simple')}
+                </Tooltip>
               ) : (
-                <EmptyState
-                  image="empty.svg"
-                  size="small"
-                  title={t('No saved metrics found')}
-                  description={
-                    <>
-                      <span
-                        tabIndex={0}
-                        role="button"
-                        onClick={() => {
-                          handleDatasetModal?.(true);
-                          onClose();
-                        }}
-                      >
-                        {t('Create a dataset')}
-                      </span>
-                      {t(' to add metrics')}
-                    </>
+                t('Simple')
+              ),
+              disabled: extra.disallow_adhoc_metrics,
+              children: (
+                <>
+                  <FormItem label={t('column')}>
+                    <Select
+                      options={columnsArray.map(column => ({
+                        value: column.column_name,
+                        key: (column as { id?: unknown }).id,
+                        label: this.renderColumnOption(column),
+                        column_name: column.column_name,
+                        verbose_name: column.verbose_name ?? '',
+                      }))}
+                      optionFilterProps={['column_name', 'verbose_name']}
+                      {...columnSelectProps}
+                    />
+                  </FormItem>
+                  <FormItem label={t('aggregate')}>
+                    <Select
+                      options={AGGREGATES_OPTIONS.map(option => ({
+                        value: option,
+                        label: option,
+                        key: option,
+                      }))}
+                      {...aggregateSelectProps}
+                    />
+                  </FormItem>
+                </>
+              ),
+            },
+            {
+              key: EXPRESSION_TYPES.SQL,
+              label: extra.disallow_adhoc_metrics ? (
+                <Tooltip
+                  title={t(
+                    'Custom SQL ad-hoc metrics are not enabled for this dataset',
+                  )}
+                >
+                  {t('Custom SQL')}
+                </Tooltip>
+              ) : (
+                t('Custom SQL')
+              ),
+              disabled: extra.disallow_adhoc_metrics,
+              children: (
+                <SQLEditorWithValidation
+                  data-test="sql-editor"
+                  ref={this.editorRef}
+                  keywords={keywords}
+                  height={`${this.state.height - 120}px`}
+                  onChange={this.onSqlExpressionChange}
+                  width="100%"
+                  lineNumbers={false}
+                  value={
+                    adhocMetric.sqlExpression ||
+                    adhocMetric.translateToSql({ transformCountDistinct: true })
                   }
+                  wordWrap
+                  showValidation
+                  expressionType="metric"
+                  datasourceId={datasource?.id}
+                  datasourceType={datasource?.type}
                 />
               ),
-          },
-          {
-            key: EXPRESSION_TYPES.SIMPLE,
-            label: extra.disallow_adhoc_metrics ? (
-              <Tooltip
-                title={t(
-                  'Simple ad-hoc metrics are not enabled for this dataset',
-                )}
-              >
-                {t('Simple')}
-              </Tooltip>
-            ) : (
-              t('Simple')
-            ),
-            disabled: extra.disallow_adhoc_metrics,
-            children: (
-              <>
-                <FormItem label={t('column')}>
-                  <Select
-                    options={columnsArray.map(column => ({
-                      value: column.column_name,
-                      key: (column as { id?: unknown }).id,
-                      label: renderColumnOption(column),
-                      column_name: column.column_name,
-                      verbose_name: column.verbose_name ?? '',
-                    }))}
-                    optionFilterProps={['column_name', 'verbose_name']}
-                    {...columnSelectProps}
-                  />
-                </FormItem>
-                <FormItem label={t('aggregate')}>
-                  <Select
-                    options={AGGREGATES_OPTIONS.map(option => ({
-                      value: option,
-                      label: option,
-                      key: option,
-                    }))}
-                    {...aggregateSelectProps}
-                  />
-                </FormItem>
-              </>
-            ),
-          },
-          {
-            key: EXPRESSION_TYPES.SQL,
-            label: extra.disallow_adhoc_metrics ? (
-              <Tooltip
-                title={t(
-                  'Custom SQL ad-hoc metrics are not enabled for this dataset',
-                )}
-              >
-                {t('Custom SQL')}
-              </Tooltip>
-            ) : (
-              t('Custom SQL')
-            ),
-            disabled: extra.disallow_adhoc_metrics,
-            children: (
-              <SQLEditorWithValidation
-                data-test="sql-editor"
-                ref={aceEditorRef as RefObject<editors.EditorHandle>}
-                keywords={keywords}
-                height={`${height - 120}px`}
-                onChange={onSqlExpressionChange}
-                width="100%"
-                lineNumbers={false}
-                value={
-                  adhocMetric.sqlExpression ||
-                  adhocMetric.translateToSql({ transformCountDistinct: true })
-                }
-                wordWrap
-                showValidation
-                expressionType="metric"
-                datasourceId={datasource?.id}
-                datasourceType={datasource?.type}
-              />
-            ),
-          },
-        ]}
-      />
-      <div>
-        <Button
-          buttonSize="small"
-          buttonStyle="secondary"
-          onClick={onResetStateAndClose}
-          data-test="AdhocMetricEdit#cancel"
-          cta
-        >
-          {t('Close')}
-        </Button>
-        <Button
-          disabled={!stateIsValid || !hasUnsavedChanges}
-          buttonStyle="primary"
-          buttonSize="small"
-          data-test="AdhocMetricEdit#save"
-          onClick={onSave}
-          cta
-        >
-          {t('Save')}
-        </Button>
-        <Icons.ArrowsAltOutlined
-          role="button"
-          aria-label={t('Resize')}
-          tabIndex={0}
-          onMouseDown={onDragDown}
-          className="edit-popover-resize"
+            },
+          ]}
         />
-      </div>
-    </Form>
+        <div>
+          <Button
+            buttonSize="small"
+            buttonStyle="secondary"
+            onClick={this.onResetStateAndClose}
+            data-test="AdhocMetricEdit#cancel"
+            cta
+          >
+            {t('Close')}
+          </Button>
+          <Button
+            disabled={!stateIsValid || !hasUnsavedChanges}
+            buttonStyle="primary"
+            buttonSize="small"
+            data-test="AdhocMetricEdit#save"
+            onClick={this.onSave}
+            cta
+          >
+            {t('Save')}
+          </Button>
+          <Icons.ArrowsAltOutlined
+            role="button"
+            aria-label={t('Resize')}
+            tabIndex={0}
+            onMouseDown={this.onDragDown}
+            className="edit-popover-resize"
+          />
+        </div>
+      </Form>
+    );
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Thin functional wrapper that injects compatibility data from Redux.
+// AdhocMetricEditPopover is a class component and cannot use hooks directly.
+// ---------------------------------------------------------------------------
+function AdhocMetricEditPopoverWithRedux(props: AdhocMetricEditPopoverProps) {
+  const compatibleMetrics = useSelector(
+    (state: any) =>
+      state.explore?.compatibleMetrics as string[] | null | undefined,
+  );
+  return (
+    <AdhocMetricEditPopover {...props} compatibleMetrics={compatibleMetrics} />
   );
 }
 
-export default memo(AdhocMetricEditPopover);
+export { AdhocMetricEditPopover };
+export default AdhocMetricEditPopoverWithRedux;

superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricOption.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { memo, useCallback } from 'react';
+import { PureComponent } from 'react';
 import { Metric } from '@superset-ui/core';
 import { OptionControlLabel } from 'src/explore/components/controls/OptionControls';
 import { DndItemType } from 'src/explore/components/DndItemType';
@@ -42,57 +42,61 @@ interface AdhocMetricOptionProps {
   datasourceWarningMessage?: string;
 }
 
-function AdhocMetricOption({
-  adhocMetric,
-  onMetricEdit,
-  onRemoveMetric,
-  columns = [],
-  savedMetricsOptions = [],
-  savedMetric = {} as SavedMetricTypeDef,
-  datasource,
-  onMoveLabel,
-  onDropLabel,
-  index = 0,
-  type = DndItemType.AdhocMetricOption,
-  multi,
-  datasourceWarningMessage,
-}: AdhocMetricOptionProps) {
-  const handleRemoveMetric = useCallback(
-    (e?: React.MouseEvent): void => {
-      e?.stopPropagation();
-      onRemoveMetric?.(index);
-    },
-    [onRemoveMetric, index],
-  );
+class AdhocMetricOption extends PureComponent<AdhocMetricOptionProps> {
+  constructor(props: AdhocMetricOptionProps) {
+    super(props);
+    this.onRemoveMetric = this.onRemoveMetric.bind(this);
+  }
 
-  const withCaret = !(savedMetric as SavedMetricTypeDef).error_text;
+  onRemoveMetric(e?: React.MouseEvent): void {
+    e?.stopPropagation();
+    this.props.onRemoveMetric?.(this.props.index ?? 0);
+  }
 
-  return (
-    <AdhocMetricPopoverTrigger
-      adhocMetric={adhocMetric}
-      onMetricEdit={onMetricEdit}
-      columns={columns}
-      savedMetricsOptions={savedMetricsOptions}
-      savedMetric={savedMetric}
-      datasource={datasource!}
-    >
-      <OptionControlLabel
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        savedMetric={savedMetric as any}
+  render() {
+    const {
+      adhocMetric,
+      onMetricEdit,
+      columns,
+      savedMetricsOptions,
+      savedMetric = {} as SavedMetricTypeDef,
+      datasource,
+      onMoveLabel,
+      onDropLabel,
+      index,
+      type,
+      multi,
+      datasourceWarningMessage,
+    } = this.props;
+    const withCaret = !(savedMetric as SavedMetricTypeDef).error_text;
+
+    return (
+      <AdhocMetricPopoverTrigger
         adhocMetric={adhocMetric}
-        label={adhocMetric.label}
-        onRemove={() => handleRemoveMetric()}
-        onMoveLabel={onMoveLabel}
-        onDropLabel={onDropLabel}
-        index={index}
-        type={type}
-        withCaret={withCaret}
-        isFunction
-        multi={multi}
-        datasourceWarningMessage={datasourceWarningMessage}
-      />
-    </AdhocMetricPopoverTrigger>
-  );
+        onMetricEdit={onMetricEdit}
+        columns={columns ?? []}
+        savedMetricsOptions={savedMetricsOptions ?? []}
+        savedMetric={savedMetric}
+        datasource={datasource!}
+      >
+        <OptionControlLabel
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          savedMetric={savedMetric as any}
+          adhocMetric={adhocMetric}
+          label={adhocMetric.label}
+          onRemove={() => this.onRemoveMetric()}
+          onMoveLabel={onMoveLabel}
+          onDropLabel={onDropLabel}
+          index={index ?? 0}
+          type={type ?? DndItemType.AdhocMetricOption}
+          withCaret={withCaret}
+          isFunction
+          multi={multi}
+          datasourceWarningMessage={datasourceWarningMessage}
+        />
+      </AdhocMetricPopoverTrigger>
+    );
+  }
 }
 
-export default memo(AdhocMetricOption);
+export default AdhocMetricOption;

superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricPopoverTrigger.tsx

@@ -16,15 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import {
-  memo,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useReducer,
-  useRef,
-  useState,
-} from 'react';
+import { PureComponent, ReactNode } from 'react';
 import { t } from '@apache-superset/core/translation';
 import { Metric } from '@superset-ui/core';
 import AdhocMetricEditPopoverTitle from 'src/explore/components/controls/MetricControl/AdhocMetricEditPopoverTitle';
@@ -56,322 +48,239 @@ export type AdhocMetricPopoverTriggerProps = {
   isNew?: boolean;
 };
 
-interface TitleState {
-  label: string;
-  hasCustomLabel: boolean;
-}
-
-interface ComponentState {
+export type AdhocMetricPopoverTriggerState = {
   adhocMetric: AdhocMetric;
   popoverVisible: boolean;
-  title: TitleState;
+  title: { label: string; hasCustomLabel: boolean };
   currentLabel: string;
   labelModified: boolean;
   isTitleEditDisabled: boolean;
   showSaveDatasetModal: boolean;
-}
+};
 
-type Action =
-  | { type: 'SET_ADHOC_METRIC'; payload: AdhocMetric }
-  | { type: 'SET_POPOVER_VISIBLE'; payload: boolean }
-  | { type: 'SET_TITLE'; payload: TitleState }
-  | { type: 'SET_CURRENT_LABEL'; payload: string }
-  | { type: 'SET_LABEL_MODIFIED'; payload: boolean }
-  | { type: 'SET_TITLE_EDIT_DISABLED'; payload: boolean }
-  | { type: 'SET_SHOW_SAVE_DATASET_MODAL'; payload: boolean }
-  | {
-      type: 'RESET_ON_OPTION_CHANGE';
-      payload: { adhocMetric: AdhocMetric; title: TitleState };
-    }
-  | { type: 'UPDATE_ADHOC_METRIC'; payload: AdhocMetric }
-  | { type: 'CLOSE_POPOVER' }
-  | {
-      type: 'ON_LABEL_CHANGE';
-      payload: { label: string; currentLabel: string; fallbackLabel: string };
-    }
-  | {
-      type: 'GET_CURRENT_LABEL';
-      payload: {
-        currentLabel: string;
-        savedMetricLabel: string;
-        hasCustomLabel: boolean;
-      };
+class AdhocMetricPopoverTrigger extends PureComponent<
+  AdhocMetricPopoverTriggerProps,
+  AdhocMetricPopoverTriggerState
+> {
+  constructor(props: AdhocMetricPopoverTriggerProps) {
+    super(props);
+    this.onPopoverResize = this.onPopoverResize.bind(this);
+    this.onLabelChange = this.onLabelChange.bind(this);
+    this.closePopover = this.closePopover.bind(this);
+    this.togglePopover = this.togglePopover.bind(this);
+    this.getCurrentTab = this.getCurrentTab.bind(this);
+    this.getCurrentLabel = this.getCurrentLabel.bind(this);
+    this.onChange = this.onChange.bind(this);
+    this.handleDatasetModal = this.handleDatasetModal.bind(this);
+
+    this.state = {
+      adhocMetric: props.adhocMetric,
+      popoverVisible: false,
+      title: {
+        label: props.adhocMetric.label,
+        hasCustomLabel: props.adhocMetric.hasCustomLabel,
+      },
+      currentLabel: '',
+      labelModified: false,
+      isTitleEditDisabled: false,
+      showSaveDatasetModal: false,
     };
+  }
 
-function reducer(state: ComponentState, action: Action): ComponentState {
-  switch (action.type) {
-    case 'SET_ADHOC_METRIC':
-      return { ...state, adhocMetric: action.payload };
-    case 'SET_POPOVER_VISIBLE':
-      return { ...state, popoverVisible: action.payload };
-    case 'SET_TITLE':
-      return { ...state, title: action.payload };
-    case 'SET_CURRENT_LABEL':
-      return { ...state, currentLabel: action.payload };
-    case 'SET_LABEL_MODIFIED':
-      return { ...state, labelModified: action.payload };
-    case 'SET_TITLE_EDIT_DISABLED':
-      return { ...state, isTitleEditDisabled: action.payload };
-    case 'SET_SHOW_SAVE_DATASET_MODAL':
-      return { ...state, showSaveDatasetModal: action.payload };
-    case 'RESET_ON_OPTION_CHANGE':
+  static getDerivedStateFromProps(
+    nextProps: AdhocMetricPopoverTriggerProps,
+    prevState: AdhocMetricPopoverTriggerState,
+  ) {
+    if (prevState.adhocMetric.optionName !== nextProps.adhocMetric.optionName) {
       return {
-        ...state,
-        adhocMetric: action.payload.adhocMetric,
-        title: action.payload.title,
+        adhocMetric: nextProps.adhocMetric,
+        title: {
+          label: nextProps.adhocMetric.label,
+          hasCustomLabel: nextProps.adhocMetric.hasCustomLabel,
+        },
         currentLabel: '',
         labelModified: false,
       };
-    case 'UPDATE_ADHOC_METRIC':
-      return { ...state, adhocMetric: action.payload };
-    case 'CLOSE_POPOVER':
-      return { ...state, popoverVisible: false, labelModified: false };
-    case 'ON_LABEL_CHANGE': {
-      const { label, currentLabel, fallbackLabel } = action.payload;
-      return {
-        ...state,
-        title: {
-          label: label || currentLabel || fallbackLabel,
-          hasCustomLabel: !!label,
-        },
-        labelModified: true,
-      };
     }
-    case 'GET_CURRENT_LABEL': {
-      const { currentLabel, savedMetricLabel, hasCustomLabel } = action.payload;
-      const newState: ComponentState = {
-        ...state,
-        currentLabel,
-        labelModified: true,
-      };
-      if (savedMetricLabel || !hasCustomLabel) {
-        newState.title = {
+    return {
+      adhocMetric: nextProps.adhocMetric,
+    };
+  }
+
+  onLabelChange(e: any) {
+    const { verbose_name, metric_name } = this.props.savedMetric;
+    const defaultMetricLabel = this.props.adhocMetric?.getDefaultLabel();
+    const label = e.target.value;
+    this.setState(state => ({
+      title: {
+        label:
+          label ||
+          state.currentLabel ||
+          verbose_name ||
+          metric_name ||
+          defaultMetricLabel,
+        hasCustomLabel: !!label,
+      },
+      labelModified: true,
+    }));
+  }
+
+  onPopoverResize() {
+    this.forceUpdate();
+  }
+
+  handleDatasetModal(showModal: boolean) {
+    this.setState({ showSaveDatasetModal: showModal });
+  }
+
+  closePopover() {
+    this.togglePopover(false);
+    this.setState({
+      labelModified: false,
+    });
+  }
+
+  togglePopover(visible: boolean) {
+    this.setState({
+      popoverVisible: visible,
+    });
+  }
+
+  getCurrentTab(tab: string) {
+    this.setState({
+      isTitleEditDisabled: tab === SAVED_TAB_KEY,
+    });
+  }
+
+  getCurrentLabel({
+    savedMetricLabel,
+    adhocMetricLabel,
+  }: {
+    savedMetricLabel: string;
+    adhocMetricLabel: string;
+  }) {
+    const currentLabel = savedMetricLabel || adhocMetricLabel;
+    this.setState({
+      currentLabel,
+      labelModified: true,
+    });
+    if (savedMetricLabel || !this.state.title.hasCustomLabel) {
+      this.setState({
+        title: {
           label: currentLabel,
           hasCustomLabel: false,
-        };
-      }
-      return newState;
+        },
+      });
     }
-    default:
-      return state;
+  }
+
+  onChange(newMetric: Metric, oldMetric: Metric) {
+    this.props.onMetricEdit({ ...newMetric, ...this.state.title }, oldMetric);
+  }
+
+  render() {
+    const {
+      adhocMetric,
+      savedMetric,
+      columns,
+      savedMetricsOptions,
+      datasource,
+      isControlledComponent,
+    } = this.props;
+    const { verbose_name, metric_name } = savedMetric;
+    const { hasCustomLabel, label } = adhocMetric;
+    const adhocMetricLabel = hasCustomLabel
+      ? label
+      : adhocMetric.getDefaultLabel();
+    const title = this.state.labelModified
+      ? this.state.title
+      : {
+          label: verbose_name || metric_name || adhocMetricLabel,
+          hasCustomLabel,
+        };
+
+    const { visible, togglePopover, closePopover } = isControlledComponent
+      ? {
+          visible: this.props.visible,
+          togglePopover: this.props.togglePopover ?? this.togglePopover,
+          closePopover: this.props.closePopover ?? this.closePopover,
+        }
+      : {
+          visible: this.state.popoverVisible,
+          togglePopover: this.togglePopover,
+          closePopover: this.closePopover,
+        };
+
+    const overlayContent = (
+      <ExplorePopoverContent>
+        <AdhocMetricEditPopover
+          adhocMetric={adhocMetric}
+          columns={columns}
+          savedMetricsOptions={savedMetricsOptions}
+          savedMetric={savedMetric as savedMetricType}
+          datasource={
+            datasource as unknown as {
+              type?: string;
+              id?: number | string;
+              extra?: string;
+            }
+          }
+          handleDatasetModal={this.handleDatasetModal}
+          onResize={this.onPopoverResize}
+          onClose={closePopover}
+          onChange={
+            this.onChange as (newMetric: unknown, oldMetric?: unknown) => void
+          }
+          getCurrentTab={this.getCurrentTab}
+          getCurrentLabel={this.getCurrentLabel}
+          isNewMetric={this.props.isNew}
+          isLabelModified={
+            this.state.labelModified &&
+            adhocMetricLabel !== this.state.title.label
+          }
+        />
+      </ExplorePopoverContent>
+    );
+
+    const popoverTitle = (
+      <AdhocMetricEditPopoverTitle
+        title={title}
+        onChange={this.onLabelChange}
+        isEditDisabled={this.state.isTitleEditDisabled}
+      />
+    );
+
+    return (
+      <>
+        {this.state.showSaveDatasetModal && (
+          <SaveDatasetModal
+            visible={this.state.showSaveDatasetModal}
+            onHide={() => this.handleDatasetModal(false)}
+            buttonTextOnSave={t('Save')}
+            buttonTextOnOverwrite={t('Overwrite')}
+            modalDescription={t(
+              'Save this query as a virtual dataset to continue exploring',
+            )}
+            datasource={datasource}
+          />
+        )}
+        <ControlPopover
+          placement="right"
+          trigger="click"
+          content={overlayContent}
+          defaultOpen={visible}
+          open={visible}
+          onOpenChange={togglePopover}
+          title={popoverTitle}
+          destroyOnHidden
+        >
+          {/* Wrap in span so the Popover can attach a ref without relying
+              on findDOMNode (deprecated in React 18+). */}
+          <span>{this.props.children}</span>
+        </ControlPopover>
+      </>
+    );
   }
 }
 
-function AdhocMetricPopoverTrigger({
-  adhocMetric: propsAdhocMetric,
-  onMetricEdit,
-  columns,
-  savedMetricsOptions,
-  savedMetric,
-  datasource,
-  children,
-  isControlledComponent,
-  visible: propsVisible,
-  togglePopover: propsTogglePopover,
-  closePopover: propsClosePopover,
-  isNew,
-}: AdhocMetricPopoverTriggerProps) {
-  const initialState: ComponentState = {
-    adhocMetric: propsAdhocMetric,
-    popoverVisible: false,
-    title: {
-      label: propsAdhocMetric.label,
-      hasCustomLabel: propsAdhocMetric.hasCustomLabel,
-    },
-    currentLabel: '',
-    labelModified: false,
-    isTitleEditDisabled: false,
-    showSaveDatasetModal: false,
-  };
-
-  const [state, dispatch] = useReducer(reducer, initialState);
-
-  // Track previous optionName to detect when the metric changes externally
-  const prevOptionNameRef = useRef(propsAdhocMetric.optionName);
-
-  // Handle getDerivedStateFromProps logic
-  useEffect(() => {
-    if (prevOptionNameRef.current !== propsAdhocMetric.optionName) {
-      dispatch({
-        type: 'RESET_ON_OPTION_CHANGE',
-        payload: {
-          adhocMetric: propsAdhocMetric,
-          title: {
-            label: propsAdhocMetric.label,
-            hasCustomLabel: propsAdhocMetric.hasCustomLabel,
-          },
-        },
-      });
-    } else {
-      dispatch({ type: 'UPDATE_ADHOC_METRIC', payload: propsAdhocMetric });
-    }
-    prevOptionNameRef.current = propsAdhocMetric.optionName;
-  }, [propsAdhocMetric]);
-
-  const [, forceUpdate] = useState({});
-
-  const onPopoverResize = useCallback(() => {
-    forceUpdate({});
-  }, []);
-
-  const onLabelChange = useCallback(
-    (e: { target: { value: string } }) => {
-      const { verbose_name, metric_name } = savedMetric;
-      const defaultMetricLabel = propsAdhocMetric?.getDefaultLabel();
-      const label = e.target.value;
-      dispatch({
-        type: 'ON_LABEL_CHANGE',
-        payload: {
-          label,
-          currentLabel: state.currentLabel,
-          fallbackLabel: verbose_name || metric_name || defaultMetricLabel,
-        },
-      });
-    },
-    [savedMetric, propsAdhocMetric, state.currentLabel],
-  );
-
-  const handleDatasetModal = useCallback((showModal: boolean) => {
-    dispatch({ type: 'SET_SHOW_SAVE_DATASET_MODAL', payload: showModal });
-  }, []);
-
-  const closePopover = useCallback(() => {
-    dispatch({ type: 'CLOSE_POPOVER' });
-  }, []);
-
-  const togglePopover = useCallback((visible: boolean) => {
-    dispatch({ type: 'SET_POPOVER_VISIBLE', payload: visible });
-  }, []);
-
-  const getCurrentTab = useCallback((tab: string) => {
-    dispatch({
-      type: 'SET_TITLE_EDIT_DISABLED',
-      payload: tab === SAVED_TAB_KEY,
-    });
-  }, []);
-
-  const getCurrentLabel = useCallback(
-    ({
-      savedMetricLabel,
-      adhocMetricLabel,
-    }: {
-      savedMetricLabel: string;
-      adhocMetricLabel: string;
-    }) => {
-      const currentLabel = savedMetricLabel || adhocMetricLabel;
-      dispatch({
-        type: 'GET_CURRENT_LABEL',
-        payload: {
-          currentLabel,
-          savedMetricLabel,
-          hasCustomLabel: state.title.hasCustomLabel,
-        },
-      });
-    },
-    [state.title.hasCustomLabel],
-  );
-
-  const onChange = useCallback(
-    (newMetric: Metric, oldMetric: Metric) => {
-      onMetricEdit({ ...newMetric, ...state.title }, oldMetric);
-    },
-    [onMetricEdit, state.title],
-  );
-
-  const { verbose_name, metric_name } = savedMetric;
-  const { hasCustomLabel, label } = state.adhocMetric;
-  const adhocMetricLabel = hasCustomLabel
-    ? label
-    : state.adhocMetric.getDefaultLabel();
-  const title = state.labelModified
-    ? state.title
-    : {
-        label: verbose_name || metric_name || adhocMetricLabel,
-        hasCustomLabel,
-      };
-
-  const {
-    visible,
-    togglePopover: toggle,
-    closePopover: close,
-  } = isControlledComponent
-    ? {
-        visible: propsVisible,
-        togglePopover: propsTogglePopover ?? togglePopover,
-        closePopover: propsClosePopover ?? closePopover,
-      }
-    : {
-        visible: state.popoverVisible,
-        togglePopover,
-        closePopover,
-      };
-
-  const overlayContent = (
-    <ExplorePopoverContent>
-      <AdhocMetricEditPopover
-        adhocMetric={state.adhocMetric}
-        columns={columns}
-        savedMetricsOptions={savedMetricsOptions}
-        savedMetric={savedMetric as savedMetricType}
-        datasource={
-          datasource as unknown as {
-            type?: string;
-            id?: number | string;
-            extra?: string;
-          }
-        }
-        handleDatasetModal={handleDatasetModal}
-        onResize={onPopoverResize}
-        onClose={close}
-        onChange={onChange as (newMetric: unknown, oldMetric?: unknown) => void}
-        getCurrentTab={getCurrentTab}
-        getCurrentLabel={getCurrentLabel}
-        isNewMetric={isNew}
-        isLabelModified={
-          state.labelModified && adhocMetricLabel !== state.title.label
-        }
-      />
-    </ExplorePopoverContent>
-  );
-
-  const popoverTitle = (
-    <AdhocMetricEditPopoverTitle
-      title={title}
-      onChange={onLabelChange}
-      isEditDisabled={state.isTitleEditDisabled}
-    />
-  );
-
-  return (
-    <>
-      {state.showSaveDatasetModal && (
-        <SaveDatasetModal
-          visible={state.showSaveDatasetModal}
-          onHide={() => handleDatasetModal(false)}
-          buttonTextOnSave={t('Save')}
-          buttonTextOnOverwrite={t('Overwrite')}
-          modalDescription={t(
-            'Save this query as a virtual dataset to continue exploring',
-          )}
-          datasource={datasource}
-        />
-      )}
-      <ControlPopover
-        placement="right"
-        trigger="click"
-        content={overlayContent}
-        defaultOpen={visible}
-        open={visible}
-        onOpenChange={toggle}
-        title={popoverTitle}
-        destroyOnHidden
-      >
-        {/* Wrap in span so the Popover can attach a ref without relying
-            on findDOMNode (deprecated in React 18+). */}
-        <span>{children}</span>
-      </ControlPopover>
-    </>
-  );
-}
-
-export default memo(AdhocMetricPopoverTrigger);
+export default AdhocMetricPopoverTrigger;

superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { ensureIsArray, usePrevious } from '@superset-ui/core';
 import { t } from '@apache-superset/core/translation';
 import { isEqual } from 'lodash';
@@ -344,5 +344,4 @@ const MetricsControl = ({
   );
 };
 
-// Was a PureComponent before the FC conversion; preserve shallow-equal skip.
-export default memo(MetricsControl);
+export default MetricsControl;

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

@@ -16,15 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import {
-  memo,
-  useState,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  type ReactNode,
-} from 'react';
+import { PureComponent, type ReactNode } from 'react';
 import { isEqualArray } from '@superset-ui/core';
 import { t } from '@apache-superset/core/translation';
 import { css } from '@apache-superset/core/theme';
@@ -79,6 +71,26 @@ export interface SelectControlProps {
   sortComparator?: (a: SelectOption, b: SelectOption) => number;
 }
 
+const defaultProps = {
+  autoFocus: false,
+  choices: [],
+  clearable: true,
+  description: null,
+  disabled: false,
+  freeForm: false,
+  isLoading: false,
+  label: null,
+  multi: false,
+  onChange: () => {},
+  onFocus: () => {},
+  showHeader: true,
+  valueKey: 'value',
+};
+
+interface SelectControlState {
+  options: SelectOption[];
+}
+
 const numberComparator = (a: SelectOption, b: SelectOption): number =>
   (a.value as number) - (b.value as number);
 
@@ -127,9 +139,9 @@ export const getSortComparator = (
 
 export const innerGetOptions = (props: SelectControlProps): SelectOption[] => {
   const { choices, optionRenderer, valueKey = 'value' } = props;
-  let selectOptions: SelectOption[] = [];
+  let options: SelectOption[] = [];
   if (props.options) {
-    selectOptions = props.options.map(o => ({
+    options = props.options.map(o => ({
       ...o,
       value: o[valueKey] as string | number,
       label: optionRenderer
@@ -138,7 +150,7 @@ export const innerGetOptions = (props: SelectControlProps): SelectOption[] => {
     }));
   } else if (choices) {
     // Accepts different formats of input
-    selectOptions = choices.map(c => {
+    options = choices.map(c => {
       if (Array.isArray(c)) {
         const [value, label] = c.length > 1 ? c : [c[0], c[0]];
         return {
@@ -150,165 +162,136 @@ export const innerGetOptions = (props: SelectControlProps): SelectOption[] => {
       return { value: c as unknown as string | number, label: String(c) };
     });
   }
-  return selectOptions;
+  return options;
 };
 
-function SelectControl({
-  ariaLabel,
-  autoFocus = false,
-  choices = [],
-  clearable = true,
-  description = null,
-  disabled = false,
-  freeForm = false,
-  isLoading = false,
-  mode,
-  multi = false,
-  isMulti,
-  name,
-  onChange = () => {},
-  onFocus = () => {},
-  onSelect,
-  onDeselect,
-  value,
-  default: defaultValue,
-  showHeader = true,
-  optionRenderer,
-  valueKey = 'value',
-  options: optionsProp,
-  placeholder,
-  filterOption,
-  tokenSeparators,
-  notFoundContent,
-  label = undefined,
-  renderTrigger,
-  validationErrors,
-  rightNode,
-  leftNode,
-  onClick,
-  hovered,
-  tooltipOnClick,
-  warning,
-  danger,
-  sortComparator,
-}: SelectControlProps) {
-  const [options, setOptions] = useState<SelectOption[]>(() =>
-    innerGetOptions({
-      choices,
-      optionRenderer,
-      valueKey,
-      options: optionsProp,
-      name,
-    }),
-  );
+export default class SelectControl extends PureComponent<
+  SelectControlProps,
+  SelectControlState
+> {
+  static defaultProps = defaultProps;
 
-  // Track previous choices/options for comparison
-  const prevChoicesRef = useRef(choices);
-  const prevOptionsRef = useRef(optionsProp);
+  constructor(props: SelectControlProps) {
+    super(props);
+    this.state = {
+      options: this.getOptions(props),
+    };
+    this.onChange = this.onChange.bind(this);
+    this.handleFilterOptions = this.handleFilterOptions.bind(this);
+  }
 
-  useEffect(() => {
+  componentDidUpdate(prevProps: SelectControlProps) {
     if (
-      !isEqualArray(choices, prevChoicesRef.current) ||
-      !isEqualArray(optionsProp, prevOptionsRef.current)
+      !isEqualArray(this.props.choices, prevProps.choices) ||
+      !isEqualArray(this.props.options, prevProps.options)
     ) {
-      const newOptions = innerGetOptions({
-        choices,
-        optionRenderer,
-        valueKey,
-        options: optionsProp,
-        name,
-      });
-      setOptions(newOptions);
-      prevChoicesRef.current = choices;
-      prevOptionsRef.current = optionsProp;
+      const options = this.getOptions(this.props);
+      this.setState({ options });
     }
-  }, [choices, optionsProp, optionRenderer, valueKey, name]);
+  }
 
   // Beware: This is acting like an on-click instead of an on-change
   // (firing every time user chooses vs firing only if a new option is chosen).
-  const handleChange = useCallback(
-    (val: SelectValue | SelectOption | SelectOption[]) => {
-      // will eventually call `exploreReducer`: SET_FIELD_VALUE
-      let onChangeVal: SelectValue = val as SelectValue;
+  onChange(val: SelectValue | SelectOption | SelectOption[]) {
+    // will eventually call `exploreReducer`: SET_FIELD_VALUE
+    const { valueKey = 'value' } = this.props;
+    let onChangeVal: SelectValue = val as SelectValue;
 
-      if (Array.isArray(val)) {
-        const values = val.map(v =>
-          typeof v === 'object' &&
-          v !== null &&
-          (v as SelectOption)[valueKey] !== undefined
-            ? (v as SelectOption)[valueKey]
-            : v,
-        );
-        onChangeVal = values as (string | number)[];
-      }
-      if (
-        typeof val === 'object' &&
-        val !== null &&
-        !Array.isArray(val) &&
-        (val as SelectOption)[valueKey] !== undefined
-      ) {
-        onChangeVal = (val as SelectOption)[valueKey] as string | number;
-      }
-      onChange?.(onChangeVal, []);
-    },
-    [onChange, valueKey],
-  );
-
-  const handleFilterOptions = useCallback(
-    (text: string, option: SelectOption) =>
-      filterOption?.({ data: option }, text) ?? true,
-    [filterOption],
-  );
-
-  const headerProps = useMemo(
-    () => ({
-      name,
-      label,
-      description,
-      renderTrigger,
-      rightNode,
-      leftNode,
-      validationErrors,
-      onClick,
-      hovered,
-      tooltipOnClick,
-      warning,
-      danger,
-    }),
-    [
-      name,
-      label,
-      description,
-      renderTrigger,
-      rightNode,
-      leftNode,
-      validationErrors,
-      onClick,
-      hovered,
-      tooltipOnClick,
-      warning,
-      danger,
-    ],
-  );
-
-  const getValue = useCallback(() => {
-    const currentValue =
-      value ?? (defaultValue !== undefined ? defaultValue : undefined);
-
-    // safety check - the value is intended to be undefined but null was used
-    if (currentValue === null && !options.some(o => o.value === null)) {
-      return undefined;
+    if (Array.isArray(val)) {
+      const values = val.map(v =>
+        typeof v === 'object' &&
+        v !== null &&
+        (v as SelectOption)[valueKey] !== undefined
+          ? (v as SelectOption)[valueKey]
+          : v,
+      );
+      onChangeVal = values as (string | number)[];
     }
-    return currentValue;
-  }, [value, defaultValue, options]);
+    if (
+      typeof val === 'object' &&
+      val !== null &&
+      !Array.isArray(val) &&
+      (val as SelectOption)[valueKey] !== undefined
+    ) {
+      onChangeVal = (val as SelectOption)[valueKey] as string | number;
+    }
+    this.props.onChange?.(onChangeVal, []);
+  }
 
-  const computedSortComparator = useMemo(
-    () => getSortComparator(choices, optionsProp, valueKey, sortComparator),
-    [choices, optionsProp, valueKey, sortComparator],
-  );
+  getOptions(props: SelectControlProps) {
+    return innerGetOptions(props);
+  }
 
-  const selectProps = useMemo(
-    () => ({
+  handleFilterOptions(text: string, option: SelectOption) {
+    const { filterOption } = this.props;
+    return filterOption?.({ data: option }, text) ?? true;
+  }
+
+  render() {
+    const {
+      ariaLabel,
+      autoFocus,
+      clearable,
+      disabled,
+      filterOption,
+      freeForm,
+      isLoading,
+      isMulti,
+      label,
+      multi,
+      name,
+      notFoundContent,
+      onFocus,
+      onSelect,
+      onDeselect,
+      placeholder,
+      showHeader,
+      tokenSeparators,
+      value,
+      // ControlHeader props
+      description,
+      renderTrigger,
+      rightNode,
+      leftNode,
+      validationErrors,
+      onClick,
+      hovered,
+      tooltipOnClick,
+      warning,
+      danger,
+    } = this.props;
+
+    const headerProps = {
+      name,
+      label,
+      description,
+      renderTrigger,
+      rightNode,
+      leftNode,
+      validationErrors,
+      onClick,
+      hovered,
+      tooltipOnClick,
+      warning,
+      danger,
+    };
+
+    const getValue = () => {
+      const currentValue =
+        value ??
+        (this.props.default !== undefined ? this.props.default : undefined);
+
+      // safety check - the value is intended to be undefined but null was used
+      if (
+        currentValue === null &&
+        !this.state.options.some(o => o.value === null)
+      ) {
+        return undefined;
+      }
+      return currentValue;
+    };
+
+    const selectProps = {
       allowNewOptions: freeForm,
       autoFocus,
       ariaLabel:
@@ -317,72 +300,46 @@ function SelectControl({
       disabled,
       filterOption:
         filterOption && typeof filterOption === 'function'
-          ? handleFilterOptions
+          ? this.handleFilterOptions
           : true,
       header: showHeader && <ControlHeader {...headerProps} />,
       loading: isLoading,
-      mode: mode || (isMulti || multi ? 'multiple' : 'single'),
+      mode: this.props.mode || (isMulti || multi ? 'multiple' : 'single'),
       name: `select-${name}`,
-      onChange: handleChange,
+      onChange: this.onChange,
       onFocus,
       onSelect,
       onDeselect,
-      options,
+      options: this.state.options,
       placeholder,
-      sortComparator: computedSortComparator,
+      sortComparator: getSortComparator(
+        this.props.choices,
+        this.props.options,
+        this.props.valueKey,
+        this.props.sortComparator,
+      ),
       value: getValue(),
       tokenSeparators,
       notFoundContent,
-    }),
-    [
-      freeForm,
-      autoFocus,
-      ariaLabel,
-      label,
-      clearable,
-      disabled,
-      filterOption,
-      handleFilterOptions,
-      showHeader,
-      headerProps,
-      isLoading,
-      mode,
-      isMulti,
-      multi,
-      name,
-      handleChange,
-      onFocus,
-      onSelect,
-      onDeselect,
-      options,
-      placeholder,
-      computedSortComparator,
-      getValue,
-      tokenSeparators,
-      notFoundContent,
-    ],
-  );
+    };
 
-  return (
-    <div
-      css={theme => css`
-        .type-label {
-          margin-right: ${theme.sizeUnit * 2}px;
-        }
-        .Select__multi-value__label > span,
-        .Select__option > span,
-        .Select__single-value > span {
-          display: flex;
-          align-items: center;
-        }
-      `}
-    >
-      <Select {...(selectProps as Parameters<typeof Select>[0])} />
-    </div>
-  );
+    return (
+      <div
+        css={theme => css`
+          .type-label {
+            margin-right: ${theme.sizeUnit * 2}px;
+          }
+          .Select__multi-value__label > span,
+          .Select__option > span,
+          .Select__single-value > span {
+            display: flex;
+            align-items: center;
+          }
+        `}
+      >
+        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+        <Select {...(selectProps as any)} />
+      </div>
+    );
+  }
 }
-
-// SelectControl was a PureComponent before the FC conversion; wrap with memo
-// to preserve the shallow-equal skip behavior across the many call sites in
-// the explore control panel.
-export default memo(SelectControl);

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

@@ -1,178 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { render, screen, waitFor } from 'spec/helpers/testing-library';
-import userEvent from '@testing-library/user-event';
-import SpatialControl from 'src/explore/components/controls/SpatialControl';
-
-jest.mock('src/explore/components/controls/SelectControl', () => ({
-  __esModule: true,
-  default: ({
-    name,
-    value,
-    ariaLabel,
-  }: {
-    name: string;
-    value: string;
-    ariaLabel: string;
-  }) => (
-    <div data-test={`select-${name}`} aria-label={ariaLabel}>
-      {value}
-    </div>
-  ),
-}));
-
-jest.mock('src/explore/components/ControlHeader', () => ({
-  __esModule: true,
-  default: () => <div data-test="control-header" />,
-}));
-
-const defaultChoices: [string, string][] = [
-  ['longitude', 'longitude'],
-  ['latitude', 'latitude'],
-  ['geo_point', 'geo_point'],
-];
-
-test('renders label content showing column names for latlong type', async () => {
-  const onChange = jest.fn();
-  render(
-    <SpatialControl
-      onChange={onChange}
-      choices={defaultChoices}
-      value={{ type: 'latlong', latCol: 'latitude', lonCol: 'longitude' }}
-    />,
-  );
-
-  await waitFor(() => {
-    expect(screen.getByText('longitude | latitude')).toBeInTheDocument();
-  });
-});
-
-test('renders N/A when columns are not set', async () => {
-  const onChange = jest.fn();
-  render(<SpatialControl onChange={onChange} choices={[]} />);
-
-  await waitFor(() => {
-    expect(screen.getByText('N/A')).toBeInTheDocument();
-  });
-});
-
-test('calls onChange with latlong value when initialized with choices', async () => {
-  const onChange = jest.fn();
-  render(<SpatialControl onChange={onChange} choices={defaultChoices} />);
-
-  await waitFor(() => {
-    expect(onChange).toHaveBeenCalledWith(
-      {
-        type: 'latlong',
-        latCol: 'longitude',
-        lonCol: 'longitude',
-      },
-      [],
-    );
-  });
-});
-
-test('calls onChange with errors when no choices are available', async () => {
-  const onChange = jest.fn();
-  render(<SpatialControl onChange={onChange} choices={[]} />);
-
-  await waitFor(() => {
-    expect(onChange).toHaveBeenCalledWith(
-      {
-        type: 'latlong',
-        latCol: undefined,
-        lonCol: undefined,
-      },
-      ['Invalid lat/long configuration.'],
-    );
-  });
-});
-
-test('renders label with lonlatCol for delimited type', async () => {
-  const onChange = jest.fn();
-  render(
-    <SpatialControl
-      onChange={onChange}
-      choices={defaultChoices}
-      value={{ type: 'delimited', lonlatCol: 'geo_point', delimiter: ',' }}
-    />,
-  );
-
-  await waitFor(() => {
-    expect(screen.getByText('geo_point')).toBeInTheDocument();
-  });
-});
-
-test('renders label with geohashCol for geohash type', async () => {
-  const onChange = jest.fn();
-  render(
-    <SpatialControl
-      onChange={onChange}
-      choices={defaultChoices}
-      value={{ type: 'geohash', geohashCol: 'geo_point' }}
-    />,
-  );
-
-  await waitFor(() => {
-    expect(screen.getByText('geo_point')).toBeInTheDocument();
-  });
-});
-
-test('opens popover with three sections when label is clicked', async () => {
-  const onChange = jest.fn();
-  render(<SpatialControl onChange={onChange} choices={defaultChoices} />);
-
-  const label = await screen.findByText(/longitude/);
-  await userEvent.click(label);
-
-  await waitFor(() => {
-    expect(
-      screen.getByText('Longitude & Latitude columns'),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByText('Delimited long & lat single column'),
-    ).toBeInTheDocument();
-    expect(screen.getByText('Geohash')).toBeInTheDocument();
-  });
-});
-
-test('renders ControlHeader', () => {
-  const onChange = jest.fn();
-  render(<SpatialControl onChange={onChange} choices={defaultChoices} />);
-
-  expect(screen.getByTestId('control-header')).toBeInTheDocument();
-});
-
-test('defaults latCol and lonCol to first choice when no value provided', async () => {
-  const onChange = jest.fn();
-  render(<SpatialControl onChange={onChange} choices={defaultChoices} />);
-
-  await waitFor(() => {
-    expect(onChange).toHaveBeenCalledWith(
-      expect.objectContaining({
-        type: 'latlong',
-        latCol: 'longitude',
-        lonCol: 'longitude',
-      }),
-      [],
-    );
-  });
-
-  expect(screen.getByText('longitude | longitude')).toBeInTheDocument();
-});

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

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useState, useCallback, useEffect, type ReactNode } from 'react';
+import { Component, type ReactNode } from 'react';
 import {
   Row,
   Col,
@@ -25,6 +25,7 @@ import {
   Popover,
 } from '@superset-ui/core/components';
 import { t } from '@apache-superset/core/translation';
+
 import PopoverSection from '@superset-ui/core/components/PopoverSection';
 import ControlHeader from '../ControlHeader';
 import SelectControl from './SelectControl';
@@ -52,229 +53,212 @@ interface SpatialControlProps {
   value?: SpatialValue;
   animation?: boolean;
   choices?: [string, string][];
-  // ControlHeader props that may be passed through
-  name?: string;
-  label?: React.ReactNode;
-  description?: React.ReactNode;
-  // Remaining control-header props (validationErrors, hovered, warning,
-  // renderTrigger, ...) are forwarded to <ControlHeader />, mirroring the
-  // legacy class component's {...this.props} spread.
-  [key: string]: unknown;
 }
 
-export default function SpatialControl({
-  onChange = () => {},
-  value: propValue,
-  choices = [],
-  name,
-  label,
-  description,
-  ...restProps
-}: SpatialControlProps): JSX.Element {
-  const v = propValue || ({} as SpatialValue);
-  const defaultCol = choices.length > 0 ? choices[0][0] : undefined;
+interface SpatialControlState {
+  type: SpatialType;
+  delimiter: string;
+  latCol: string | undefined;
+  lonCol: string | undefined;
+  lonlatCol: string | undefined;
+  reverseCheckbox: boolean;
+  geohashCol: string | undefined;
+  value: SpatialValue | null;
+  errors: string[];
+}
 
-  const [type, setTypeState] = useState<SpatialType>(
-    v.type || spatialTypes.latlong,
-  );
-  const [delimiter, setDelimiter] = useState(v.delimiter || ',');
-  const [latCol, setLatCol] = useState<string | undefined>(
-    v.latCol || defaultCol,
-  );
-  const [lonCol, setLonCol] = useState<string | undefined>(
-    v.lonCol || defaultCol,
-  );
-  const [lonlatCol, setLonlatCol] = useState<string | undefined>(
-    v.lonlatCol || defaultCol,
-  );
-  const [reverseCheckbox, setReverseCheckbox] = useState(
-    v.reverseCheckbox || false,
-  );
-  const [geohashCol, setGeohashCol] = useState<string | undefined>(
-    v.geohashCol || defaultCol,
-  );
+export default class SpatialControl extends Component<
+  SpatialControlProps,
+  SpatialControlState
+> {
+  static defaultProps = {
+    onChange: () => {},
+    animation: true,
+    choices: [],
+  };
 
-  const computeValueAndErrors = useCallback((): {
-    value: SpatialValue;
-    errors: string[];
-  } => {
-    const computedValue: SpatialValue = { type };
+  constructor(props: SpatialControlProps) {
+    super(props);
+    const v = props.value || ({} as SpatialValue);
+    let defaultCol: string | undefined;
+    if (props.choices && props.choices.length > 0) {
+      defaultCol = props.choices[0][0];
+    }
+    this.state = {
+      type: v.type || spatialTypes.latlong,
+      delimiter: v.delimiter || ',',
+      latCol: v.latCol || defaultCol,
+      lonCol: v.lonCol || defaultCol,
+      lonlatCol: v.lonlatCol || defaultCol,
+      reverseCheckbox: v.reverseCheckbox || false,
+      geohashCol: v.geohashCol || defaultCol,
+      value: null,
+      errors: [],
+    };
+  }
+
+  componentDidMount(): void {
+    this.onChange();
+  }
+
+  onChange = (): void => {
+    const { type } = this.state;
+    const value: SpatialValue = { type };
     const errors: string[] = [];
     const errMsg = t('Invalid lat/long configuration.');
-
     if (type === spatialTypes.latlong) {
-      computedValue.latCol = latCol;
-      computedValue.lonCol = lonCol;
-      if (!lonCol || !latCol) {
+      value.latCol = this.state.latCol;
+      value.lonCol = this.state.lonCol;
+      if (!value.lonCol || !value.latCol) {
         errors.push(errMsg);
       }
     } else if (type === spatialTypes.delimited) {
-      computedValue.lonlatCol = lonlatCol;
-      computedValue.delimiter = delimiter;
-      computedValue.reverseCheckbox = reverseCheckbox;
-      if (!lonlatCol || !delimiter) {
+      value.lonlatCol = this.state.lonlatCol;
+      value.delimiter = this.state.delimiter;
+      value.reverseCheckbox = this.state.reverseCheckbox;
+      if (!value.lonlatCol || !value.delimiter) {
         errors.push(errMsg);
       }
     } else if (type === spatialTypes.geohash) {
-      computedValue.geohashCol = geohashCol;
-      computedValue.reverseCheckbox = reverseCheckbox;
-      if (!geohashCol) {
+      value.geohashCol = this.state.geohashCol;
+      value.reverseCheckbox = this.state.reverseCheckbox;
+      if (!value.geohashCol) {
         errors.push(errMsg);
       }
     }
-
-    return { value: computedValue, errors };
-  }, [type, latCol, lonCol, lonlatCol, delimiter, reverseCheckbox, geohashCol]);
-
-  useEffect(() => {
-    const { value: computedValue, errors } = computeValueAndErrors();
-    onChange(computedValue, errors);
-  }, [computeValueAndErrors, onChange]);
-
-  const setType = useCallback((newType: SpatialType): void => {
-    setTypeState(newType);
-  }, []);
-
-  const toggleCheckbox = useCallback((): void => {
-    setReverseCheckbox(prev => !prev);
-  }, []);
-
-  const { errors } = computeValueAndErrors();
-
-  const renderLabelContent = (): string | null => {
-    if (errors.length > 0) {
-      return 'N/A';
-    }
-    if (type === spatialTypes.latlong) {
-      return `${lonCol} | ${latCol}`;
-    }
-    if (type === spatialTypes.delimited) {
-      return `${lonlatCol}`;
-    }
-    if (type === spatialTypes.geohash) {
-      return `${geohashCol}`;
-    }
-    return null;
+    this.setState({ value, errors });
+    this.props.onChange?.(value, errors);
   };
 
-  const renderSelect = (
-    name: 'latCol' | 'lonCol' | 'lonlatCol' | 'geohashCol' | 'delimiter',
-    selectType: SpatialType,
-  ): ReactNode => {
-    const stateMap: Record<string, string | undefined> = {
-      latCol,
-      lonCol,
-      lonlatCol,
-      geohashCol,
-      delimiter,
-    };
-    const setterMap: Record<
-      string,
-      React.Dispatch<React.SetStateAction<string | undefined>>
-    > = {
-      latCol: setLatCol,
-      lonCol: setLonCol,
-      lonlatCol: setLonlatCol,
-      geohashCol: setGeohashCol,
-      delimiter: setDelimiter as React.Dispatch<
-        React.SetStateAction<string | undefined>
-      >,
-    };
+  setType = (type: SpatialType): void => {
+    this.setState({ type }, this.onChange);
+  };
 
+  toggleCheckbox = (): void => {
+    this.setState(
+      prevState => ({ reverseCheckbox: !prevState.reverseCheckbox }),
+      this.onChange,
+    );
+  };
+
+  renderLabelContent(): string | null {
+    if (this.state.errors.length > 0) {
+      return 'N/A';
+    }
+    if (this.state.type === spatialTypes.latlong) {
+      return `${this.state.lonCol} | ${this.state.latCol}`;
+    }
+    if (this.state.type === spatialTypes.delimited) {
+      return `${this.state.lonlatCol}`;
+    }
+    if (this.state.type === spatialTypes.geohash) {
+      return `${this.state.geohashCol}`;
+    }
+    return null;
+  }
+
+  renderSelect(name: keyof SpatialControlState, type: SpatialType): ReactNode {
     return (
       <SelectControl
         ariaLabel={name}
         name={name}
-        choices={choices}
-        value={stateMap[name]}
+        choices={this.props.choices}
+        value={this.state[name] as string}
         clearable={false}
         onFocus={() => {
-          setType(selectType);
+          this.setType(type);
         }}
-        onChange={(selectValue: string) => {
-          setterMap[name](selectValue);
+        onChange={(value: string) => {
+          this.setState(
+            { [name]: value } as unknown as SpatialControlState,
+            this.onChange,
+          );
         }}
       />
     );
-  };
+  }
 
-  const renderReverseCheckbox = (): ReactNode => (
-    <span>
-      {t('Reverse lat/long ')}
-      <Checkbox checked={reverseCheckbox} onChange={toggleCheckbox} />
-    </span>
-  );
+  renderReverseCheckbox(): ReactNode {
+    return (
+      <span>
+        {t('Reverse lat/long ')}
+        <Checkbox
+          checked={this.state.reverseCheckbox}
+          onChange={this.toggleCheckbox}
+        />
+      </span>
+    );
+  }
 
-  const renderPopoverContent = (): ReactNode => (
-    <div style={{ width: '300px' }}>
-      <PopoverSection
-        title={t('Longitude & Latitude columns')}
-        isSelected={type === spatialTypes.latlong}
-        onSelect={() => setType(spatialTypes.latlong)}
-      >
-        <Row gutter={16}>
-          <Col xs={24} md={12}>
-            {t('Longitude')}
-            {renderSelect('lonCol', spatialTypes.latlong)}
-          </Col>
-          <Col xs={24} md={12}>
-            {t('Latitude')}
-            {renderSelect('latCol', spatialTypes.latlong)}
-          </Col>
-        </Row>
-      </PopoverSection>
-      <PopoverSection
-        title={t('Delimited long & lat single column')}
-        info={t(
-          'Multiple formats accepted, look the geopy.points ' +
-            'Python library for more details',
-        )}
-        isSelected={type === spatialTypes.delimited}
-        onSelect={() => setType(spatialTypes.delimited)}
-      >
-        <Row gutter={16}>
-          <Col xs={24} md={12}>
-            {t('Column')}
-            {renderSelect('lonlatCol', spatialTypes.delimited)}
-          </Col>
-          <Col xs={24} md={12}>
-            {renderReverseCheckbox()}
-          </Col>
-        </Row>
-      </PopoverSection>
-      <PopoverSection
-        title={t('Geohash')}
-        isSelected={type === spatialTypes.geohash}
-        onSelect={() => setType(spatialTypes.geohash)}
-      >
-        <Row gutter={16}>
-          <Col xs={24} md={12}>
-            {t('Column')}
-            {renderSelect('geohashCol', spatialTypes.geohash)}
-          </Col>
-          <Col xs={24} md={12}>
-            {renderReverseCheckbox()}
-          </Col>
-        </Row>
-      </PopoverSection>
-    </div>
-  );
+  renderPopoverContent(): ReactNode {
+    return (
+      <div style={{ width: '300px' }}>
+        <PopoverSection
+          title={t('Longitude & Latitude columns')}
+          isSelected={this.state.type === spatialTypes.latlong}
+          onSelect={() => this.setType(spatialTypes.latlong)}
+        >
+          <Row gutter={16}>
+            <Col xs={24} md={12}>
+              {t('Longitude')}
+              {this.renderSelect('lonCol', spatialTypes.latlong)}
+            </Col>
+            <Col xs={24} md={12}>
+              {t('Latitude')}
+              {this.renderSelect('latCol', spatialTypes.latlong)}
+            </Col>
+          </Row>
+        </PopoverSection>
+        <PopoverSection
+          title={t('Delimited long & lat single column')}
+          info={t(
+            'Multiple formats accepted, look the geopy.points ' +
+              'Python library for more details',
+          )}
+          isSelected={this.state.type === spatialTypes.delimited}
+          onSelect={() => this.setType(spatialTypes.delimited)}
+        >
+          <Row gutter={16}>
+            <Col xs={24} md={12}>
+              {t('Column')}
+              {this.renderSelect('lonlatCol', spatialTypes.delimited)}
+            </Col>
+            <Col xs={24} md={12}>
+              {this.renderReverseCheckbox()}
+            </Col>
+          </Row>
+        </PopoverSection>
+        <PopoverSection
+          title={t('Geohash')}
+          isSelected={this.state.type === spatialTypes.geohash}
+          onSelect={() => this.setType(spatialTypes.geohash)}
+        >
+          <Row gutter={16}>
+            <Col xs={24} md={12}>
+              {t('Column')}
+              {this.renderSelect('geohashCol', spatialTypes.geohash)}
+            </Col>
+            <Col xs={24} md={12}>
+              {this.renderReverseCheckbox()}
+            </Col>
+          </Row>
+        </PopoverSection>
+      </div>
+    );
+  }
 
-  return (
-    <div>
-      <ControlHeader
-        {...restProps}
-        name={name}
-        label={label}
-        description={description}
-      />
-      <Popover
-        content={renderPopoverContent()}
-        placement="topLeft"
-        trigger="click"
-      >
-        <Label className="pointer">{renderLabelContent()}</Label>
-      </Popover>
-    </div>
-  );
+  render(): ReactNode {
+    return (
+      <div>
+        <ControlHeader {...this.props} />
+        <Popover
+          content={this.renderPopoverContent()}
+          placement="topLeft"
+          trigger="click"
+        >
+          <Label className="pointer">{this.renderLabelContent()}</Label>
+        </Popover>
+      </div>
+    );
+  }
 }

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

@@ -46,7 +46,7 @@ describe('TextArea', () => {
   });
 
   test('renders a AceEditor when language is specified', async () => {
-    const props = { ...defaultProps, language: 'markdown' as const };
+    const props = { ...defaultProps, language: 'markdown' };
     const { container } = render(<TextAreaControl {...props} />);
     expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
     await waitFor(() => {
@@ -55,7 +55,7 @@ describe('TextArea', () => {
   });
 
   test('calls onAreaEditorChange when entering in the AceEditor', () => {
-    const props = { ...defaultProps, language: 'markdown' as const };
+    const props = { ...defaultProps, language: 'markdown' };
     render(<TextAreaControl {...props} />);
     const textArea = screen.getByRole('textbox');
     fireEvent.change(textArea, { target: { value: 'x' } });

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

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useCallback, useEffect, useRef, useMemo } from 'react';
+import { Component } from 'react';
 import { debounce } from 'lodash';
 import {
   Input,
@@ -26,7 +26,8 @@ import {
   ModalTrigger,
 } from '@superset-ui/core/components';
 import { t } from '@apache-superset/core/translation';
-import { useTheme } from '@apache-superset/core/theme';
+import { withTheme } from '@apache-superset/core/theme';
+
 import 'ace-builds/src-min-noconflict/mode-handlebars';
 
 import ControlHeader from 'src/explore/components/ControlHeader';
@@ -34,10 +35,15 @@ import ControlHeader from 'src/explore/components/ControlHeader';
 interface HotkeyConfig {
   name: string;
   key: string;
-  descr?: string;
   func: () => void;
 }
 
+interface ThemeType {
+  colorBorder: string;
+  colorBgMask: string;
+  sizeUnit: number;
+}
+
 interface TextAreaControlProps {
   name?: string;
   onChange?: (value: string) => void;
@@ -68,221 +74,207 @@ interface TextAreaControlProps {
   tooltipOptions?: Record<string, unknown>;
   hotkeys?: HotkeyConfig[];
   debounceDelay?: number | null;
+  theme?: ThemeType;
   'aria-required'?: boolean;
   value?: string;
   [key: string]: unknown;
 }
 
-function TextAreaControl({
-  name,
-  onChange = () => {},
-  initialValue,
-  height = 250,
-  minLines = 3,
-  maxLines = 10,
-  offerEditInModal = true,
-  language,
-  aboveEditorSection,
-  readOnly = false,
-  resize = null,
-  textAreaStyles = {},
-  tooltipOptions = {},
-  hotkeys = [],
-  debounceDelay = null,
-  'aria-required': ariaRequired,
-  value,
-  ...restProps
-}: TextAreaControlProps) {
-  const theme = useTheme();
+const defaultProps = {
+  onChange: () => {},
+  height: 250,
+  minLines: 3,
+  maxLines: 10,
+  offerEditInModal: true,
+  readOnly: false,
+  resize: null,
+  textAreaStyles: {},
+  tooltipOptions: {},
+  hotkeys: [],
+  debounceDelay: null,
+};
 
-  const debouncedOnChangeRef = useRef<ReturnType<
-    typeof debounce<(value: string) => void>
-  > | null>(null);
+class TextAreaControl extends Component<TextAreaControlProps> {
+  static defaultProps = defaultProps;
 
-  // Create or update debounced onChange when dependencies change
-  useEffect(() => {
-    if (debounceDelay && onChange) {
-      if (debouncedOnChangeRef.current) {
-        debouncedOnChangeRef.current.cancel();
-      }
-      debouncedOnChangeRef.current = debounce(onChange, debounceDelay);
-    } else {
-      if (debouncedOnChangeRef.current) {
-        debouncedOnChangeRef.current.cancel();
-      }
-      debouncedOnChangeRef.current = null;
+  debouncedOnChange:
+    | ReturnType<typeof debounce<(value: string) => void>>
+    | undefined;
+
+  constructor(props: TextAreaControlProps) {
+    super(props);
+    if (props.debounceDelay && props.onChange) {
+      this.debouncedOnChange = debounce(props.onChange, props.debounceDelay);
     }
-  }, [onChange, debounceDelay]);
+  }
 
-  // Cleanup on unmount — flush pending debounced onChange so last edit isn't lost
-  useEffect(
-    () => () => {
-      if (debouncedOnChangeRef.current) {
-        debouncedOnChangeRef.current.flush();
+  componentDidUpdate(prevProps: TextAreaControlProps) {
+    if (
+      this.props.onChange !== prevProps.onChange &&
+      this.props.debounceDelay &&
+      this.props.onChange
+    ) {
+      if (this.debouncedOnChange) {
+        this.debouncedOnChange.cancel();
       }
-    },
-    [],
-  );
+      this.debouncedOnChange = debounce(
+        this.props.onChange,
+        this.props.debounceDelay,
+      );
+    }
+  }
 
-  const handleChange = useCallback(
-    (val: string | { target: { value: string } }) => {
-      const finalValue = typeof val === 'object' ? val.target.value : val;
-      if (debouncedOnChangeRef.current) {
-        debouncedOnChangeRef.current(finalValue);
-      } else {
-        onChange?.(finalValue);
-      }
-    },
-    [onChange],
-  );
+  handleChange(value: string | { target: { value: string } }) {
+    const finalValue = typeof value === 'object' ? value.target.value : value;
+    if (this.debouncedOnChange) {
+      this.debouncedOnChange(finalValue);
+    } else {
+      this.props.onChange?.(finalValue);
+    }
+  }
 
-  const onEditorLoad = useCallback(
-    (editor: {
-      commands: {
-        addCommand: (cmd: {
-          name: string;
-          bindKey: { win: string; mac: string };
-          exec: () => void;
-        }) => void;
+  componentWillUnmount() {
+    if (this.debouncedOnChange) {
+      this.debouncedOnChange.flush();
+    }
+  }
+
+  renderEditor(inModal = false) {
+    // Exclude props that shouldn't be passed to TextAreaEditor:
+    // - theme: TextAreaEditor expects theme as a string, not the theme object from withTheme HOC
+    // - height: ReactAce expects string, we pass number (height is controlled via minLines/maxLines)
+    // - other control-specific props and explicitly-set props to avoid duplicate/conflicting assignments
+    const {
+      theme,
+      height,
+      offerEditInModal,
+      aboveEditorSection,
+      resize,
+      textAreaStyles,
+      tooltipOptions,
+      hotkeys,
+      debounceDelay,
+      language,
+      initialValue,
+      readOnly,
+      name,
+      onChange,
+      value,
+      minLines: minLinesProp,
+      maxLines: maxLinesProp,
+      ...editorProps
+    } = this.props;
+    const minLines = inModal ? 40 : minLinesProp || 12;
+    if (language) {
+      const style: React.CSSProperties = {
+        border: theme?.colorBorder
+          ? `1px solid ${theme.colorBorder}`
+          : undefined,
+        minHeight: `${minLines}em`,
+        width: 'auto',
+        ...textAreaStyles,
       };
-    }) => {
-      hotkeys?.forEach(keyConfig => {
-        editor.commands.addCommand({
-          name: keyConfig.name,
-          bindKey: { win: keyConfig.key, mac: keyConfig.key },
-          exec: keyConfig.func,
-        });
-      });
-    },
-    [hotkeys],
-  );
-
-  const renderEditor = useCallback(
-    (inModal = false) => {
-      const effectiveMinLines = inModal ? 40 : minLines || 12;
-
-      if (language) {
-        const style: React.CSSProperties = {
-          border: theme?.colorBorder
-            ? `1px solid ${theme.colorBorder}`
-            : undefined,
-          minHeight: `${effectiveMinLines}em`,
-          width: 'auto',
-          ...textAreaStyles,
-        };
-
-        if (resize) {
-          style.resize = resize;
-          style.overflow = 'auto';
-        }
-
-        if (readOnly) {
-          style.backgroundColor = theme?.colorBgMask;
-        }
-
-        const codeEditor = (
-          <div>
-            <TextAreaEditor
-              mode={language}
-              style={style}
-              minLines={effectiveMinLines}
-              maxLines={inModal ? 1000 : maxLines}
-              editorProps={{ $blockScrolling: true }}
-              onLoad={onEditorLoad}
-              defaultValue={initialValue ?? value}
-              readOnly={readOnly}
-              key={name}
-              {...restProps}
-              onChange={handleChange}
-            />
-          </div>
-        );
-
-        if (tooltipOptions && Object.keys(tooltipOptions).length > 0) {
-          return <Tooltip {...tooltipOptions}>{codeEditor}</Tooltip>;
-        }
-        return codeEditor;
+      if (resize) {
+        style.resize = resize;
+        style.overflow = 'auto';
       }
-
-      const textArea = (
+      if (readOnly) {
+        style.backgroundColor = theme?.colorBgMask;
+      }
+      const onEditorLoad = (editor: {
+        commands: {
+          addCommand: (cmd: {
+            name: string;
+            bindKey: { win: string; mac: string };
+            exec: () => void;
+          }) => void;
+        };
+      }) => {
+        hotkeys?.forEach(keyConfig => {
+          editor.commands.addCommand({
+            name: keyConfig.name,
+            bindKey: { win: keyConfig.key, mac: keyConfig.key },
+            exec: keyConfig.func,
+          });
+        });
+      };
+      const codeEditor = (
         <div>
-          <Input.TextArea
-            placeholder={t('textarea')}
-            onChange={handleChange}
+          <TextAreaEditor
+            mode={language}
+            style={style}
+            minLines={minLines}
+            maxLines={inModal ? 1000 : maxLinesProp}
+            editorProps={{ $blockScrolling: true }}
+            onLoad={onEditorLoad}
             defaultValue={initialValue ?? value}
-            disabled={readOnly}
-            style={{ height }}
-            aria-required={ariaRequired}
+            readOnly={readOnly}
+            key={name}
+            {...editorProps}
+            onChange={this.handleChange.bind(this)}
           />
         </div>
       );
 
-      if (tooltipOptions && Object.keys(tooltipOptions).length > 0) {
-        return <Tooltip {...tooltipOptions}>{textArea}</Tooltip>;
+      if (tooltipOptions) {
+        return <Tooltip {...tooltipOptions}>{codeEditor}</Tooltip>;
       }
-      return textArea;
-    },
-    [
-      minLines,
-      maxLines,
-      language,
-      theme,
-      textAreaStyles,
-      resize,
-      readOnly,
-      onEditorLoad,
-      initialValue,
-      value,
-      name,
-      restProps,
-      handleChange,
-      tooltipOptions,
-      height,
-      ariaRequired,
-    ],
-  );
+      return codeEditor;
+    }
 
-  // Pass restProps directly to ControlHeader. The same pattern is used by
-  // ViewportControl elsewhere in this PR — listing every ControlHeader prop
-  // explicitly was a literal port of `this.props` access from the class
-  // version, but for a pure FC `{...restProps}` is equivalent and avoids the
-  // dep-array drift that a 12-key destructure tends to invite.
-  const controlHeader = useMemo(
-    () => <ControlHeader name={name} {...restProps} />,
-    [name, restProps],
-  );
-
-  const modalBody = useMemo(
-    () => (
-      <>
-        <div>{aboveEditorSection}</div>
-        {renderEditor(true)}
-      </>
-    ),
-    [aboveEditorSection, renderEditor],
-  );
-
-  return (
-    <div>
-      {controlHeader}
-      {renderEditor()}
-      {offerEditInModal && (
-        <ModalTrigger
-          modalTitle={controlHeader}
-          triggerNode={
-            <Button
-              buttonSize="small"
-              style={{ marginTop: theme?.sizeUnit ?? 4 }}
-            >
-              {t('Edit %s in modal', language)}
-            </Button>
-          }
-          modalBody={modalBody}
-          responsive
+    const textArea = (
+      <div>
+        <Input.TextArea
+          placeholder={t('textarea')}
+          onChange={this.handleChange.bind(this)}
+          defaultValue={this.props.initialValue}
+          disabled={this.props.readOnly}
+          style={{ height: this.props.height }}
+          aria-required={this.props['aria-required']}
         />
-      )}
-    </div>
-  );
+      </div>
+    );
+    if (this.props.tooltipOptions) {
+      return <Tooltip {...this.props.tooltipOptions}>{textArea}</Tooltip>;
+    }
+    return textArea;
+  }
+
+  renderModalBody() {
+    return (
+      <>
+        <div>{this.props.aboveEditorSection}</div>
+        {this.renderEditor(true)}
+      </>
+    );
+  }
+
+  render() {
+    const controlHeader = <ControlHeader {...this.props} />;
+    return (
+      <div>
+        {controlHeader}
+        {this.renderEditor()}
+        {this.props.offerEditInModal && (
+          <ModalTrigger
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            modalTitle={controlHeader as any}
+            triggerNode={
+              <Button
+                buttonSize="small"
+                style={{ marginTop: this.props.theme?.sizeUnit ?? 4 }}
+              >
+                {t('Edit %s in modal', this.props.language)}
+              </Button>
+            }
+            modalBody={this.renderModalBody()}
+            responsive
+          />
+        )}
+      </div>
+    );
+  }
 }
 
-export default TextAreaControl;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export default withTheme(TextAreaControl as any);

superset-frontend/src/explore/components/controls/TextControl/index.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useState, useCallback, useRef, useEffect, ChangeEvent } from 'react';
+import { Component, ChangeEvent } from 'react';
 import { legacyValidateNumber, legacyValidateInteger } from '@superset-ui/core';
 import { debounce } from 'lodash';
 import ControlHeader from 'src/explore/components/ControlHeader';
@@ -31,8 +31,8 @@ export interface TextControlProps<T extends InputValueType = InputValueType> {
   disabled?: boolean;
   isFloat?: boolean;
   isInt?: boolean;
-  onChange?: (value: T, errors: string[]) => void;
-  onFocus?: () => void;
+  onChange?: (value: T, errors: any) => void;
+  onFocus?: () => {};
   placeholder?: string;
   value?: T | null;
   controlId?: string;
@@ -42,111 +42,82 @@ export interface TextControlProps<T extends InputValueType = InputValueType> {
   showHeader?: boolean;
 }
 
+export interface TextControlState {
+  value: string;
+}
+
 const safeStringify = (value?: InputValueType | null) =>
   value == null ? '' : String(value);
 
-function TextControl<T extends InputValueType = InputValueType>({
-  name,
-  label,
-  description,
-  disabled,
-  isFloat,
-  isInt,
-  onChange,
-  onFocus,
-  placeholder,
-  value,
-  controlId,
-  renderTrigger,
-  validationErrors,
-  hovered,
-  showHeader,
-}: TextControlProps<T>) {
-  const [localValue, setLocalValue] = useState<string>(safeStringify(value));
-  const prevValueRef = useRef<T | null | undefined>(value);
+export default class TextControl<
+  T extends InputValueType = InputValueType,
+> extends Component<TextControlProps<T>, TextControlState> {
+  initialValue?: TextControlProps['value'];
 
-  const handleChange = useCallback(
-    (inputValue: string) => {
-      let parsedValue: InputValueType = inputValue;
-      const errors: string[] = [];
-
-      if (inputValue !== '' && isFloat) {
-        const error = legacyValidateNumber(inputValue);
-        if (error) {
-          errors.push(error);
-        } else {
-          parsedValue = inputValue.match(/.*([.0])$/g)
-            ? inputValue
-            : parseFloat(inputValue);
-        }
-      }
-
-      if (inputValue !== '' && isInt) {
-        const error = legacyValidateInteger(inputValue);
-        if (error) {
-          errors.push(error);
-        } else {
-          parsedValue = parseInt(inputValue, 10);
-        }
-      }
-
-      onChange?.(parsedValue as T, errors);
-    },
-    [isFloat, isInt, onChange],
-  );
-
-  const debouncedOnChangeRef = useRef(
-    debounce((inputValue: string, changeFn: (val: string) => void) => {
-      changeFn(inputValue);
-    }, Constants.FAST_DEBOUNCE),
-  );
-
-  useEffect(
-    () => () => {
-      debouncedOnChangeRef.current.cancel();
-    },
-    [],
-  );
-
-  const onChangeWrapper = useCallback(
-    (event: ChangeEvent<HTMLInputElement>) => {
-      const { value: newValue } = event.target;
-      setLocalValue(newValue);
-      debouncedOnChangeRef.current(newValue, handleChange);
-    },
-    [handleChange],
-  );
-
-  // Sync local value when prop value changes externally
-  let displayValue = localValue;
-  if (safeStringify(prevValueRef.current) !== safeStringify(value)) {
-    prevValueRef.current = value;
-    displayValue = safeStringify(value);
+  constructor(props: TextControlProps<T>) {
+    super(props);
+    this.initialValue = props.value;
+    this.state = {
+      value: safeStringify(this.initialValue),
+    };
   }
 
-  // Note: controlId and showHeader props are not used by ControlHeader
-  return (
-    <div>
-      <ControlHeader
-        name={name}
-        label={label}
-        description={description}
-        renderTrigger={renderTrigger}
-        validationErrors={validationErrors}
-        hovered={hovered}
-      />
-      <Input
-        type="text"
-        data-test="inline-name"
-        placeholder={placeholder}
-        onChange={onChangeWrapper}
-        onFocus={onFocus}
-        value={displayValue}
-        disabled={disabled}
-        aria-label={label}
-      />
-    </div>
-  );
-}
+  onChange = (inputValue: string) => {
+    let parsedValue: InputValueType = inputValue;
+    // Validation & casting
+    const errors = [];
+    if (inputValue !== '' && this.props.isFloat) {
+      const error = legacyValidateNumber(inputValue);
+      if (error) {
+        errors.push(error);
+      } else {
+        parsedValue = inputValue.match(/.*([.0])$/g)
+          ? inputValue
+          : parseFloat(inputValue);
+      }
+    }
+    if (inputValue !== '' && this.props.isInt) {
+      const error = legacyValidateInteger(inputValue);
+      if (error) {
+        errors.push(error);
+      } else {
+        parsedValue = parseInt(inputValue, 10);
+      }
+    }
+    this.props.onChange?.(parsedValue as T, errors);
+  };
 
-export default TextControl;
+  debouncedOnChange = debounce((inputValue: string) => {
+    this.onChange(inputValue);
+  }, Constants.FAST_DEBOUNCE);
+
+  onChangeWrapper = (event: ChangeEvent<HTMLInputElement>) => {
+    const { value } = event.target;
+    this.setState({ value }, () => {
+      this.debouncedOnChange(value);
+    });
+  };
+
+  render() {
+    let { value } = this.state;
+    if (this.initialValue !== this.props.value) {
+      this.initialValue = this.props.value;
+      value = safeStringify(this.props.value);
+    }
+    return (
+      <div>
+        <ControlHeader {...this.props} />
+        <Input
+          type="text"
+          data-test="inline-name"
+          placeholder={this.props.placeholder}
+          onChange={this.onChangeWrapper}
+          onFocus={this.props.onFocus}
+          value={value}
+          disabled={this.props.disabled}
+          aria-label={this.props.label}
+        />
+      </div>
+    );
+  }
+}

superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useCallback, useState } from 'react';
+import { Component } from 'react';
 import {
   Button,
   Col,
@@ -69,6 +69,23 @@ interface TimeSeriesColumnControlState {
   popoverVisible: boolean;
 }
 
+const defaultProps = {
+  label: t('Time series columns'),
+  tooltip: '',
+  colType: '',
+  width: '',
+  height: '',
+  timeLag: '',
+  timeRatio: '',
+  comparisonType: '',
+  showYAxis: false,
+  yAxisBounds: [null, null],
+  bounds: [null, null],
+  d3format: '',
+  dateFormat: '',
+  sparkType: 'line',
+};
+
 const comparisonTypeOptions = [
   { value: 'value', label: t('Actual value'), key: 'value' },
   { value: 'diff', label: t('Difference'), key: 'diff' },
@@ -111,118 +128,97 @@ const ButtonBar = styled.div`
   justify-content: center;
 `;
 
-function TimeSeriesColumnControl({
-  label: propLabel = t('Time series columns'),
-  tooltip: propTooltip = '',
-  colType: propColType = '',
-  width: propWidth = '',
-  height: propHeight = '',
-  timeLag: propTimeLag = '',
-  timeRatio: propTimeRatio = '',
-  comparisonType: propComparisonType = '',
-  showYAxis: propShowYAxis = false,
-  yAxisBounds: propYAxisBounds = [null, null],
-  bounds: propBounds = [null, null],
-  d3format: propD3format = '',
-  dateFormat: propDateFormat = '',
-  sparkType: propSparkType = 'line',
-  onChange,
-}: TimeSeriesColumnControlProps) {
-  const getInitialState = useCallback(
-    (): TimeSeriesColumnControlState => ({
-      label: propLabel ?? t('Time series columns'),
-      tooltip: propTooltip ?? '',
-      colType: propColType ?? '',
-      width: propWidth ?? '',
-      height: propHeight ?? '',
-      timeLag: propTimeLag ?? 0,
-      timeRatio: propTimeRatio ?? '',
-      comparisonType: propComparisonType ?? '',
-      showYAxis: propShowYAxis ?? false,
-      yAxisBounds: propYAxisBounds ?? [null, null],
-      bounds: propBounds ?? [null, null],
-      d3format: propD3format ?? '',
-      dateFormat: propDateFormat ?? '',
-      sparkType: propSparkType ?? 'line',
+export default class TimeSeriesColumnControl extends Component<
+  TimeSeriesColumnControlProps,
+  TimeSeriesColumnControlState
+> {
+  static defaultProps = defaultProps;
+
+  constructor(props: TimeSeriesColumnControlProps) {
+    super(props);
+
+    this.onSave = this.onSave.bind(this);
+    this.onClose = this.onClose.bind(this);
+    this.resetState = this.resetState.bind(this);
+    this.initialState = this.initialState.bind(this);
+    this.onPopoverVisibleChange = this.onPopoverVisibleChange.bind(this);
+
+    this.state = this.initialState();
+  }
+
+  initialState(): TimeSeriesColumnControlState {
+    return {
+      label: this.props.label ?? t('Time series columns'),
+      tooltip: this.props.tooltip ?? '',
+      colType: this.props.colType ?? '',
+      width: this.props.width ?? '',
+      height: this.props.height ?? '',
+      timeLag: this.props.timeLag ?? 0,
+      timeRatio: this.props.timeRatio ?? '',
+      comparisonType: this.props.comparisonType ?? '',
+      showYAxis: this.props.showYAxis ?? false,
+      yAxisBounds: this.props.yAxisBounds ?? [null, null],
+      bounds: this.props.bounds ?? [null, null],
+      d3format: this.props.d3format ?? '',
+      dateFormat: this.props.dateFormat ?? '',
+      sparkType: this.props.sparkType ?? 'line',
       popoverVisible: false,
-    }),
-    [
-      propLabel,
-      propTooltip,
-      propColType,
-      propWidth,
-      propHeight,
-      propTimeLag,
-      propTimeRatio,
-      propComparisonType,
-      propShowYAxis,
-      propYAxisBounds,
-      propBounds,
-      propD3format,
-      propDateFormat,
-      propSparkType,
-    ],
-  );
+    };
+  }
 
-  const [state, setState] =
-    useState<TimeSeriesColumnControlState>(getInitialState());
+  resetState() {
+    const initialState = this.initialState();
+    this.setState({ ...initialState });
+  }
 
-  const resetState = useCallback(() => {
-    setState(getInitialState());
-  }, [getInitialState]);
+  onSave() {
+    this.props.onChange?.(this.state);
+    this.setState({ popoverVisible: false });
+  }
 
-  const onSave = useCallback(() => {
-    onChange?.(state);
-    setState(prev => ({ ...prev, popoverVisible: false }));
-  }, [onChange, state]);
+  onClose() {
+    this.resetState();
+  }
 
-  const onClose = useCallback(() => {
-    resetState();
-  }, [resetState]);
+  onSelectChange(attr: string, opt: string) {
+    this.setState(prevState => ({ ...prevState, [attr]: opt }));
+  }
 
-  const onSelectChange = useCallback((attr: string, opt: string) => {
-    setState(prev => ({ ...prev, [attr]: opt }));
-  }, []);
+  onTextInputChange(attr: string, event: React.ChangeEvent<HTMLInputElement>) {
+    this.setState(prevState => ({ ...prevState, [attr]: event.target.value }));
+  }
 
-  const onTextInputChange = useCallback(
-    (attr: string, event: React.ChangeEvent<HTMLInputElement>) => {
-      setState(prev => ({ ...prev, [attr]: event.target.value }));
-    },
-    [],
-  );
+  onCheckboxChange(attr: string, value: boolean) {
+    this.setState(prevState => ({ ...prevState, [attr]: value }));
+  }
 
-  const onCheckboxChange = useCallback((attr: string, value: boolean) => {
-    setState(prev => ({ ...prev, [attr]: value }));
-  }, []);
+  onBoundsChange(bounds: (number | null)[]) {
+    this.setState({ bounds });
+  }
 
-  const onBoundsChange = useCallback((bounds: (number | null)[]) => {
-    setState(prev => ({ ...prev, bounds }));
-  }, []);
+  onPopoverVisibleChange(popoverVisible: boolean) {
+    if (popoverVisible) {
+      this.setState({ popoverVisible });
+    } else {
+      this.resetState();
+    }
+  }
 
-  const onPopoverVisibleChange = useCallback(
-    (popoverVisible: boolean) => {
-      if (popoverVisible) {
-        setState(prev => ({ ...prev, popoverVisible }));
-      } else {
-        resetState();
-      }
-    },
-    [resetState],
-  );
+  onYAxisBoundsChange(yAxisBounds: (number | null)[]) {
+    this.setState({ yAxisBounds });
+  }
 
-  const onYAxisBoundsChange = useCallback((yAxisBounds: (number | null)[]) => {
-    setState(prev => ({ ...prev, yAxisBounds }));
-  }, []);
+  textSummary() {
+    return `${this.props.label ?? ''}`;
+  }
 
-  const textSummary = useCallback(() => `${propLabel ?? ''}`, [propLabel]);
-
-  const formRow = useCallback(
-    (
-      label: string,
-      tooltip: string,
-      ttLabel: string,
-      control: React.ReactNode,
-    ) => (
+  formRow(
+    label: string,
+    tooltip: string,
+    ttLabel: string,
+    control: React.ReactNode,
+  ) {
+    return (
       <StyledRow>
         <StyledCol xs={24} md={11}>
           {label}
@@ -232,241 +228,214 @@ function TimeSeriesColumnControl({
           {control}
         </Col>
       </StyledRow>
-    ),
-    [],
-  );
-
-  const renderPopover = useCallback(() => {
-    const handleLabelChange = (e: React.ChangeEvent<HTMLInputElement>) =>
-      onTextInputChange('label', e);
-    const handleTooltipChange = (e: React.ChangeEvent<HTMLInputElement>) =>
-      onTextInputChange('tooltip', e);
-    const handleColTypeChange = (opt: string) => onSelectChange('colType', opt);
-    const handleSparkTypeChange = (opt: string) =>
-      onSelectChange('sparkType', opt);
-    const handleWidthChange = (e: React.ChangeEvent<HTMLInputElement>) =>
-      onTextInputChange('width', e);
-    const handleHeightChange = (e: React.ChangeEvent<HTMLInputElement>) =>
-      onTextInputChange('height', e);
-    const handleTimeLagChange = (e: React.ChangeEvent<HTMLInputElement>) =>
-      onTextInputChange('timeLag', e);
-    const handleTimeRatioChange = (e: React.ChangeEvent<HTMLInputElement>) =>
-      onTextInputChange('timeRatio', e);
-    const handleComparisonTypeChange = (opt: string) =>
-      onSelectChange('comparisonType', opt);
-    const handleShowYAxisChange = (value: boolean) =>
-      onCheckboxChange('showYAxis', value);
-    const handleD3formatChange = (e: React.ChangeEvent<HTMLInputElement>) =>
-      onTextInputChange('d3format', e);
-    const handleDateFormatChange = (e: React.ChangeEvent<HTMLInputElement>) =>
-      onTextInputChange('dateFormat', e);
+    );
+  }
 
+  renderPopover() {
     return (
       <div id="ts-col-popo" style={{ width: 320 }}>
-        {formRow(
+        {this.formRow(
           t('Label'),
           t('The column header label'),
           'time-lag',
           <Input
-            value={state.label}
-            onChange={handleLabelChange}
+            value={this.state.label}
+            onChange={this.onTextInputChange.bind(this, 'label')}
             placeholder={t('Label')}
           />,
         )}
-        {formRow(
+        {this.formRow(
           t('Tooltip'),
           t('Column header tooltip'),
           'col-tooltip',
           <Input
-            value={state.tooltip}
-            onChange={handleTooltipChange}
+            value={this.state.tooltip}
+            onChange={this.onTextInputChange.bind(this, 'tooltip')}
             placeholder={t('Tooltip')}
           />,
         )}
-        {formRow(
+        {this.formRow(
           t('Type'),
           t('Type of comparison, value difference or percentage'),
           'col-type',
           <Select
             ariaLabel={t('Type')}
-            value={state.colType || undefined}
-            onChange={handleColTypeChange}
+            value={this.state.colType || undefined}
+            onChange={this.onSelectChange.bind(this, 'colType')}
             options={colTypeOptions}
           />,
         )}
         <Divider />
-        {state.colType === 'spark' &&
-          formRow(
+        {this.state.colType === 'spark' &&
+          this.formRow(
             t('Chart type'),
             t('Type of chart to display in sparkline'),
             'spark-type',
             <Select
               ariaLabel={t('Chart Type')}
-              value={state.sparkType || undefined}
-              onChange={handleSparkTypeChange}
+              value={this.state.sparkType || undefined}
+              onChange={this.onSelectChange.bind(this, 'sparkType')}
               options={sparkTypeOptions}
             />,
           )}
-        {state.colType === 'spark' &&
-          formRow(
+        {this.state.colType === 'spark' &&
+          this.formRow(
             t('Width'),
             t('Width of the sparkline'),
             'spark-width',
             <Input
-              value={state.width}
-              onChange={handleWidthChange}
+              value={this.state.width}
+              onChange={this.onTextInputChange.bind(this, 'width')}
               placeholder={t('Width')}
             />,
           )}
-        {state.colType === 'spark' &&
-          formRow(
+        {this.state.colType === 'spark' &&
+          this.formRow(
             t('Height'),
             t('Height of the sparkline'),
             'spark-width',
             <Input
-              value={state.height}
-              onChange={handleHeightChange}
+              value={this.state.height}
+              onChange={this.onTextInputChange.bind(this, 'height')}
               placeholder={t('Height')}
             />,
           )}
-        {['time', 'avg'].indexOf(state.colType) >= 0 &&
-          formRow(
+        {['time', 'avg'].indexOf(this.state.colType) >= 0 &&
+          this.formRow(
             t('Time lag'),
             t(
               'Number of periods to compare against. You can use negative numbers to compare from the beginning of the time range.',
             ),
             'time-lag',
             <Input
-              value={state.timeLag}
-              onChange={handleTimeLagChange}
+              value={this.state.timeLag}
+              onChange={this.onTextInputChange.bind(this, 'timeLag')}
               placeholder={t('Time Lag')}
             />,
           )}
-        {['spark'].indexOf(state.colType) >= 0 &&
-          formRow(
+        {['spark'].indexOf(this.state.colType) >= 0 &&
+          this.formRow(
             t('Time ratio'),
             t('Number of periods to ratio against'),
             'time-ratio',
             <Input
-              value={state.timeRatio}
-              onChange={handleTimeRatioChange}
+              value={this.state.timeRatio}
+              onChange={this.onTextInputChange.bind(this, 'timeRatio')}
               placeholder={t('Time Ratio')}
             />,
           )}
-        {state.colType === 'time' &&
-          formRow(
+        {this.state.colType === 'time' &&
+          this.formRow(
             t('Type'),
             t('Type of comparison, value difference or percentage'),
             'comp-type',
             <Select
               ariaLabel={t('Type')}
-              value={state.comparisonType || undefined}
-              onChange={handleComparisonTypeChange}
+              value={this.state.comparisonType || undefined}
+              onChange={this.onSelectChange.bind(this, 'comparisonType')}
               options={comparisonTypeOptions}
             />,
           )}
-        {state.colType === 'spark' &&
-          formRow(
+        {this.state.colType === 'spark' &&
+          this.formRow(
             t('Show Y-axis'),
             t(
               'Show Y-axis on the sparkline. Will display the manually set min/max if set or min/max values in the data otherwise.',
             ),
             'show-y-axis-bounds',
             <CheckboxControl
-              value={state.showYAxis}
-              onChange={handleShowYAxisChange}
+              value={this.state.showYAxis}
+              onChange={this.onCheckboxChange.bind(this, 'showYAxis')}
             />,
           )}
-        {state.colType === 'spark' &&
-          formRow(
+        {this.state.colType === 'spark' &&
+          this.formRow(
             t('Y-axis bounds'),
             t('Manually set min/max values for the y-axis.'),
             'y-axis-bounds',
             <BoundsControl
-              value={state.yAxisBounds}
-              onChange={onYAxisBoundsChange}
+              value={this.state.yAxisBounds}
+              onChange={this.onYAxisBoundsChange.bind(this)}
             />,
           )}
-        {state.colType !== 'spark' &&
-          formRow(
+        {this.state.colType !== 'spark' &&
+          this.formRow(
             t('Color bounds'),
             t(`Number bounds used for color encoding from red to blue.
                Reverse the numbers for blue to red. To get pure red or blue,
                you can enter either only min or max.`),
             'bounds',
-            <BoundsControl value={state.bounds} onChange={onBoundsChange} />,
+            <BoundsControl
+              value={this.state.bounds}
+              onChange={this.onBoundsChange.bind(this)}
+            />,
           )}
-        {formRow(
+        {this.formRow(
           t('Number format'),
           t('Optional d3 number format string'),
           'd3-format',
           <Input
-            value={state.d3format}
-            onChange={handleD3formatChange}
+            value={this.state.d3format}
+            onChange={this.onTextInputChange.bind(this, 'd3format')}
             placeholder={t('Number format string')}
           />,
         )}
-        {state.colType === 'spark' &&
-          formRow(
+        {this.state.colType === 'spark' &&
+          this.formRow(
             t('Date format'),
             t('Optional d3 date format string'),
             'date-format',
             <Input
-              value={state.dateFormat}
-              onChange={handleDateFormatChange}
+              value={this.state.dateFormat}
+              onChange={this.onTextInputChange.bind(this, 'dateFormat')}
               placeholder={t('Date format string')}
             />,
           )}
         <ButtonBar>
-          <Button buttonSize="small" onClick={onClose} cta>
+          <Button buttonSize="small" onClick={this.onClose} cta>
             {t('Close')}
           </Button>
-          <Button buttonStyle="primary" buttonSize="small" onClick={onSave} cta>
+          <Button
+            buttonStyle="primary"
+            buttonSize="small"
+            onClick={this.onSave}
+            cta
+          >
             {t('Save')}
           </Button>
         </ButtonBar>
       </div>
     );
-  }, [
-    state,
-    formRow,
-    onTextInputChange,
-    onSelectChange,
-    onCheckboxChange,
-    onBoundsChange,
-    onYAxisBoundsChange,
-    onClose,
-    onSave,
-  ]);
+  }
 
-  return (
-    <span>
-      {textSummary()}{' '}
-      <ControlPopover
-        trigger="click"
-        content={renderPopover()}
-        title={t('Column Configuration')}
-        open={state.popoverVisible}
-        onOpenChange={onPopoverVisibleChange}
-      >
-        <span
-          css={theme => ({
-            display: 'inline-block',
-            cursor: 'pointer',
-            '& svg path': {
-              fill: theme.colorIcon,
-              transition: `fill ${theme.motionDurationMid} ease-out`,
-            },
-            '&:hover svg path': {
-              fill: theme.colorPrimary,
-            },
-          })}
+  render() {
+    return (
+      <span>
+        {this.textSummary()}{' '}
+        <ControlPopover
+          trigger="click"
+          content={this.renderPopover()}
+          title={t('Column Configuration')}
+          open={this.state.popoverVisible}
+          onOpenChange={this.onPopoverVisibleChange}
         >
-          <Icons.EditOutlined iconSize="s" />
-        </span>
-      </ControlPopover>
-    </span>
-  );
+          <span
+            css={theme => ({
+              display: 'inline-block',
+              cursor: 'pointer',
+              '& svg path': {
+                fill: theme.colorIcon,
+                transition: `fill ${theme.motionDurationMid} ease-out`,
+              },
+              '&:hover svg path': {
+                fill: theme.colorPrimary,
+              },
+            })}
+          >
+            <Icons.EditOutlined iconSize="s" />
+          </span>
+        </ControlPopover>
+      </span>
+    );
+  }
 }
-
-export default TimeSeriesColumnControl;

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

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useCallback, type ReactNode } from 'react';
+import { Component, type ReactNode } from 'react';
 import { t } from '@apache-superset/core/translation';
 import { Popover, FormLabel, Label } from '@superset-ui/core/components';
 import { decimalToSexagesimal } from 'geolib';
@@ -55,57 +55,63 @@ interface ViewportControlProps {
   name: string;
 }
 
-export default function ViewportControl({
-  onChange = () => {},
-  value = DEFAULT_VIEWPORT,
-  name,
-  ...restProps
-}: ViewportControlProps): JSX.Element {
-  const handleChange = useCallback(
-    (ctrl: keyof Viewport, ctrlValue: number): void => {
-      onChange({
-        ...value,
-        [ctrl]: ctrlValue,
-      });
-    },
-    [onChange, value],
-  );
-
-  const renderTextControl = (ctrl: keyof Viewport): ReactNode => (
-    <div key={ctrl}>
-      <FormLabel>{ctrl}</FormLabel>
-      <TextControl
-        value={value?.[ctrl]}
-        onChange={(ctrlValue: number) => handleChange(ctrl, ctrlValue)}
-        isFloat
-      />
-    </div>
-  );
-
-  const renderPopover = (): ReactNode => (
-    <div id={`filter-popover-${name}`}>
-      {PARAMS.map(ctrl => renderTextControl(ctrl))}
-    </div>
-  );
-
-  const renderLabel = (): string => {
-    if (value?.longitude && value?.latitude) {
-      return `${decimalToSexagesimal(value.longitude)} | ${decimalToSexagesimal(value.latitude)}`;
-    }
-    return 'N/A';
+export default class ViewportControl extends Component<ViewportControlProps> {
+  static defaultProps = {
+    onChange: () => {},
+    default: { type: 'fix', value: 5 },
+    value: DEFAULT_VIEWPORT,
   };
 
-  return (
-    <div>
-      <ControlHeader {...restProps} name={name} />
-      <Popover
-        trigger="click"
-        placement="right"
-        content={renderPopover()}
-        title={t('Viewport')}
-      >
-        <Label className="pointer">{renderLabel()}</Label>
-      </Popover>
-    </div>
-  );
+  onChange = (ctrl: keyof Viewport, value: number): void => {
+    this.props.onChange?.({
+      ...this.props.value!,
+      [ctrl]: value,
+    });
+  };
+
+  renderTextControl(ctrl: keyof Viewport): ReactNode {
+    return (
+      <div key={ctrl}>
+        <FormLabel>{ctrl}</FormLabel>
+        <TextControl
+          value={this.props.value?.[ctrl]}
+          onChange={(value: number) => this.onChange(ctrl, value)}
+          isFloat
+        />
+      </div>
+    );
+  }
+
+  renderPopover(): ReactNode {
+    return (
+      <div id={`filter-popover-${this.props.name}`}>
+        {PARAMS.map(ctrl => this.renderTextControl(ctrl))}
+      </div>
+    );
+  }
+
+  renderLabel(): string {
+    if (this.props.value?.longitude && this.props.value?.latitude) {
+      return `${decimalToSexagesimal(
+        this.props.value.longitude,
+      )} | ${decimalToSexagesimal(this.props.value.latitude)}`;
+    }
+    return 'N/A';
+  }
+
+  render(): ReactNode {
+    return (
+      <div>
+        <ControlHeader {...this.props} />
+        <Popover
+          trigger="click"
+          placement="right"
+          content={this.renderPopover()}
+          title={t('Viewport')}
+        >
+          <Label className="pointer">{this.renderLabel()}</Label>
+        </Popover>
+      </div>
+    );
+  }
 }

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

@@ -16,15 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import {
-  useState,
-  useEffect,
-  FC,
-  useMemo,
-  ReactNode,
-  Component,
-  ErrorInfo,
-} from 'react';
+import { useState, useEffect, FC, PureComponent, useMemo } from 'react';
 import rison from 'rison';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
@@ -142,7 +134,6 @@ const RightMenu = ({
     EXCEL_EXTENSIONS,
     ALLOWED_EXTENSIONS,
     HAS_GSHEETS_INSTALLED,
-    SCARF_ANALYTICS,
   } = useSelector<any, ExtensionConfigs>(state => state.common.conf);
   const [showDatabaseModal, setShowDatabaseModal] = useState<boolean>(false);
   const [showCSVUploadModal, setShowCSVUploadModal] = useState<boolean>(false);
@@ -559,11 +550,11 @@ const RightMenu = ({
               style: { height: 'auto', minHeight: 'auto' },
               label: (
                 <div
-                  css={(themeArg: SupersetTheme) => css`
-                    font-size: ${themeArg.fontSizeSM}px;
-                    color: ${themeArg.colorTextSecondary || themeArg.colorText};
+                  css={(theme: SupersetTheme) => css`
+                    font-size: ${theme.fontSizeSM}px;
+                    color: ${theme.colorTextSecondary || theme.colorText};
                     white-space: pre-wrap;
-                    padding: ${themeArg.sizeUnit}px ${themeArg.sizeUnit * 2}px;
+                    padding: ${theme.sizeUnit}px ${theme.sizeUnit * 2}px;
                   `}
                 >
                   {[
@@ -790,7 +781,6 @@ const RightMenu = ({
         // segments in the Scarf pixel URL.
         sha={navbarRight.version_sha || undefined}
         build={navbarRight.build_number || undefined}
-        enabled={SCARF_ANALYTICS !== false}
       />
     </StyledDiv>
   );
@@ -810,39 +800,23 @@ const RightMenuWithQueryWrapper: FC<RightMenuProps> = props => {
 // Superset still has multiple entry points, and not all of them have
 // the same setup, and critically, not all of them have the QueryParamProvider.
 // This wrapper ensures the RightMenu renders regardless of the provider being present.
-// Note: Error boundaries require class components in React - there is no hooks equivalent
-// for getDerivedStateFromError and componentDidCatch.
-interface RightMenuErrorWrapperState {
-  hasError: boolean;
-}
+class RightMenuErrorWrapper extends PureComponent<RightMenuProps> {
+  state = {
+    hasError: false,
+  };
 
-// eslint-disable-next-line react-prefer-function-component/react-prefer-function-component -- componentDidCatch requires class component
-class RightMenuErrorWrapper extends Component<
-  RightMenuProps & { children?: ReactNode },
-  RightMenuErrorWrapperState
-> {
-  constructor(props: RightMenuProps & { children?: ReactNode }) {
-    super(props);
-    this.state = { hasError: false };
-  }
-
-  static getDerivedStateFromError(): RightMenuErrorWrapperState {
+  static getDerivedStateFromError() {
     return { hasError: true };
   }
 
-  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
-    console.error('RightMenu error caught:', error, errorInfo);
-  }
-
   noop = () => {};
 
   render() {
-    const { children, ...rightMenuProps } = this.props;
     if (this.state.hasError) {
-      return <RightMenu setQuery={this.noop} {...rightMenuProps} />;
+      return <RightMenu setQuery={this.noop} {...this.props} />;
     }
 
-    return children;
+    return this.props.children;
   }
 }
 

superset-frontend/src/features/home/types.ts

@@ -36,7 +36,6 @@ export interface ExtensionConfigs {
   COLUMNAR_EXTENSIONS: Array<any>;
   EXCEL_EXTENSIONS: Array<any>;
   HAS_GSHEETS_INSTALLED: boolean;
-  SCARF_ANALYTICS?: boolean;
 }
 export interface RightMenuProps {
   align: 'flex-start' | 'flex-end';

superset-frontend/src/pages/ChartCreation/ChartCreation.test.tsx

@@ -24,8 +24,10 @@ import {
   waitFor,
 } from 'spec/helpers/testing-library';
 import fetchMock from 'fetch-mock';
+import { createMemoryHistory } from 'history';
 import { ChartCreation } from 'src/pages/ChartCreation';
 import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';
+import { supersetTheme } from '@apache-superset/core/theme';
 
 jest.mock('src/components/DynamicPlugins', () => ({
   usePluginContext: () => ({
@@ -78,20 +80,24 @@ const mockUserWithDatasetWrite: UserWithPermissionsAndRoles = {
   isAnonymous: false,
   groups: [],
 };
+const history = createMemoryHistory();
 
-const mockHistoryPush = jest.fn();
+history.push = jest.fn();
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useHistory: () => ({
-    push: mockHistoryPush,
-  }),
-}));
+const routeProps = {
+  history,
+  location: {} as any,
+  match: {} as any,
+};
 
 async function renderComponent(user = mockUser) {
-  mockHistoryPush.mockClear();
   const rendered = render(
-    <ChartCreation user={user} addSuccessToast={() => null} />,
+    <ChartCreation
+      user={user}
+      addSuccessToast={() => null}
+      theme={supersetTheme}
+      {...routeProps}
+    />,
     {
       useRedux: true,
       useRouter: true,
@@ -165,7 +171,7 @@ test('double-click viz type does nothing if no datasource is selected', async ()
   expect(
     screen.getByRole('button', { name: 'Create new chart' }),
   ).toBeDisabled();
-  expect(mockHistoryPush).not.toHaveBeenCalled();
+  expect(history.push).not.toHaveBeenCalled();
 });
 
 test('double-click viz type submits with formatted URL if datasource is selected', async () => {
@@ -187,7 +193,7 @@ test('double-click viz type submits with formatted URL if datasource is selected
     screen.getByRole('button', { name: 'Create new chart' }),
   ).toBeEnabled();
   const formattedUrl = '/explore/?viz_type=table&datasource=table_1__table';
-  expect(mockHistoryPush).toHaveBeenCalledWith(formattedUrl);
+  expect(history.push).toHaveBeenCalledWith(formattedUrl);
 });
 
 test('dropdown displays matching datasets when user types a search term', async () => {
@@ -317,10 +323,18 @@ test('shows loading spinner when dataset parameter is present in URL', async ()
     search: '?dataset=flights',
   } as Location);
 
-  render(<ChartCreation user={mockUser} addSuccessToast={() => null} />, {
-    useRedux: true,
-    useRouter: true,
-  });
+  render(
+    <ChartCreation
+      user={mockUser}
+      addSuccessToast={() => null}
+      theme={supersetTheme}
+      {...routeProps}
+    />,
+    {
+      useRedux: true,
+      useRouter: true,
+    },
+  );
 
   expect(screen.getByRole('status')).toBeInTheDocument();
 

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

@@ -16,14 +16,15 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ReactNode, useState, useEffect, useCallback, useMemo } from 'react';
+import { PureComponent, ReactNode } from 'react';
 import rison from 'rison';
 import { t } from '@apache-superset/core/translation';
 import { isDefined, JsonResponse, SupersetClient } from '@superset-ui/core';
-import { styled, useTheme } from '@apache-superset/core/theme';
+import { styled } from '@apache-superset/core/theme';
+import { withTheme, Theme } from '@emotion/react';
 import { getUrlParam } from 'src/utils/urlUtils';
 import { FilterPlugins, URL_PARAMS } from 'src/constants';
-import { Link, useHistory } from 'react-router-dom';
+import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
 import {
   AsyncSelect,
   Button,
@@ -48,11 +49,20 @@ import {
   datasetLabelLower,
 } from 'src/features/semanticLayers/label';
 
-export interface ChartCreationProps {
+export interface ChartCreationProps extends RouteComponentProps {
   user: UserWithPermissionsAndRoles;
   addSuccessToast: (arg: string) => void;
+  theme: Theme;
 }
 
+export type ChartCreationState = {
+  datasource?: { label: string | ReactNode; value: string };
+  datasetName?: string | string[] | null;
+  vizType: string | null;
+  canCreateDataset: boolean;
+  loading: boolean;
+};
+
 const ESTIMATED_NAV_HEIGHT = 56;
 const ELEMENTS_EXCEPT_VIZ_GALLERY = ESTIMATED_NAV_HEIGHT + 250;
 
@@ -167,221 +177,224 @@ const StyledStepDescription = styled.div`
   `}
 `;
 
-export const ChartCreation = ({
-  user,
-  addSuccessToast,
-}: ChartCreationProps) => {
-  const theme = useTheme();
-  const history = useHistory();
+export class ChartCreation extends PureComponent<
+  ChartCreationProps,
+  ChartCreationState
+> {
+  constructor(props: ChartCreationProps) {
+    super(props);
+    const hasDatasetParam = new URLSearchParams(window.location.search).has(
+      'dataset',
+    );
+    this.state = {
+      vizType: null,
+      canCreateDataset: findPermission(
+        'can_write',
+        'Dataset',
+        props.user.roles,
+      ),
+      loading: hasDatasetParam,
+    };
 
-  const canCreateDataset = useMemo(
-    () => findPermission('can_write', 'Dataset', user.roles),
-    [user.roles],
-  );
+    this.changeDatasource = this.changeDatasource.bind(this);
+    this.changeVizType = this.changeVizType.bind(this);
+    this.gotoSlice = this.gotoSlice.bind(this);
+    this.loadDatasources = this.loadDatasources.bind(this);
+    this.onVizTypeDoubleClick = this.onVizTypeDoubleClick.bind(this);
+  }
 
-  const hasDatasetParam = useMemo(
-    () => new URLSearchParams(window.location.search).has('dataset'),
-    [],
-  );
+  componentDidMount() {
+    const params = new URLSearchParams(window.location.search).get('dataset');
+    if (params) {
+      this.loadDatasources(params, 0, 1, true)
+        .then(r => {
+          const datasource = r.data[0];
+          this.setState({ datasource, loading: false });
+        })
+        .catch(() => {
+          this.setState({ loading: false });
+        });
+      this.props.addSuccessToast(t('The dataset has been saved'));
+    }
+  }
 
-  const [datasource, setDatasource] = useState<
-    { label: string | ReactNode; value: string } | undefined
-  >(undefined);
-  const [vizType, setVizType] = useState<string | null>(null);
-  const [loading, setLoading] = useState<boolean>(hasDatasetParam);
-
-  const exploreUrl = useCallback(() => {
+  exploreUrl() {
     const dashboardId = getUrlParam(URL_PARAMS.dashboardId);
-    let url = `/explore/?viz_type=${vizType}&datasource=${datasource?.value}`;
+    let url = `/explore/?viz_type=${this.state.vizType}&datasource=${this.state.datasource?.value}`;
     if (isDefined(dashboardId)) {
       url += `&dashboard_id=${dashboardId}`;
     }
     return url;
-  }, [vizType, datasource?.value]);
-
-  const gotoSlice = useCallback(() => {
-    history.push(exploreUrl());
-  }, [history, exploreUrl]);
-
-  const changeDatasource = useCallback(
-    (newDatasource: { label: string | ReactNode; value: string }) => {
-      setDatasource(newDatasource);
-    },
-    [],
-  );
-
-  const changeVizType = useCallback((newVizType: string | null) => {
-    setVizType(newVizType);
-  }, []);
-
-  const isBtnDisabled = useCallback(
-    () => !(datasource?.value && vizType),
-    [datasource?.value, vizType],
-  );
-
-  const onVizTypeDoubleClick = useCallback(() => {
-    if (!isBtnDisabled()) {
-      gotoSlice();
-    }
-  }, [isBtnDisabled, gotoSlice]);
-
-  const loadDatasources = useCallback(
-    (search: string, page: number, pageSize: number, exactMatch = false) => {
-      const query = rison.encode({
-        columns: [
-          'id',
-          'table_name',
-          'datasource_type',
-          'database.database_name',
-          'schema',
-        ],
-        filters: [
-          { col: 'table_name', opr: exactMatch ? 'eq' : 'ct', value: search },
-        ],
-        page,
-        page_size: pageSize,
-        order_column: 'table_name',
-        order_direction: 'asc',
-      });
-      return SupersetClient.get({
-        endpoint: `/api/v1/dataset/?q=${query}`,
-      }).then((response: JsonResponse) => {
-        const list: {
-          id: number;
-          label: string | ReactNode;
-          value: string;
-          table_name: string;
-        }[] = response.json.result.map((item: Dataset) => ({
-          id: item.id,
-          value: `${item.id}__${item.datasource_type}`,
-          label: DatasetSelectLabel(item),
-          table_name: item.table_name,
-        }));
-        return {
-          data: list,
-          totalCount: response.json.count,
-        };
-      });
-    },
-    [],
-  );
-
-  useEffect(() => {
-    const params = new URLSearchParams(window.location.search).get('dataset');
-    if (params) {
-      loadDatasources(params, 0, 1, true)
-        .then(r => {
-          const newDatasource = r.data[0];
-          setDatasource(newDatasource);
-          setLoading(false);
-        })
-        .catch(() => {
-          setLoading(false);
-        });
-      addSuccessToast(t('The dataset has been saved'));
-    }
-  }, [loadDatasources, addSuccessToast]);
-
-  const isButtonDisabled = isBtnDisabled();
-  const VIEW_INSTRUCTIONS_TEXT = t('view instructions');
-  const datasetHelpText = canCreateDataset ? (
-    <span data-test="dataset-write">
-      <Link to="/dataset/add/" data-test="add-chart-new-dataset">
-        {t('Add a dataset')}
-      </Link>{' '}
-      {t('or')}{' '}
-      <a
-        href="https://superset.apache.org/docs/creating-charts-dashboards/creating-your-first-dashboard/#registering-a-new-table"
-        rel="noopener noreferrer"
-        target="_blank"
-        data-test="add-chart-new-dataset-instructions"
-      >
-        {`${VIEW_INSTRUCTIONS_TEXT} `}
-        <Icons.Full iconSize="m" iconColor={theme.colorPrimary} />
-      </a>
-      .
-    </span>
-  ) : (
-    <span data-test="no-dataset-write">
-      <a
-        href="https://superset.apache.org/docs/creating-charts-dashboards/creating-your-first-dashboard/#registering-a-new-table"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        {`${VIEW_INSTRUCTIONS_TEXT} `}
-        <Icons.Full iconSize="m" iconColor={theme.colorPrimary} />
-      </a>
-      .
-    </span>
-  );
-
-  if (loading) {
-    return <Loading />;
   }
 
-  return (
-    <StyledContainer>
-      <h3>{t('Create a new chart')}</h3>
-      <Steps direction="vertical" size="small">
-        <Steps.Step
-          title={
-            <StyledStepTitle>
-              {t('Choose a %s', datasetLabelLower())}
-            </StyledStepTitle>
-          }
-          status={datasource?.value ? 'finish' : 'process'}
-          description={
-            <StyledStepDescription className="dataset">
-              <AsyncSelect
-                autoFocus
-                ariaLabel={datasetLabel()}
-                name="select-datasource"
-                onChange={changeDatasource}
-                options={loadDatasources}
-                optionFilterProps={['id', 'table_name']}
-                placeholder={t('Choose a %s', datasetLabelLower())}
-                showSearch
-                value={datasource}
-              />
-              {datasetHelpText}
-            </StyledStepDescription>
-          }
-        />
-        <Steps.Step
-          title={<StyledStepTitle>{t('Choose chart type')}</StyledStepTitle>}
-          status={vizType ? 'finish' : 'process'}
-          description={
-            <StyledStepDescription>
-              <VizTypeGallery
-                denyList={denyList}
-                className="viz-gallery"
-                onChange={changeVizType}
-                onDoubleClick={onVizTypeDoubleClick}
-                selectedViz={vizType}
-              />
-            </StyledStepDescription>
-          }
-        />
-      </Steps>
-      <div className="footer">
-        {isButtonDisabled && (
-          <span>
-            {t(
-              'Please select both a %s and a Chart type to proceed',
-              datasetLabel(),
-            )}
-          </span>
-        )}
-        <Button
-          buttonStyle="primary"
-          disabled={isButtonDisabled}
-          onClick={gotoSlice}
-        >
-          {t('Create new chart')}
-        </Button>
-      </div>
-    </StyledContainer>
-  );
-};
+  gotoSlice() {
+    this.props.history.push(this.exploreUrl());
+  }
 
-export default withToasts(ChartCreation);
+  changeDatasource(datasource: { label: string | ReactNode; value: string }) {
+    this.setState({ datasource });
+  }
+
+  changeVizType(vizType: string | null) {
+    this.setState({ vizType });
+  }
+
+  isBtnDisabled() {
+    return !(this.state.datasource?.value && this.state.vizType);
+  }
+
+  onVizTypeDoubleClick() {
+    if (!this.isBtnDisabled()) {
+      this.gotoSlice();
+    }
+  }
+
+  loadDatasources(
+    search: string,
+    page: number,
+    pageSize: number,
+    exactMatch = false,
+  ) {
+    const query = rison.encode({
+      columns: [
+        'id',
+        'table_name',
+        'datasource_type',
+        'database.database_name',
+        'schema',
+      ],
+      filters: [
+        { col: 'table_name', opr: exactMatch ? 'eq' : 'ct', value: search },
+      ],
+      page,
+      page_size: pageSize,
+      order_column: 'table_name',
+      order_direction: 'asc',
+    });
+    return SupersetClient.get({
+      endpoint: `/api/v1/dataset/?q=${query}`,
+    }).then((response: JsonResponse) => {
+      const list: {
+        id: number;
+        label: string | ReactNode;
+        value: string;
+        table_name: string;
+      }[] = response.json.result.map((item: Dataset) => ({
+        id: item.id,
+        value: `${item.id}__${item.datasource_type}`,
+        label: DatasetSelectLabel(item),
+        table_name: item.table_name,
+      }));
+      return {
+        data: list,
+        totalCount: response.json.count,
+      };
+    });
+  }
+
+  render() {
+    const { theme } = this.props;
+    const isButtonDisabled = this.isBtnDisabled();
+    const VIEW_INSTRUCTIONS_TEXT = t('view instructions');
+    const datasetHelpText = this.state.canCreateDataset ? (
+      <span data-test="dataset-write">
+        <Link to="/dataset/add/" data-test="add-chart-new-dataset">
+          {t('Add a dataset')}
+        </Link>{' '}
+        {t('or')}{' '}
+        <a
+          href="https://superset.apache.org/docs/creating-charts-dashboards/creating-your-first-dashboard/#registering-a-new-table"
+          rel="noopener noreferrer"
+          target="_blank"
+          data-test="add-chart-new-dataset-instructions"
+        >
+          {`${VIEW_INSTRUCTIONS_TEXT} `}
+          <Icons.Full iconSize="m" iconColor={theme.colorPrimary} />
+        </a>
+        .
+      </span>
+    ) : (
+      <span data-test="no-dataset-write">
+        <a
+          href="https://superset.apache.org/docs/creating-charts-dashboards/creating-your-first-dashboard/#registering-a-new-table"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          {`${VIEW_INSTRUCTIONS_TEXT} `}
+          <Icons.Full iconSize="m" iconColor={theme.colorPrimary} />
+        </a>
+        .
+      </span>
+    );
+
+    if (this.state.loading) {
+      return <Loading />;
+    }
+
+    return (
+      <StyledContainer>
+        <h3>{t('Create a new chart')}</h3>
+        <Steps direction="vertical" size="small">
+          <Steps.Step
+            title={
+              <StyledStepTitle>
+                {t('Choose a %s', datasetLabelLower())}
+              </StyledStepTitle>
+            }
+            status={this.state.datasource?.value ? 'finish' : 'process'}
+            description={
+              <StyledStepDescription className="dataset">
+                <AsyncSelect
+                  autoFocus
+                  ariaLabel={datasetLabel()}
+                  name="select-datasource"
+                  onChange={this.changeDatasource}
+                  options={this.loadDatasources}
+                  optionFilterProps={['id', 'table_name']}
+                  placeholder={t('Choose a %s', datasetLabelLower())}
+                  showSearch
+                  value={this.state.datasource}
+                />
+                {datasetHelpText}
+              </StyledStepDescription>
+            }
+          />
+          <Steps.Step
+            title={<StyledStepTitle>{t('Choose chart type')}</StyledStepTitle>}
+            status={this.state.vizType ? 'finish' : 'process'}
+            description={
+              <StyledStepDescription>
+                <VizTypeGallery
+                  denyList={denyList}
+                  className="viz-gallery"
+                  onChange={this.changeVizType}
+                  onDoubleClick={this.onVizTypeDoubleClick}
+                  selectedViz={this.state.vizType}
+                />
+              </StyledStepDescription>
+            }
+          />
+        </Steps>
+        <div className="footer">
+          {isButtonDisabled && (
+            <span>
+              {t(
+                'Please select both a %s and a Chart type to proceed',
+                datasetLabel(),
+              )}
+            </span>
+          )}
+          <Button
+            buttonStyle="primary"
+            disabled={isButtonDisabled}
+            onClick={this.gotoSlice}
+          >
+            {t('Create new chart')}
+          </Button>
+        </div>
+      </StyledContainer>
+    );
+  }
+}
+
+export default withRouter(withToasts(withTheme(ChartCreation)));

superset-websocket/.nvmrc

@@ -1 +0,0 @@
-v24.16.0

superset-websocket/.nvmrc

@@ -0,0 +1 @@
+../superset-frontend/.nvmrc

superset-websocket/README.md

@@ -16,7 +16,6 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 -->
-
 # Superset WebSocket Server
 
 A Node.js WebSocket server for sending async event data to the Superset web application frontend.
@@ -165,4 +164,4 @@ HEAD /health
 
 ## Containerization
 
-_TODO: containerize websocket server_
+*TODO: containerize websocket server*

superset-websocket/jest.config.js

@@ -0,0 +1,22 @@
+/**
+ * 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.
+ */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+};

superset-websocket/package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "start": "node dist/index.js start",
-    "test": "npx vitest --run --dir spec",
+    "test": "NODE_ENV=test jest -i spec",
     "type": "tsc --noEmit",
     "eslint": "eslint",
     "lint": "npm run eslint -- . && npm run type",
@@ -28,22 +28,24 @@
   "devDependencies": {
     "@eslint/js": "^9.25.1",
     "@types/eslint__js": "^8.42.3",
+    "@types/jest": "^29.5.14",
     "@types/jsonwebtoken": "^9.0.10",
     "@types/lodash": "^4.17.24",
     "@types/node": "^25.9.3",
     "@types/ws": "^8.18.1",
-    "@typescript-eslint/eslint-plugin": "^8.62.0",
-    "@typescript-eslint/parser": "^8.62.0",
+    "@typescript-eslint/eslint-plugin": "^8.61.1",
+    "@typescript-eslint/parser": "^8.61.1",
     "eslint": "^10.5.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-lodash": "^8.0.0",
     "globals": "^17.6.0",
+    "jest": "^29.7.0",
     "prettier": "^3.8.4",
+    "ts-jest": "^29.4.11",
     "ts-node": "^10.9.2",
     "tscw-config": "^1.1.2",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.62.0",
-    "vitest": "^4.1.5"
+    "typescript-eslint": "^8.61.1"
   },
   "engines": {
     "node": "^24.16.0",

superset-websocket/spec/config.test.ts

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

superset-websocket/spec/index.test.ts

@@ -25,29 +25,29 @@ import {
   test,
   beforeEach,
   afterEach,
-  vi,
-  type Mock,
-} from 'vitest';
+  jest,
+} from '@jest/globals';
 import * as http from 'http';
 import * as net from 'net';
 import { WebSocket } from 'ws';
-import * as server from '../src/index';
-import { statsd } from '../src/index';
 
-const { mockRedisXrange } = vi.hoisted(() => {
-  return { mockRedisXrange: vi.fn() };
+interface MockedRedisXrange {
+  (): Promise<server.StreamResult[]>;
+}
+
+// NOTE: these mock variables needs to start with "mock" due to
+// calls to `jest.mock` being hoisted to the top of the file.
+// https://jestjs.io/docs/es6-class-mocks#calling-jestmock-with-the-module-factory-parameter
+const mockRedisXrange = jest.fn() as jest.MockedFunction<MockedRedisXrange>;
+
+jest.mock('ws');
+jest.mock('ioredis', () => {
+  return jest.fn().mockImplementation(() => {
+    return { xrange: mockRedisXrange, on: jest.fn() };
+  });
 });
 
-vi.mock('ws');
-vi.mock('ioredis', () => {
-  return {
-    Redis: vi.fn().mockImplementation(function () {
-      return { xrange: mockRedisXrange, on: vi.fn() };
-    }),
-  };
-});
-
-const wsMock = WebSocket as unknown as Mock<typeof WebSocket>;
+const wsMock = WebSocket as jest.Mocked<typeof WebSocket>;
 const channelId = 'bc9e040c-7b4a-4817-99b9-292832d97ec7';
 const streamReturnValue: server.StreamResult[] = [
   [
@@ -66,13 +66,16 @@ const streamReturnValue: server.StreamResult[] = [
   ],
 ];
 
+import * as server from '../src/index';
+import { statsd } from '../src/index';
+
 describe('server', () => {
-  let statsdIncrementMock: Mock<typeof statsd.increment>;
+  let statsdIncrementMock: jest.SpiedFunction<typeof statsd.increment>;
 
   beforeEach(() => {
     mockRedisXrange.mockClear();
     server.resetState();
-    statsdIncrementMock = vi.spyOn(statsd, 'increment').mockReturnValue();
+    statsdIncrementMock = jest.spyOn(statsd, 'increment').mockReturnValue();
   });
 
   afterEach(() => {
@@ -81,8 +84,8 @@ describe('server', () => {
 
   describe('HTTP requests', () => {
     test('services health checks', () => {
-      const endMock = vi.fn();
-      const writeHeadMock = vi.fn();
+      const endMock = jest.fn();
+      const writeHeadMock = jest.fn();
 
       const request = {
         url: '/health',
@@ -110,8 +113,8 @@ describe('server', () => {
     });
 
     test('responds with a 404 when not found', () => {
-      const endMock = vi.fn();
-      const writeHeadMock = vi.fn();
+      const endMock = jest.fn();
+      const writeHeadMock = jest.fn();
 
       const request = {
         url: '/unsupported',
@@ -242,7 +245,7 @@ describe('server', () => {
   describe('processStreamResults', () => {
     test('sends data to channel', async () => {
       const ws = new wsMock('localhost');
-      const sendMock = vi.spyOn(ws, 'send');
+      const sendMock = jest.spyOn(ws, 'send');
       const socketInstance = { ws: ws, channel: channelId, pongTs: Date.now() };
 
       expect(statsdIncrementMock).toHaveBeenCalledTimes(0);
@@ -264,7 +267,7 @@ describe('server', () => {
 
     test('channel not present', async () => {
       const ws = new wsMock('localhost');
-      const sendMock = vi.spyOn(ws, 'send');
+      const sendMock = jest.spyOn(ws, 'send');
 
       expect(statsdIncrementMock).toHaveBeenCalledTimes(0);
       server.processStreamResults(streamReturnValue);
@@ -275,9 +278,10 @@ describe('server', () => {
 
     test('error sending data to client', async () => {
       const ws = new wsMock('localhost');
-      const sendMock = vi.spyOn(ws, 'send').mockImplementation(() => {
+      const sendMock = jest.spyOn(ws, 'send').mockImplementation(() => {
         throw new Error();
       });
+      const cleanChannelMock = jest.spyOn(server, 'cleanChannel');
       const socketInstance = { ws: ws, channel: channelId, pongTs: Date.now() };
 
       expect(statsdIncrementMock).toHaveBeenCalledTimes(0);
@@ -296,7 +300,9 @@ describe('server', () => {
       );
 
       expect(sendMock).toHaveBeenCalled();
-      expect(Object.keys(server.channels)).toHaveLength(0);
+      expect(cleanChannelMock).toHaveBeenCalledWith(channelId);
+
+      cleanChannelMock.mockRestore();
     });
 
     const makeItem = (i: number): server.StreamResult =>
@@ -324,8 +330,8 @@ describe('server', () => {
         channel: channelId,
         pongTs: Date.now(),
       });
-      const sendMock = vi.spyOn(ws, 'send');
-      const setImmediateSpy = vi.spyOn(global, 'setImmediate');
+      const sendMock = jest.spyOn(ws, 'send');
+      const setImmediateSpy = jest.spyOn(global, 'setImmediate');
 
       const results = [0, 1, 2, 3, 4].map(makeItem);
       await server.processStreamResults(results);
@@ -345,7 +351,7 @@ describe('server', () => {
         channel: channelId,
         pongTs: Date.now(),
       });
-      const sendMock = vi.spyOn(ws, 'send');
+      const sendMock = jest.spyOn(ws, 'send');
 
       const results = [0, 1, 2, 3, 4].map(makeItem);
       await server.processStreamResults(results);
@@ -366,16 +372,16 @@ describe('server', () => {
       server.opts.maxSocketBufferBytes = 0;
       // Restore any spies (e.g. on server.cleanChannel) so they don't leak
       // across tests and cause order-dependent failures.
-      vi.restoreAllMocks();
+      jest.restoreAllMocks();
     });
 
     test('does not terminate when cap disabled (0)', () => {
       server.opts.maxSocketBufferBytes = 0;
       const ws = new wsMock('localhost');
       // simulate a large outbound buffer
-      vi.spyOn(ws, 'bufferedAmount', 'get').mockReturnValueOnce(10_000_000);
-      const terminateMock = vi.spyOn(ws, 'terminate');
-      const sendMock = vi.spyOn(ws, 'send');
+      (ws as unknown as { bufferedAmount: number }).bufferedAmount = 10_000_000;
+      const terminateMock = jest.spyOn(ws, 'terminate');
+      const sendMock = jest.spyOn(ws, 'send');
       server.trackClient(channelId, {
         ws,
         channel: channelId,
@@ -391,9 +397,10 @@ describe('server', () => {
     test('terminates a slow client whose buffer exceeds the cap', () => {
       server.opts.maxSocketBufferBytes = 1024;
       const ws = new wsMock('localhost');
-      vi.spyOn(ws, 'bufferedAmount', 'get').mockReturnValueOnce(2048);
-      const terminateMock = vi.spyOn(ws, 'terminate');
-      const sendMock = vi.spyOn(ws, 'send');
+      (ws as unknown as { bufferedAmount: number }).bufferedAmount = 2048;
+      const terminateMock = jest.spyOn(ws, 'terminate');
+      const sendMock = jest.spyOn(ws, 'send');
+      const cleanChannelMock = jest.spyOn(server, 'cleanChannel');
       server.trackClient(channelId, {
         ws,
         channel: channelId,
@@ -407,15 +414,15 @@ describe('server', () => {
       expect(statsdIncrementMock).toHaveBeenCalledWith(
         'ws_client_backpressure_disconnect',
       );
-      expect(Object.keys(server.channels)).toHaveLength(0);
+      expect(cleanChannelMock).toHaveBeenCalledWith(channelId);
     });
 
     test('keeps sending to a client within the cap', () => {
       server.opts.maxSocketBufferBytes = 1024;
       const ws = new wsMock('localhost');
-      vi.spyOn(ws, 'bufferedAmount', 'get').mockReturnValueOnce(16);
-      const terminateMock = vi.spyOn(ws, 'terminate');
-      const sendMock = vi.spyOn(ws, 'send');
+      (ws as unknown as { bufferedAmount: number }).bufferedAmount = 16;
+      const terminateMock = jest.spyOn(ws, 'terminate');
+      const sendMock = jest.spyOn(ws, 'send');
       server.trackClient(channelId, {
         ws,
         channel: channelId,
@@ -436,7 +443,7 @@ describe('server', () => {
 
     test('success with results', async () => {
       mockRedisXrange.mockResolvedValueOnce(streamReturnValue);
-      const cb = vi.fn() as Mock<
+      const cb = jest.fn() as jest.MockedFunction<
         (results: server.StreamResult[]) => void | Promise<void>
       >;
       await server.fetchRangeFromStream({
@@ -455,7 +462,7 @@ describe('server', () => {
     });
 
     test('success no results', async () => {
-      const cb = vi.fn() as Mock<
+      const cb = jest.fn() as jest.MockedFunction<
         (results: server.StreamResult[]) => void | Promise<void>
       >;
       await server.fetchRangeFromStream({
@@ -474,7 +481,7 @@ describe('server', () => {
     });
 
     test('error', async () => {
-      const cb = vi.fn() as Mock<
+      const cb = jest.fn() as jest.MockedFunction<
         (results: server.StreamResult[]) => void | Promise<void>
       >;
       mockRedisXrange.mockRejectedValueOnce(new Error());
@@ -496,8 +503,12 @@ describe('server', () => {
 
   describe('wsConnection', () => {
     let ws: WebSocket;
-    let wsEventMock: Mock<typeof ws.on>;
-    let dateNowSpy: Mock<typeof Date.now>;
+    let wsEventMock: jest.SpiedFunction<typeof ws.on>;
+    let trackClientSpy: jest.SpiedFunction<typeof server.trackClient>;
+    let fetchRangeFromStreamSpy: jest.SpiedFunction<
+      typeof server.fetchRangeFromStream
+    >;
+    let dateNowSpy: jest.SpiedFunction<typeof Date.now>;
     let socketInstanceExpected: server.SocketInstance;
 
     const getRequest = (token: string, url: string): http.IncomingMessage => {
@@ -510,8 +521,10 @@ describe('server', () => {
 
     beforeEach(() => {
       ws = new wsMock('localhost');
-      wsEventMock = vi.spyOn(ws, 'on');
-      dateNowSpy = vi
+      wsEventMock = jest.spyOn(ws, 'on');
+      trackClientSpy = jest.spyOn(server, 'trackClient');
+      fetchRangeFromStreamSpy = jest.spyOn(server, 'fetchRangeFromStream');
+      dateNowSpy = jest
         .spyOn(global.Date, 'now')
         .mockImplementation(() =>
           new Date('2021-03-10T11:01:58.135Z').valueOf(),
@@ -524,8 +537,10 @@ describe('server', () => {
     });
 
     afterEach(() => {
-      wsEventMock?.mockRestore();
-      dateNowSpy?.mockRestore();
+      wsEventMock.mockRestore();
+      trackClientSpy.mockRestore();
+      fetchRangeFromStreamSpy.mockRestore();
+      dateNowSpy.mockRestore();
     });
 
     test('invalid JWT', async () => {
@@ -543,14 +558,11 @@ describe('server', () => {
 
       server.wsConnection(ws, request);
 
-      const channelSockets = server.channels[channelId];
-      expect(channelSockets).toEqual({
-        sockets: expect.any(Array<string>),
-      });
-      expect(channelSockets.sockets).toHaveLength(1);
-      const socketId = channelSockets.sockets[0];
-      expect(server.sockets[socketId]).toEqual(socketInstanceExpected);
-      expect(mockRedisXrange).not.toHaveBeenCalled();
+      expect(trackClientSpy).toHaveBeenCalledWith(
+        channelId,
+        socketInstanceExpected,
+      );
+      expect(fetchRangeFromStreamSpy).not.toHaveBeenCalled();
       expect(wsEventMock).toHaveBeenCalledWith('pong', expect.any(Function));
     });
 
@@ -563,15 +575,12 @@ describe('server', () => {
 
       server.wsConnection(ws, request);
 
-      const channelSockets = server.channels[channelId];
-      expect(channelSockets).toEqual({
-        sockets: expect.any(Array<string>),
-      });
-      expect(channelSockets.sockets).toHaveLength(1);
-
+      expect(trackClientSpy).toHaveBeenCalledWith(
+        channelId,
+        socketInstanceExpected,
+      );
       // Malformed last_id must not trigger a stream range fetch.
-      const socketId = channelSockets.sockets[0];
-      expect(server.sockets[socketId]).toEqual(socketInstanceExpected);
+      expect(fetchRangeFromStreamSpy).not.toHaveBeenCalled();
     });
 
     test('valid JWT, with lastId', async () => {
@@ -584,18 +593,16 @@ describe('server', () => {
 
       server.wsConnection(ws, request);
 
-      const channelSockets = server.channels[channelId];
-      expect(channelSockets).toEqual({
-        sockets: expect.any(Array<string>),
-      });
-      expect(channelSockets.sockets).toHaveLength(1);
-      const socketId = channelSockets.sockets[0];
-      expect(server.sockets[socketId]).toEqual(socketInstanceExpected);
-      expect(mockRedisXrange).toHaveBeenCalledWith(
-        expect.stringContaining(channelId),
-        '1615426152415-1',
-        '+',
+      expect(trackClientSpy).toHaveBeenCalledWith(
+        channelId,
+        socketInstanceExpected,
       );
+      expect(fetchRangeFromStreamSpy).toHaveBeenCalledWith({
+        sessionId: channelId,
+        startId: '1615426152415-1',
+        endId: '+',
+        listener: server.processStreamResults,
+      });
       expect(wsEventMock).toHaveBeenCalledWith('pong', expect.any(Function));
     });
 
@@ -611,18 +618,16 @@ describe('server', () => {
       server.setLastFirehoseId(lastFirehoseId);
       server.wsConnection(ws, request);
 
-      const channelSockets = server.channels[channelId];
-      expect(channelSockets).toEqual({
-        sockets: expect.any(Array<string>),
-      });
-      expect(channelSockets.sockets).toHaveLength(1);
-      const socketId = channelSockets.sockets[0];
-      expect(server.sockets[socketId]).toEqual(socketInstanceExpected);
-      expect(mockRedisXrange).toHaveBeenCalledWith(
-        expect.stringContaining(channelId),
-        '1615426152415-1',
-        lastFirehoseId,
+      expect(trackClientSpy).toHaveBeenCalledWith(
+        channelId,
+        socketInstanceExpected,
       );
+      expect(fetchRangeFromStreamSpy).toHaveBeenCalledWith({
+        sessionId: channelId,
+        startId: '1615426152415-1',
+        endId: lastFirehoseId,
+        listener: server.processStreamResults,
+      });
       expect(wsEventMock).toHaveBeenCalledWith('pong', expect.any(Function));
     });
   });
@@ -657,7 +662,7 @@ describe('server', () => {
     test('total connection limit reached', () => {
       server.opts.maxTotalConnections = 1;
       const ws = new wsMock('localhost');
-      vi.spyOn(ws, 'readyState', 'get').mockReturnValue(WebSocket.OPEN);
+      setReadyState(ws, WebSocket.OPEN);
       const socketInstance = {
         ws,
         channel: channelId,
@@ -672,7 +677,7 @@ describe('server', () => {
     test('per-channel connection limit reached', () => {
       server.opts.maxConnectionsPerChannel = 1;
       const ws = new wsMock('localhost');
-      vi.spyOn(ws, 'readyState', 'get').mockReturnValue(WebSocket.OPEN);
+      setReadyState(ws, WebSocket.OPEN);
       const socketInstance = {
         ws,
         channel: channelId,
@@ -694,7 +699,7 @@ describe('server', () => {
       };
       server.trackClient(channelId, socketInstance);
       // simulate the socket having closed but not yet been GC'd
-      vi.spyOn(ws, 'readyState', 'get').mockReturnValue(WebSocket.CLOSED);
+      setReadyState(ws, WebSocket.CLOSED);
       expect(server.connectionLimitReason('some-other-channel')).toBeNull();
     });
 
@@ -708,13 +713,13 @@ describe('server', () => {
       };
       server.trackClient(channelId, socketInstance);
       // simulate the socket having closed but not yet been GC'd
-      vi.spyOn(ws, 'readyState', 'get').mockReturnValue(WebSocket.CLOSED);
+      setReadyState(ws, WebSocket.CLOSED);
       expect(server.connectionLimitReason(channelId)).toBeNull();
     });
 
     test('isSocketActive reflects the socket readyState', () => {
       const ws = new wsMock('localhost');
-      vi.spyOn(ws, 'readyState', 'get').mockReturnValue(WebSocket.OPEN);
+      setReadyState(ws, WebSocket.OPEN);
       const socketId = server.trackClient(channelId, {
         ws,
         channel: channelId,
@@ -722,9 +727,9 @@ describe('server', () => {
       });
       expect(server.isSocketActive(socketId)).toBe(true);
       // CONNECTING is also considered active (see SOCKET_ACTIVE_STATES)
-      vi.spyOn(ws, 'readyState', 'get').mockReturnValue(WebSocket.CONNECTING);
+      setReadyState(ws, WebSocket.CONNECTING);
       expect(server.isSocketActive(socketId)).toBe(true);
-      vi.spyOn(ws, 'readyState', 'get').mockReturnValue(WebSocket.CLOSED);
+      setReadyState(ws, WebSocket.CLOSED);
       expect(server.isSocketActive(socketId)).toBe(false);
       // unknown socket ids are never active
       expect(server.isSocketActive('does-not-exist')).toBe(false);
@@ -732,14 +737,14 @@ describe('server', () => {
 
     test('activeSocketCount counts only active sockets', () => {
       const openWs = new wsMock('localhost');
-      vi.spyOn(openWs, 'readyState', 'get').mockReturnValue(WebSocket.OPEN);
+      setReadyState(openWs, WebSocket.OPEN);
       server.trackClient(channelId, {
         ws: openWs,
         channel: channelId,
         pongTs: Date.now(),
       });
       const closedWs = new wsMock('localhost');
-      vi.spyOn(closedWs, 'readyState', 'get').mockReturnValue(WebSocket.CLOSED);
+      setReadyState(closedWs, WebSocket.CLOSED);
       server.trackClient(channelId, {
         ws: closedWs,
         channel: channelId,
@@ -750,14 +755,14 @@ describe('server', () => {
 
     test('activeChannelSocketCount counts only active sockets on the channel', () => {
       const openWs = new wsMock('localhost');
-      vi.spyOn(openWs, 'readyState', 'get').mockReturnValue(WebSocket.OPEN);
+      setReadyState(openWs, WebSocket.OPEN);
       server.trackClient(channelId, {
         ws: openWs,
         channel: channelId,
         pongTs: Date.now(),
       });
       const closedWs = new wsMock('localhost');
-      vi.spyOn(closedWs, 'readyState', 'get').mockReturnValue(WebSocket.CLOSED);
+      setReadyState(closedWs, WebSocket.CLOSED);
       server.trackClient(channelId, {
         ws: closedWs,
         channel: channelId,
@@ -771,7 +776,7 @@ describe('server', () => {
     test('wsConnection refuses over-limit connection without tracking', () => {
       server.opts.maxConnectionsPerChannel = 1;
       const existingWs = new wsMock('localhost');
-      vi.spyOn(existingWs, 'readyState', 'get').mockReturnValue(WebSocket.OPEN);
+      setReadyState(existingWs, WebSocket.OPEN);
       const existing = {
         ws: existingWs,
         channel: channelId,
@@ -779,7 +784,7 @@ describe('server', () => {
       };
       server.trackClient(channelId, existing);
 
-      const trackClientSpy = vi.spyOn(server, 'trackClient');
+      const trackClientSpy = jest.spyOn(server, 'trackClient');
       const ws = new wsMock('localhost');
       const validToken = jwt.sign({ channel: channelId }, config.jwtSecret);
       server.wsConnection(ws, getRequest(validToken, 'http://localhost'));
@@ -795,8 +800,8 @@ describe('server', () => {
 
   describe('httpUpgrade', () => {
     let socket: net.Socket;
-    let socketDestroySpy: Mock<typeof socket.destroy>;
-    let wssUpgradeSpy: Mock<typeof server.wss.handleUpgrade>;
+    let socketDestroySpy: jest.SpiedFunction<typeof socket.destroy>;
+    let wssUpgradeSpy: jest.SpiedFunction<typeof server.wss.handleUpgrade>;
 
     const getRequest = (token: string, url: string): http.IncomingMessage => {
       const request = new http.IncomingMessage(new net.Socket());
@@ -808,8 +813,8 @@ describe('server', () => {
 
     beforeEach(() => {
       socket = new net.Socket();
-      socketDestroySpy = vi.spyOn(socket, 'destroy');
-      wssUpgradeSpy = vi.spyOn(server.wss, 'handleUpgrade');
+      socketDestroySpy = jest.spyOn(socket, 'destroy');
+      wssUpgradeSpy = jest.spyOn(server.wss, 'handleUpgrade');
     });
 
     afterEach(() => {
@@ -947,21 +952,33 @@ describe('server', () => {
     });
   });
 
+  const setReadyState = (ws: WebSocket, value: typeof ws.readyState) => {
+    // workaround for not being able to do
+    // spyOn(instance,'readyState','get').and.returnValue(value);
+    // See for details: https://github.com/facebook/jest/issues/9675
+    Object.defineProperty(ws, 'readyState', {
+      configurable: true,
+      get() {
+        return value;
+      },
+    });
+  };
+
   describe('checkSockets', () => {
     let ws: WebSocket;
-    let pingSpy: Mock<typeof ws.ping>;
-    let terminateSpy: Mock<typeof ws.terminate>;
+    let pingSpy: jest.SpiedFunction<typeof ws.ping>;
+    let terminateSpy: jest.SpiedFunction<typeof ws.terminate>;
     let socketInstance: server.SocketInstance;
 
     beforeEach(() => {
       ws = new wsMock('localhost');
-      pingSpy = vi.spyOn(ws, 'ping');
-      terminateSpy = vi.spyOn(ws, 'terminate');
+      pingSpy = jest.spyOn(ws, 'ping');
+      terminateSpy = jest.spyOn(ws, 'terminate');
       socketInstance = { ws: ws, channel: channelId, pongTs: Date.now() };
     });
 
     test('active sockets', () => {
-      vi.spyOn(ws, 'readyState', 'get').mockReturnValue(WebSocket.OPEN);
+      setReadyState(ws, WebSocket.OPEN);
       server.trackClient(channelId, socketInstance);
 
       server.checkSockets();
@@ -972,7 +989,7 @@ describe('server', () => {
     });
 
     test('stale sockets', () => {
-      vi.spyOn(ws, 'readyState', 'get').mockReturnValue(WebSocket.OPEN);
+      setReadyState(ws, WebSocket.OPEN);
       socketInstance.pongTs = Date.now() - 60000;
       server.trackClient(channelId, socketInstance);
 
@@ -984,7 +1001,7 @@ describe('server', () => {
     });
 
     test('closed sockets', () => {
-      vi.spyOn(ws, 'readyState', 'get').mockReturnValue(WebSocket.CLOSED);
+      setReadyState(ws, WebSocket.CLOSED);
       server.trackClient(channelId, socketInstance);
 
       server.checkSockets();
@@ -1010,7 +1027,7 @@ describe('server', () => {
     });
 
     test('active sockets', () => {
-      vi.spyOn(ws, 'readyState', 'get').mockReturnValue(WebSocket.OPEN);
+      setReadyState(ws, WebSocket.OPEN);
       server.trackClient(channelId, socketInstance);
 
       server.cleanChannel(channelId);
@@ -1019,7 +1036,7 @@ describe('server', () => {
     });
 
     test('closing sockets', () => {
-      vi.spyOn(ws, 'readyState', 'get').mockReturnValue(WebSocket.CLOSING);
+      setReadyState(ws, WebSocket.CLOSING);
       server.trackClient(channelId, socketInstance);
 
       server.cleanChannel(channelId);
@@ -1028,12 +1045,11 @@ describe('server', () => {
     });
 
     test('multiple sockets', () => {
-      vi.spyOn(ws, 'readyState', 'get').mockReturnValue(WebSocket.OPEN);
+      setReadyState(ws, WebSocket.OPEN);
       server.trackClient(channelId, socketInstance);
 
       const ws2 = new wsMock('localhost');
-      const readyStateSpy = vi.spyOn(ws2, 'readyState', 'get');
-      readyStateSpy.mockReturnValue(WebSocket.OPEN);
+      setReadyState(ws2, WebSocket.OPEN);
       const socketInstance2 = {
         ws: ws2,
         channel: channelId,
@@ -1045,7 +1061,7 @@ describe('server', () => {
 
       expect(server.channels[channelId].sockets.length).toBe(2);
 
-      readyStateSpy.mockReturnValue(WebSocket.CLOSED);
+      setReadyState(ws2, WebSocket.CLOSED);
       server.cleanChannel(channelId);
 
       expect(server.channels[channelId].sockets.length).toBe(1);

superset-websocket/src/index.ts

@@ -19,11 +19,11 @@
 import * as http from 'http';
 import * as net from 'net';
 import { inspect } from 'util';
-import { WebSocket, WebSocketServer } from 'ws';
+import WebSocket, { WebSocketServer } from 'ws';
 import { randomUUID } from 'crypto';
 import jwt, { Algorithm } from 'jsonwebtoken';
 import { parse } from 'cookie';
-import { Redis, RedisOptions } from 'ioredis';
+import Redis, { RedisOptions } from 'ioredis';
 import StatsD from 'hot-shots';
 
 import { createLogger } from './logger';

superset-websocket/utils/README.md

@@ -16,7 +16,6 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 -->
-
 # Test & development utilities
 
 The files provided here are for testing and development only, and are not required to run the WebSocket server application.

superset-websocket/utils/client-ws-app/.nvmrc

@@ -1 +0,0 @@
-v24.16.0

superset-websocket/utils/client-ws-app/.nvmrc

@@ -0,0 +1 @@
+../../../superset-frontend/.nvmrc

superset-websocket/utils/client-ws-app/README.md

@@ -16,7 +16,6 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 -->
-
 # Test client application
 
 This Express web application is provided for testing the WebSocket server. It is not required for running the server application, and is provided here for testing and development purposes only.

superset/config.py

@@ -2336,13 +2336,6 @@ DATABASE_OAUTH2_TIMEOUT = timedelta(seconds=30)
 # Enable/disable CSP warning
 CONTENT_SECURITY_POLICY_WARNING = True
 
-# Superset uses Scarf (https://about.scarf.sh/) to collect anonymous, aggregated
-# telemetry via a pixel rendered in the UI. Set the SCARF_ANALYTICS environment
-# variable to "false" to opt out. This value is exposed to the frontend through
-# the bootstrap payload so it takes effect at runtime, including in pre-built
-# images where the webpack build-time flag of the same name cannot be changed.
-SCARF_ANALYTICS = utils.cast_to_boolean(os.environ.get("SCARF_ANALYTICS", True))
-
 # Do you want Talisman enabled?
 TALISMAN_ENABLED = utils.cast_to_boolean(os.environ.get("TALISMAN_ENABLED", True))
 

superset/views/base.py

@@ -125,7 +125,6 @@ FRONTEND_CONF_KEYS = (
     "MAPBOX_API_KEY",
     "DEFAULT_MAP_RENDERER",
     "CSV_STREAMING_ROW_THRESHOLD",
-    "SCARF_ANALYTICS",
 )
 
 logger = logging.getLogger(__name__)

tests/unit_tests/mcp_service/dashboard/tool/test_update_dashboard.py

@@ -81,7 +81,6 @@ def _mock_dashboard(
     dashboard.slices = []
     dashboard.owners = []
     dashboard.tags = []
-    dashboard.embedded = []
     return dashboard
 
 

tests/unit_tests/views/test_base.py

@@ -129,15 +129,6 @@ def test_menu_data_exposes_build_details_when_config_opts_in() -> None:
     assert navbar_right["build_number"] == "build-42"
 
 
-def test_scarf_analytics_is_exposed_to_frontend_config() -> None:
-    """Verify SCARF_ANALYTICS is exposed in the frontend config keys."""
-    # Exposed at runtime so pre-built images can opt out via the SCARF_ANALYTICS
-    # config/env var (the webpack build-time flag cannot be changed there).
-    from superset.views.base import FRONTEND_CONF_KEYS
-
-    assert "SCARF_ANALYTICS" in FRONTEND_CONF_KEYS
-
-
 def _extract_language(
     locale_str: str | None,
     languages: dict[str, dict[str, object]] | None = None,