diff --git a/app/src/index.tsx b/app/src/index.tsx
index 9cc3feb878..a35e00e7ce 100644
--- a/app/src/index.tsx
+++ b/app/src/index.tsx
@@ -4,6 +4,7 @@ import { RouterProvider } from 'react-router';
import { createBrowserRouter } from 'react-router-dom';
import { init as initApm } from '@elastic/apm-rum';
import { Router6AdaptedRouter, useUuiServices, UuiContext, IProcessRequest, GAListener } from '@epam/uui-core';
+import { i18n } from '@epam/uui';
import { AmplitudeListener } from './analyticsEvents';
import { svc } from './services';
import App from './App';
@@ -19,6 +20,14 @@ import '@epam/assets/theme/theme_eduverse_light.scss';
import '@epam/assets/theme/theme_eduverse_dark.scss';
import './index.module.scss';
+i18n.errorHandler.supportLink = (
+ <>
+ You can track the service availability at
+ {' '}
+ status.epam.com
+ >
+);
+
const router6 = createBrowserRouter([
{ path: '*', element: },
]);
diff --git a/changelog.md b/changelog.md
index fc6ca4bae0..0b8dff7c50 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,6 +1,7 @@
# 5.xx.xx - xx.xx.2024
**What's New**
+* [ErrorPage]: Added field for additional message with support link (it works with `500, 503, default` errors), added support link for the site
**What's Fixed**
* [PickerInput]: fixed unnecessary api calls on body open with `minCharsToSearch` prop and search in body
diff --git a/uui-core/src/services/ErrorContext.ts b/uui-core/src/services/ErrorContext.ts
index 9a6b708a5f..c2310797d7 100644
--- a/uui-core/src/services/ErrorContext.ts
+++ b/uui-core/src/services/ErrorContext.ts
@@ -43,6 +43,8 @@ export interface ErrorPageInfo {
imageUrl?: string;
/** Url of error image to display on error page in case of mobile layout (app width < 720px) */
mobileImageUrl?: string;
+ /** Additional message with link to the support portal */
+ supportLink?: React.ReactNode;
}
export class UuiError extends Error {
diff --git a/uui/components/errors/ErrorPage.module.scss b/uui/components/errors/ErrorPage.module.scss
index fdc912f386..8f4ac89cd5 100644
--- a/uui/components/errors/ErrorPage.module.scss
+++ b/uui/components/errors/ErrorPage.module.scss
@@ -39,6 +39,22 @@
font-size: 16px;
color: var(--uui-text-primary);
max-width: 700px;
+ margin-top: 8px;
+}
+
+:global(.uui-error-support-link) {
+ font-family: var(--uui-font);
+ font-weight: 400;
+ text-align: center;
+ line-height: 24px;
+ font-size: 16px;
+ color: var(--uui-text-primary);
+ max-width: 700px;
+ margin-top: 18px;
+
+ a {
+ text-decoration: none;
+ }
}
@media screen and (max-width: 720px) {
@@ -48,7 +64,6 @@
}
:global(.uui-error-title) {
- font-family: var(--uui-font);
font-weight: 400;
font-size: 24px;
line-height: 30px;
@@ -57,12 +72,10 @@
}
:global(.uui-error-subtitle) {
- font-family: var(--uui-font);
- font-weight: 400;
- text-align: center;
- line-height: 24px;
- font-size: 16px;
- color: var(--uui-text-primary);
+ max-width: 460px;
+ }
+
+ :global(.uui-error-support-link) {
max-width: 460px;
}
}
diff --git a/uui/components/errors/ErrorPage.tsx b/uui/components/errors/ErrorPage.tsx
index 77817b6d7c..11ac2a9592 100644
--- a/uui/components/errors/ErrorPage.tsx
+++ b/uui/components/errors/ErrorPage.tsx
@@ -13,6 +13,7 @@ export const ErrorPage: React.FC = (props) => {
{props.title}
{props.subtitle}
+ {props?.supportLink}
);
diff --git a/uui/components/errors/config.ts b/uui/components/errors/config.ts
index a42cab87ad..79fca53cd1 100644
--- a/uui/components/errors/config.ts
+++ b/uui/components/errors/config.ts
@@ -26,17 +26,20 @@ export const getErrorPageConfig = () => ({
mobileImageUrl: 'https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/error-pages-illustrations/L_Error_500_Monochrome.svg',
title: i18n.errorHandler.errorPageConfig.serverError.title,
subtitle: i18n.errorHandler.errorPageConfig.serverError.subtitle,
+ supportLink: i18n.errorHandler.supportLink,
},
serviceUnavailable: {
imageUrl: 'https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/error-pages-illustrations/L_Error_503_Monochrome.svg',
mobileImageUrl: 'https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/error-pages-illustrations/L_Error_503_Monochrome.svg',
title: i18n.errorHandler.errorPageConfig.serviceUnavailable.title,
subtitle: i18n.errorHandler.errorPageConfig.serviceUnavailable.subtitle,
+ supportLink: i18n.errorHandler.supportLink,
},
default: {
imageUrl: 'https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/error-pages-illustrations/L_Empty_Monochrome.svg',
mobileImageUrl: 'https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/error-pages-illustrations/L_Empty_Monochrome.svg',
title: i18n.errorHandler.errorPageConfig.default.title,
subtitle: i18n.errorHandler.errorPageConfig.default.subtitle,
+ supportLink: i18n.errorHandler.supportLink,
},
});
diff --git a/uui/i18n.ts b/uui/i18n.ts
index 41aa077381..9930d7d835 100644
--- a/uui/i18n.ts
+++ b/uui/i18n.ts
@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
import { i18n as uuiI18n } from '@epam/uui-core';
const TREE_SHAKEABLE_INIT = () => ({
@@ -153,6 +154,7 @@ const TREE_SHAKEABLE_INIT = () => ({
subtitle: 'We are trying to recover. Please wait.',
},
},
+ supportLink: undefined as ReactNode,
},
});