Один фронтенд, чтоб править всеми, один фронтенд, чтоб всех найти: 1 точка входа, разные BI

/* eslint-disable @typescript-eslint/member-ordering */import type {Theme} from '@gravity-ui/uikit';import {Disposer} from 'hz/shared/libs/disposer';import {PatchedHistory} from 'hz/shared/libs/patched-history';import {getCurrentUrl, parseAppUrl, stripRoutePrefix} from 'hz/shared/libs/url-parser';import logger from 'libs/logger';import {Language} from 'shared';import {isEqual, withoutHost} from 'ufo';import {DL} from 'ui';import {type DLStore, getStore} from 'ui/store';import {type TAnalyticsPayload} from './analytics.model';import {ChannelWrapper} from './channel-wrapper';import {metadataEventPayloadSchema} from './metadata.model';import {Metadata, type TMetadataEventSchemaPayload} from './metadata.model';import {restoreAppManager, setChannelStatus, setController, setIframeStatus} from './store';import {CHANNEL_STATUS, type ChildApp, IFRAME_STATUS} from './type';type TNavigate = {    url: string;    replace?: boolean;    openInNewWindow?: boolean;    state?: object;};export class AppManager {    private history: PatchedHistory;    private disposer = new Disposer();    private store: DLStore;    private app: ChildApp;    private metadata: Metadata<TMetadataEventSchemaPayload>;    private id = 'app-manager';    static current: Maybe<AppManager>;    channelWrapper = ChannelWrapper;    private checkConnectionTimer: NodeJS.Timeout;    private channelInitialized = false;    // Кэш последних настроек для сравнения изменений    private lastUserSettings: {theme: Theme; lang?: Language};    // Analytics subscribers    private analyticsSubscribers: Set<(data: TAnalyticsPayload) => void> = new Set();    // Шаг 1.5: Что тут происходит?    // Заменяем историю своим патчем;    // Как только ifame смонтирован, тогда можно делать инициализацию канала (ChannelWrapper)    // Делаем подписку на обновление истории с обработчиком handleHistoryChanged    // Как только связь установлена, то необходимо отправить начальные настройки приложения (сейчас это тема и язык)    // На этом считаем, что инициализации закончена    constructor(app: ChildApp) {        this.app = app;        this.store = getStore();        this.history = new PatchedHistory();        this.metadata = new Metadata(metadataEventPayloadSchema);        // Инициализируем кэш текущими настройками        this.lastUserSettings = this.getCurrentUserSettings();        this.history.subscribe((data) =>            logger.log('History changed', {                data,                state: window.history.state ?? {},                url: getCurrentUrl(),            }),        );        let previousIframeStatus = this.store.getState().appManager.iframeStatus;        // Подписка 1: Отслеживаем изменения iframeStatus для инициализации канала        const unsubIframeStatus = this.store.subscribe(() => {            const currentState = this.store.getState().appManager;            const currentIframeStatus = currentState.iframeStatus;            if (                currentIframeStatus === IFRAME_STATUS.RENDERED &&                previousIframeStatus === IFRAME_STATUS.NOT_EXIST            ) {                logger.log('Setup PostMessage communication');                // Update previousIframeStatus before calling initChannelWrapper to prevent re-entrancy                previousIframeStatus = currentIframeStatus;                this.initChannelWrapper();            }            previousIframeStatus = currentIframeStatus;        });        this.disposer.add(this.history.subscribe(this.handleHistoryChanged));        this.disposer.add(unsubIframeStatus);        let previousChannelStatus = this.store.getState().appManager.channelStatus;        // Подписка 2: Отслеживаем установку соединения для отправки начальных настроек        const unsubChannelStatus = this.store.subscribe(() => {            const currentChannelStatus = this.store.getState().appManager.channelStatus;            // Отправляем настройки при установке соединения            if (                currentChannelStatus === CHANNEL_STATUS.LISTEN &&                previousChannelStatus === CHANNEL_STATUS.IDLE            ) {                logger.log('Channel connected, sending initial appSettings');                this.sendCurrentAppSettings();            }            previousChannelStatus = currentChannelStatus;        });        // Подписка 3: Отслеживаем изменения user store (тема и язык)        const unsubUserStore = this.store.subscribe(() => {            const currentUserSettings = this.getCurrentUserSettings();            this.handleUserSettingsChange(currentUserSettings);        });        this.disposer.add(unsubChannelStatus);        this.disposer.add(unsubUserStore);        this.checkConnectionTimer = setTimeout(() => {            if (this.store.getState().appManager.iframeStatus !== IFRAME_STATUS.RENDERED) {                this.store.dispatch(setIframeStatus(IFRAME_STATUS.NOT_LOADED));            }        }, app.loadTime);        this.disposer.add(() => {            clearTimeout(this.checkConnectionTimer!);        });    }    dispose() {        this.disposer.dispose();        this.history.dispose();        this.metadata.dispose();    }    // Шаг 1: Инициализируем наш менеджер, после одного вызова constructor,    // остальное смотреть constructor    static init(app: ChildApp) {        if (this.current) {            return this.current;        }        logger.log('Init app manager');        this.current = new AppManager(app);        return AppManager.current;    }    // Самое важное: чертов react и его rereder будут вызываться несколько раз в dev mode +    // При переходе между роутами происходит разрыв channel, поэтому важно очищать все подписки!!!!    static destroy() {        logger.log('Destroy app manager');        this.current?.channelWrapper.destroy();        this.current?.dispose();        getStore().dispatch(restoreAppManager());        this.current = undefined;    }    // Получаем текущие настройки из user store    private getCurrentUserSettings(): {theme: Theme; lang?: Language} {        const userState = this.store.getState().user;        return {            theme: userState.theme,            lang: DL.USER_LANG === Language.En ? Language.En : Language.Ru,        };    }    // Обрабатываем изменения user settings    private handleUserSettingsChange(current: {theme: Theme; lang?: Language}) {        const themeChanged = current.theme !== this.lastUserSettings.theme;        const langChanged = current.lang !== this.lastUserSettings.lang;        if (themeChanged || langChanged) {            logger.log('User settings changed', {                theme: {from: this.lastUserSettings.theme, to: current.theme},                lang: {from: this.lastUserSettings.lang, to: current.lang},            });            // Отправляем настройки только если канал активен            if (this.store.getState().appManager.channelStatus === CHANNEL_STATUS.LISTEN) {                this.sendCurrentAppSettings();            }        }        // Обновляем кэш        this.lastUserSettings = current;    }    // Отправляем текущие настройки в embedded app    private sendCurrentAppSettings() {        const userSettings = this.getCurrentUserSettings();        if (userSettings.lang) {            ChannelWrapper.sendAppSettings({                theme: userSettings.theme,                lang: userSettings.lang,            });        }    }    // Должен вызываться 1 РАЗ    // Создаем новый канал для общения через PostMessage API и делаем подписки.    // Передаем Controller в state, чтобы передать потом в ui.    // Controller создается каждый раз, когда происходит mount страницы BI.    // Как только handshake в Controller.Channel завершен, ты мы готовы начать общение.    // Делаем подписку на настройки приложения (appSettings) и отправляем их при ините и любом изменении appSettings.    // Делаем подписку на url от embedded app (то есть embedded будет отправлять нам свой url, а мы его будем менять)    private initChannelWrapper() {        if (this.channelInitialized) {            return;        }        this.channelInitialized = true;        const instance = this.channelWrapper.init(this.app);        const currentController = this.store.getState().appManager.controller;        if (!currentController) {            this.store.dispatch(setController(instance.controller));        }        instance.channel.onStatus(({status}) => {            const currentChannelStatus = this.store.getState().appManager.channelStatus;            const newStatus = status === 'connected' ? CHANNEL_STATUS.LISTEN : CHANNEL_STATUS.IDLE;            if (currentChannelStatus !== newStatus) {                this.store.dispatch(setChannelStatus(newStatus));            }        });        this.listenEmbeddedAppUrl();        this.listenMetadataApp();        this.listenExternalLinks();        this.listenAnalytics();        this.listenDocumentTitle();    }    private listenEmbeddedAppUrl() {        if (!this.channelWrapper.current) {            return;        }        if (this.app.disableHistory) {            return;        }        const unsubHistoryHandle = this.channelWrapper.onGotoEvent((data) => {            const parsed = parseAppUrl();            if (!parsed) {                return undefined;            }            // Extract route prefix from current URL if configured            const currentRoutePrefix = this.app.routePrefix ?? '';            const currentRestPath = stripRoutePrefix(parsed.restPath, currentRoutePrefix);            // Защита от случайных переходов по истории            const areEqualUrls = isEqual(currentRestPath, data.url, {leadingSlash: false});            logger.log('[app-manager] Are urls equal?', {                areEqualUrls,                current: currentRestPath,                fromEmbedded: data.url,                routePrefix: currentRoutePrefix,            });            if (!areEqualUrls) {                const historyStatePayload = {                    idx: new Date().getTime(),                    key: `key_${new Date().getTime()}`,                    usr: {current: data.url},                    responsible: this.id,                };                // Prepend route prefix to the URL from embedded app                const urlFromEmbedded = currentRoutePrefix                    ? `/${this.app.name}/${currentRoutePrefix}${data.url}`                    : `/${this.app.name}${data.url}`;                if (data.replace) {                    window.history.replaceState(historyStatePayload, '', urlFromEmbedded);                } else {                    window.history.pushState(historyStatePayload, '', urlFromEmbedded);                }            }            return undefined;        });        if (unsubHistoryHandle) {            this.disposer.add(unsubHistoryHandle);        }    }    private listenMetadataApp() {        if (!this.channelWrapper.current) {            return;        }        const unsubMetadataListening = this.channelWrapper.onBiMetadataEvent((data) => {            this.metadata.updateMetadata(data);            return undefined;        });        if (unsubMetadataListening) {            this.disposer.add(unsubMetadataListening);        }    }    private listenExternalLinks() {        if (!this.channelWrapper.current) {            return;        }        const unsubExternalLink = this.channelWrapper.onExternalLinkEvent((data) => {            this.openExternalLink(data.url, data.openInNewWindow);            return undefined;        });        if (unsubExternalLink) {            this.disposer.add(unsubExternalLink);        }    }    private listenAnalytics() {        if (!this.channelWrapper.current) {            return;        }        const unsubAnalytics = this.channelWrapper.onAnalyticsEvent((data) => {            this.handleAnalytics(data);            return undefined;        });        if (unsubAnalytics) {            this.disposer.add(unsubAnalytics);        }    }    private handleAnalytics(data: TAnalyticsPayload) {        // Notify all subscribers        this.analyticsSubscribers.forEach((subscriber) => {            subscriber(data);        });    }    private listenDocumentTitle() {        if (!this.channelWrapper.current) {            return;        }        const unsubDocumentTitle = this.channelWrapper.onDocumentTitleEvent((data) => {            document.title = `${data.title} - ${window.DL.serviceName}`;            return undefined;        });        if (unsubDocumentTitle) {            this.disposer.add(unsubDocumentTitle);        }    }    // https://github.com/remix-run/history/blob/dev/packages/history/index.ts#L1010C1-L1016C2    promptBeforeUnload = (event: BeforeUnloadEvent) => {        // Cancel the event.        event.preventDefault();        // Chrome (and legacy IE) requires returnValue to be set.        event.returnValue = '';    };    subscribeMetadataInfo(fn: (data: TMetadataEventSchemaPayload) => void) {        return this.metadata.subscribe(fn);    }    /**     * Подписка на мету от BI системы. Каждая система сама решает, когда отправить данные, мы только слушаем.     * Тип данных меняется в зависимости от biSystem и entryScope,     * работает как {@link https://www.typescriptlang.org/docs/handbook/2/narrowing.html#discriminated-unions discriminated-unions}     *     * @example Пример данных от BI     * {     *     biMetadata: {     *         biSystem: 'superset',     *         entryMetadata: {     *             entryScope: EntryScope.Widget,     *             name: 'Chart 1',     *             workbookId: '123',     *         },     *     },     * }     *  // покинули страницу, передаем null     * {     *     biMetadata: {     *         biSystem: 'superset',     *         entryMetadata: null,     *     }     * }     **/    static subscribeMetadataInfo = (fn: (data: TMetadataEventSchemaPayload) => void) => {        return AppManager.current?.subscribeMetadataInfo(fn);    };    /**     * Подписка на аналитику от BI системы. Каждая система сама решает, когда отправить данные, мы только слушаем.     *     * @example Пример данных от BI     * {     *     biSystem: 'superset',     *     eventType: 'dashboard_view_finish_loading',     *     params: {     *         dashboard_id: '2',     *         time: 1770128891337,     *         have_error: false,     *         use_extract: false,     *     }     * }     */    subscribeAnalytics(fn: (data: TAnalyticsPayload) => void) {        this.analyticsSubscribers.add(fn);        return () => {            this.analyticsSubscribers.delete(fn);        };    }    static subscribeAnalytics = (fn: (data: TAnalyticsPayload) => void) => {        return AppManager.current?.subscribeAnalytics(fn);    };    /**     * Navigates to a specified URL with various options. Before use, you should answer the question:     * Is it possible to solve the task via react-router useNavigate + Link Component? If yes — don't use navigate at all.     *     * @param {TNavigate} params - Navigation parameters     * @param {string} params.url - The target URL to navigate to     * @param {boolean} [params.replace=false] - Whether to replace the current history entry     * @param {boolean} [params.openInNewWindow=false] - Whether to open in a new window/tab     * @param {object} [params.state] - Optional state object to pass with navigation     *     * @description     * - If a current instance exists, delegates navigation to that instance     * - If openInNewWindow is true, opens URL in a new window/tab     * - Otherwise, navigates to URL in the current window     * - Falls back to window.open if no current instance is available     */    static navigate(params: TNavigate) {        const {url, openInNewWindow} = params;        // нет инстанса, мы не на странице BI        if (this.current) {            this.current.navigate(params);            return;        }        if (openInNewWindow) {            window.open(url, '_blank');            return;        }        window.open(url, '_self');    }    static readyToSubscribe() {        return Boolean(AppManager.current);    }    navigate({url, replace, state, openInNewWindow = false}: TNavigate) {        const parsed = parseAppUrl(withoutHost(url));        if (!parsed || openInNewWindow) {            window.open(url, '_blank');            return;        }        // мы открыли страницу поиска/sunset, а ссылка у нас на daylight        const canWeOpenUrlNow = parsed.appName === this.app.name;        if (canWeOpenUrlNow) {            const currentRoutePrefix = this.app.routePrefix ?? '';            const urlToEmbedded = stripRoutePrefix(parsed.restPath, currentRoutePrefix);            this.channelWrapper.gotoTo({                url: urlToEmbedded,                replace: false,            });            return;        }        if (replace) {            window.history.replaceState({responsible: this.id, ...state}, '', url);        } else {            window.history.pushState({responsible: this.id, ...state}, '', url);        }    }    private openExternalLink(url: string, openInNewWindow = false) {        try {            const parsedUrl = new URL(url);            if (!['http:', 'https:'].includes(parsedUrl.protocol)) {                logger.logError('Unsupported protocol for external link', new Error(), {url});                return;            }            if (openInNewWindow) {                window.open(url, '_blank');            } else {                window.location.href = url;            }        } catch (error) {            logger.logError('Failed to open external link', error as Error, {url});        }    }    // Обработка событий истории браузера, нам важно отправить iframe событие,    // что пользователь хочет вернуться назад или вперед    private handleHistoryChanged: Parameters<PatchedHistory['subscribe']>[0] = ({type, params}) => {        const currentRoutePrefix = this.app.routePrefix ?? '';        switch (type) {            case 'pop':            case 'forward':            case 'back': {                const parsed = parseAppUrl();                if (!parsed || parsed.appName !== this.app.name) {                    break;                }                this.channelWrapper.gotoTo({                    url: stripRoutePrefix(parsed.restPath, currentRoutePrefix),                    replace: true,                });                break;            }            case 'pushState': {                const parsed = parseAppUrl();                const currentState = params[0];                if (                    !parsed ||                    currentState?.responsible === this.id ||                    parsed.appName !== this.app.name                ) {                    break;                }                this.channelWrapper.gotoTo({                    url: stripRoutePrefix(parsed.restPath, currentRoutePrefix),                    replace: false,                });                break;            }            case 'replaceState':            default: {                break;            }        }    };}