AlertingDialogShell()

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

The alerting dialog’s chrome, connected to the dialog’s state: the modal overlay, the dialog frame with the header row (the title input) and the action bar, the scrollable content area around children, the dialog’s warning and validation messages, the stale-filters confirmation step shown before the dialog when the saved filters no longer match the dashboard, and the delete confirmation reached from the action bar in edit mode. While useAlertingDialogContext().isLoading is true it renders the loading skeleton and none of its children.

The default dialog is <AlertingDialogShell> around the region and field blocks; a custom AlertingDialogComponent that keeps this chrome and arranges the blocks differently renders the shell itself. The shell does not own the submit: call useAlertSubmit() and pass its submit and isSaving, so the footer button and any Enter handler in the body share one instance. Call that hook once useAlertingDialogContext().isLoading is false for the first time — the state hooks throw until the dialog’s data has first loaded (after that they stay available through a refresh) — and render the shell alone (any onSubmit, isSaving: false) until then, as the example does.

Needs an ambient IntlProvider; inside a Dashboard the dashboard’s provider covers it.

export declare function AlertingDialogShell(props: IAlertingDialogShellProps): ReactElement;

Parameters

Returns

ReactElement

Example

function MyAlertingDialog(props: IAlertingDialogProps) {
    const { isLoading } = useAlertingDialogContext();
    // the state hooks throw until the dialog's data has first loaded; the shell shows the skeleton
    if (isLoading) {
        return <AlertingDialogShell {...props} onSubmit={() => {}} isSaving={false} />;
    }
    return <MyAlertingDialogBody {...props} />;
}

function MyAlertingDialogBody(props: IAlertingDialogProps) {
    const { isSaving, submit } = useAlertSubmit(props);
    return (
        <AlertingDialogShell {...props} onSubmit={() => void submit()} isSaving={isSaving}>
            <AlertingDialogFormFieldGroup label="When">
                <AlertingDialogMeasure />
                <AlertingDialogComparisonOperator />
                <AlertingDialogThreshold />
            </AlertingDialogFormFieldGroup>
            <AlertingDialogRecipients />
        </AlertingDialogShell>
    );
}