From 96342246355ab81be57eeb96f60baee3e1ab024a Mon Sep 17 00:00:00 2001 From: Siarhei_Dzeraviannik Date: Tue, 26 Nov 2024 14:01:52 +0300 Subject: [PATCH] [ErrorPage]: Added field for additional message with support link (it works with `500, 503, default` errors), added support link for site --- app/src/index.tsx | 9 +++++++ changelog.md | 1 + uui-core/src/services/ErrorContext.ts | 2 ++ uui/components/errors/ErrorPage.module.scss | 27 +++++++++++++++------ uui/components/errors/ErrorPage.tsx | 1 + uui/components/errors/config.ts | 3 +++ uui/i18n.ts | 2 ++ 7 files changed, 38 insertions(+), 7 deletions(-) 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) => { ERROR OCCURRED!
{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, }, });