How to use the @jupyterlab/apputils.Dialog.okButton function in @jupyterlab/apputils

private _handleError(
    err: Error | ServerConnection.ResponseError,
    title: string
  ): void {
    let buttons = [Dialog.okButton()];

    // Check for a more specific error message.
    if (err instanceof ServerConnection.ResponseError) {
      err.response.text().then(text => {
        let body = '';
        try {
          body = JSON.parse(text).message;
        } catch (e) {
          body = text;
        }
        body = body || err.message;
        showDialog({ title, body, buttons });
      });
    } else {
      let body = err.message;
      showDialog({ title, body, buttons });

export async function redirect(
    router: IRouter,
    paths: JupyterFrontEnd.IPaths,
    workspace: string,
    warn = false
  ): Promise {
    const form = createRedirectForm(warn);
    const dialog = new Dialog({
      title: 'Please use a different workspace.',
      body: form,
      focusNodeSelector: 'input',
      buttons: [Dialog.okButton({ label: 'Switch Workspace' })]
    });
    const result = await dialog.launch();

    dialog.dispose();
    if (!result.value) {
      return redirect(router, paths, workspace, true);
    }

    // Navigate to a new workspace URL and abandon this session altogether.
    const page = paths.urls.page;
    const workspaces = paths.urls.workspaces;
    const prefix = (workspace ? workspaces : page).length + workspace.length;
    const rest = router.current.request.substring(prefix);
    const url = URLExt.join(workspaces, result.value, rest);

    router.navigate(url, { hard: true, silent: true });

tClient: Date,
    model: Contents.IModel,
    options: Partial
  ): Promise {
    let tDisk = new Date(model.last_modified);
    console.warn(
      `Last saving performed ${tClient} ` +
        `while the current file seems to have been saved ` +
        `${tDisk}`
    );
    let body =
      `The file has changed on disk since the last time it ` +
      `was opened or saved. ` +
      `Do you want to overwrite the file on disk with the version ` +
      ` open here, or load the version on disk (revert)?`;
    let revertBtn = Dialog.okButton({ label: 'REVERT' });
    let overwriteBtn = Dialog.warnButton({ label: 'OVERWRITE' });
    return showDialog({
      title: 'File Changed',
      body,
      buttons: [Dialog.cancelButton(), revertBtn, overwriteBtn]
    }).then(result => {
      if (this.isDisposed) {
        return Promise.reject(new Error('Disposed'));
      }
      if (result.button.label === 'OVERWRITE') {
        return this._manager.contents.save(this._path, options);
      }
      if (result.button.label === 'REVERT') {
        return this.revert().then(() => {
          return model;
        });

tClient: Date,
    model: Contents.IModel,
    options: Partial
  ): Promise {
    let tDisk = new Date(model.last_modified);
    console.warn(
      `Last saving performed ${tClient} ` +
        `while the current file seems to have been saved ` +
        `${tDisk}`
    );
    let body =
      `"${this.path}" has changed on disk since the last time it ` +
      `was opened or saved. ` +
      `Do you want to overwrite the file on disk with the version ` +
      ` open here, or load the version on disk (revert)?`;
    let revertBtn = Dialog.okButton({ label: 'Revert' });
    let overwriteBtn = Dialog.warnButton({ label: 'Overwrite' });
    return showDialog({
      title: 'File Changed',
      body,
      buttons: [Dialog.cancelButton(), revertBtn, overwriteBtn]
    }).then(result => {
      if (this.isDisposed) {
        return Promise.reject(new Error('Disposed'));
      }
      if (result.button.label === 'Overwrite') {
        return this._manager.contents.save(this._path, options);
      }
      if (result.button.label === 'Revert') {
        return this.revert().then(() => {
          return model;
        });

execute: args => {
            let path =
                typeof args.path === "undefined" ? "" : (args.path as string);

            if (path === "") {
                showDialog({
                    body: new OpenIFrameWidget(),
                    buttons: [
                        Dialog.cancelButton(),
                        Dialog.okButton({ label: "GO" })
                    ],
                    focusNodeSelector: "input",
                    title: "Open site"
                }).then(result => {
                    if (result.button.label === "CANCEL") {
                        return;
                    }

                    if (!result.value) {
                        return null;
                    }
                    path = result.value as string;
                    widget = new IFrameWidget(path);
                    app.shell.add(widget);
                    app.shell.activateById(widget.id);
                });

execute: args => {
        showDialog({
          body: new OpenTemplateWidget(examples),
          buttons: [Dialog.cancelButton(), Dialog.okButton({ label: 'GO' })],
          focusNodeSelector: 'input',
          title: 'Template'
        }).then(result => {
          if (result.button.label === 'CANCEL') {
            return;
          }
          if (result.value) {
            this.api.configuration
              .getExampleContent(result.value)
              .then((content: string) => {
                const data = content;
                const path = this._browser.defaultBrowser.model.path;

                return new Promise(resolve => {
                  this._app.commands
                    .execute('docmanager:new-untitled', {

public static async showMessage(
    title: string,
    msg: string[],
    buttonLabel: string = 'Dismiss',
    buttonClassName: string = '',
  ): Promise {
    const buttons: ReadonlyArray = [
      Dialog.okButton({ label: buttonLabel, className: buttonClassName }),
    ];
    const messageBody = this.buildDialogBody(msg);
    await showDialog({ title, buttons, body: messageBody });
  }

function onClick() {
      if (panel.context.model.readOnly) {
        return showDialog({
          title: 'Cannot Save',
          body: 'Document is read-only',
          buttons: [Dialog.okButton()]
        });
      }
      void panel.context.save().then(() => {
        if (!panel.isDisposed) {
          return panel.context.createCheckpoint();
        }
      });
    }
    return addToolbarButtonClass(

export function showCreateNewDeploymentDetails(deploymentImage: string) {
  return showDialog({
    title: 'Creation of new deployment',
    body: new CreateNewDeploymentDetailsDialog(deploymentImage),
    buttons: [Dialog.cancelButton(), Dialog.okButton({ label: 'Deploy' })]
  });
}

{result.errors.length > 0 ? (
          
            <h3>Errors:</h3>
            <ul>
              {result.errors.map((error, idx) =&gt; (
                <li>
                  {error}
                </li>
              ))}
            </ul>
          
        ) : null}
      
    ),
    buttons: [
      Dialog.okButton({
        label: 'OK',
        displayType: result.errors.length === 0 ? 'default' : 'warn'
      })
    ]
  });
}