feat: configure access errors

src/components/EmptyState/EmptyState.scss

@@ -10,10 +10,7 @@
 
     &__wrapper {
         display: grid;
-        grid-template-areas:
-            'image title'
-            'image description'
-            'image actions';
+        grid-template-areas: 'image content';
 
         &_size_xs {
             width: 321px;
@@ -28,8 +25,8 @@
         }
 
         &_size_m {
-            width: 800px;
-            height: 240px;
+            width: 600px;
+            height: 230px;
         }
 
         &_position_center {
@@ -46,7 +43,7 @@
         grid-area: image;
         justify-self: end;
 
-        margin-right: 60px;
+        margin-right: var(--g-spacing-10);
 
         color: var(--g-color-base-info-light-hover);
 
@@ -56,9 +53,6 @@
     }
 
     &__title {
-        align-self: center;
-        grid-area: title;
-
         font-weight: 500;
 
         &_size_s {
@@ -71,16 +65,11 @@
     }
 
     &__description {
-        grid-area: description;
-
         @include mixins.body-2-typography();
     }
 
-    &__actions {
-        grid-area: actions;
-
-        & > * {
-            margin-right: 8px;
-        }
+    &__content {
+        align-self: center;
+        grid-area: content;
     }
 }

src/components/EmptyState/EmptyState.tsx

@@ -1,4 +1,4 @@
-import {Icon} from '@gravity-ui/uikit';
+import {Flex, Icon, Text} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
 
@@ -8,20 +8,22 @@ import './EmptyState.scss';
 
 const block = cn('empty-state');
 
-const sizes = {
+export const EMPTY_STATE_SIZES = {
     xs: 100,
     s: 150,
-    m: 250,
+    m: 230,
     l: 350,
 };
 
 export interface EmptyStateProps {
-    title: string;
+    title: React.ReactNode;
     image?: React.ReactNode;
     description?: React.ReactNode;
     actions?: React.ReactNode[];
-    size?: keyof typeof sizes;
+    size?: keyof typeof EMPTY_STATE_SIZES;
     position?: 'left' | 'center';
+    pageTitle?: string;
+    className?: string;
 }
 
 export const EmptyState = ({
@@ -31,21 +33,33 @@ export const EmptyState = ({
     actions,
     size = 'm',
     position = 'center',
+    pageTitle,
+    className,
 }: EmptyStateProps) => {
     return (
-        <div className={block({size})}>
+        <div className={block({size}, className)}>
+            {pageTitle ? <Text variant="header-1">{pageTitle}</Text> : null}
             <div className={block('wrapper', {size, position})}>
                 <div className={block('image')}>
                     {image ? (
                         image
                     ) : (
-                        <Icon data={emptyStateIcon} width={sizes[size]} height={sizes[size]} />
+                        <Icon
+                            data={emptyStateIcon}
+                            width={EMPTY_STATE_SIZES[size]}
+                            height={EMPTY_STATE_SIZES[size]}
+                        />
                     )}
                 </div>
-
-                <div className={block('title', {size})}>{title}</div>
-                <div className={block('description')}>{description}</div>
-                <div className={block('actions')}>{actions}</div>
+                <Flex gap={5} className={block('content')} direction="column">
+                    <Flex gap={3} direction="column">
+                        <div className={block('title', {size})}>{title}</div>
+                        {description ? (
+                            <div className={block('description')}>{description}</div>
+                        ) : null}
+                    </Flex>
+                    {actions ? <Flex gap={2}>{actions}</Flex> : null}
+                </Flex>
             </div>
         </div>
     );

src/components/Errors/403/AccessDenied.tsx

@@ -1,17 +1,22 @@
-import {EmptyState} from '../../EmptyState';
+import {EMPTY_STATE_SIZES, EmptyState} from '../../EmptyState';
 import type {EmptyStateProps} from '../../EmptyState';
 import {Illustration} from '../../Illustration';
 import i18n from '../i18n';
 
-interface AccessDeniedProps extends Omit<EmptyStateProps, 'image' | 'title' | 'description'> {
-    title?: string;
-    description?: string;
+interface AccessDeniedProps extends Omit<EmptyStateProps, 'title'> {
+    title?: React.ReactNode;
 }
 
-export const AccessDenied = ({title, description, ...restProps}: AccessDeniedProps) => {
+export const AccessDenied = ({
+    title,
+    description,
+    image,
+    size = 'm',
+    ...restProps
+}: AccessDeniedProps) => {
     return (
         <EmptyState
-            image={<Illustration name="403" />}
+            image={image || <Illustration name="403" width={EMPTY_STATE_SIZES[size]} />}
             title={title || i18n('403.title')}
             description={description || i18n('403.description')}
             {...restProps}

src/components/Errors/PageError/PageError.scss

@@ -0,0 +1,7 @@
+.ydb-page-error {
+    display: grid;
+    align-items: center;
+    grid-template-rows: min-content auto;
+
+    height: 100%;
+}

src/components/Errors/PageError/PageError.tsx

@@ -1,36 +1,59 @@
 import React from 'react';
 
+import {cn} from '../../../utils/cn';
 import {isAccessError, isRedirectToAuth} from '../../../utils/response';
 import type {EmptyStateProps} from '../../EmptyState';
-import {EmptyState} from '../../EmptyState';
+import {EMPTY_STATE_SIZES, EmptyState} from '../../EmptyState';
 import {Illustration} from '../../Illustration';
 import {AccessDenied} from '../403';
 import {ResponseError} from '../ResponseError';
 import i18n from '../i18n';
 
-interface PageErrorProps extends Omit<EmptyStateProps, 'image' | 'title' | 'description'> {
-    title?: string;
-    description?: string;
+import './PageError.scss';
+
+const b = cn('ydb-page-error');
+
+interface PageErrorProps extends Omit<EmptyStateProps, 'image' | 'title'> {
+    title?: React.ReactNode;
     error: unknown;
     children?: React.ReactNode;
+    errorPageTitle?: string;
 }
 
-export function PageError({title, description, error, children, ...restProps}: PageErrorProps) {
+export function PageError({
+    title,
+    description,
+    error,
+    children,
+    size = 'm',
+    errorPageTitle,
+    ...restProps
+}: PageErrorProps) {
     if (isRedirectToAuth(error)) {
         // Do not show an error, because we redirect to auth anyway.
         return null;
     }
 
     if (isAccessError(error)) {
-        return <AccessDenied title={title} description={description} {...restProps} />;
+        return (
+            <AccessDenied
+                title={title}
+                description={description}
+                {...restProps}
+                pageTitle={errorPageTitle}
+                className={b()}
+            />
+        );
     }
 
     if (error || description) {
         return (
             <EmptyState
-                image={<Illustration name="error" />}
+                image={<Illustration name="error" width={EMPTY_STATE_SIZES[size]} />}
                 title={title || i18n('error.title')}
                 description={error ? <ResponseError error={error} /> : description}
+                pageTitle={errorPageTitle}
+                className={b()}
                 {...restProps}
             />
         );

src/containers/App/Content.tsx

@@ -20,6 +20,7 @@ import {
     useMetaCapabilitiesQuery,
 } from '../../store/reducers/capabilities/hooks';
 import {nodesListApi} from '../../store/reducers/nodesList';
+import {uiFactory} from '../../uiFactory/uiFactory';
 import {cn} from '../../utils/cn';
 import {useDatabaseFromQuery} from '../../utils/hooks/useDatabaseFromQuery';
 import {lazyComponent} from '../../utils/lazyComponent';
@@ -28,6 +29,7 @@ import Authentication from '../Authentication/Authentication';
 import {getClusterPath} from '../Cluster/utils';
 import Header from '../Header/Header';
 
+import {useAppTitle} from './AppTitleContext';
 import {
     ClusterSlot,
     ClustersSlot,
@@ -192,10 +194,17 @@ function DataWrapper({children}: {children: React.ReactNode}) {
 function GetUser({children}: {children: React.ReactNode}) {
     const database = useDatabaseFromQuery();
     const {isLoading, error} = authenticationApi.useWhoamiQuery({database});
+    const {appTitle} = useAppTitle();
 
     return (
         <LoaderWrapper loading={isLoading} size="l">
-            <PageError error={error}>{children}</PageError>
+            <PageError
+                error={error}
+                {...uiFactory.clusterOrDatabaseAccessError}
+                errorPageTitle={appTitle}
+            >
+                {children}
+            </PageError>
         </LoaderWrapper>
     );
 }