feat(PageError): add component for pretty display error of page [YTFR…

…ONT-4049]

packages/ui/src/ui/components/ErrorDetails/ErrorDetails.js

@@ -208,7 +208,11 @@ export default class ErrorDetails extends Component {
         return (
             <span className={b('message')}>
                 {text}
-                {code !== undefined && <React.Fragment>[{ypath.getValue(code)}]</React.Fragment>}
+                {code !== undefined && (
+                    <>
+                        &#32;<span className={b('error-code')}>[{ypath.getValue(code)}]</span>
+                    </>
+                )}
             </span>
         );
     }

packages/ui/src/ui/components/ErrorDetails/ErrorDetails.scss

@@ -26,6 +26,10 @@
         margin-bottom: 0;
     }
 
+    &__error-code {
+        white-space: nowrap;
+    }
+
     &__tabs {
         margin: 10px 0 20px;
     }

packages/ui/src/ui/components/LoadDataHandler/LoadDataHandler.tsx

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 
 import {Toaster} from '@gravity-ui/uikit';
-import Error from '../../components/Error/Error';
+import {PageError} from '../../components/PageError';
 import hammer from '../../common/hammer';
 
 import {showErrorPopup} from '../../utils/utils';
@@ -44,7 +44,7 @@ export default class LoadDataHandler extends Component<LoadDataHandlerProps> {
         const initialLoading = !loaded;
 
         if (error && (alwaysShowError || initialLoading)) {
-            return <Error error={errorData} />;
+            return <PageError error={errorData} title={errorData?.message ?? 'Error'} />;
         }
 
         return children;

packages/ui/src/ui/components/PageError/PageError.scss

@@ -0,0 +1,99 @@
+.page-error {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    min-width: 100%;
+    min-height: 100%;
+
+    &__content {
+        display: flex;
+        flex-direction: row;
+        align-items: stretch;
+        gap: 30px;
+        max-width: 90vw;
+        word-break: break-word;
+    }
+
+    &__icon-container {
+        flex: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    &__icon {
+        position: sticky;
+        top: calc(var(--app-header-height, 0) + 30px);
+        bottom: 30px;
+    }
+
+    &__body {
+        flex: auto;
+        display: flex;
+        flex-direction: column;
+
+        color: var(--g-color-text-complementary);
+        font-family: var(--g-text-body-font-family);
+        font-size: var(--g-text-subheader-1-font-size);
+        line-height: var(--g-text-subheader-1-line-height);
+        font-weight: 500;
+    }
+
+    &__title {
+        font-family: var(--g-text-body-font-family);
+        font-size: var(--g-text-subheader-3-font-size);
+        line-height: var(--g-text-subheader-3-line-height);
+        font-weight: 500;
+
+        margin-bottom: 12px;
+    }
+
+    &__details {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        gap: 4px;
+
+        .elements-error-details__tabs {
+            margin: 0;
+        }
+
+        .elements-error-details__details {
+            margin-top: 4px;
+            padding: 8px;
+            border-radius: 8px;
+            background: var(--g-color-base-generic);
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+
+        .elements-error-details__errors,
+        .elements-error-details__inner-errors {
+            margin-bottom: 4px;
+        }
+
+        .elements-error-details__message {
+            word-wrap: break-word;
+            word-break: break-all;
+        }
+
+        .unipika-wrapper {
+            background: none;
+            padding: 0;
+        }
+
+        & > .elements-error-details > .elements-error-details__inner-errors {
+            padding-left: 0;
+        }
+    }
+
+    &__footer {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        gap: 8px;
+    }
+}

packages/ui/src/ui/components/PageError/PageError.tsx

@@ -0,0 +1,94 @@
+import React, {useMemo} from 'react';
+import cn from 'bem-cn-lite';
+
+import ErrorDetails from '../ErrorDetails/ErrorDetails';
+import {YTError} from '../../../@types/types';
+import type {SVGIconComponentData} from '@gravity-ui/uikit/build/esm/components/Icon/types';
+
+import NotFound from '../../assets/img/svg/il_400.svg';
+import PermissionsDenied from '../../assets/img/svg/il_403.svg';
+
+import './PageError.scss';
+
+const block = cn('page-error');
+
+export enum PageErrorType {
+    NotFound = 'not-found',
+    PermissionsDenied = 'permissions-denied',
+}
+
+const Type2Icons: Record<PageErrorType, SVGIconComponentData> = {
+    [PageErrorType.NotFound]: NotFound,
+    [PageErrorType.PermissionsDenied]: PermissionsDenied,
+};
+
+export interface PageErrorProps {
+    type?: PageErrorType;
+    // todo: Concrete type of error is unknown
+    error?: YTError | object;
+    title: string | React.ReactNode;
+    footer?: React.ReactNode;
+    // todo: Concrete type of settings is unknown
+    settings?: object;
+    maxCollapsedDepth?: number;
+}
+
+export const PageError: React.FC<PageErrorProps> = ({
+    type = PageErrorType.NotFound,
+    error,
+    title,
+    footer,
+    settings,
+    maxCollapsedDepth,
+}) => {
+    const iconBlock = useMemo(() => {
+        if (!type || !(type in Type2Icons)) {
+            return null;
+        }
+
+        const SvgIcon = Type2Icons[type];
+
+        return (
+            <div className={block('icon-container')}>
+                <SvgIcon width={150} height={150} className={block('icon')} />
+            </div>
+        );
+    }, [type]);
+
+    const errorDetailsBlock = useMemo(() => {
+        if (!error) {
+            return null;
+        }
+
+        return (
+            <div className={block('details')}>
+                <ErrorDetails
+                    error={error}
+                    settings={settings}
+                    maxCollapsedDepth={maxCollapsedDepth}
+                />
+            </div>
+        );
+    }, [error, settings, maxCollapsedDepth]);
+
+    const footerBlock = useMemo(() => {
+        if (!footer) {
+            return null;
+        }
+
+        return <div className={block('footer')}>{footer}</div>;
+    }, [footer]);
+
+    return (
+        <div className={block()}>
+            <div className={block('content')}>
+                {iconBlock}
+                <div className={block('body')}>
+                    <div className={block('title')}>{title}</div>
+                    {errorDetailsBlock}
+                    {footerBlock}
+                </div>
+            </div>
+        </div>
+    );
+};

packages/ui/src/ui/components/PageError/error_templates.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import {WordWrapPath} from '../WordWraps';
+
+export interface TitlePathNotFoundProps {
+    path: string;
+}
+
+export const TitlePathNotFound: React.FC<TitlePathNotFoundProps> = ({path}): React.ReactNode => {
+    return (
+        <>
+            Path “<WordWrapPath path={path} />” does not exist
+        </>
+    );
+};
+
+export interface TitlePermissionsDeniedProps {
+    path: string;
+    types: string | [string, ...string[]];
+    user: string;
+}
+
+export const TitlePermissionsDenied: React.FC<TitlePermissionsDeniedProps> = ({
+    path,
+    types,
+    user,
+}) => {
+    const typesList = (Array.isArray(types) ? types : [types]).map((type) => `“${type}”`);
+    const lastType = typesList.pop();
+    let typesValue = typesList.join(', ');
+
+    if (lastType && typesList.length > 0) {
+        typesValue += ' and ';
+    }
+
+    typesValue += lastType;
+
+    return (
+        <>
+            User “{user}” does not have {typesValue} access to node “<WordWrapPath path={path} />”
+        </>
+    );
+};

packages/ui/src/ui/components/PageError/index.ts

@@ -0,0 +1,2 @@
+export * from './error_templates';
+export * from './PageError';