Merge pull request #2660 from epam/2588-error-pages-add-possibility-to-provide-support-link

[ErrorPage]: Added field to provide support link

Author: AlekseyManetov

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
+        {' '}
+        <a href={ `https://status.epam.com/?utm_source=${window.location.host}&utm_medium=ErrorPage&utm_campaign=StatusAquisitionTracking` }>status.epam.com</a>
+    </>
+);
+
 const router6 = createBrowserRouter([
     { path: '*', element: <App /> },
 ]);

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

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 {

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;
     }
 }

uui/components/errors/ErrorPage.tsx

@@ -13,6 +13,7 @@ export const ErrorPage: React.FC<ErrorPageProps> = (props) => {
                 <img className="uui-error-image" src={ isMobileScreen && props.mobileImageUrl ? props.mobileImageUrl : props.imageUrl } alt="ERROR OCCURRED!" />
                 <div className="uui-error-title">{props.title}</div>
                 <div className="uui-error-subtitle">{props.subtitle}</div>
+                <div className="uui-error-support-link">{props?.supportLink}</div>
             </div>
         </div>
     );

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,
     },
 });

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,
     },
 });