diff --git a/webapp/packages/core-app/src/AppScreen/Main.tsx b/webapp/packages/core-app/src/AppScreen/Main.tsx index f0ea41b36d..2a3acf033c 100644 --- a/webapp/packages/core-app/src/AppScreen/Main.tsx +++ b/webapp/packages/core-app/src/AppScreen/Main.tsx @@ -9,11 +9,11 @@ import { observer } from 'mobx-react-lite'; import styled, { css } from 'reshadow'; -import { splitStyles, Split, ResizerControls, Pane, ErrorBoundary, useSplitUserState, useStyles } from '@cloudbeaver/core-blocks'; +import { splitStyles, Split, ResizerControls, Pane, ErrorBoundary, useSplitUserState, useStyles, Loader } from '@cloudbeaver/core-blocks'; import { useService } from '@cloudbeaver/core-di'; import { SideBarPanel, SideBarPanelService } from '@cloudbeaver/core-ui'; import { ConnectionsSettingsService } from '@cloudbeaver/plugin-connections'; -import { NavigationTree } from '@cloudbeaver/plugin-navigation-tree'; +import { NavigationTreeLoader } from '@cloudbeaver/plugin-navigation-tree'; import { RightArea } from './RightArea'; @@ -27,6 +27,9 @@ const mainStyles = css` position: relative; overflow: hidden; } + Loader { + height: 100%; + } `; export const Main = observer(function Main() { @@ -43,38 +46,44 @@ export const Main = observer(function Main() { const sideBarDisabled = activeBars.length === 0; return styled(styles)( - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); }); diff --git a/webapp/packages/core-app/src/AppScreen/RightArea.tsx b/webapp/packages/core-app/src/AppScreen/RightArea.tsx index 94c29848e5..cc35f0f637 100644 --- a/webapp/packages/core-app/src/AppScreen/RightArea.tsx +++ b/webapp/packages/core-app/src/AppScreen/RightArea.tsx @@ -21,7 +21,8 @@ import { SlideOverlay, useStyles, ErrorBoundary, - useSplitUserState + useSplitUserState, + Loader } from '@cloudbeaver/core-blocks'; import { useService } from '@cloudbeaver/core-di'; import { OptionsPanelService } from '@cloudbeaver/core-ui'; @@ -34,6 +35,9 @@ const styles = css` display: flex; overflow: auto; } + Loader { + height: 100%; + } SlideBox { flex: 1; } @@ -56,7 +60,11 @@ export const RightArea = observer(function RightArea({ className }) { return styled(useStyles(styles, splitStyles, splitHorizontalStyles, slideBoxStyles))( - + + + + + (function RightArea({ className }) { > - + + + - + + + diff --git a/webapp/packages/core-blocks/src/Loader/Loader.tsx b/webapp/packages/core-blocks/src/Loader/Loader.tsx index f6d6e4e01f..e3cf59655a 100644 --- a/webapp/packages/core-blocks/src/Loader/Loader.tsx +++ b/webapp/packages/core-blocks/src/Loader/Loader.tsx @@ -8,7 +8,7 @@ import { observable } from 'mobx'; import { observer } from 'mobx-react-lite'; -import { useState, useEffect, useContext, useRef } from 'react'; +import { useState, useEffect, useContext, useRef, Suspense } from 'react'; import styled, { use } from 'reshadow'; import type { ComponentStyle } from '@cloudbeaver/core-theming'; @@ -216,11 +216,13 @@ export const Loader = observer(function Loader({ if (children && (!loader || !loading) && !overlay) { if (loaded) { - if (typeof children === 'function') { - return {children()}; - } else { - return {children}; - } + return ( + + }> + {typeof children === 'function' ? children() : children} + + + ); } if (!loading) { @@ -230,11 +232,13 @@ export const Loader = observer(function Loader({ if ((!isVisible && overlay) || !loading) { if (overlay) { - if (typeof children === 'function') { - return {children()}; - } else { - return {children}; - } + return ( + + }> + {typeof children === 'function' ? children() : children} + + + ); } return null; @@ -253,7 +257,11 @@ export const Loader = observer(function Loader({ return styled(style)( <> - {overlay && children} + {overlay && ( + }> + {typeof children === 'function' ? children() : children} + + )} {!hideMessage && } diff --git a/webapp/packages/core-cli/configs/babel.config.js b/webapp/packages/core-cli/configs/babel.config.js index 216bc2af48..424fbc3c3a 100644 --- a/webapp/packages/core-cli/configs/babel.config.js +++ b/webapp/packages/core-cli/configs/babel.config.js @@ -52,7 +52,7 @@ module.exports = { // "importSource": "preact-jsx-runtime" }, ], - ['@babel/preset-typescript', { isTSX: true, allExtensions: true }], + ['@babel/preset-typescript', { isTSX: true, allExtensions: true, onlyRemoveTypeImports: true }], ], plugins: [ 'babel-plugin-transform-typescript-metadata', diff --git a/webapp/packages/core-cli/configs/webpack.config.js b/webapp/packages/core-cli/configs/webpack.config.js index 4274dc46f9..9784754399 100644 --- a/webapp/packages/core-cli/configs/webpack.config.js +++ b/webapp/packages/core-cli/configs/webpack.config.js @@ -114,26 +114,46 @@ module.exports = (env, argv) => { moduleIds: 'deterministic', splitChunks: { chunks: 'async', + minSize: 20000, + minRemainingSize: 0, + minChunks: 1, + maxAsyncRequests: 30, + maxInitialRequests: 30, + enforceSizeThreshold: 50000, cacheGroups: { locale: { test: /[\\/]locales[\\/].*?\.ts/, - filename: '[name].[contenthash].bundle.js', + filename: '[name].[contenthash].js', name(module) { return module.rawRequest.substr(2); }, priority: -5, reuseExistingChunk: true, }, + packages: { + test: /[\\/]packages[\\/]((plugin|core)-.*?)[\\/]src[\\/]/, + filename: '[name].[contenthash].js', + name(module) { + const path = module.context ?? module.resource; + const match = /[\\/]packages[\\/]((plugin|core)-.*?)([\\/]|$)/.exec(path); + if (!path || !match) { + return 'package'; + } + return match[1]; + }, + priority: -10, + enforce: true, + }, defaultVendors: { + chunks: 'all', name: 'vendors', test: new RegExp(`[\\\\/]node_modules[\\\\/](?!${excludedFromVendor.join('|')}).*?[\\\\/]`, ''), - priority: -10, - reuseExistingChunk: false, - enforce: true, + priority: -20, + reuseExistingChunk: true, }, default: { minChunks: 2, - priority: -20, + priority: -40, reuseExistingChunk: true, }, // styles: { diff --git a/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogWrapper.tsx b/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogWrapper.tsx index efdab3b626..9c1fe96134 100644 --- a/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogWrapper.tsx +++ b/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogWrapper.tsx @@ -11,8 +11,7 @@ import { useContext, useEffect } from 'react'; import { Dialog, useDialogState } from 'reakit/Dialog'; import styled, { use } from 'reshadow'; -import { Icon, IconOrImage, useTranslate, useStyles } from '@cloudbeaver/core-blocks'; - +import { Icon, IconOrImage, useTranslate, useStyles, Loader } from '@cloudbeaver/core-blocks'; import type { ComponentStyle } from '@cloudbeaver/core-theming'; import { DialogContext } from '../DialogContext'; @@ -86,7 +85,9 @@ export const CommonDialogWrapper = observer(function C - {children} + + {children} + {!noOverflow && } diff --git a/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/styles.ts b/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/styles.ts index 91f67fdd67..3667754e60 100644 --- a/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/styles.ts +++ b/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/styles.ts @@ -147,6 +147,9 @@ export const commonDialogBaseStyle = css` flex-direction: column; box-sizing: border-box; } + Loader { + height: 100%; + } dialog-body[|no-padding] + footer { padding-top: 24px; } diff --git a/webapp/packages/core-localization/src/LocalizationService.ts b/webapp/packages/core-localization/src/LocalizationService.ts index d2ee79e334..78ec1f100f 100644 --- a/webapp/packages/core-localization/src/LocalizationService.ts +++ b/webapp/packages/core-localization/src/LocalizationService.ts @@ -17,10 +17,6 @@ import type { ServerLanguage } from '@cloudbeaver/core-sdk'; import { SettingsService } from '@cloudbeaver/core-settings'; import type { ILocaleProvider } from './ILocaleProvider'; -import { defaultENLocale } from './locales/en'; -import { defaultITLocale } from './locales/it'; -import { defaultRULocale } from './locales/ru'; -import { defaultZHLocale } from './locales/zh'; import type { TLocalizationToken } from './TLocalizationToken'; export type ServerLanguageShort = Pick; @@ -160,16 +156,16 @@ export class LocalizationService extends Bootstrap { } } - private coreProvider(locale: string) { + private async coreProvider(locale: string) { switch (locale) { case 'ru': - return defaultRULocale; + return (await import('./locales/ru')).default; case 'it': - return defaultITLocale; + return (await import('./locales/it')).default; case 'zh': - return defaultZHLocale; + return (await import('./locales/zh')).default; default: - return defaultENLocale; + return (await import('./locales/en')).default; } } diff --git a/webapp/packages/core-localization/src/locales/en.ts b/webapp/packages/core-localization/src/locales/en.ts index 1f10277de9..c8d6b76ad7 100644 --- a/webapp/packages/core-localization/src/locales/en.ts +++ b/webapp/packages/core-localization/src/locales/en.ts @@ -1,4 +1,4 @@ -export const defaultENLocale = [ +export default [ ['name', 'en'], ['ui_rename_taken_or_invalid', 'This name is unavailable or invalid'], ['ui_tag_new', 'New'], diff --git a/webapp/packages/core-localization/src/locales/it.ts b/webapp/packages/core-localization/src/locales/it.ts index 707d60375c..7f6e4d645e 100644 --- a/webapp/packages/core-localization/src/locales/it.ts +++ b/webapp/packages/core-localization/src/locales/it.ts @@ -1,4 +1,4 @@ -export const defaultITLocale = [ +export default [ ['name', 'it'], ['ui_rename_taken_or_invalid', 'This name is unavailable or invalid'], ['ui_tag_new', 'Nuovo'], diff --git a/webapp/packages/core-localization/src/locales/ru.ts b/webapp/packages/core-localization/src/locales/ru.ts index b032faa2d6..776e2b71ea 100644 --- a/webapp/packages/core-localization/src/locales/ru.ts +++ b/webapp/packages/core-localization/src/locales/ru.ts @@ -1,4 +1,4 @@ -export const defaultRULocale = [ +export default [ ['name', 'ru'], ['ui_rename_taken_or_invalid', 'Имя занято или недопустимо'], ['ui_tag_new', 'Новый'], diff --git a/webapp/packages/core-localization/src/locales/zh.ts b/webapp/packages/core-localization/src/locales/zh.ts index e1ac28375d..cc95037918 100644 --- a/webapp/packages/core-localization/src/locales/zh.ts +++ b/webapp/packages/core-localization/src/locales/zh.ts @@ -1,4 +1,4 @@ -export const defaultZHLocale = [ +export default [ ['name', 'zh'], ['ui_rename_taken_or_invalid', 'This name is unavailable or invalid'], ['ui_tag_new', '新建'], diff --git a/webapp/packages/core-ui/src/Tabs/TabPanel.tsx b/webapp/packages/core-ui/src/Tabs/TabPanel.tsx index 4796e9c967..26454f849c 100644 --- a/webapp/packages/core-ui/src/Tabs/TabPanel.tsx +++ b/webapp/packages/core-ui/src/Tabs/TabPanel.tsx @@ -10,7 +10,7 @@ import { observer } from 'mobx-react-lite'; import { useContext, useMemo } from 'react'; import { TabPanel as BaseTabPanel, TabStateReturn } from 'reakit/Tab'; -import { ErrorBoundary, getComputed } from '@cloudbeaver/core-blocks'; +import { ErrorBoundary, getComputed, Loader } from '@cloudbeaver/core-blocks'; import { TabContext } from './TabContext'; import type { TabPanelProps } from './TabPanelProps'; @@ -38,22 +38,26 @@ export const TabPanel: React.FC = observer(function TabPanel({ if (typeof children === 'function') { return ( - - - {(children as (state: TabStateReturn) => React.ReactNode)(state.state)} - - + + + + {(children as (state: TabStateReturn) => React.ReactNode)(state.state)} + + + ); } return ( - - - {children} - - + + + + {children} + + + ); }); diff --git a/webapp/packages/plugin-administration/src/Administration/Administration.tsx b/webapp/packages/plugin-administration/src/Administration/Administration.tsx index af6e1d3075..4c519295c3 100644 --- a/webapp/packages/plugin-administration/src/Administration/Administration.tsx +++ b/webapp/packages/plugin-administration/src/Administration/Administration.tsx @@ -11,7 +11,7 @@ import { useLayoutEffect, useRef } from 'react'; import styled, { css } from 'reshadow'; import { AdministrationItemService, filterOnlyActive, IAdministrationItemRoute } from '@cloudbeaver/core-administration'; -import { SlideBox, SlideElement, ErrorBoundary, SlideOverlay, slideBoxStyles, useStyles } from '@cloudbeaver/core-blocks'; +import { SlideBox, SlideElement, ErrorBoundary, SlideOverlay, slideBoxStyles, useStyles, Loader } from '@cloudbeaver/core-blocks'; import { useService } from '@cloudbeaver/core-di'; import { TabsState, TabList, verticalTabStyles, BASE_TAB_STYLES, OptionsPanelService } from '@cloudbeaver/core-ui'; @@ -59,6 +59,9 @@ const administrationStyles = css` flex-direction: column; overflow: auto; } + Loader { + height: 100%; + } `; interface Props { @@ -102,16 +105,20 @@ export const Administration = observer>(function - - - + + + + + - - - + + + + + optionsPanelService.close()} /> diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/IdentityProviders/AuthConfigurationFormService.ts b/webapp/packages/plugin-authentication-administration/src/Administration/IdentityProviders/AuthConfigurationFormService.ts index a3b4c70786..16cc1cf74f 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/IdentityProviders/AuthConfigurationFormService.ts +++ b/webapp/packages/plugin-authentication-administration/src/Administration/IdentityProviders/AuthConfigurationFormService.ts @@ -6,15 +6,21 @@ * you may not use this file except in compliance with the License. */ +import React from 'react'; + import { PlaceholderContainer } from '@cloudbeaver/core-blocks'; import { injectable } from '@cloudbeaver/core-di'; import { ENotificationType, NotificationService } from '@cloudbeaver/core-events'; import { ExecutorHandlersCollection, ExecutorInterrupter, IExecutorHandler, IExecutorHandlersCollection } from '@cloudbeaver/core-executor'; import { TabsContainer } from '@cloudbeaver/core-ui'; -import { AuthConfigurationFormBaseActions } from './AuthConfigurationFormBaseActions'; import type { IAuthConfigurationFormFillConfigData, IAuthConfigurationFormProps, IAuthConfigurationFormSubmitData, IAuthConfigurationFormState } from './IAuthConfigurationFormProps'; +const AuthConfigurationFormBaseActions = React.lazy(async () => { + const { AuthConfigurationFormBaseActions } = await import('./AuthConfigurationFormBaseActions'); + return { default: AuthConfigurationFormBaseActions }; +}); + export interface IConfigurationFormValidation { valid: boolean; messages: string[]; @@ -93,7 +99,10 @@ export class AuthConfigurationFormService { }, }); - private readonly showSubmittingStatusMessage: IExecutorHandler = (data, contexts) => { + private readonly showSubmittingStatusMessage: IExecutorHandler = ( + data, + contexts + ) => { const status = contexts.getContext(this.configurationStatusContext); if (!status.saved) { diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/IdentityProviders/AuthConfigurationsAdministrationService.ts b/webapp/packages/plugin-authentication-administration/src/Administration/IdentityProviders/AuthConfigurationsAdministrationService.ts index 1479f5a396..09c2e2cdc3 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/IdentityProviders/AuthConfigurationsAdministrationService.ts +++ b/webapp/packages/plugin-authentication-administration/src/Administration/IdentityProviders/AuthConfigurationsAdministrationService.ts @@ -6,6 +6,8 @@ * you may not use this file except in compliance with the License. */ +import React from 'react'; + import { AdministrationItemService, AdministrationItemType } from '@cloudbeaver/core-administration'; import { AuthConfigurationsResource, AuthProviderService, AuthProvidersResource } from '@cloudbeaver/core-authentication'; import { PlaceholderContainer } from '@cloudbeaver/core-blocks'; @@ -13,10 +15,20 @@ import { injectable, Bootstrap } from '@cloudbeaver/core-di'; import { NotificationService } from '@cloudbeaver/core-events'; import { AdminAuthProviderConfiguration, CachedMapAllKey } from '@cloudbeaver/core-sdk'; -import { AuthConfigurationsAdministration } from './AuthConfigurationsAdministration'; -import { AuthConfigurationsDrawerItem } from './AuthConfigurationsDrawerItem'; import { CreateAuthConfigurationService } from './CreateAuthConfigurationService'; -import { IdentityProvidersServiceLink } from './IdentityProvidersServiceLink'; + +const AuthConfigurationsAdministration = React.lazy(async () => { + const { AuthConfigurationsAdministration } = await import('./AuthConfigurationsAdministration'); + return { default: AuthConfigurationsAdministration }; +}); +const AuthConfigurationsDrawerItem = React.lazy(async () => { + const { AuthConfigurationsDrawerItem } = await import('./AuthConfigurationsDrawerItem'); + return { default: AuthConfigurationsDrawerItem }; +}); +const IdentityProvidersServiceLink = React.lazy(async () => { + const { IdentityProvidersServiceLink } = await import('./IdentityProvidersServiceLink'); + return { default: IdentityProvidersServiceLink }; +}); export interface IAuthConfigurationDetailsPlaceholderProps { configuration: AdminAuthProviderConfiguration; diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/IdentityProviders/Options/AuthConfigurationOptionsTabService.ts b/webapp/packages/plugin-authentication-administration/src/Administration/IdentityProviders/Options/AuthConfigurationOptionsTabService.ts index 0ccae5e74c..b498e6da77 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/IdentityProviders/Options/AuthConfigurationOptionsTabService.ts +++ b/webapp/packages/plugin-authentication-administration/src/Administration/IdentityProviders/Options/AuthConfigurationOptionsTabService.ts @@ -6,6 +6,8 @@ * you may not use this file except in compliance with the License. */ +import React from 'react'; + import { AuthConfigurationsResource, AuthProvidersResource } from '@cloudbeaver/core-authentication'; import { Bootstrap, injectable } from '@cloudbeaver/core-di'; import type { IExecutionContextProvider } from '@cloudbeaver/core-executor'; @@ -14,7 +16,11 @@ import { getUniqueName } from '@cloudbeaver/core-utils'; import { AuthConfigurationFormService } from '../AuthConfigurationFormService'; import { authConfigurationContext } from '../Contexts/authConfigurationContext'; import type { IAuthConfigurationFormFillConfigData, IAuthConfigurationFormState, IAuthConfigurationFormSubmitData } from '../IAuthConfigurationFormProps'; -import { AuthConfigurationOptions } from './AuthConfigurationOptions'; + +const AuthConfigurationOptions = React.lazy(async () => { + const { AuthConfigurationOptions } = await import('./AuthConfigurationOptions'); + return { default: AuthConfigurationOptions }; +}); @injectable() export class AuthConfigurationOptionsTabService extends Bootstrap { diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsTabService.ts b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsTabService.ts index bf5c538e93..7642293acf 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsTabService.ts +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsTabService.ts @@ -6,6 +6,8 @@ * you may not use this file except in compliance with the License. */ +import React from 'react'; + import { TeamsResource } from '@cloudbeaver/core-authentication'; import { Bootstrap, injectable } from '@cloudbeaver/core-di'; import { NotificationService } from '@cloudbeaver/core-events'; @@ -17,9 +19,13 @@ import { isArraysEqual, MetadataValueGetter } from '@cloudbeaver/core-utils'; import { teamContext } from '../Contexts/teamContext'; import type { ITeamFormProps, ITeamFormSubmitData } from '../ITeamFormProps'; import { TeamFormService } from '../TeamFormService'; -import { GrantedConnections } from './GrantedConnections'; import type { IGrantedConnectionsTabState } from './IGrantedConnectionsTabState'; +const GrantedConnections = React.lazy(async () => { + const { GrantedConnections } = await import('./GrantedConnections'); + return { default: GrantedConnections }; +}); + @injectable() export class GrantedConnectionsTabService extends Bootstrap { private readonly key: string; diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUsersTabService.ts b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUsersTabService.ts index cda0f1a681..424151ef8c 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUsersTabService.ts +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUsersTabService.ts @@ -6,6 +6,8 @@ * you may not use this file except in compliance with the License. */ +import React from 'react'; + import { TeamsResource, UsersResource } from '@cloudbeaver/core-authentication'; import { Bootstrap, injectable } from '@cloudbeaver/core-di'; import { NotificationService } from '@cloudbeaver/core-events'; @@ -15,9 +17,13 @@ import { isArraysEqual, MetadataValueGetter } from '@cloudbeaver/core-utils'; import { teamContext } from '../Contexts/teamContext'; import type { ITeamFormProps, ITeamFormSubmitData } from '../ITeamFormProps'; import { TeamFormService } from '../TeamFormService'; -import { GrantedUsers } from './GrantedUsers'; import type { IGrantedUsersTabState } from './IGrantedUsersTabState'; +const GrantedUsers = React.lazy(async () => { + const { GrantedUsers } = await import('./GrantedUsers'); + return { default: GrantedUsers }; +}); + @injectable() export class GrantedUsersTabService extends Bootstrap { private readonly key: string; diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/Options/TeamOptionsTabService.ts b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/Options/TeamOptionsTabService.ts index 8888bb8fa6..6599e9c58b 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/Options/TeamOptionsTabService.ts +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/Options/TeamOptionsTabService.ts @@ -6,6 +6,8 @@ * you may not use this file except in compliance with the License. */ +import React from 'react'; + import { TeamsResource } from '@cloudbeaver/core-authentication'; import { Bootstrap, injectable } from '@cloudbeaver/core-di'; import type { IExecutionContextProvider } from '@cloudbeaver/core-executor'; @@ -15,7 +17,11 @@ import { getUniqueName } from '@cloudbeaver/core-utils'; import { teamContext } from '../Contexts/teamContext'; import type { ITeamFormFillConfigData, ITeamFormSubmitData } from '../ITeamFormProps'; import { TeamFormService } from '../TeamFormService'; -import { TeamOptions } from './TeamOptions'; + +const TeamOptions = React.lazy(async () => { + const { TeamOptions } = await import('./TeamOptions'); + return { default: TeamOptions }; +}); @injectable() export class TeamOptionsTabService extends Bootstrap { diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamFormService.ts b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamFormService.ts index edfd89364d..7624c1d21d 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamFormService.ts +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamFormService.ts @@ -6,6 +6,8 @@ * you may not use this file except in compliance with the License. */ +import React from 'react'; + import { PlaceholderContainer } from '@cloudbeaver/core-blocks'; import { injectable } from '@cloudbeaver/core-di'; import { ENotificationType, NotificationService } from '@cloudbeaver/core-events'; @@ -13,7 +15,11 @@ import { ExecutorHandlersCollection, ExecutorInterrupter, IExecutorHandler, IExe import { TabsContainer } from '@cloudbeaver/core-ui'; import type { ITeamFormFillConfigData, ITeamFormProps, ITeamFormState, ITeamFormSubmitData } from './ITeamFormProps'; -import { TeamFormBaseActions } from './TeamFormBaseActions'; + +const TeamFormBaseActions = React.lazy(async () => { + const { TeamFormBaseActions } = await import('./TeamFormBaseActions'); + return { default: TeamFormBaseActions }; +}); export interface ITeamFormValidation { valid: boolean; diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/ConnectionAccess/ConnectionAccessTabBootstrap.ts b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/ConnectionAccess/ConnectionAccessTabBootstrap.ts index 9972238eaf..eba0e7d774 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/ConnectionAccess/ConnectionAccessTabBootstrap.ts +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/ConnectionAccess/ConnectionAccessTabBootstrap.ts @@ -6,12 +6,18 @@ * you may not use this file except in compliance with the License. */ +import React from 'react'; + import { Bootstrap, injectable } from '@cloudbeaver/core-di'; import { isGlobalProject, ProjectInfoResource } from '@cloudbeaver/core-projects'; import { CachedMapAllKey } from '@cloudbeaver/core-sdk'; import { UserFormService } from '../UserFormService'; -import { ConnectionAccess } from './ConnectionAccess'; + +const ConnectionAccess = React.lazy(async () => { + const { ConnectionAccess } = await import('./ConnectionAccess'); + return { default: ConnectionAccess }; +}); @injectable() export class ConnectionAccessTabBootstrap extends Bootstrap { diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/UserFormBaseBootstrap.ts b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/UserFormBaseBootstrap.ts index f248124359..1bd8a919ee 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/UserFormBaseBootstrap.ts +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/UserFormBaseBootstrap.ts @@ -6,14 +6,26 @@ * you may not use this file except in compliance with the License. */ +import React from 'react'; + import { AUTH_PROVIDER_LOCAL_ID } from '@cloudbeaver/core-authentication'; import { injectable, Bootstrap } from '@cloudbeaver/core-di'; import { getOriginTabId } from './getOriginTabId'; -import { OriginInfoPanel } from './OriginInfoPanel'; -import { OriginInfoTab } from './OriginInfoTab'; import { UserFormService } from './UserFormService'; -import { UserInfo } from './UserInfo'; + +const OriginInfoPanel = React.lazy(async () => { + const { OriginInfoPanel } = await import('./OriginInfoPanel'); + return { default: OriginInfoPanel }; +}); +const OriginInfoTab = React.lazy(async () => { + const { OriginInfoTab } = await import('./OriginInfoTab'); + return { default: OriginInfoTab }; +}); +const UserInfo = React.lazy(async () => { + const { UserInfo } = await import('./UserInfo'); + return { default: UserInfo }; +}); @injectable() export class UserFormBaseBootstrap extends Bootstrap { diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersAdministrationService.ts b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersAdministrationService.ts index 3001d79b73..7730a6f3c2 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersAdministrationService.ts +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersAdministrationService.ts @@ -6,17 +6,31 @@ * you may not use this file except in compliance with the License. */ +import React from 'react'; + import { AdministrationItemService } from '@cloudbeaver/core-administration'; import { AdminUser, TeamsResource } from '@cloudbeaver/core-authentication'; import { PlaceholderContainer } from '@cloudbeaver/core-blocks'; import { injectable, Bootstrap } from '@cloudbeaver/core-di'; import { CreateTeamService } from './Teams/CreateTeamService'; -import { UsersAdministration } from './UsersAdministration'; import { EUsersAdministrationSub, UsersAdministrationNavigationService } from './UsersAdministrationNavigationService'; -import { UsersDrawerItem } from './UsersDrawerItem'; import { CreateUserService } from './UsersTable/CreateUserService'; -import { Origin } from './UsersTable/UserDetailsInfo/Origin'; + +const Origin = React.lazy(async () => { + const { Origin } = await import('./UsersTable/UserDetailsInfo/Origin'); + return { default: Origin }; +}); + +const UsersDrawerItem = React.lazy(async () => { + const { UsersDrawerItem } = await import('./UsersDrawerItem'); + return { default: UsersDrawerItem }; +}); + +const UsersAdministration = React.lazy(async () => { + const { UsersAdministration } = await import('./UsersAdministration'); + return { default: UsersAdministration }; +}); export interface IUserDetailsInfoProps { user: AdminUser; diff --git a/webapp/packages/plugin-authentication-administration/src/PluginBootstrap.ts b/webapp/packages/plugin-authentication-administration/src/PluginBootstrap.ts index 3c0d8f8bf7..93ed00b9b0 100644 --- a/webapp/packages/plugin-authentication-administration/src/PluginBootstrap.ts +++ b/webapp/packages/plugin-authentication-administration/src/PluginBootstrap.ts @@ -6,12 +6,18 @@ * you may not use this file except in compliance with the License. */ +import React from 'react'; + import { injectable, Bootstrap } from '@cloudbeaver/core-di'; import { ServerConfigurationAdministrationNavService, ServerConfigurationService } from '@cloudbeaver/plugin-administration'; import { AuthenticationService } from '@cloudbeaver/plugin-authentication'; import { AuthConfigurationsAdministrationNavService } from './Administration/IdentityProviders/AuthConfigurationsAdministrationNavService'; -import { AuthenticationProviders } from './Administration/ServerConfiguration/AuthenticationProviders'; + +const AuthenticationProviders = React.lazy(async () => { + const { AuthenticationProviders } = await import('./Administration/ServerConfiguration/AuthenticationProviders'); + return { default: AuthenticationProviders }; +}); @injectable() export class PluginBootstrap extends Bootstrap { diff --git a/webapp/packages/plugin-connection-search/src/Search/SearchDatabase.tsx b/webapp/packages/plugin-connection-search/src/Search/SearchDatabase.tsx index 842529f15b..cd1befe63c 100644 --- a/webapp/packages/plugin-connection-search/src/Search/SearchDatabase.tsx +++ b/webapp/packages/plugin-connection-search/src/Search/SearchDatabase.tsx @@ -7,17 +7,24 @@ */ import { observer } from 'mobx-react-lite'; +import styled, { css } from 'reshadow'; -import { useResource } from '@cloudbeaver/core-blocks'; +import { Loader, useResource } from '@cloudbeaver/core-blocks'; import { DBDriverResource } from '@cloudbeaver/core-connections'; import { useService } from '@cloudbeaver/core-di'; import { ProjectInfoResource } from '@cloudbeaver/core-projects'; import { AdminConnectionSearchInfo, CachedMapAllKey } from '@cloudbeaver/core-sdk'; -import { ConnectionForm } from '@cloudbeaver/plugin-connections'; +import { ConnectionFormLoader } from '@cloudbeaver/plugin-connections'; import { ConnectionSearchService } from './ConnectionSearchService'; import { DatabaseList } from './DatabaseList'; +const styles = css` + Loader { + height: 100%; + } +`; + export const SearchDatabase: React.FC = observer(function SearchDatabase() { const connectionSearchService = useService(ConnectionSearchService); @@ -29,12 +36,14 @@ export const SearchDatabase: React.FC = observer(function SearchDatabase() { } if (connectionSearchService.formState) { - return ( - connectionSearchService.saveConnection()} - onCancel={() => connectionSearchService.goBack()} - /> + return styled(styles)( + + connectionSearchService.saveConnection()} + onCancel={() => connectionSearchService.goBack()} + /> + ); } diff --git a/webapp/packages/plugin-connection-template/src/ConnectionDialog/ConnectionDialog.tsx b/webapp/packages/plugin-connection-template/src/ConnectionDialog/ConnectionDialog.tsx index 7e6055e34b..dfae12fbff 100644 --- a/webapp/packages/plugin-connection-template/src/ConnectionDialog/ConnectionDialog.tsx +++ b/webapp/packages/plugin-connection-template/src/ConnectionDialog/ConnectionDialog.tsx @@ -19,7 +19,7 @@ import { } from '@cloudbeaver/core-blocks'; import { useController } from '@cloudbeaver/core-di'; import { CommonDialogWrapper, DialogComponent } from '@cloudbeaver/core-dialogs'; -import { ConnectionAuthenticationForm } from '@cloudbeaver/plugin-connections'; +import { ConnectionAuthenticationFormLoader } from '@cloudbeaver/plugin-connections'; import { ConnectionController, ConnectionStep } from './ConnectionController'; import { ConnectionDialogFooter } from './ConnectionDialogFooter'; @@ -37,6 +37,9 @@ const styles = css` align-items: center; justify-content: center; } + ConnectionAuthenticationFormLoader { + align-content: center; + } ErrorMessage { composes: theme-background-secondary theme-text-on-secondary from global; } @@ -88,7 +91,7 @@ export const ConnectionDialog: DialogComponent = observer(function C ) : ( - { + const { ConnectionsAdministration } = await import('./ConnectionsAdministration'); + return { default: ConnectionsAdministration }; +}); +const ConnectionsDrawerItem = React.lazy(async () => { + const { ConnectionsDrawerItem } = await import('./ConnectionsDrawerItem'); + return { default: ConnectionsDrawerItem }; +}); +const Origin = React.lazy(async () => { + const { Origin } = await import('./ConnectionsTable/ConnectionDetailsInfo/Origin'); + return { default: Origin }; +}); +const SSH = React.lazy(async () => { + const { SSH } = await import('./ConnectionsTable/ConnectionDetailsInfo/SSH'); + return { default: SSH }; +}); +const Template = React.lazy(async () => { + const { Template } = await import('./ConnectionsTable/ConnectionDetailsInfo/Template'); + return { default: Template }; +}); + @injectable() export class ConnectionsAdministrationService extends Bootstrap { readonly connectionDetailsPlaceholder = new PlaceholderContainer(); diff --git a/webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionEdit.tsx b/webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionEdit.tsx index b7ac20f7a5..653ee2fa7b 100644 --- a/webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionEdit.tsx +++ b/webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionEdit.tsx @@ -10,9 +10,10 @@ import { observer } from 'mobx-react-lite'; import { useRef, useEffect } from 'react'; import styled, { css } from 'reshadow'; +import { Loader } from '@cloudbeaver/core-blocks'; import { ConnectionInfoResource, IConnectionInfoParams } from '@cloudbeaver/core-connections'; import { useService } from '@cloudbeaver/core-di'; -import { ConnectionForm, useConnectionFormState } from '@cloudbeaver/plugin-connections'; +import { ConnectionFormLoader, useConnectionFormState } from '@cloudbeaver/plugin-connections'; const styles = css` box { @@ -23,6 +24,9 @@ const styles = css` flex-direction: column; height: 740px; } + Loader { + height: 100%; + } `; interface Props { @@ -54,11 +58,13 @@ export const ConnectionEdit = observer(function ConnectionEditNew({ return styled(styles)( - + + /> + ); }); diff --git a/webapp/packages/plugin-connections-administration/src/Administration/Connections/CreateConnection/CreateConnection.tsx b/webapp/packages/plugin-connections-administration/src/Administration/Connections/CreateConnection/CreateConnection.tsx index 6ed72a4c9c..6cb1a9e23d 100644 --- a/webapp/packages/plugin-connections-administration/src/Administration/Connections/CreateConnection/CreateConnection.tsx +++ b/webapp/packages/plugin-connections-administration/src/Administration/Connections/CreateConnection/CreateConnection.tsx @@ -13,7 +13,7 @@ import { IconButton, Loader, StaticImage, Icon, useResource, useTranslate, useSt import { DBDriverResource } from '@cloudbeaver/core-connections'; import { useService } from '@cloudbeaver/core-di'; import { TabsState, TabList, UNDERLINE_TAB_STYLES, TabPanelList, BASE_TAB_STYLES } from '@cloudbeaver/core-ui'; -import { ConnectionForm } from '@cloudbeaver/plugin-connections'; +import { ConnectionFormLoader } from '@cloudbeaver/plugin-connections'; import { CreateConnectionService } from '../CreateConnectionService'; @@ -70,6 +70,7 @@ const styles = css` Loader { z-index: 1; + height: 100%; } title-bar { @@ -137,11 +138,13 @@ export const CreateConnection = observer(function CreateConnection({ - + + + ); diff --git a/webapp/packages/plugin-connections-administration/src/Administration/Connections/CreateConnection/CreateConnectionBaseBootstrap.ts b/webapp/packages/plugin-connections-administration/src/Administration/Connections/CreateConnection/CreateConnectionBaseBootstrap.ts index 78de8687f1..ebe3abfda4 100644 --- a/webapp/packages/plugin-connections-administration/src/Administration/Connections/CreateConnection/CreateConnectionBaseBootstrap.ts +++ b/webapp/packages/plugin-connections-administration/src/Administration/Connections/CreateConnection/CreateConnectionBaseBootstrap.ts @@ -6,10 +6,16 @@ * you may not use this file except in compliance with the License. */ +import React from 'react'; + import { injectable, Bootstrap } from '@cloudbeaver/core-di'; import { CreateConnectionService } from '../CreateConnectionService'; -import { CustomConnection } from './Manual/CustomConnection'; + +const CustomConnection = React.lazy(async () => { + const { CustomConnection } = await import('./Manual/CustomConnection'); + return { default: CustomConnection }; +}); @injectable() export class CreateConnectionBaseBootstrap extends Bootstrap { diff --git a/webapp/packages/plugin-connections-administration/src/Administration/Connections/CreateConnection/Manual/ConnectionManualService.tsx b/webapp/packages/plugin-connections-administration/src/Administration/Connections/CreateConnection/Manual/ConnectionManualService.ts similarity index 93% rename from webapp/packages/plugin-connections-administration/src/Administration/Connections/CreateConnection/Manual/ConnectionManualService.tsx rename to webapp/packages/plugin-connections-administration/src/Administration/Connections/CreateConnection/Manual/ConnectionManualService.ts index 24e03c819a..7d33676284 100644 --- a/webapp/packages/plugin-connections-administration/src/Administration/Connections/CreateConnection/Manual/ConnectionManualService.tsx +++ b/webapp/packages/plugin-connections-administration/src/Administration/Connections/CreateConnection/Manual/ConnectionManualService.ts @@ -23,7 +23,7 @@ export class ConnectionManualService { constructor( private readonly connectionInfoResource: ConnectionInfoResource, - private createConnectionService: CreateConnectionService + private readonly createConnectionService: CreateConnectionService ) { this.select = this.select.bind(this); } diff --git a/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessTabService.ts b/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessTabService.ts index 36f36a7ce3..3a1a007604 100644 --- a/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessTabService.ts +++ b/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessTabService.ts @@ -5,6 +5,7 @@ * Licensed under the Apache License, Version 2.0. * you may not use this file except in compliance with the License. */ +import React from 'react'; import { AdministrationScreenService } from '@cloudbeaver/core-administration'; import { EAdminPermission } from '@cloudbeaver/core-authentication'; @@ -16,9 +17,13 @@ import { PermissionsService } from '@cloudbeaver/core-root'; import type { MetadataValueGetter } from '@cloudbeaver/core-utils'; import { connectionConfigContext, ConnectionFormService, connectionFormStateContext, IConnectionFormProps, IConnectionFormState, IConnectionFormSubmitData } from '@cloudbeaver/plugin-connections'; -import { ConnectionAccess } from './ConnectionAccess'; import type { IConnectionAccessTabState } from './IConnectionAccessTabState'; +const ConnectionAccess = React.lazy(async () => { + const { ConnectionAccess } = await import('./ConnectionAccess'); + return { default: ConnectionAccess }; +}); + @injectable() export class ConnectionAccessTabService extends Bootstrap { private readonly key: string; diff --git a/webapp/packages/plugin-connections/src/ConnectionAuthentication/ConnectionAuthenticationDialog.tsx b/webapp/packages/plugin-connections/src/ConnectionAuthentication/ConnectionAuthenticationDialog.tsx index 55c36f04ab..44ff0fddd4 100644 --- a/webapp/packages/plugin-connections/src/ConnectionAuthentication/ConnectionAuthenticationDialog.tsx +++ b/webapp/packages/plugin-connections/src/ConnectionAuthentication/ConnectionAuthenticationDialog.tsx @@ -12,11 +12,10 @@ import styled, { css } from 'reshadow'; import { SubmittingForm, useFocus, Button, useTranslate, useStyles } from '@cloudbeaver/core-blocks'; import { useDBDriver } from '@cloudbeaver/core-connections'; import { CommonDialogWrapper, DialogComponent } from '@cloudbeaver/core-dialogs'; - import type { ConnectionConfig } from '@cloudbeaver/core-sdk'; -import { ConnectionAuthenticationForm } from './ConnectionAuthenticationForm'; +import { ConnectionAuthenticationFormLoader } from './ConnectionAuthenticationFormLoader'; const styles = css` SubmittingForm { @@ -26,7 +25,7 @@ const styles = css` display: flex; flex-direction: column; } - ConnectionAuthenticationForm { + ConnectionAuthenticationFormLoader { align-content: center; } Button { @@ -64,7 +63,7 @@ export const ConnectionAuthenticationDialog: DialogComponent = observer onReject={rejectDialog} > resolveDialog()}> - { + const { ConnectionAuthenticationDialog } = await import('./ConnectionAuthenticationDialog'); + return { default: ConnectionAuthenticationDialog }; +}); \ No newline at end of file diff --git a/webapp/packages/plugin-connections/src/ConnectionAuthentication/ConnectionAuthenticationFormLoader.tsx b/webapp/packages/plugin-connections/src/ConnectionAuthentication/ConnectionAuthenticationFormLoader.tsx new file mode 100644 index 0000000000..44740228ae --- /dev/null +++ b/webapp/packages/plugin-connections/src/ConnectionAuthentication/ConnectionAuthenticationFormLoader.tsx @@ -0,0 +1,14 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2022 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ + +import React from 'react'; + +export const ConnectionAuthenticationFormLoader = React.lazy(async () => { + const { ConnectionAuthenticationForm } = await import('./ConnectionAuthenticationForm'); + return { default: ConnectionAuthenticationForm }; +}); \ No newline at end of file diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/ConnectionFormBaseActionsLoader.tsx b/webapp/packages/plugin-connections/src/ConnectionForm/ConnectionFormBaseActionsLoader.tsx new file mode 100644 index 0000000000..4e9f94b4a7 --- /dev/null +++ b/webapp/packages/plugin-connections/src/ConnectionForm/ConnectionFormBaseActionsLoader.tsx @@ -0,0 +1,14 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2022 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ + +import React from 'react'; + +export const ConnectionFormBaseActionsLoader = React.lazy(async () => { + const { ConnectionFormBaseActions } = await import('./ConnectionFormBaseActions'); + return { default: ConnectionFormBaseActions }; +}); \ No newline at end of file diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/ConnectionFormLoader.tsx b/webapp/packages/plugin-connections/src/ConnectionForm/ConnectionFormLoader.tsx new file mode 100644 index 0000000000..c4626d2f56 --- /dev/null +++ b/webapp/packages/plugin-connections/src/ConnectionForm/ConnectionFormLoader.tsx @@ -0,0 +1,14 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2022 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ + +import React from 'react'; + +export const ConnectionFormLoader = React.lazy(async () => { + const { ConnectionForm } = await import('./ConnectionForm'); + return { default: ConnectionForm }; +}); \ No newline at end of file diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/ConnectionFormService.ts b/webapp/packages/plugin-connections/src/ConnectionForm/ConnectionFormService.ts index 6bac0d6eec..5cd9bef3f7 100644 --- a/webapp/packages/plugin-connections/src/ConnectionForm/ConnectionFormService.ts +++ b/webapp/packages/plugin-connections/src/ConnectionForm/ConnectionFormService.ts @@ -16,8 +16,8 @@ import { ExecutorHandlersCollection, ExecutorInterrupter, IExecutorHandler, IExe import { LocalizationService } from '@cloudbeaver/core-localization'; import { TabsContainer } from '@cloudbeaver/core-ui'; -import { ConnectionAuthenticationDialog } from '../ConnectionAuthentication/ConnectionAuthenticationDialog'; -import { ConnectionFormBaseActions } from './ConnectionFormBaseActions'; +import { ConnectionAuthenticationDialogLoader } from '../ConnectionAuthentication/ConnectionAuthenticationDialogLoader'; +import { ConnectionFormBaseActionsLoader } from './ConnectionFormBaseActionsLoader'; import { connectionConfigContext } from './Contexts/connectionConfigContext'; import { connectionCredentialsStateContext } from './Contexts/connectionCredentialsStateContext'; import type { IConnectionFormProps, IConnectionFormState, IConnectionFormFillConfigData, IConnectionFormSubmitData } from './IConnectionFormProps'; @@ -74,7 +74,7 @@ export class ConnectionFormService { this.formSubmittingTask.addPostHandler(this.showSubmittingStatusMessage); this.formValidationTask.addPostHandler(this.ensureValidation); - this.actionsContainer.add(ConnectionFormBaseActions); + this.actionsContainer.add(ConnectionFormBaseActionsLoader); } connectionValidationContext = (): IConnectionFormValidation => ({ @@ -153,7 +153,7 @@ export class ConnectionFormService { } }); - const result = await this.commonDialogService.open(ConnectionAuthenticationDialog, { + const result = await this.commonDialogService.open(ConnectionAuthenticationDialogLoader, { config, authModelId: credentialsState.authModelId, networkHandlers: credentialsState.networkHandlers, diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/DriverProperties/ConnectionDriverPropertiesTabService.ts b/webapp/packages/plugin-connections/src/ConnectionForm/DriverProperties/ConnectionDriverPropertiesTabService.ts index 2495325a75..02ab5c727e 100644 --- a/webapp/packages/plugin-connections/src/ConnectionForm/DriverProperties/ConnectionDriverPropertiesTabService.ts +++ b/webapp/packages/plugin-connections/src/ConnectionForm/DriverProperties/ConnectionDriverPropertiesTabService.ts @@ -18,7 +18,7 @@ import { ConnectionFormService } from '../ConnectionFormService'; import { connectionConfigContext } from '../Contexts/connectionConfigContext'; import { connectionFormStateContext } from '../Contexts/connectionFormStateContext'; import type { IConnectionFormFillConfigData, IConnectionFormSubmitData, IConnectionFormState } from '../IConnectionFormProps'; -import { DriverProperties } from './DriverProperties'; +import { DriverPropertiesLoader } from './DriverPropertiesLoader'; @injectable() export class ConnectionDriverPropertiesTabService extends Bootstrap { @@ -39,7 +39,7 @@ export class ConnectionDriverPropertiesTabService extends Bootstrap { name: 'customConnection_properties', title: 'customConnection_properties', order: 2, - panel: () => DriverProperties, + panel: () => DriverPropertiesLoader, isDisabled: (tabId, props) => { if (props?.state.config.driverId) { return !props.state.config.driverId; diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/DriverProperties/DriverPropertiesLoader.tsx b/webapp/packages/plugin-connections/src/ConnectionForm/DriverProperties/DriverPropertiesLoader.tsx new file mode 100644 index 0000000000..6d2142763f --- /dev/null +++ b/webapp/packages/plugin-connections/src/ConnectionForm/DriverProperties/DriverPropertiesLoader.tsx @@ -0,0 +1,14 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2022 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ + +import React from 'react'; + +export const DriverPropertiesLoader = React.lazy(async () => { + const { DriverProperties } = await import('./DriverProperties'); + return { default: DriverProperties }; +}); \ No newline at end of file diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/Options/ConnectionOptionsTabService.ts b/webapp/packages/plugin-connections/src/ConnectionForm/Options/ConnectionOptionsTabService.ts index caf955e316..d0d547584d 100644 --- a/webapp/packages/plugin-connections/src/ConnectionForm/Options/ConnectionOptionsTabService.ts +++ b/webapp/packages/plugin-connections/src/ConnectionForm/Options/ConnectionOptionsTabService.ts @@ -7,6 +7,7 @@ */ import { action, makeObservable, runInAction, toJS } from 'mobx'; +import React from 'react'; import { AuthProvidersResource, AUTH_PROVIDER_LOCAL_ID, EAdminPermission, UserInfoResource } from '@cloudbeaver/core-authentication'; import { ConnectionInfoProjectKey, createConnectionParam, DatabaseAuthModelsResource, DatabaseConnection, DBDriverResource, isLocalConnection } from '@cloudbeaver/core-connections'; @@ -24,7 +25,11 @@ import { connectionConfigContext } from '../Contexts/connectionConfigContext'; import { connectionCredentialsStateContext } from '../Contexts/connectionCredentialsStateContext'; import { connectionFormStateContext } from '../Contexts/connectionFormStateContext'; import type { IConnectionFormSubmitData, IConnectionFormFillConfigData, IConnectionFormState } from '../IConnectionFormProps'; -import { Options } from './Options'; + +export const Options = React.lazy(async () => { + const { Options } = await import('./Options'); + return { default: Options }; +}); @injectable() export class ConnectionOptionsTabService extends Bootstrap { diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/OriginInfo/ConnectionOriginInfoTabService.ts b/webapp/packages/plugin-connections/src/ConnectionForm/OriginInfo/ConnectionOriginInfoTabService.ts index 608acab07c..a16a5d5fda 100644 --- a/webapp/packages/plugin-connections/src/ConnectionForm/OriginInfo/ConnectionOriginInfoTabService.ts +++ b/webapp/packages/plugin-connections/src/ConnectionForm/OriginInfo/ConnectionOriginInfoTabService.ts @@ -6,6 +6,8 @@ * you may not use this file except in compliance with the License. */ +import React from 'react'; + import { isLocalConnection } from '@cloudbeaver/core-connections'; import { Bootstrap, injectable } from '@cloudbeaver/core-di'; import type { IExecutionContextProvider } from '@cloudbeaver/core-executor'; @@ -13,9 +15,19 @@ import type { IExecutionContextProvider } from '@cloudbeaver/core-executor'; import { connectionFormConfigureContext } from '../connectionFormConfigureContext'; import { ConnectionFormService } from '../ConnectionFormService'; import type { IConnectionFormState } from '../IConnectionFormProps'; -import { ConnectionFormAuthenticationAction } from './ConnectionFormAuthenticationAction'; -import { OriginInfo } from './OriginInfo'; -import { OriginInfoTab } from './OriginInfoTab'; + +export const ConnectionFormAuthenticationAction = React.lazy(async () => { + const { ConnectionFormAuthenticationAction } = await import('./ConnectionFormAuthenticationAction'); + return { default: ConnectionFormAuthenticationAction }; +}); +export const OriginInfo = React.lazy(async () => { + const { OriginInfo } = await import('./OriginInfo'); + return { default: OriginInfo }; +}); +export const OriginInfoTab = React.lazy(async () => { + const { OriginInfoTab } = await import('./OriginInfoTab'); + return { default: OriginInfoTab }; +}); @injectable() export class ConnectionOriginInfoTabService extends Bootstrap { diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/SSH/ConnectionSSHTabService.ts b/webapp/packages/plugin-connections/src/ConnectionForm/SSH/ConnectionSSHTabService.ts index 6f6cb05113..2924e20e7d 100644 --- a/webapp/packages/plugin-connections/src/ConnectionForm/SSH/ConnectionSSHTabService.ts +++ b/webapp/packages/plugin-connections/src/ConnectionForm/SSH/ConnectionSSHTabService.ts @@ -7,6 +7,7 @@ */ import { action, makeObservable } from 'mobx'; +import React from 'react'; import { DBDriverResource, SSH_TUNNEL_ID } from '@cloudbeaver/core-connections'; import { Bootstrap, injectable } from '@cloudbeaver/core-di'; @@ -19,8 +20,15 @@ import { connectionConfigContext } from '../Contexts/connectionConfigContext'; import { connectionCredentialsStateContext } from '../Contexts/connectionCredentialsStateContext'; import { connectionFormStateContext } from '../Contexts/connectionFormStateContext'; import type { IConnectionFormFillConfigData, IConnectionFormState, IConnectionFormSubmitData } from '../IConnectionFormProps'; -import { SSHPanel } from './SSHPanel'; -import { SSHTab } from './SSHTab'; + +export const SSHTab = React.lazy(async () => { + const { SSHTab } = await import('./SSHTab'); + return { default: SSHTab }; +}); +export const SSHPanel = React.lazy(async () => { + const { SSHPanel } = await import('./SSHPanel'); + return { default: SSHPanel }; +}); @injectable() export class ConnectionSSHTabService extends Bootstrap { diff --git a/webapp/packages/plugin-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx b/webapp/packages/plugin-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx index 3bf3e0d86b..07d4b45d5b 100644 --- a/webapp/packages/plugin-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx +++ b/webapp/packages/plugin-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx @@ -21,7 +21,7 @@ import { IConnectionInfoParams, useConnectionInfo, useDBDriver } from '@cloudbea import { useController } from '@cloudbeaver/core-di'; import { CommonDialogWrapper, DialogComponent } from '@cloudbeaver/core-dialogs'; -import { ConnectionAuthenticationForm } from '../ConnectionAuthentication/ConnectionAuthenticationForm'; +import { ConnectionAuthenticationFormLoader } from '../ConnectionAuthentication/ConnectionAuthenticationFormLoader'; import { DBAuthDialogController } from './DBAuthDialogController'; import { DBAuthDialogFooter } from './DBAuthDialogFooter'; @@ -33,7 +33,7 @@ const styles = css` display: flex; flex-direction: column; } - ConnectionAuthenticationForm { + ConnectionAuthenticationFormLoader { align-content: center; } ErrorMessage { @@ -91,7 +91,7 @@ export const DatabaseAuthDialog: DialogComponent = observer(function Da {!connection.isLoaded() || connection.isLoading() || !controller.configured ? : ( - {() => service.formState && ( - = observer(function DataViewerPanel({ @@ -58,7 +58,7 @@ export const DataViewerPanel: ObjectPagePanelComponent = o return ( {tab.handlerState.tableId ? ( - void; } -export const TableError = observer(function TableViewer({ +export const TableError = observer(function TableError({ model, loading, className, diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/TableHeaderService.ts b/webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/TableHeaderService.ts index 8d40977f0d..18c448f0b1 100644 --- a/webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/TableHeaderService.ts +++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/TableHeaderService.ts @@ -6,6 +6,8 @@ * you may not use this file except in compliance with the License. */ +import React from 'react'; + import { PlaceholderContainer } from '@cloudbeaver/core-blocks'; import { injectable, Bootstrap } from '@cloudbeaver/core-di'; import { MenuService, ActionService, DATA_CONTEXT_MENU } from '@cloudbeaver/core-view'; @@ -16,8 +18,15 @@ import type { IDatabaseDataModel } from '../../DatabaseDataModel/IDatabaseDataMo import { DATA_CONTEXT_DATA_VIEWER_DATABASE_DATA_MODEL } from './DATA_CONTEXT_DATA_VIEWER_DATABASE_DATA_MODEL'; import { DATA_CONTEXT_DATA_VIEWER_DATABASE_DATA_MODEL_RESULT_INDEX } from './DATA_CONTEXT_DATA_VIEWER_DATABASE_DATA_MODEL_RESULT_INDEX'; import { DATA_VIEWER_DATA_MODEL_TOOLS_MENU } from './DATA_VIEWER_DATA_MODEL_TOOLS_MENU'; -import { TableHeaderMenu } from './TableHeaderMenu'; -import { TableWhereFilter } from './TableWhereFilter'; + +export const TableWhereFilter = React.lazy(async () => { + const { TableWhereFilter } = await import('./TableWhereFilter'); + return { default: TableWhereFilter }; +}); +export const TableHeaderMenu = React.lazy(async () => { + const { TableHeaderMenu } = await import('./TableHeaderMenu'); + return { default: TableHeaderMenu }; +}); export interface ITableHeaderPlaceholderProps { model: IDatabaseDataModel; diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewer.tsx b/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewer.tsx index e4e1150acb..ec3f522c6f 100644 --- a/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewer.tsx +++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewer.tsx @@ -15,7 +15,6 @@ import { getComputed, Loader, Pane, ResizerControls, Split, splitStyles, TextPla import { useService } from '@cloudbeaver/core-di'; import { ResultDataFormat } from '@cloudbeaver/core-sdk'; - import { ResultSetConstraintAction } from '../DatabaseDataModel/Actions/ResultSet/ResultSetConstraintAction'; import { DataPresentationService, DataPresentationType } from '../DataPresentationService'; import type { IDataTableActionsPrivate } from './IDataTableActions'; diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewerLoader.ts b/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewerLoader.ts new file mode 100644 index 0000000000..013c9e546f --- /dev/null +++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewerLoader.ts @@ -0,0 +1,14 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2022 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ + +import React from 'react'; + +export const TableViewerLoader = React.lazy(async () => { + const { TableViewer } = await import('./TableViewer'); + return { default: TableViewer }; +}); \ No newline at end of file diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/ValuePanel/DataValuePanelBootstrap.ts b/webapp/packages/plugin-data-viewer/src/TableViewer/ValuePanel/DataValuePanelBootstrap.ts index 4f93d93cd1..f93df97306 100644 --- a/webapp/packages/plugin-data-viewer/src/TableViewer/ValuePanel/DataValuePanelBootstrap.ts +++ b/webapp/packages/plugin-data-viewer/src/TableViewer/ValuePanel/DataValuePanelBootstrap.ts @@ -6,11 +6,17 @@ * you may not use this file except in compliance with the License. */ +import React from 'react'; + import { Bootstrap, injectable } from '@cloudbeaver/core-di'; import { DataPresentationService, DataPresentationType } from '../../DataPresentationService'; import { DataValuePanelService } from './DataValuePanelService'; -import { ValuePanel } from './ValuePanel'; + +export const ValuePanel = React.lazy(async () => { + const { ValuePanel } = await import('./ValuePanel'); + return { default: ValuePanel }; +}); @injectable() export class DataValuePanelBootstrap extends Bootstrap { diff --git a/webapp/packages/plugin-data-viewer/src/index.ts b/webapp/packages/plugin-data-viewer/src/index.ts index 96b7123bc7..c9f9240b5d 100644 --- a/webapp/packages/plugin-data-viewer/src/index.ts +++ b/webapp/packages/plugin-data-viewer/src/index.ts @@ -46,7 +46,8 @@ export * from './TableViewer/ValuePanel/DataValuePanelService'; export * from './TableViewer/IDataTableActions'; export * from './TableViewer/IDataPresentationActions'; -export * from './TableViewer/TableViewer'; + +export * from './TableViewer/TableViewerLoader'; export * from './TableViewer/TableFooter/TableFooterMenu/TableFooterMenuService'; export * from './ContainerDataSource'; diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTree.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTree.tsx index 2843cceced..379a638755 100644 --- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTree.tsx +++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTree.tsx @@ -17,8 +17,8 @@ import { type NavNode, ROOT_NODE_PATH, NavTreeResource, NavNodeInfoResource, EOb import type { ComponentStyle } from '@cloudbeaver/core-theming'; import { useNavTreeDropBox } from '../useNavTreeDropBox'; +import { ElementsTreeContentLoader } from './ElementsTreeContentLoader'; import { IElementsTreeContext, ElementsTreeContext } from './ElementsTreeContext'; -import { ElementsTreeLoader } from './ElementsTreeLoader'; import { elementsTreeNameFilter } from './elementsTreeNameFilter'; import { ElementsTreeTools } from './ElementsTreeTools/ElementsTreeTools'; import type { IElementsTreeSettingsProps } from './ElementsTreeTools/NavigationTreeSettings/ElementsTreeSettingsService'; @@ -88,7 +88,7 @@ const styles = css` } `; -interface Props extends IElementsTreeOptions { +export interface ElementsTreeProps extends IElementsTreeOptions, React.PropsWithChildren { root?: string; limit?: number; selectionTree?: boolean; @@ -103,7 +103,7 @@ interface Props extends IElementsTreeOptions { onOpen?: (node: NavNode, folder: boolean) => Promise | void; } -export const ElementsTree = observer(function ElementsTree({ +export const ElementsTree = observer(function ElementsTree({ root: baseRoot = ROOT_NODE_PATH, limit, control, @@ -321,7 +321,7 @@ export const ElementsTree = observer(function ElementsTree({ - (function ElementsTree({ /> {loaderAvailable && } - + diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeLoader.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeContentLoader.tsx similarity index 93% rename from webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeLoader.tsx rename to webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeContentLoader.tsx index cc086e2363..b3dcd5aedc 100644 --- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeLoader.tsx +++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeContentLoader.tsx @@ -31,7 +31,7 @@ interface Props { hasChildren?: boolean; } -export const ElementsTreeLoader = observer>(function ElementsTreeLoader({ +export const ElementsTreeContentLoader = observer>(function ElementsTreeContentLoader({ root, context, childrenState, diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeLoader.ts b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeLoader.ts new file mode 100644 index 0000000000..7c2664815a --- /dev/null +++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeLoader.ts @@ -0,0 +1,14 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2022 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ + +import React from 'react'; + +export const ElementsTreeLoader = React.lazy(async () => { + const { ElementsTree } = await import('./ElementsTree'); + return { default: ElementsTree }; +}); \ No newline at end of file diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode.tsx index ec1a930a7e..54b4de5bcf 100644 --- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode.tsx +++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode.tsx @@ -18,7 +18,7 @@ import { useDataContext } from '@cloudbeaver/core-view'; import { useNavTreeDropBox } from '../../useNavTreeDropBox'; import type { NavigationNodeComponent } from '../NavigationNodeComponent'; -import { NavigationNodeControl } from './NavigationNode/NavigationNodeControl'; +import { NavigationNodeControlLoader } from './NavigationNode/NavigationNodeLoaders'; import { NavigationNodeNested } from './NavigationNode/NavigationNodeNested'; import { useNavigationNode } from './useNavigationNode'; @@ -64,7 +64,7 @@ export const NavigationNode: NavigationNodeComponent = observer(function Navigat context.set(DATA_CONTEXT_NAV_NODE, node); context.set(DATA_CONTEXT_NAV_NODES, navNode.getSelected); - const Control = navNode.control || externalControl || NavigationNodeControl; + const Control = navNode.control || externalControl || NavigationNodeControlLoader; if (navNode.leaf || !navNode.loaded) { externalExpanded = false; diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeControl.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeControl.tsx index 25f45ca626..31d8eacdfd 100644 --- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeControl.tsx +++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeControl.tsx @@ -17,8 +17,8 @@ import { NavNodeInfoResource, NavTreeResource, EObjectFeature, type INodeActions import { ElementsTreeContext } from '../../ElementsTreeContext'; import type { NavTreeControlComponent, NavTreeControlProps } from '../../NavigationNodeComponent'; -import { TreeNodeMenu } from '../TreeNodeMenu/TreeNodeMenu'; -import { NavigationNodeEditor } from './NavigationNodeEditor'; +import { TreeNodeMenuLoader } from '../TreeNodeMenu/TreeNodeMenuLoader'; +import { NavigationNodeEditorLoader } from './NavigationNodeLoaders'; const nodeIconStyle = css` TreeNodeIcon[|connected] StaticImage { @@ -112,14 +112,14 @@ export const NavigationNodeControl: NavTreeControlComponent = observer {editing ? ( - setEditing(false)} /> + setEditing(false)} /> ) : ( {node.name} )} {!editing && !dndPlaceholder && ( - + )} diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeLoaders.ts b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeLoaders.ts new file mode 100644 index 0000000000..792c05a23a --- /dev/null +++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeLoaders.ts @@ -0,0 +1,19 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2022 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ + +import React from 'react'; + +export const NavigationNodeControlLoader = React.lazy(async () => { + const { NavigationNodeControl } = await import('./NavigationNodeControl'); + return { default: NavigationNodeControl }; +}); + +export const NavigationNodeEditorLoader = React.lazy(async () => { + const { NavigationNodeEditor } = await import('./NavigationNodeEditor'); + return { default: NavigationNodeEditor }; +}); \ No newline at end of file diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeDragged.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeDragged.tsx index 156be108e2..aacf9017b5 100644 --- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeDragged.tsx +++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeDragged.tsx @@ -15,7 +15,7 @@ import { getComputed, TreeNode, useObjectRef, useStyles } from '@cloudbeaver/cor import { ElementsTreeContext } from '../ElementsTreeContext'; import type { NavigationNodeComponent } from '../NavigationNodeComponent'; -import { NavigationNodeControl } from './NavigationNode/NavigationNodeControl'; +import { NavigationNodeControlLoader } from './NavigationNode/NavigationNodeLoaders'; export const NavigationNodeDragged: NavigationNodeComponent = observer(function NavigationNode({ node, @@ -28,7 +28,7 @@ export const NavigationNodeDragged: NavigationNodeComponent = observer(function }); const control = getComputed(() => contextRef.context?.control); - const Control = control || externalControl || NavigationNodeControl; + const Control = control || externalControl || NavigationNodeControlLoader; return styled(useStyles(style))( diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeElement.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeElement.tsx index 6bdd81a858..3cb21539d4 100644 --- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeElement.tsx +++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeElement.tsx @@ -16,7 +16,7 @@ import { NavNodeInfoResource } from '@cloudbeaver/core-navigation-tree'; import { ElementsTreeContext } from '../ElementsTreeContext'; import type { NavTreeNodeComponent } from '../NavigationNodeComponent'; -import { NavigationNodeRenderer } from './NavigationNodeRenderer'; +import { NavigationNodeRendererLoader } from './NavigationNodeRendererLoader'; export const NavigationNodeElement: NavTreeNodeComponent = observer(function NavigationNodeElement({ nodeId, @@ -59,7 +59,7 @@ export const NavigationNodeElement: NavTreeNodeComponent = observer(function Nav // TODO: after node update reference can be lost and NavigationNode skip update return ( - { + const { NavigationNodeRenderer } = await import('./NavigationNodeRenderer'); + return { default: NavigationNodeRenderer }; +}); \ No newline at end of file diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/TreeNodeMenu/TreeNodeMenuLoader.ts b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/TreeNodeMenu/TreeNodeMenuLoader.ts new file mode 100644 index 0000000000..b419e41807 --- /dev/null +++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/TreeNodeMenu/TreeNodeMenuLoader.ts @@ -0,0 +1,14 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2022 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ + +import React from 'react'; + +export const TreeNodeMenuLoader = React.lazy(async () => { + const { TreeNodeMenu } = await import('./TreeNodeMenu'); + return { default: TreeNodeMenu }; +}); \ No newline at end of file diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/NavigationTreeLoader.ts b/webapp/packages/plugin-navigation-tree/src/NavigationTree/NavigationTreeLoader.ts new file mode 100644 index 0000000000..f10ef56294 --- /dev/null +++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/NavigationTreeLoader.ts @@ -0,0 +1,14 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2022 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ + +import React from 'react'; + +export const NavigationTreeLoader = React.lazy(async () => { + const { NavigationTree } = await import('./NavigationTree'); + return { default: NavigationTree }; +}); \ No newline at end of file diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ProjectsRenderer/NavigationNodeProjectControl.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ProjectsRenderer/NavigationNodeProjectControl.tsx index 97e0e0cab1..8389f637b2 100644 --- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ProjectsRenderer/NavigationNodeProjectControl.tsx +++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ProjectsRenderer/NavigationNodeProjectControl.tsx @@ -17,8 +17,8 @@ import { NavNodeInfoResource, type INodeActions } from '@cloudbeaver/core-naviga import { ElementsTreeContext } from '../ElementsTree/ElementsTreeContext'; import type { NavTreeControlComponent, NavTreeControlProps } from '../ElementsTree/NavigationNodeComponent'; -import { NavigationNodeEditor } from '../ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeEditor'; -import { TreeNodeMenu } from '../ElementsTree/NavigationTreeNode/TreeNodeMenu/TreeNodeMenu'; +import { NavigationNodeEditorLoader } from '../ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeLoaders'; +import { TreeNodeMenuLoader } from '../ElementsTree/NavigationTreeNode/TreeNodeMenu/TreeNodeMenuLoader'; const styles = css` TreeNodeControl { @@ -54,7 +54,7 @@ const styles = css` } `; -export const NavigationNodeProjectControl: NavTreeControlComponent = observer(forwardRef(function NavigationNodeControl({ +export const NavigationNodeProjectControl: NavTreeControlComponent = observer(forwardRef(function NavigationNodeProjectControl({ node, dndElement, dndPlaceholder, @@ -96,14 +96,14 @@ export const NavigationNodeProjectControl: NavTreeControlComponent = observer {editing ? ( - setEditing(false)} /> + setEditing(false)} /> ) : ( {node.name} )} {!editing && !dndPlaceholder && ( - + )} diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ProjectsRenderer/navigationTreeProjectsRendererRenderer.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ProjectsRenderer/navigationTreeProjectsRendererRenderer.tsx index 0ea7fbda02..6a03206a7e 100644 --- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ProjectsRenderer/navigationTreeProjectsRendererRenderer.tsx +++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ProjectsRenderer/navigationTreeProjectsRendererRenderer.tsx @@ -18,7 +18,7 @@ import { NAV_NODE_TYPE_PROJECT, ProjectsService } from '@cloudbeaver/core-projec import { useNode } from '../../NodesManager/useNode'; import { ElementsTreeContext } from '../ElementsTree/ElementsTreeContext'; import type { NavigationNodeRendererComponent } from '../ElementsTree/NavigationNodeComponent'; -import { NavigationNodeRenderer } from '../ElementsTree/NavigationTreeNode/NavigationNodeRenderer'; +import { NavigationNodeRendererLoader } from '../ElementsTree/NavigationTreeNode/NavigationNodeRendererLoader'; import type { IElementsTreeCustomRenderer } from '../ElementsTree/useElementsTree'; import { NavigationNodeProjectControl } from './NavigationNodeProjectControl'; @@ -81,7 +81,7 @@ const ProjectRenderer: NavigationNodeRendererComponent = observer(function Manag const project = node.nodeType === NAV_NODE_TYPE_PROJECT && singleProject; return styled(nestedStyles)( - { + const { NodeLink } = await import('./NodeLink'); + return { default: NodeLink }; +}); \ No newline at end of file diff --git a/webapp/packages/plugin-navigation-tree/src/index.ts b/webapp/packages/plugin-navigation-tree/src/index.ts index 6173e83261..2301ecac98 100644 --- a/webapp/packages/plugin-navigation-tree/src/index.ts +++ b/webapp/packages/plugin-navigation-tree/src/index.ts @@ -2,13 +2,16 @@ export * from './NavigationTree/ElementsTree/ElementsTreeTools/NavigationTreeSet export * from './NavigationTree/ElementsTree/ElementsTreeTools/NavigationTreeSettings/DATA_CONTEXT_NAV_TREE_ROOT'; export * from './NavigationTree/ElementsTree/ElementsTreeTools/NavigationTreeSettings/KEY_BINDING_ENABLE_FILTER'; export * from './NavigationTree/ElementsTree/ElementsTreeTools/NavigationTreeSettings/ElementsTreeSettingsService'; -export * from './NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeEditor'; -export * from './NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeControl'; -export * from './NavigationTree/ElementsTree/NavigationTreeNode/TreeNodeMenu/TreeNodeMenu'; -export * from './NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeRenderer'; + +export * from './NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeLoaders'; +export * from './NavigationTree/ElementsTree/NavigationTreeNode/TreeNodeMenu/TreeNodeMenuLoader'; +export * from './NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeRendererLoader'; + export * from './NavigationTree/ElementsTree/ACTION_LINK_OBJECT'; export * from './NavigationTree/ElementsTree/DATA_CONTEXT_ELEMENTS_TREE'; -export * from './NavigationTree/ElementsTree/ElementsTree'; + +export * from './NavigationTree/ElementsTree/ElementsTreeLoader'; + export * from './NavigationTree/ElementsTree/ElementsTreeContext'; export * from './NavigationTree/ElementsTree/KEY_BINDING_COLLAPSE_ALL'; export * from './NavigationTree/ElementsTree/KEY_BINDING_LINK_OBJECT'; @@ -21,7 +24,9 @@ export * from './NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeTools export * from './NavigationTree/ElementsTree/elementsTreeNameFilter'; export * from './NavigationTree/NavigationTreeBootstrap'; export * from './NavigationTree/NavigationTreeService'; -export * from './NavigationTree/NavigationTree'; + +export * from './NavigationTree/NavigationTreeLoader'; + export * from './NavigationTree/getNavigationTreeUserSettingsId'; export * from './NodesManager/NavNodeView/IFolderTransform'; export * from './NodesManager/NavNodeView/NavNodeViewService'; @@ -29,7 +34,9 @@ export * from './NodesManager/NavNodeContextMenuService'; export * from './NodesManager/useDatabaseObjectInfo'; export * from './NodesManager/useNode'; export * from './NodesManager/useChildren'; -export * from './NodesManager/NodeLink'; + +export * from './NodesManager/NodeLinkLoader'; + import { navigationTreePlugin } from './manifest'; export { navigationTreePlugin }; diff --git a/webapp/packages/plugin-resource-manager/src/Tree/ProjectsRenderer/NavigationNodeProjectControl.tsx b/webapp/packages/plugin-resource-manager/src/Tree/ProjectsRenderer/NavigationNodeProjectControl.tsx index 1efe3e2585..a8f37ea4a8 100644 --- a/webapp/packages/plugin-resource-manager/src/Tree/ProjectsRenderer/NavigationNodeProjectControl.tsx +++ b/webapp/packages/plugin-resource-manager/src/Tree/ProjectsRenderer/NavigationNodeProjectControl.tsx @@ -17,7 +17,7 @@ import { NavNodeInfoResource, type INodeActions } from '@cloudbeaver/core-naviga import { ProjectInfoResource } from '@cloudbeaver/core-projects'; import { NAV_NODE_TYPE_RM_PROJECT } from '@cloudbeaver/core-resource-manager'; import { CaptureViewContext } from '@cloudbeaver/core-view'; -import { ElementsTreeContext, NavigationNodeEditor, NavTreeControlComponent, NavTreeControlProps, TreeNodeMenu } from '@cloudbeaver/plugin-navigation-tree'; +import { ElementsTreeContext, NavigationNodeEditorLoader, NavTreeControlComponent, NavTreeControlProps, TreeNodeMenuLoader } from '@cloudbeaver/plugin-navigation-tree'; import { getRmProjectNodeId } from '../../NavNodes/getRmProjectNodeId'; import { ResourceManagerService } from '../../ResourceManagerService'; @@ -125,14 +125,14 @@ export const NavigationNodeProjectControl: NavTreeControlComponent = observer {editing ? ( - setEditing(false)} /> + setEditing(false)} /> ) : ( {name} )} {!editing && !dndPlaceholder && ( - + )} diff --git a/webapp/packages/plugin-resource-manager/src/Tree/ProjectsRenderer/navigationTreeProjectsRendererRenderer.tsx b/webapp/packages/plugin-resource-manager/src/Tree/ProjectsRenderer/navigationTreeProjectsRendererRenderer.tsx index 97818e4666..770208d605 100644 --- a/webapp/packages/plugin-resource-manager/src/Tree/ProjectsRenderer/navigationTreeProjectsRendererRenderer.tsx +++ b/webapp/packages/plugin-resource-manager/src/Tree/ProjectsRenderer/navigationTreeProjectsRendererRenderer.tsx @@ -16,7 +16,7 @@ import type { NavNodeInfoResource, ProjectsNavNodeService } from '@cloudbeaver/c import { ProjectsService } from '@cloudbeaver/core-projects'; import { NAV_NODE_TYPE_RM_PROJECT, RESOURCES_NODE_PATH } from '@cloudbeaver/core-resource-manager'; import { createPath } from '@cloudbeaver/core-utils'; -import { type IElementsTreeCustomRenderer, type NavigationNodeRendererComponent, useNode, NavigationNodeRenderer, ElementsTreeContext } from '@cloudbeaver/plugin-navigation-tree'; +import { type IElementsTreeCustomRenderer, type NavigationNodeRendererComponent, useNode, NavigationNodeRendererLoader, ElementsTreeContext } from '@cloudbeaver/plugin-navigation-tree'; import type { ResourceManagerService } from '../../ResourceManagerService'; import { NavigationNodeProjectControl } from './NavigationNodeProjectControl'; @@ -100,7 +100,7 @@ const ProjectRenderer: NavigationNodeRendererComponent = observer(function Manag const project = node.nodeType === NAV_NODE_TYPE_RM_PROJECT && singleProject; return styled(nestedStyles)( - = observer(function ResourceMa return styled(styles)( - (function SqlResultSetPanel({ const [valuePresentationId, setValuePresentation] = useState(null); return ( - ./lib/stats.json", + "preanalyse": "rimraf lib/* && if not exist lib mkdir lib", + "analyse": "core-cli-build --mode=production --config ../core-cli/configs/webpack.product.config.js --profile --json > ./lib/stats.json", "postanalyse": "core-cli-analyzer ./lib/stats.json", "lint": "eslint ./src/ --ext .ts,.tsx", "lint-fix": "eslint ./src/ --ext .ts,.tsx --fix",