How to use the @jupyterlab/apputils.showDialog function in @jupyterlab/apputils

execute: () => {
            showDialog({
              body: send_widget,
              buttons: [Dialog.cancelButton(), Dialog.okButton({ label: "Ok" })],
              title: "Send email:",
            }).then((result) => {
              if (result.button.label === "Cancel") {
                return;
              }

              const folder = browser.defaultBrowser.model.path || "";
              const context = docManager.contextForWidget(app.shell.currentWidget);

              const type = send_widget.getType();
              // eslint-disable-next-line no-shadow
              const email = send_widget.getEmail();
              const code = send_widget.getCode();
              const to = send_widget.getTo();

// Alert the user if the format changes.
    if (origNbformat !== undefined && this._nbformat !== origNbformat) {
      const newer = this._nbformat > origNbformat;
      const msg = `This notebook has been converted from ${
        newer ? 'an older' : 'a newer'
      } notebook format (v${origNbformat}) to the current notebook format (v${
        this._nbformat
      }). The next time you save this notebook, the current notebook format (v${
        this._nbformat
      }) will be used. ${
        newer
          ? 'Older versions of Jupyter may not be able to read the new format.'
          : 'Some features of the original notebook may not be available.'
      }  To preserve the original format version, close the notebook without saving it.`;
      void showDialog({
        title: 'Notebook converted',
        body: msg,
        buttons: [Dialog.okButton()]
      });
    }

    // Update the metadata.
    this.metadata.clear();
    let metadata = value.metadata;
    for (let key in metadata) {
      // orig_nbformat is not intended to be stored per spec.
      if (key === 'orig_nbformat') {
        continue;
      }
      this.metadata.set(key, metadata[key]);
    }

private _checkSync(): void {
    let change = this._lastChange;
    if (!change) {
      return;
    }
    this._lastChange = null;
    let editor = this._editor;
    let doc = editor.getDoc();
    if (doc.getValue() === this._model.value.text) {
      return;
    }

    showDialog({
      title: 'Code Editor out of Sync',
      body:
        'Please open your browser JavaScript console for bug report instructions'
    });
    console.log(
      'Please paste the following to https://github.com/jupyterlab/jupyterlab/issues/2951'
    );
    console.log(
      JSON.stringify({
        model: this._model.value.text,
        view: doc.getValue(),
        selections: this.getSelections(),
        cursor: this.getCursorPosition(),
        lineSep: editor.getOption('lineSeparator'),
        mode: editor.getOption('mode'),
        change

return build();
        }

        if (response.status !== 'needed') {
          return;
        }

        const body = (
          <div>
            JupyterLab build is suggested:
            <br>
            <pre>{response.message}</pre>
          </div>
        );

        showDialog({
          title: 'Build Recommended',
          body,
          buttons: [Dialog.cancelButton(), Dialog.okButton({ label: 'BUILD' })]
        }).then(result =&gt; (result.button.accept ? build() : undefined));
      });
    }

closeAndCleanup: (current: NotebookPanel) => {
      const fileName = current.title.label;
      return showDialog({
        title: 'Shutdown the notebook?',
        body: `Are you sure you want to close "${fileName}"?`,
        buttons: [Dialog.cancelButton(), Dialog.warnButton()]
      }).then(result => {
        if (result.button.accept) {
          return current.context.session.shutdown()
            .then(() => { current.dispose(); });
        }
      });
    }
  } as IFileMenu.ICloseAndCleaner);

export function getSavePath(path: string): Promise {
    let saveBtn = Dialog.okButton({ label: 'SAVE' });
    return showDialog({
      title: 'Save File As..',
      body: new SaveWidget(path),
      buttons: [Dialog.cancelButton(), saveBtn]
    }).then(result => {
      if (result.button.label === 'SAVE') {
        return result.value;
      }
      return;
    });
  }

execute: ()=> {
      let listing: any = (fbWidget as any)._listing;
      let model = fbWidget.model;
      let input = document.createElement('input');

      showDialog({
        title: 'Add collaborator Gmail address',
        body: input,
        buttons: [Dialog.cancelButton(), Dialog.okButton({label: 'ADD'})]
      }).then( result=> {
        if (result.accept) {
          each(model.items(), (item: any) => {
            if(listing.isSelected(item.name)) {
              getResourceForPath(item.path).then((resource) => {
                createPermissions(resource.id, input.value);
              });
            }
          });
        }
      });
    },
    icon: 'jp-MaterialIcon jp-CopyIcon',

function dialogDemo(): void {
  let body = document.createElement('div');
  let input = document.createElement('input');
  input.value = 'Untitled.ipynb';
  let selector = document.createElement('select');
  let option0 = document.createElement('option');
  option0.value = 'python';
  option0.text = 'Python 3';
  selector.appendChild(option0);
  let option1 = document.createElement('option');
  option1.value = 'julia';
  option1.text = 'Julia';
  selector.appendChild(option1);
  body.appendChild(input);
  body.appendChild(selector);
  showDialog({
    title: 'Create new notebook'
  });
}

trying to use the extension. Do you want to continue with the extension
        installation?
      <p></p>
    
  );
  const hasKernelCompanions = kernelCompanions.length &gt; 0;
  const hasServerCompanion = !!serverCompanion;
  let title = '';
  if (hasKernelCompanions &amp;&amp; hasServerCompanion) {
    title = 'Kernel and Server Companions';
  } else if (hasKernelCompanions) {
    title = 'Kernel Companions';
  } else {
    title = 'Server Companion';
  }
  return showDialog({
    title,
    body,
    buttons: [
      Dialog.cancelButton(),
      Dialog.okButton({
        label: 'OK',
        caption: 'Install the JupyterLab extension.'
      })
    ]
  }).then(result =&gt; {
    return result.button.accept;
  });
}

export function showInputDialog(
  title: string,
  body: string,
  confirmChoose: string,
  warn: boolean
) {
  return showDialog({
    title: title,
    body: new InputDialog(body),
    buttons: [
      Dialog.cancelButton(),
      Dialog.okButton({
        label: confirmChoose,
        displayType: warn ? 'warn' : 'default'
      })
    ]
  });
}