feat(custom-widgets): complete JSX v2

packages/widgets/src/custom-api/component.tsx

@@ -1,228 +1,102 @@
 "use client";
 
 import dynamic from "next/dynamic";
-import { useMemo, useState } from "react";
-import { Button, Center, Code, Loader, ScrollArea, Stack, Text } from "@mantine/core";
-import { IconAlertTriangle, IconCheck, IconPlayerPlay } from "@tabler/icons-react";
+import { Button, Center, Loader, Stack, Text } from "@mantine/core";
+import { IconAlertTriangle } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
-import { useConfirmModal } from "@homarr/modals";
-import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
-import { createCustomWidgetDisplayComponents } from "@homarr/custom-widgets/runtime";
 
 import type { WidgetComponentProps } from "../definition";
 
 const CustomJsxDisplay = dynamic(() => import("./custom-jsx-display"), { ssr: false });
 
-function ActionButtonDisplay({ data }: { data: Record<string, unknown> }) {
-  const t = useScopedI18n("widget.customApi");
-  const { openConfirmModal } = useConfirmModal();
-  const executeMutation = clientApi.widget.customApi.executeBaseAction.useMutation();
-  const [lastSuccess, setLastSuccess] = useState(false);
-
-  const buttonLabel = (data.buttonLabel as string) ?? t("execute");
-  const buttonColor = (data.buttonColor as string) ?? "blue";
-  const confirmText = (data.confirmText as string) || "";
-  const requiresConfirmation = data.requiresConfirmation === true;
-  const successMessage = (data.successMessage as string) || t("executeSuccess");
-  const itemId = data.widgetItemId as string | undefined;
-  const isEditMode = data.isEditMode === true;
-
-  const handleExecute = async (confirmed: boolean) => {
-    if (!itemId || isEditMode) return;
-    setLastSuccess(false);
-    try {
-      const result = await executeMutation.mutateAsync({ itemId, confirmed });
-      if (result.success) {
-        setLastSuccess(true);
-        showSuccessNotification({ title: buttonLabel, message: successMessage });
-        setTimeout(() => setLastSuccess(false), 3000);
-      } else {
-        showErrorNotification({ title: buttonLabel, message: result.error ?? t("executeFailed") });
-      }
-    } catch {
-      showErrorNotification({ title: buttonLabel, message: t("executeFailed") });
-    }
-  };
-
-  const handleClick = () => {
-    if (confirmText || requiresConfirmation) {
-      openConfirmModal({
-        title: buttonLabel,
-        children: confirmText || t("executeConfirm"),
-        onConfirm: () => void handleExecute(true),
-      });
-    } else {
-      void handleExecute(false);
-    }
-  };
-
-  return (
-    <Center h="100%">
-      <Button
-        size="lg"
-        color={buttonColor}
-        onClick={handleClick}
-        loading={executeMutation.isPending}
-        leftSection={lastSuccess ? <IconCheck size={20} /> : <IconPlayerPlay size={20} />}
-        variant={lastSuccess ? "light" : "filled"}
-        disabled={!itemId || isEditMode}
-      >
-        {executeMutation.isPending ? t("executing") : buttonLabel}
-      </Button>
-    </Center>
-  );
-}
-
-export const createDisplayComponents = (openJsonLabel: string) =>
-  createCustomWidgetDisplayComponents({
-    actionButton: ActionButtonDisplay,
-    customJsx: CustomJsxDisplay,
-    openJsonLabel,
-  });
-
-export default function CustomApiWidget({ options, itemId, isEditMode }: WidgetComponentProps<"customApi">) {
-  const t = useScopedI18n("widget.customApi");
-  const { definitionId, refreshInterval } = options;
-
-  if (!definitionId) {
-    return (
-      <Center h="100%">
-        <Stack align="center" gap="xs">
-          <IconAlertTriangle size={32} color="var(--mantine-color-yellow-6)" />
-          <Text c="dimmed" size="sm">
-            {t("noDefinition")}
-          </Text>
-        </Stack>
-      </Center>
-    );
-  }
-
-  return (
-    <CustomApiWidgetInner
-      definitionId={definitionId}
-      itemId={itemId}
-      isEditMode={isEditMode}
-      refreshInterval={refreshInterval as number}
-    />
-  );
-}
-
-function CustomApiWidgetInner({
-  definitionId,
+export default function CustomApiWidget({
+  options,
   itemId,
   isEditMode,
-  refreshInterval,
-}: {
-  definitionId: string;
-  itemId: string | undefined;
-  isEditMode: boolean;
-  refreshInterval: number;
-}) {
+  removeItem,
+}: WidgetComponentProps<"customApi">) {
   const t = useScopedI18n("widget.customApi");
-  const tCustomWidget = useScopedI18n("customWidget");
   const tCustomJsx = useScopedI18n("widget.customApi.customJsx");
-  const displayComponents = useMemo(() => createDisplayComponents(t("openJson")), [t]);
-  const safeInterval = Number.isFinite(refreshInterval) ? refreshInterval : 30;
-  const intervalMs = Math.max(1000, safeInterval * 1000);
-  const { data, isLoading, error } = clientApi.widget.customApi.getData.useQuery(
+  const definitionId = options.definitionId;
+  const safeInterval = Number.isFinite(options.refreshInterval) ? options.refreshInterval : 30;
+  const intervalMs = Math.max(1_000, safeInterval * 1_000);
+  const query = clientApi.widget.customApi.getData.useQuery(
     { itemId: itemId ?? "" },
     {
-      enabled: Boolean(itemId) && !isEditMode,
-      refetchInterval: (query) => {
-        const result = query.state.data as Record<string, unknown> | undefined;
-        if (
-          result?.type === "actionButton" ||
-          result?.type === "disabled" ||
-          result?.type === "networkAccessNeedsReview"
-        ) {
-          return false;
-        }
-        return intervalMs;
-      },
-      retry: (failureCount, err) => {
-        if (err.data?.code === "NOT_FOUND") return false;
-        return failureCount < 3;
-      },
+      enabled: Boolean(itemId) && Boolean(definitionId),
+      refetchInterval: intervalMs,
+      retry: (failureCount, error) =>
+        !["NOT_FOUND", "PRECONDITION_FAILED"].includes(error.data?.code ?? "") && failureCount < 3,
     },
   );
 
-  if (isLoading) {
+  if (!definitionId) {
+    return <Unavailable message={t("definitionNotFound")} removeLabel={t("removeFromBoard")} onRemove={removeItem} />;
+  }
+  if (isEditMode && !itemId) return <Unavailable message={t("editModePending")} />;
+  if (query.isLoading)
     return (
       <Center h="100%">
         <Loader size="sm" />
       </Center>
     );
-  }
-
-  if (error) {
-    const isNotFound = error.data?.code === "NOT_FOUND";
+  if (query.error) {
+    const errorCode = query.error.data?.code;
     return (
-      <Center h="100%">
-        <Stack align="center" gap="xs">
-          <IconAlertTriangle size={32} color={`var(--mantine-color-${isNotFound ? "yellow" : "red"}-6)`} />
-          <Text c="dimmed" size="sm" ta="center">
-            {isNotFound ? t("definitionNotFound") : tCustomJsx("requestFailed")}
-          </Text>
-        </Stack>
-      </Center>
+      <Unavailable
+        message={
+          errorCode === "NOT_FOUND"
+            ? t("definitionNotFound")
+            : errorCode === "PRECONDITION_FAILED"
+              ? t("configurationNeedsRepair")
+              : tCustomJsx("requestFailed")
+        }
+        danger={errorCode !== "NOT_FOUND"}
+        removeLabel={errorCode === "NOT_FOUND" ? t("removeFromBoard") : undefined}
+        onRemove={removeItem}
+      />
     );
   }
-
-  if (!data) {
-    if (isEditMode) {
-      return (
-        <Center h="100%">
-          <Text c="dimmed" size="sm" ta="center">
-            {t("editModePending")}
-          </Text>
-        </Center>
-      );
-    }
-    return null;
-  }
-
-  const widgetData = data as Record<string, unknown>;
-  const dataType = widgetData.type as string | undefined;
-
-  if (dataType === "disabled") {
-    return (
-      <Center h="100%">
-        <Text c="dimmed" size="sm">
-          {tCustomWidget("widget.disabled")}
-        </Text>
-      </Center>
-    );
-  }
-
-  if (dataType === "networkAccessNeedsReview") {
-    return (
-      <Center h="100%" p="sm">
-        <Stack align="center" gap="xs">
-          <IconAlertTriangle size={32} color="var(--mantine-color-yellow-6)" />
-          <Text c="dimmed" size="sm" ta="center">
-            {tCustomJsx("networkAccessNeedsReview")}
-          </Text>
-        </Stack>
-      </Center>
-    );
-  }
-
-  const Component = dataType ? displayComponents[dataType] : undefined;
-  if (Component) {
-    const enrichedData =
-      dataType === "actionButton" || dataType === "customJsx"
-        ? { ...widgetData, widgetDefinitionId: definitionId, widgetItemId: itemId, isEditMode }
-        : widgetData;
-    return <Component data={enrichedData} />;
-  }
+  if (!query.data) return null;
 
   return (
-    <ScrollArea h="100%" p="xs">
-      <Code block style={{ fontSize: 11 }}>
-        {JSON.stringify(data, null, 2)}
-      </Code>
-    </ScrollArea>
+    <CustomJsxDisplay
+      data={{
+        ...query.data,
+        widgetDefinitionId: definitionId,
+        widgetItemId: itemId,
+        isEditMode,
+      }}
+    />
+  );
+}
+
+function Unavailable({
+  message,
+  danger = false,
+  removeLabel,
+  onRemove,
+}: {
+  message: string;
+  danger?: boolean;
+  removeLabel?: string;
+  onRemove?: () => void;
+}) {
+  return (
+    <Center h="100%" p="sm">
+      <Stack align="center" gap="xs">
+        <IconAlertTriangle size={32} color={`var(--mantine-color-${danger ? "red" : "yellow"}-6)`} />
+        <Text c="dimmed" size="sm" ta="center">
+          {message}
+        </Text>
+        {removeLabel && onRemove && (
+          <Button size="compact-sm" color="red" variant="light" onClick={onRemove}>
+            {removeLabel}
+          </Button>
+        )}
+      </Stack>
+    </Center>
   );
 }

packages/widgets/src/custom-api/custom-jsx-display.spec.ts

@@ -6,16 +6,21 @@ import { act, createElement } from "react";
 import { createRoot } from "react-dom/client";
 import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
 
-import type { ReactNode } from "react";
 import type { Root } from "react-dom/client";
 
-import { customJsxComponentRegistry, customJsxExamples, enabledCustomJsxComponents } from "@homarr/custom-widgets/core";
+import {
+  customJsxComponentRegistry,
+  customJsxExamples,
+  customJsxTablerIconNames,
+  enabledCustomJsxComponents,
+} from "@homarr/custom-widgets/core";
 import { renderSafeJsx, SafeJsxError, sanitizeCustomJsxProps } from "@homarr/custom-widgets/jsx";
 
 import CustomJsxDisplay from "./custom-jsx-display";
-import { createWhitelistedComponents, SAFE_BINDINGS } from "./jsx-whitelist";
+import { createCustomWidgetComponents, SAFE_BINDINGS } from "./jsx-components";
+import { SAFE_TABLER_ICON_NAMES } from "./jsx-icon-adapter";
 
-const WHITELISTED_COMPONENTS = createWhitelistedComponents({ copy: "Copy", copied: "Copied" });
+const CUSTOM_WIDGET_COMPONENTS = createCustomWidgetComponents({ copy: "Copy", copied: "Copied" });
 
 vi.mock("@homarr/translation/client", () => ({
   useScopedI18n: () => (key: string, params?: Record<string, string>) =>
@@ -31,6 +36,10 @@ const isComponentLikeExport = ([name, value]: [string, unknown]): boolean => {
 };
 
 describe("CustomJsxDisplay", () => {
+  it("keeps safe Tabler icon metadata synchronized with the runtime", () => {
+    expect(SAFE_TABLER_ICON_NAMES).toEqual(customJsxTablerIconNames);
+  });
+
   let container: HTMLDivElement;
   let root: Root;
 
@@ -105,26 +114,6 @@ describe("CustomJsxDisplay", () => {
     expect(container.textContent).not.toContain("GAMMA");
   });
 
-  it("renders fetched data through an interpreter-created SubFetch child", async () => {
-    container = document.createElement("div");
-    document.body.appendChild(container);
-    root = createRoot(container);
-    const rendered = renderSafeJsx({
-      template:
-        "<SubFetch>{(detail, meta) => <Text>{detail.types.map((entry) => entry.name).join(', ')} · {meta.status}</Text>}</SubFetch>",
-      components: {
-        SubFetch: ((props: { render?: (data: unknown, metadata: unknown) => ReactNode }) =>
-          props.render?.({ types: [{ name: "grass" }, { name: "poison" }] }, { status: 200 })) as never,
-        Text: ((props: { children?: ReactNode }) => createElement("span", null, props.children)) as never,
-      },
-      bindings: {},
-    });
-
-    await act(async () => root.render(rendered.node));
-
-    expect(container.textContent).toBe("grass, poison · 200");
-  });
-
   it("blocks reflective properties assembled with string concatenation", async () => {
     await renderDisplay({
       template: '<Text>{data["con" + "structor"]}</Text>',
@@ -373,14 +362,14 @@ describe("Custom JSX component registry", () => {
   it("has a runtime implementation for every enabled registry component", () => {
     const missing = enabledCustomJsxComponents
       .map(({ name }) => name)
-      .filter((name) => !Object.hasOwn(WHITELISTED_COMPONENTS, name));
+      .filter((name) => !Object.hasOwn(CUSTOM_WIDGET_COMPONENTS, name));
 
     expect(missing, "Enabled components without a runtime implementation").toEqual([]);
   });
 });
 
 const renderTemplate = (template: string, data: Record<string, unknown> = {}) =>
-  renderSafeJsx({ template, components: WHITELISTED_COMPONENTS, bindings: SAFE_BINDINGS(data) });
+  renderSafeJsx({ template, components: CUSTOM_WIDGET_COMPONENTS, bindings: SAFE_BINDINGS(data) });
 
 describe("new collection/string methods", () => {
   let container: HTMLDivElement;
@@ -543,8 +532,8 @@ describe("shared Custom JSX examples", () => {
 
   it.each(customJsxExamples)("parses and creates the $id renderer tree", (example) => {
     const rendered = renderSafeJsx({
-      template: example.template,
-      components: WHITELISTED_COMPONENTS,
+      template: example.widget.template,
+      components: CUSTOM_WIDGET_COMPONENTS,
       bindings: SAFE_BINDINGS(sampleData),
     });
 

packages/widgets/src/custom-api/custom-jsx-display.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import { useMemo } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 
 import { useScopedI18n } from "@homarr/translation/client";
+import type { CustomWidgetPublishedQueryState } from "@homarr/custom-widgets/runtime";
 import { CustomJsxRenderer, parseRequestCapabilities } from "@homarr/custom-widgets/runtime";
 
-import { createWhitelistedComponents, SAFE_BINDINGS } from "./jsx-whitelist";
+import { createCustomWidgetComponents, SAFE_BINDINGS } from "./jsx-components";
 import { WidgetDefinitionProvider } from "./widget-definition-context";
 
 export { CUSTOM_JSX_METHOD_COLORS } from "@homarr/custom-widgets/runtime";
@@ -13,11 +14,39 @@ export { CUSTOM_JSX_METHOD_COLORS } from "@homarr/custom-widgets/runtime";
 export default function CustomJsxDisplay({ data }: { data: Record<string, unknown> }) {
   const t = useScopedI18n("widget.customApi.customJsx");
   const capabilities = useMemo(() => parseRequestCapabilities(data.requestCapabilities), [data.requestCapabilities]);
-  const components = useMemo(() => createWhitelistedComponents({ copy: t("copy"), copied: t("copied") }), [t]);
+  const components = useMemo(() => createCustomWidgetComponents({ copy: t("copy"), copied: t("copied") }), [t]);
+  const [queryState, setQueryState] = useState<Record<string, CustomWidgetPublishedQueryState>>({});
+  useEffect(
+    () => setQueryState({}),
+    [data.widgetDefinitionId, data.widgetItemId, data.previewSessionId, data.template],
+  );
+  const publishQueryState = useCallback((requestId: string, value: CustomWidgetPublishedQueryState | null) => {
+    setQueryState((current) => {
+      if (!value) {
+        if (!Object.hasOwn(current, requestId)) return current;
+        const next = { ...current };
+        delete next[requestId];
+        return next;
+      }
+      const previous = current[requestId];
+      if (previous && previous.data === value.data && sameStatus(previous.status, value.status)) return current;
+      return { ...current, [requestId]: value };
+    });
+  }, []);
+  const baseData = isRecord(data.data) ? data.data : {};
+  const baseStatus = isRecord(data.status) ? data.status : {};
   const renderer = (
     <CustomJsxRenderer
       template={String(data.template ?? "")}
-      data={data.data}
+      data={{ ...baseData, ...Object.fromEntries(Object.entries(queryState).map(([id, value]) => [id, value.data])) }}
+      status={{
+        ...baseStatus,
+        ...Object.fromEntries(Object.entries(queryState).map(([id, value]) => [id, value.status])),
+      }}
+      options={isRecord(data.options) ? data.options : {}}
+      stateSchema={isStringRecord(data.stateSchema) ? data.stateSchema : {}}
+      defaultState={isRecord(data.defaultState) ? data.defaultState : {}}
+      onStateChange={typeof data.onStateChange === "function" ? (data.onStateChange as never) : undefined}
       requestCapabilities={capabilities}
       components={components}
       createBindings={SAFE_BINDINGS}
@@ -36,8 +65,10 @@ export default function CustomJsxDisplay({ data }: { data: Record<string, unknow
       itemId={typeof data.widgetItemId === "string" ? data.widgetItemId : undefined}
       previewSessionId={typeof data.previewSessionId === "string" ? data.previewSessionId : undefined}
       previewLiveActions={data.previewLiveActions === true}
+      queriesDisabled={data.queriesDisabled === true}
       isEditMode={data.isEditMode === true}
       requestCapabilities={capabilities}
+      setQueryState={publishQueryState}
     >
       {renderer}
     </WidgetDefinitionProvider>
@@ -45,3 +76,21 @@ export default function CustomJsxDisplay({ data }: { data: Record<string, unknow
     renderer
   );
 }
+
+function sameStatus(left: CustomWidgetPublishedQueryState["status"], right: CustomWidgetPublishedQueryState["status"]) {
+  return (
+    left.loading === right.loading &&
+    left.ok === right.ok &&
+    left.status === right.status &&
+    left.statusText === right.statusText &&
+    left.error === right.error
+  );
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+
+function isStringRecord(value: unknown): value is Record<string, string> {
+  return isRecord(value) && Object.values(value).every((entry) => typeof entry === "string");
+}

packages/widgets/src/custom-api/index.ts

@@ -9,6 +9,8 @@ export const { definition, componentLoader } = createWidgetDefinition("customApi
   createOptions() {
     return optionsBuilder.from((factory) => ({
       definitionId: factory.customWidgetSelect({ defaultValue: "" }),
+      configuration: factory.customWidgetConfiguration(),
+      configurationVersion: factory.internal({ defaultValue: 1 }),
       refreshInterval: factory.slider({
         defaultValue: 30,
         validate: z.number().min(1).max(3600),

packages/widgets/src/custom-api/jsx-components.ts

@@ -6,7 +6,7 @@ import { SafeTablerIcon } from "./jsx-icon-adapter";
 
 // Labels are replaced by the localized runtime adapter in the renderer. These
 // fallbacks are used only in isolated component-map tests.
-export const createWhitelistedComponents = (copyLabels: { copy: string; copied: string }) =>
+export const createCustomWidgetComponents = (copyLabels: { copy: string; copied: string }) =>
   createCustomJsxComponents({ TablerIcon: SafeTablerIcon as ComponentType<never>, copyLabels });
 
 export const SAFE_BINDINGS = createCustomJsxBindings;

packages/widgets/src/custom-api/jsx-icon-adapter.tsx

@@ -223,6 +223,8 @@ const TABLER_ICON_MAP: Record<string, ComponentType<never>> = {
   pulse: IconHeartbeat,
 };
 
+export const SAFE_TABLER_ICON_NAMES = Object.freeze(Object.keys(TABLER_ICON_MAP).toSorted());
+
 function isValidIconProp(value: unknown): value is string | number {
   return typeof value === "number" || typeof value === "string";
 }

packages/widgets/src/custom-api/widget-definition-context.tsx

@@ -4,6 +4,7 @@ import type { ReactNode } from "react";
 
 import { fetchApi, clientApi } from "@homarr/api/client";
 import type {
+  CustomWidgetPublishedQueryState,
   CustomJsxRequestCapability,
   CustomWidgetRuntimeMessages,
   CustomWidgetRuntimePort,
@@ -12,23 +13,27 @@ import { CustomWidgetRuntimeProvider } from "@homarr/custom-widgets/runtime";
 import { useConfirmModal } from "@homarr/modals";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
+import { useQueryClient } from "@tanstack/react-query";
 
 interface WidgetDefinitionProviderProps {
   itemId?: string;
   definitionId?: string;
   previewSessionId?: string;
   previewLiveActions?: boolean;
+  queriesDisabled?: boolean;
   isEditMode?: boolean;
   requestCapabilities?: readonly CustomJsxRequestCapability[];
+  setQueryState?(requestId: string, value: CustomWidgetPublishedQueryState | null): void;
   children: ReactNode;
 }
 
 export function WidgetDefinitionProvider(props: WidgetDefinitionProviderProps) {
   const t = useScopedI18n("widget.customApi.customJsx");
   const utils = clientApi.useUtils();
+  const queryClient = useQueryClient();
   const { openConfirmModal } = useConfirmModal();
   const messages: CustomWidgetRuntimeMessages = {
-    migrationRequired: t("migrationRequired"),
+    requestIdRequired: t("requestIdRequired"),
     unsavedPreview: t("unsavedPreview"),
     invalidParams: t("invalidParams"),
     loadRequest: t("loadRequest"),
@@ -72,18 +77,41 @@ export function WidgetDefinitionProvider(props: WidgetDefinitionProviderProps) {
           }),
     invalidate: async ({ itemId, previewSessionId, targets }) => {
       if (previewSessionId) {
-        await utils.customWidget.previewQuery.invalidate();
+        await queryClient.invalidateQueries({
+          predicate: (query) => {
+            const key = query.queryKey;
+            return key[0] === "custom-widget" && key[1] === previewSessionId && targets.includes(String(key[2]));
+          },
+        });
         return;
       }
       if (!itemId) return;
-      const tasks: Promise<unknown>[] = [];
-      if (targets.includes("parent")) tasks.push(utils.widget.customApi.getData.invalidate({ itemId }));
-      if (targets.some((target) => target !== "parent")) tasks.push(utils.widget.customApi.queryRequest.invalidate());
+      if (targets.length === 0) return;
+      const tasks: Promise<unknown>[] = [
+        queryClient.invalidateQueries({
+          predicate: (query) => {
+            const key = query.queryKey;
+            return key[0] === "custom-widget" && key[1] === itemId && targets.includes(String(key[2]));
+          },
+        }),
+      ];
+      if (
+        (props.requestCapabilities ?? []).some((request) => request.trigger === "load" && targets.includes(request.id))
+      ) {
+        tasks.push(utils.widget.customApi.getData.invalidate({ itemId }));
+      }
       await Promise.all(tasks);
     },
-    confirm: ({ title, message }) =>
+    confirm: ({ title, message, confirmLabel, destructive }) =>
       new Promise((resolve) => {
-        openConfirmModal({ title, children: message, onConfirm: () => resolve(true), onCancel: () => resolve(false) });
+        openConfirmModal({
+          title,
+          children: message,
+          labels: { confirm: confirmLabel },
+          confirmProps: { color: destructive ? "red.9" : "blue" },
+          onConfirm: () => resolve(true),
+          onCancel: () => resolve(false),
+        });
       }),
     notify: ({ kind, ...notification }) =>
       kind === "success" ? showSuccessNotification(notification) : showErrorNotification(notification),
@@ -94,10 +122,12 @@ export function WidgetDefinitionProvider(props: WidgetDefinitionProviderProps) {
       definitionId={props.definitionId}
       previewSessionId={props.previewSessionId}
       previewLiveActions={props.previewLiveActions}
+      queriesDisabled={props.queriesDisabled}
       isEditMode={props.isEditMode ?? false}
       requestCapabilities={props.requestCapabilities ?? []}
       port={port}
       messages={messages}
+      setQueryState={props.setQueryState}
     >
       {props.children}
     </CustomWidgetRuntimeProvider>