function BaseDialog({
  busy,
  children,
  error = null,
  onRetry,
  retryLabel = 'Try again',
  title = 'Something went wrong',
}) {
  const focusedDialogButton = /** @type {{ current: HTMLButtonElement }} */ (
    useRef()
  );
  return (
    <Modal
      buttons={
        onRetry && (
          <LabeledButton
            buttonRef={focusedDialogButton}
            disabled={busy}
            onClick={onRetry}
            variant="primary"
          >
            {retryLabel}
          </LabeledButton>
        )
      }
      contentClass="LMS-Dialog LMS-Dialog--medium"
      initialFocus={focusedDialogButton}
      onCancel={() => null}
      role="alertdialog"
      title={title}
      withCancelButton={false}
      withCloseButton={false}
    >
      {error && <ErrorDisplay error={error}>{children}</ErrorDisplay>}
      {!error && children}
    </Modal>
  );
}
/**
 * Common structure for LTI launch error dialogs.
 *
 * This is a "full-screen", non-cancelable dialog consisting of:
 *
 *  - An explanation of what went wrong and how to resolve it
 *  - An optional "Try again" button
 *  - An optional detailed error message for use when contacting support
 *
 * @param {object} props
 * @param {boolean} props.busy
 * @param {Children} props.children
 * @param {ErrorLike|null} [props.error]
 * @param {() => void} [props.onRetry]
 * @param {string} [props.retryLabel]
 * @param {string} [props.title]
 */
Common structure for LTI launch error dialogs.
This is a "full-screen", non-cancelable dialog consisting of.

- An explanation of what went wrong and how to resolve it
- An optional "Try again" button
- An optional detailed error message for use when contacting support


Common structure for LTI launch error dialogs . This is a " full - screen " non - cancelable dialog consisting of . - An explanation of what went wrong and how to resolve it - An optional " Try again " button - An optional detailed error message for use when contacting support
function BaseDialog({
  busy,
  children,
  error = null,
  onRetry,
  retryLabel = 'Try again',
  title = 'Something went wrong',
}) {
  const focusedDialogButton =  (
    useRef()
  );
  return (
    <Modal
      buttons={
        onRetry && (
          <LabeledButton
            buttonRef={focusedDialogButton}
            disabled={busy}
            onClick={onRetry}
            variant="primary"
          >
            {retryLabel}
          </LabeledButton>
        )
      }
      contentClass="LMS-Dialog LMS-Dialog--medium"
      initialFocus={focusedDialogButton}
      onCancel={() => null}
      role="alertdialog"
      title={title}
      withCancelButton={false}
      withCloseButton={false}
    >
      {error && <ErrorDisplay error={error}>{children}</ErrorDisplay>}
      {!error && children}
    </Modal>
  );
}
function BaseDialog ( { busy , children , error = null , onRetry , retryLabel = 'Try again' , title = 'Something went wrong' , } ) { const focusedDialogButton = ( useRef ( ) ) ; return ( < Modal buttons = { onRetry && ( < LabeledButton buttonRef = { focusedDialogButton } disabled = { busy } onClick = { onRetry } variant = "primary" > { retryLabel } < / LabeledButton > ) } contentClass = "LMS-Dialog LMS-Dialog--medium" initialFocus = { focusedDialogButton } onCancel = { ( ) => null } role = "alertdialog" title = { title } withCancelButton = { false } withCloseButton = { false } > { error && < ErrorDisplay error = { error } > { children } < / ErrorDisplay > } { ! error && children } < / Modal > ) ; }
Common structure for LTI launch error dialogs.
Common structure for LTI launch error dialogs .
/** @type {{ current: HTMLButtonElement }} */