wikimedia/mediawiki-extensions-Wikibase

import {
    MwWindowOO,
    Dialog,
    PanelLayout,
} from '@/@types/mediawiki/MwWindow';

interface BridgeDialog extends Dialog {
    content: PanelLayout;
    $body: JQuery;
}

/**
 * Create a container element based on OO.ui.Dialog in which we can place our app
 *
 * @see https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.Dialog
 */
export default function prepareContainer( OO: MwWindowOO, $: JQueryStatic, id: string ): BridgeDialog {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const BridgeDialog: any = function ( this: BridgeDialog, config: object ) {
        BridgeDialog.super.call( this, config );
    };
    OO.inheritClass( BridgeDialog, OO.ui.Dialog );
    BridgeDialog.static.name = 'data-bridge';
    BridgeDialog.static.escapable = false;
    BridgeDialog.prototype.initialize = function (): void {
        BridgeDialog.super.prototype.initialize.call( this );
        this.content = new OO.ui.PanelLayout( { padded: false, expanded: false } );
        this.content.$element.attr( 'id', id );
        this.$body.append( this.content.$element );
    };
    BridgeDialog.prototype.getBodyHeight = function (): number {
        return 448;
    };
    const bridgeDialog = new BridgeDialog( {
        classes: [ 'wb-db-dialog' ],
        size: 'medium',
    } );
    // Create and append a window manager, which opens and closes the window.
    const windowManager = new OO.ui.WindowManager();
    $( document.body ).append( windowManager.$element );
    windowManager.addWindows( [ bridgeDialog ] );
    // Open the window!
    windowManager.openWindow( bridgeDialog );

    return bridgeDialog;
}