CustomAlertingDialogContextDecoratorComponent

Beta API. Mostly stable, but details may change in a minor release, outside SemVer. See API maturity.

Decorates the data the alerting create/edit dialog reads.

The dashboard mounts this component between the connector-provided dialog context and the dialog’s state model, so the value it re-provides is what both the default dialog and the state seeding read — a wholesale AlertingDialogComponent replacement sees it too. Read the current value with useAlertingDialogContext(), decorate the members to adjust, and re-provide via AlertingDialogContextProvider:

export type CustomAlertingDialogContextDecoratorComponent = ComponentType<{
    children?: ReactNode;
}>;

Example

function InsightDecorator({ children }: { children?: ReactNode }) {
    const ctx = useAlertingDialogContext();
    const insight = useMyDecoratedInsight(ctx.insight);
    const decorated = useMemo(() => ({ ...ctx, insight }), [ctx, insight]);
    return <AlertingDialogContextProvider value={decorated}>{children}</AlertingDialogContextProvider>;
}
// <Dashboard AlertingDialogContextDecoratorComponent={InsightDecorator} />

Pass isLoading through untouched: the dialog’s state model defers seeding until it is false, and a decorator that overrides it corrupts the draft seed. Define the decorator outside render, or the dialog remounts (and reseeds) on every parent render.

The contract: change the data, not what it means — every member keeps its documented meaning. The dialog does not check the decorated value; when you override a member, everything that reads it is your responsibility. Spread the value you read ({ ...ctx, member }) so the other members pass through. Wrap functions instead of replacing them. Do not touch members marked as internal machinery.