🤖 backported "sandbox custom react components" (metabase#75383)

sandbox custom react components (metabase#73941)

* WIP: sandbox custom react components

* improve typing of widget mount

* simplify widget mount module

* refactor widget mount

* refactor widget mount

# Conflicts:
#	enterprise/frontend/src/metabase-enterprise/custom_viz/widget-mount.unit.spec.ts

* refactor viz def settings sanitizer

* improve types

* cleanup naming

* adjust readme and docs

* adjust docs

* use single generic mount to render viz and settings

* improve types

* simplify render in defineConfig

* extract use-plugin-mount

* store test custom viz plugin sources

* fix missing locale in custom viz fixture

* check string setting widgets with allowlist

* add custom viz security custom settings widget security test case

* simplify widget mount stamping to plain property

* use isObject helper, skip non-object values

* add comment explaining rendering flow in usePluginMount

* add performMount and props to explicit deps

* remove obsolete archive with custom plugin

* update test fixture of calendar heatmap

* add react settings widget sandboxing e2e test

* bump sdk version

* revert .only test annotation

* improve test name

Co-authored-by: Jakub Chodorowicz <jakub.chodorowicz@metabase.com>

Author: github-automation-metabase

e2e/support/helpers/e2e-custom-viz-helpers.ts

@@ -10,13 +10,20 @@ export const CUSTOM_VIZ_FIXTURE_TGZ_3_SECURITY =
   Cypress.config("projectRoot") +
   "/e2e/support/assets/example_custom_viz_plugin_3_security.tgz";
 
+export const CUSTOM_VIZ_FIXTURE_TGZ_4_SECURITY_COMPONENT =
+  Cypress.config("projectRoot") +
+  "/e2e/support/assets/example_custom_viz_plugin_4_security_component.tgz";
+
 // Identifier comes from the manifest's `name` field in the packaged bundle.
 export const CUSTOM_VIZ_IDENTIFIER = "demo-viz";
 
 export const CUSTOM_VIZ_IDENTIFIER_2 = "demo-viz-2";
 
 export const CUSTOM_VIZ_IDENTIFIER_3_SECURITY = "demo-viz-security";
 
+export const CUSTOM_VIZ_IDENTIFIER_4_SECURITY_COMPONENT =
+  "demo-viz-security-component";
+
 // Frontend display type: "custom:{identifier}"
 export const CUSTOM_VIZ_DISPLAY = `custom:${CUSTOM_VIZ_IDENTIFIER}` as const;
 

e2e/test/scenarios/visualizations-charts/custom-viz.cy.spec.ts

@@ -2560,4 +2560,42 @@ describe("sandbox", () => {
       ),
     );
   });
+
+  it("sandboxes React component setting widgets", () => {
+    H.addCustomVizPlugin(H.CUSTOM_VIZ_FIXTURE_TGZ_4_SECURITY_COMPONENT);
+
+    H.createQuestion(
+      {
+        name: "Custom Viz Component Widget Security Test",
+        query: {
+          "source-table": SAMPLE_DB_TABLES.STATIC_ORDERS_ID,
+          aggregation: [["count"]],
+        },
+        display: "table",
+      },
+      { wrapId: true, idAlias: "questionId" },
+    );
+
+    H.visitQuestion("@questionId", {
+      onBeforeLoad(win) {
+        cy.spy(win.console, "error").as("consoleError");
+      },
+    });
+
+    cy.findByTestId("viz-type-button").click();
+    cy.findByTestId("custom-viz-plugins-toggle").click();
+    cy.findByTestId(
+      `${H.CUSTOM_VIZ_IDENTIFIER_4_SECURITY_COMPONENT}-button`,
+    ).click();
+    cy.findByTestId("viz-type-button").click();
+
+    cy.log("open viz settings to mount the custom component widget");
+    cy.findByTestId("viz-settings-button").click();
+
+    cy.log("the sandbox blocks the component's forbidden <input> element");
+    cy.get("@consoleError").should(
+      "have.been.calledWithMatch",
+      /render failed: \[plugin \d+\] blocked createElement: input/,
+    );
+  });
 });

enterprise/frontend/src/custom-viz/fixtures/build-example-custom-viz.mjs

@@ -35,6 +35,14 @@ const visualizations = [
     manifest: resolve(PLUGIN_ROOT, "manifests/demo-viz-security.json"),
     out: resolve(E2E_ASSETS, "example_custom_viz_plugin_3_security.tgz"),
   },
