@itwin/itwinui-react/DEV-esm/core/NonIdealState/ErrorPage.js

A react component library for iTwinUI

import * as React from 'react';
import { Button } from '../Buttons/Button.js';
import { NonIdealState } from './NonIdealState.js';
import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
let Svg401 = React.lazy(
  () => import('@itwin/itwinui-illustrations-react/Svg401'),
);
let Svg403 = React.lazy(
  () => import('@itwin/itwinui-illustrations-react/Svg403'),
);
let Svg404 = React.lazy(
  () => import('@itwin/itwinui-illustrations-react/Svg404'),
);
let Svg500 = React.lazy(
  () => import('@itwin/itwinui-illustrations-react/Svg500'),
);
let Svg502 = React.lazy(
  () => import('@itwin/itwinui-illustrations-react/Svg502'),
);
let Svg503 = React.lazy(
  () => import('@itwin/itwinui-illustrations-react/Svg503'),
);
let SvgError = React.lazy(
  () => import('@itwin/itwinui-illustrations-react/SvgError'),
);
let SvgRedirect = React.lazy(
  () => import('@itwin/itwinui-illustrations-react/SvgRedirect'),
);
let SvgTimedOut = React.lazy(
  () => import('@itwin/itwinui-illustrations-react/SvgTimedOut'),
);
export const ErrorPage = React.forwardRef((props, forwardedRef) => {
  let {
    errorType,
    errorName,
    errorMessage,
    primaryButtonHandle,
    primaryButtonLabel,
    secondaryButtonHandle,
    secondaryButtonLabel,
    translatedErrorMessages,
    ...rest
  } = props;
  let defaultErrorMessages = {
    badGateway: 'Bad gateway',
    error: 'Error',
    forbidden: 'Forbidden',
    internalServerError: 'Internal server error',
    redirect: 'Redirect',
    pageNotFound: 'Page not found',
    serviceUnavailable: 'Service unavailable',
    timedOut: 'Timed out',
    unauthorized: 'Unauthorized',
    ...translatedErrorMessages,
  };
  function getErrorIcon() {
    switch (errorType) {
      case '300':
      case '301':
      case '302':
      case '303':
      case '304':
      case '305':
      case '307':
      case '308':
        return React.createElement(SvgRedirect, null);
      case '401':
        return React.createElement(Svg401, null);
      case '403':
        return React.createElement(Svg403, null);
      case '404':
        return React.createElement(Svg404, null);
      case '408':
      case '504':
        return React.createElement(SvgTimedOut, null);
      case '500':
        return React.createElement(Svg500, null);
      case '502':
        return React.createElement(Svg502, null);
      case '503':
        return React.createElement(Svg503, null);
      case 'generic':
      default:
        return React.createElement(SvgError, null);
    }
  }
  function getHeadingMessage() {
    if (errorName) return errorName;
    switch (errorType) {
      case '300':
      case '301':
      case '302':
      case '303':
      case '304':
      case '305':
      case '307':
      case '308':
        return defaultErrorMessages.redirect || '';
      case '401':
        return defaultErrorMessages.unauthorized;
      case '403':
        return defaultErrorMessages.forbidden;
      case '404':
        return defaultErrorMessages.pageNotFound;
      case '408':
      case '504':
        return defaultErrorMessages.timedOut || '';
      case '500':
        return defaultErrorMessages.internalServerError;
      case '502':
        return defaultErrorMessages.badGateway;
      case '503':
        return defaultErrorMessages.serviceUnavailable;
      case 'generic':
      default:
        return defaultErrorMessages.error;
    }
  }
  function getPrimaryButton() {
    if (!primaryButtonHandle || !primaryButtonLabel) return null;
    return React.createElement(
      Button,
      {
        styleType: 'high-visibility',
        onClick: primaryButtonHandle,
      },
      primaryButtonLabel,
    );
  }
  function getSecondaryButton() {
    if (!secondaryButtonHandle || !secondaryButtonLabel) return null;
    return React.createElement(
      Button,
      {
        styleType: 'default',
        onClick: secondaryButtonHandle,
      },
      secondaryButtonLabel,
    );
  }
  function getActions() {
    let primaryButton = getPrimaryButton();
    let secondaryButton = getSecondaryButton();
    if (!primaryButton && !secondaryButton) return null;
    return React.createElement(
      React.Fragment,
      null,
      primaryButton,
      secondaryButton,
    );
  }
  return React.createElement(NonIdealState, {
    svg: React.createElement(
      React.Suspense,
      {
        fallback: React.createElement(ProgressRadial, null),
      },
      getErrorIcon(),
    ),
    heading: getHeadingMessage(),
    description: errorMessage,
    actions: getActions(),
    ref: forwardedRef,
    ...rest,
  });
});
if ('development' === process.env.NODE_ENV) ErrorPage.displayName = 'ErrorPage';