feat(UIFactory): introduce renderCustomPreloaderError method which allows to render custom error page

packages/ui/src/shared/ui-settings.ts

@@ -25,7 +25,6 @@ export interface UISettings {
 
     announcesMailListUrl?: string;
 
-    sslCertFixUrl?: string;
     queryTrackerStage?: string;
     queryTrackerCluster?: string;
 

packages/ui/src/ui/UIFactory/default-ui-factory.tsx

@@ -310,4 +310,7 @@ export const defaultUIFactory: UIFactory = {
     getNavigationMapNodeSettings() {
         return undefined;
     },
+    renderCustomPreloaderError() {
+        return null;
+    },
 };

packages/ui/src/ui/UIFactory/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import type {Reducer} from 'redux';
-import forEach_ from 'lodash/forEach';
 
 import type {DropdownMenuItem} from '@gravity-ui/uikit';
 import type {SVGIconData} from '@gravity-ui/uikit/build/esm/components/Icon/types';
@@ -27,6 +26,7 @@ import type {UISettingsMonitoring} from '../../shared/ui-settings';
 import type {SubjectCardProps} from '../components/SubjectLink/SubjectLink';
 import type {QueryItem} from '../pages/query-tracker/module/api';
 import type {Node} from '../utils/navigation/content/map-nodes/node';
+import type {PreloadErrorType} from '../constants';
 
 type HeaderItemOrPage =
     | {
@@ -428,20 +428,19 @@ export interface UIFactory {
               additionalAttributes: Array<string>;
               renderNodeIcon: (item: Node) => React.ReactNode;
           };
+
+    renderCustomPreloaderError: (params: {
+        cluster: string;
+        errorType: PreloadErrorType;
+        error: Error;
+    }) => React.ReactNode;
 }
 
 // All methods comes from `configureUIFactory` method
 const uiFactory: UIFactory = {} as any;
 
-function configureUIFactoryItem<K extends keyof UIFactory>(k: K, redefinition: UIFactory[K]) {
-    uiFactory[k] = redefinition;
-}
-
 export function configureUIFactory(overrides: UIFactory) {
-    forEach_(overrides, (_v, k) => {
-        const key = k as keyof UIFactory;
-        configureUIFactoryItem(key, overrides[key]!);
-    });
+    Object.assign(uiFactory, overrides);
 }
 
 export default new Proxy(uiFactory, {

packages/ui/src/ui/constants/index.ts

@@ -1,3 +1,4 @@
+import {ValueOf} from '../types/index';
 import createActionTypes, {createPrefix} from './utils';
 export {Page} from '../../shared/constants/settings';
 
@@ -22,11 +23,13 @@ export const LOADING_STATUS = {
     CANCELLED: 'cancelled',
 } as const;
 
-export const LOAD_ERROR = {
+export const PRELOAD_ERROR = {
     GENERAL: 'general',
     CONNECTION: 'connection',
     AUTHENTICATION: 'authentication',
-};
+} as const;
+
+export type PreloadErrorType = ValueOf<typeof PRELOAD_ERROR>;
 
 export const TYPED_OUTPUT_FORMAT = {
     $value: 'json' as const,

packages/ui/src/ui/containers/ClusterPage/ClusterPage.js

@@ -25,13 +25,13 @@ import ClusterPageHeader from '../ClusterPageHeader/ClusterPageHeader';
 import PageTracker from './PageTracker';
 
 import {PageHeadByCluster} from '../../components/PageHead/PageHead';
-import ConnectionErrorRegion from '../../components/PreloaderErrors/ConnectionErrorRegion';
-import GeneralErrorRegion from '../../components/PreloaderErrors/GeneralErrorRegion';
+
 import FlexSplitPane from '../../components/FlexSplitPane/FlexSplitPane';
 import ErrorBlock from '../../components/Error/Error';
 import HandleMaintenance from '../../containers/MaintenancePage/HandleMaintenance';
+import PreloadError from '../../containers/PreloadError/PreloadError';
 
-import {LOADING_STATUS, LOAD_ERROR, Page, SPLIT_PANE_ID} from '../../constants/index';
+import {LOADING_STATUS, Page, SPLIT_PANE_ID} from '../../constants/index';
 import {joinMenuItemsAction, splitMenuItemsAction, trackVisit} from '../../store/actions/menu';
 import {setSetting} from '../../store/actions/settings';
 import {unmountCluster, updateCluster} from '../../store/actions/cluster-params';
@@ -178,30 +178,6 @@ class ClusterPage extends Component {
         return this.props.clusterPagePaneSizes;
     };
 
-    renderError(clusterConfig) {
-        const {errorType} = this.props.error || {};
-
-        switch (errorType) {
-            case LOAD_ERROR.CONNECTION:
-                return <ConnectionErrorRegion cluster={clusterConfig.id} />;
-            case LOAD_ERROR.AUTHENTICATION:
-                return (
-                    <GeneralErrorRegion
-                        cluster={clusterConfig.id}
-                        message={
-                            'Could not fetch the XSRF token, therefore preventing further operations. Sometimes ' +
-                            'token fetching fails due to the network issues. If the  problem persists, please report it ' +
-                            'via Bug Reporter.'
-                        }
-                    />
-                );
-            case LOAD_ERROR.GENERAL:
-                return (
-                    <GeneralErrorRegion message="Unexpected error occurred. If problem persists please report it via Bug Reporter." />
-                );
-        }
-    }
-
     isParamsLoading() {
         const {cluster, paramsCluster} = this.props;
         return cluster !== paramsCluster;
@@ -268,9 +244,9 @@ class ClusterPage extends Component {
             </Fragment>
         ) : (
             <React.Fragment>
-                <div className="preloader">
+                <div className={b('preloader')}>
                     {hasError ? (
-                        this.renderError(clusterConfig)
+                        <PreloadError />
                     ) : (
                         <p className="preloader__loading">Loading {clusterConfig?.id}...</p>
                     )}