+  {
+    index: resolve(PLUGIN_ROOT, "src/index-widget-security-component.tsx"),
+    manifest: resolve(PLUGIN_ROOT, "manifests/demo-viz-security-component.json"),
+    out: resolve(
+      E2E_ASSETS,
+      "example_custom_viz_plugin_4_security_component.tgz",
+    ),
+  },
 ];
 
 export async function buildCustomVizFixtures() {

enterprise/frontend/src/custom-viz/fixtures/example_custom_viz_plugin/manifests/demo-viz-security-component.json

@@ -0,0 +1,7 @@
+{
+  "name": "demo-viz-security-component",
+  "icon": "icon.svg",
+  "metabase": {
+    "version": ">=0.57.0"
+  }
+}

enterprise/frontend/src/custom-viz/fixtures/example_custom_viz_plugin/src/index-widget-security-component.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+import { defineConfig } from "../../../src/index";
+import type { CreateCustomVisualization } from "../../../src/types/viz";
+
+type Settings = {
+  forbiddenWidget?: string | null;
+};
+
+function ForbiddenSettingWidget() {
+  return (
+    <form>
+      <input />
+    </form>
+  );
+}
+
+const createVisualization: CreateCustomVisualization<Settings> = ({
+  defineSetting,
+}) => {
+  return defineConfig<Settings>({
+    id: "example_custom_viz_plugin",
+    getName: () => "example_custom_viz_plugin",
+    minSize: { width: 2, height: 2 },
+    checkRenderable(series) {
+      if (series.length !== 1) {
+        throw new Error("Only 1 series is supported");
+      }
+    },
+    settings: {
+      forbiddenWidget: defineSetting({
+        id: "forbiddenWidget",
+        title: "Forbidden widget",
+        widget: ForbiddenSettingWidget,
+        getDefault() {
+          return null;
+        },
+      }),
+    },
+    VisualizationComponent: () => <h1>Custom viz rendered successfully</h1>,
+  });
+};
+
+export default createVisualization;

enterprise/frontend/src/custom-viz/fixtures/example_custom_viz_plugin/src/index-widget-security.tsx

@@ -3,6 +3,20 @@ import type { CreateCustomVisualization } from "../../../src/types/viz";
 import { Visualization } from "./Visualization";
 import { Settings } from "./types";
 
+// A custom React component used as a setting widget. It renders a forbidden
+// element (`<form>`) — rendering it makes React call
+// `document.createElement("form")`. When the widget is a component, the host
+// wraps it into a sandboxed mount, so the near-membrane sandbox must block the
+// element the same way it does for the visualization component itself — the
+// SDK's PluginErrorBoundary then reports the failure.
+function ForbiddenSettingWidget() {
+  return (
+    <form>
+      <input />
+    </form>
+  );
+}
+
 const createVisualization: CreateCustomVisualization<Settings> = ({
   defineSetting,
   locale,
@@ -35,6 +49,14 @@ const createVisualization: CreateCustomVisualization<Settings> = ({
           };
         },
       }),
+      customWidget: defineSetting({
+        id: "customWidget",
+        title: "Custom widget",
+        widget: ForbiddenSettingWidget,
+        getDefault() {
+          return null;
+        },
+      }),
     },
     VisualizationComponent: (props) => (
       <Visualization {...props} locale={locale} />

enterprise/frontend/src/custom-viz/fixtures/example_custom_viz_plugin/src/types.ts

@@ -1,3 +1,4 @@
 export type Settings = {
   threshold?: number;
+  customWidget?: string | null;
 };

enterprise/frontend/src/custom-viz/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metabase/custom-viz",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Creating custom visualizations for Metabase",
   "type": "module",
   "bin": {

enterprise/frontend/src/custom-viz/src/define-config.tsx

@@ -14,7 +14,7 @@ export type CustomVisualizationOpts<TSettings extends Record<string, unknown>> =
   };
 
 class PluginErrorBoundary extends Component<
-  { children: ReactNode },
+  { children: ReactNode; label: string },
   { error: Error | null }
 > {
   state: { error: Error | null } = { error: null };
@@ -25,7 +25,9 @@ class PluginErrorBoundary extends Component<
 
   componentDidCatch(error: Error) {
     const { message, stack } = error;
-    console.error(`[plugin] visualization render failed: ${message}\n${stack}`);
+    console.error(
+      `[plugin] ${this.props.label} render failed: ${message}\n${stack}`,
+    );
   }
 
   render() {
@@ -39,26 +41,26 @@ class PluginErrorBoundary extends Component<
 export function defineConfig<TSettings extends Record<string, unknown>>(
   opts: CustomVisualizationOpts<TSettings>,
 ): CustomVisualization<TSettings> {
-  const { VisualizationComponent, ...rest } = opts;
-
   return {
-    ...rest,
-    VisualizationComponent,
-    mount(
+    ...opts,
+    mount<P extends object>(
+      Component: ComponentType<P>,
       container: Element,
-      initial: CustomVisualizationProps<TSettings>,
-    ): CustomVisualizationMountHandle<CustomVisualizationProps<TSettings>> {
+      initialProps: P,
+    ): CustomVisualizationMountHandle<P> {
       const root = createRoot(container);
 
-      const render = (props: CustomVisualizationProps<TSettings>) => {
+      const render = (props: P) => {
         root.render(
-          <PluginErrorBoundary>
-            <VisualizationComponent {...props} />
+          <PluginErrorBoundary
+            label={Component.displayName ?? Component.name ?? "plugin"}
+          >
+            <Component {...props} />
           </PluginErrorBoundary>,
         );
       };
 
-      render(initial);
+      render(initialProps);
 
       return {
         update: render,

enterprise/frontend/src/custom-viz/src/templates/README.md

@@ -176,7 +176,7 @@ settings: {
 | `group`                        | Sub-heading within a section for grouping related settings.                          |
 | `index`                        | Display order within a group.                                                        |
 | `inline`                       | When `true`, renders the widget on the same line as `title` (useful for `"toggle"`). |
-| `widget`                       | Built-in widget name (see below).                                                    |
+| `widget`                       | Built-in widget name or a custom React component.                                    |
 | `getDefault(series, settings)` | Computes the default value when none is stored.                                      |
 | `getValue(series, settings)`   | Always-computed value — overrides stored value on every render.                      |
 | `getProps(series, settings)`   | Returns widget-specific props.                                                       |
@@ -201,6 +201,8 @@ settings: {
 | `"field"`            | `{ columns, options: { name, value }[], showColumnSetting? }`              | Single column picker     |
 | `"fields"`           | `{ columns, options: { name, value }[], addAnother?, showColumnSetting? }` | Multi-column picker      |
 
+You can also pass a **custom React component** as `widget`. Its props (minus the base props injected by Metabase) are returned by `getProps`.
+
 ---
 
 ## Using Images