From 82d1a4e07c42a236ed712d3ca86adc229e1885dc Mon Sep 17 00:00:00 2001 From: Michael Myers Date: Tue, 27 Feb 2024 22:13:04 -0600 Subject: [PATCH] Prevent code splitting This will prevent the react bundle from being code split. This means that our entire javascript bundle will be a single file as well as our css file. It also removes hashing from the included webassets. The reason for this change is to allow different versioned proxies to coexist behind a load balancer. If we remove code splitting, then the only time our bundle will load is on initial hit, and the web client will then have the entire bundle. This also removes React.lazy. React.lazy wrapped components in a promise to allow for dynamic imports during runtime. This is no longer needed. Lastly, to clean up the default exports used by react lazy, this removes (most) default exports for feature components. Assist and telemetry-boot are not included in the javascript bundle --- web/packages/build/vite/config.ts | 13 +++++ .../teleport/src/AccessRequests/index.ts | 2 +- .../teleport/src/Account/Account.test.tsx | 2 +- web/packages/teleport/src/Account/Account.tsx | 2 +- .../teleport/src/Account/AccountNew.ts | 2 +- web/packages/teleport/src/Account/index.ts | 3 +- .../teleport/src/AppLauncher/index.ts | 2 +- .../teleport/src/Audit/Audit.story.tsx | 2 +- web/packages/teleport/src/Audit/Audit.tsx | 2 +- web/packages/teleport/src/Audit/index.tsx | 4 +- .../teleport/src/AuthConnectors/index.ts | 3 +- web/packages/teleport/src/Bots/Add/index.tsx | 2 +- web/packages/teleport/src/Bots/index.ts | 3 +- web/packages/teleport/src/Clusters/index.ts | 2 +- web/packages/teleport/src/Console/index.tsx | 2 +- .../src/DesktopSession/DesktopSession.tsx | 2 +- .../teleport/src/DesktopSession/index.ts | 3 +- .../teleport/src/DeviceTrust/index.ts | 2 +- web/packages/teleport/src/Discover/index.tsx | 3 +- .../teleport/src/HeadlessRequest/index.ts | 3 +- .../src/Integrations/Enroll/AwsOidc/index.ts | 3 +- .../Integrations/Enroll/IntegrationRoute.tsx | 6 +- .../teleport/src/Integrations/Enroll/index.ts | 3 +- .../teleport/src/Integrations/index.ts | 3 +- .../teleport/src/LocksV2/Locks/index.ts | 3 +- .../src/LocksV2/NewLock/LockCheckout/index.ts | 3 +- .../teleport/src/LocksV2/NewLock/index.ts | 4 +- .../teleport/src/Login/Login.story.tsx | 6 +- .../teleport/src/Login/Login.test.tsx | 2 +- web/packages/teleport/src/Login/Login.tsx | 6 +- .../teleport/src/Login/LoginFailed.tsx | 8 +-- .../teleport/src/Login/LoginSuccess.test.tsx | 2 +- .../teleport/src/Login/LoginSuccess.tsx | 2 +- web/packages/teleport/src/Login/index.ts | 9 +-- web/packages/teleport/src/Main/index.ts | 2 +- web/packages/teleport/src/Nodes/index.ts | 3 +- .../teleport/src/Player/Player.story.tsx | 10 ++-- web/packages/teleport/src/Player/Player.tsx | 2 +- web/packages/teleport/src/Player/index.ts | 3 +- .../src/Recordings/Recordings.story.tsx | 2 +- .../teleport/src/Recordings/Recordings.tsx | 2 +- web/packages/teleport/src/Recordings/index.ts | 3 +- web/packages/teleport/src/Roles/Roles.tsx | 2 +- web/packages/teleport/src/Roles/index.ts | 3 +- .../teleport/src/Sessions/Sessions.tsx | 2 +- web/packages/teleport/src/Sessions/index.js | 3 +- web/packages/teleport/src/Support/Support.tsx | 6 +- web/packages/teleport/src/Support/index.ts | 5 +- web/packages/teleport/src/Teleport.tsx | 30 +++++----- .../teleport/src/TrustedClusters/index.ts | 2 +- .../teleport/src/UnifiedResources/index.ts | 3 +- web/packages/teleport/src/Users/Users.tsx | 2 +- web/packages/teleport/src/Users/index.ts | 4 +- web/packages/teleport/src/Users/useUsers.ts | 10 +--- .../teleport/src/Welcome/Welcome.story.tsx | 2 +- .../teleport/src/Welcome/Welcome.test.tsx | 2 +- web/packages/teleport/src/Welcome/Welcome.tsx | 2 +- web/packages/teleport/src/Welcome/index.ts | 4 +- web/packages/teleport/src/features.tsx | 58 +++++++++---------- 59 files changed, 126 insertions(+), 160 deletions(-) diff --git a/web/packages/build/vite/config.ts b/web/packages/build/vite/config.ts index fdc5706c1411d..235dee9b94e67 100644 --- a/web/packages/build/vite/config.ts +++ b/web/packages/build/vite/config.ts @@ -69,6 +69,19 @@ export function createViteConfig( outDir: outputDirectory, assetsDir: 'app', emptyOutDir: true, + rollupOptions: { + output: { + // removes hashing from our entry point file + entryFileNames: 'app/app.js', + // assist is still lazy loaded and the telemetry bundle breaks any + // websocket connections if included in the bundle. We will leave these two + // files out of the bundle but without hashing so they are still discoverable. + // TODO (avatus): find out why this breaks websocket connectivity and unchunk + chunkFileNames: 'app/[name].js', + // this will remove hashing from asset (non-js) files. + assetFileNames: `app/[name].[ext]`, + }, + }, }, plugins: [ react({ diff --git a/web/packages/teleport/src/AccessRequests/index.ts b/web/packages/teleport/src/AccessRequests/index.ts index 31348c5d1e94d..c69d717ae0278 100644 --- a/web/packages/teleport/src/AccessRequests/index.ts +++ b/web/packages/teleport/src/AccessRequests/index.ts @@ -16,4 +16,4 @@ * along with this program. If not, see . */ -export { LockedAccessRequests as default } from './LockedAccessRequests/LockedAccessRequests'; +export { LockedAccessRequests } from './LockedAccessRequests/LockedAccessRequests'; diff --git a/web/packages/teleport/src/Account/Account.test.tsx b/web/packages/teleport/src/Account/Account.test.tsx index 53b40b6af9c3e..21ce02ef601f8 100644 --- a/web/packages/teleport/src/Account/Account.test.tsx +++ b/web/packages/teleport/src/Account/Account.test.tsx @@ -21,7 +21,7 @@ import { render, screen, waitFor } from 'design/utils/testing'; import { ContextProvider } from 'teleport'; import TeleportContext from 'teleport/teleportContext'; -import Account from 'teleport/Account/Account'; +import { AccountPage as Account } from 'teleport/Account/Account'; import cfg from 'teleport/config'; import { createTeleportContext } from 'teleport/mocks/contexts'; diff --git a/web/packages/teleport/src/Account/Account.tsx b/web/packages/teleport/src/Account/Account.tsx index d7b2d40de58e9..241a1a95233c9 100644 --- a/web/packages/teleport/src/Account/Account.tsx +++ b/web/packages/teleport/src/Account/Account.tsx @@ -53,7 +53,7 @@ export interface AccountPageProps { enterpriseComponent?: React.ComponentType; } -export default function AccountPage({ enterpriseComponent }: AccountPageProps) { +export function AccountPage({ enterpriseComponent }: AccountPageProps) { const ctx = useTeleport(); const isSso = ctx.storeUser.isSso(); const manageDevicesState = useManageDevices(ctx); diff --git a/web/packages/teleport/src/Account/AccountNew.ts b/web/packages/teleport/src/Account/AccountNew.ts index ed7487659b1e3..f7700447856ef 100644 --- a/web/packages/teleport/src/Account/AccountNew.ts +++ b/web/packages/teleport/src/Account/AccountNew.ts @@ -18,7 +18,7 @@ // Compatibility aliases to prevent e/ from breaking. // TODO(bl-nero): Remove these once e/ stops referring to them. -import Account from './Account'; +import { Account } from './Account'; export type { EnterpriseComponentProps } from './Account'; export default Account; diff --git a/web/packages/teleport/src/Account/index.ts b/web/packages/teleport/src/Account/index.ts index 25b28b6b878be..cd862959f6e7c 100644 --- a/web/packages/teleport/src/Account/index.ts +++ b/web/packages/teleport/src/Account/index.ts @@ -16,5 +16,4 @@ * along with this program. If not, see . */ -import Account from './Account'; -export default Account; +export { AccountPage, Account } from './Account'; diff --git a/web/packages/teleport/src/AppLauncher/index.ts b/web/packages/teleport/src/AppLauncher/index.ts index 28a38a77bc8af..28f018d6ab802 100644 --- a/web/packages/teleport/src/AppLauncher/index.ts +++ b/web/packages/teleport/src/AppLauncher/index.ts @@ -16,4 +16,4 @@ * along with this program. If not, see . */ -export { AppLauncher as default } from './AppLauncher'; +export { AppLauncher } from './AppLauncher'; diff --git a/web/packages/teleport/src/Audit/Audit.story.tsx b/web/packages/teleport/src/Audit/Audit.story.tsx index 211e667a8fb92..42b40b1d1c4bd 100644 --- a/web/packages/teleport/src/Audit/Audit.story.tsx +++ b/web/packages/teleport/src/Audit/Audit.story.tsx @@ -22,7 +22,7 @@ import { createMemoryHistory } from 'history'; import { ContextProvider, Context } from 'teleport'; -import Audit from './Audit'; +import { AuditContainer as Audit } from './Audit'; import EventList from './EventList'; import { events, eventsSample } from './fixtures'; diff --git a/web/packages/teleport/src/Audit/Audit.tsx b/web/packages/teleport/src/Audit/Audit.tsx index 8b0501bd6ad3a..9b31620212ca6 100644 --- a/web/packages/teleport/src/Audit/Audit.tsx +++ b/web/packages/teleport/src/Audit/Audit.tsx @@ -37,7 +37,7 @@ import EventList from './EventList'; import useAuditEvents, { State } from './useAuditEvents'; -export default function Container() { +export function AuditContainer() { const teleCtx = useTeleport(); const { clusterId } = useStickyClusterId(); const state = useAuditEvents(teleCtx, clusterId); diff --git a/web/packages/teleport/src/Audit/index.tsx b/web/packages/teleport/src/Audit/index.tsx index f8cbec0a7766a..a7b843724f8c7 100644 --- a/web/packages/teleport/src/Audit/index.tsx +++ b/web/packages/teleport/src/Audit/index.tsx @@ -16,6 +16,4 @@ * along with this program. If not, see . */ -import Audit from './Audit'; - -export default Audit; +export { Audit, AuditContainer } from './Audit'; diff --git a/web/packages/teleport/src/AuthConnectors/index.ts b/web/packages/teleport/src/AuthConnectors/index.ts index 925609f9bb1f3..74bece4d3ce97 100644 --- a/web/packages/teleport/src/AuthConnectors/index.ts +++ b/web/packages/teleport/src/AuthConnectors/index.ts @@ -16,5 +16,4 @@ * along with this program. If not, see . */ -import AuthConnectors from './AuthConnectors'; -export default AuthConnectors; +export { AuthConnectors } from './AuthConnectors'; diff --git a/web/packages/teleport/src/Bots/Add/index.tsx b/web/packages/teleport/src/Bots/Add/index.tsx index 82797dc712d37..8137668bb912a 100644 --- a/web/packages/teleport/src/Bots/Add/index.tsx +++ b/web/packages/teleport/src/Bots/Add/index.tsx @@ -16,4 +16,4 @@ * along with this program. If not, see . */ -export { AddBots as default } from './AddBots'; +export { AddBots } from './AddBots'; diff --git a/web/packages/teleport/src/Bots/index.ts b/web/packages/teleport/src/Bots/index.ts index 4bb2b123deb78..c9bac73effb24 100644 --- a/web/packages/teleport/src/Bots/index.ts +++ b/web/packages/teleport/src/Bots/index.ts @@ -16,5 +16,4 @@ * along with this program. If not, see . */ -// export as default for use with React.lazy -export { Bots as default } from './List/Bots'; +export { Bots } from './List/Bots'; diff --git a/web/packages/teleport/src/Clusters/index.ts b/web/packages/teleport/src/Clusters/index.ts index f4a0510ae2113..13bb3bc782adc 100644 --- a/web/packages/teleport/src/Clusters/index.ts +++ b/web/packages/teleport/src/Clusters/index.ts @@ -16,4 +16,4 @@ * along with this program. If not, see . */ -export { Clusters as default } from './Clusters'; +export { Clusters } from './Clusters'; diff --git a/web/packages/teleport/src/Console/index.tsx b/web/packages/teleport/src/Console/index.tsx index 1d61130de60a9..96c7546ac8cb8 100644 --- a/web/packages/teleport/src/Console/index.tsx +++ b/web/packages/teleport/src/Console/index.tsx @@ -24,7 +24,7 @@ import ConsoleContextProvider from './consoleContextProvider'; // Main entry point to Console where it initializes ContextProvider with the // instance of ConsoleContext. -export default function Index() { +export function ConsoleWithContext() { const [ctx] = React.useState(() => { return new ConsoleContext(); }); diff --git a/web/packages/teleport/src/DesktopSession/DesktopSession.tsx b/web/packages/teleport/src/DesktopSession/DesktopSession.tsx index 0c1259064277d..a67cb1dfcddc2 100644 --- a/web/packages/teleport/src/DesktopSession/DesktopSession.tsx +++ b/web/packages/teleport/src/DesktopSession/DesktopSession.tsx @@ -40,7 +40,7 @@ import TopBar from './TopBar'; import type { State, WebsocketAttempt } from './useDesktopSession'; import type { WebAuthnState } from 'teleport/lib/useWebAuthn'; -export default function Container() { +export function DesktopSessionContainer() { const state = useDesktopSession(); return ; } diff --git a/web/packages/teleport/src/DesktopSession/index.ts b/web/packages/teleport/src/DesktopSession/index.ts index 6ed950c9705a1..7516a98170176 100644 --- a/web/packages/teleport/src/DesktopSession/index.ts +++ b/web/packages/teleport/src/DesktopSession/index.ts @@ -16,5 +16,4 @@ * along with this program. If not, see . */ -import DesktopSession from './DesktopSession'; -export default DesktopSession; +export { DesktopSession, DesktopSessionContainer } from './DesktopSession'; diff --git a/web/packages/teleport/src/DeviceTrust/index.ts b/web/packages/teleport/src/DeviceTrust/index.ts index 861e0f1c67d6e..3aee5b4d16220 100644 --- a/web/packages/teleport/src/DeviceTrust/index.ts +++ b/web/packages/teleport/src/DeviceTrust/index.ts @@ -16,4 +16,4 @@ * along with this program. If not, see . */ -export { DeviceTrustLocked as default } from './DeviceTrustLocked'; +export { DeviceTrustLocked } from './DeviceTrustLocked'; diff --git a/web/packages/teleport/src/Discover/index.tsx b/web/packages/teleport/src/Discover/index.tsx index 275b60e0b965d..388e54a9dc085 100644 --- a/web/packages/teleport/src/Discover/index.tsx +++ b/web/packages/teleport/src/Discover/index.tsx @@ -16,5 +16,4 @@ * along with this program. If not, see . */ -// export as default for use with React.lazy -export { Discover as default } from './Discover'; +export { Discover } from './Discover'; diff --git a/web/packages/teleport/src/HeadlessRequest/index.ts b/web/packages/teleport/src/HeadlessRequest/index.ts index fd0daa1bfdc87..83d6ce9a8a187 100644 --- a/web/packages/teleport/src/HeadlessRequest/index.ts +++ b/web/packages/teleport/src/HeadlessRequest/index.ts @@ -16,5 +16,4 @@ * along with this program. If not, see . */ -// export as default for use with React.lazy -export { HeadlessRequest as default } from './HeadlessRequest'; +export { HeadlessRequest } from './HeadlessRequest'; diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/index.ts b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/index.ts index 98387aaadb48c..afb06cbcb9248 100644 --- a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/index.ts +++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/index.ts @@ -16,5 +16,4 @@ * along with this program. If not, see . */ -// export as default for use with React.lazy -export { AwsOidc as default } from './AwsOidc'; +export { AwsOidc } from './AwsOidc'; diff --git a/web/packages/teleport/src/Integrations/Enroll/IntegrationRoute.tsx b/web/packages/teleport/src/Integrations/Enroll/IntegrationRoute.tsx index d147051162db8..347e226794abe 100644 --- a/web/packages/teleport/src/Integrations/Enroll/IntegrationRoute.tsx +++ b/web/packages/teleport/src/Integrations/Enroll/IntegrationRoute.tsx @@ -16,13 +16,13 @@ * along with this program. If not, see . */ -import React, { lazy } from 'react'; +import React from 'react'; import cfg from 'teleport/config'; import { Route } from 'teleport/components/Router'; import { IntegrationKind } from 'teleport/services/integrations'; -const EnrollAwsOidc = lazy(() => import('./AwsOidc')); +import { AwsOidc } from './AwsOidc'; export function getRoutesToEnrollIntegrations() { return [ @@ -30,7 +30,7 @@ export function getRoutesToEnrollIntegrations() { key={IntegrationKind.AwsOidc} exact path={cfg.getIntegrationEnrollRoute(IntegrationKind.AwsOidc)} - component={EnrollAwsOidc} + component={AwsOidc} />, ]; } diff --git a/web/packages/teleport/src/Integrations/Enroll/index.ts b/web/packages/teleport/src/Integrations/Enroll/index.ts index 07827582a504a..a87bc126838e0 100644 --- a/web/packages/teleport/src/Integrations/Enroll/index.ts +++ b/web/packages/teleport/src/Integrations/Enroll/index.ts @@ -16,8 +16,7 @@ * along with this program. If not, see . */ -// export as default for use with React.lazy -export { IntegrationEnroll as default } from './IntegrationEnroll'; +export { IntegrationEnroll } from './IntegrationEnroll'; export { IntegrationTiles } from './IntegrationTiles'; export { getRoutesToEnrollIntegrations } from './IntegrationRoute'; diff --git a/web/packages/teleport/src/Integrations/index.ts b/web/packages/teleport/src/Integrations/index.ts index 31903583269b4..9f0c9fe4a4ef2 100644 --- a/web/packages/teleport/src/Integrations/index.ts +++ b/web/packages/teleport/src/Integrations/index.ts @@ -16,7 +16,6 @@ * along with this program. If not, see . */ -// export as default for use with React.lazy -export { Integrations as default } from './Integrations'; +export { Integrations } from './Integrations'; export { IntegrationList } from './IntegrationList'; export { IntegrationTile } from './Enroll/common'; diff --git a/web/packages/teleport/src/LocksV2/Locks/index.ts b/web/packages/teleport/src/LocksV2/Locks/index.ts index 8b47da386faf9..631e8efc252ca 100644 --- a/web/packages/teleport/src/LocksV2/Locks/index.ts +++ b/web/packages/teleport/src/LocksV2/Locks/index.ts @@ -16,5 +16,4 @@ * along with this program. If not, see . */ -// export as default for use with React.lazy -export { Locks as default } from './Locks'; +export { Locks } from './Locks'; diff --git a/web/packages/teleport/src/LocksV2/NewLock/LockCheckout/index.ts b/web/packages/teleport/src/LocksV2/NewLock/LockCheckout/index.ts index fbd6abe2a830f..04367d6720f4a 100644 --- a/web/packages/teleport/src/LocksV2/NewLock/LockCheckout/index.ts +++ b/web/packages/teleport/src/LocksV2/NewLock/LockCheckout/index.ts @@ -16,5 +16,4 @@ * along with this program. If not, see . */ -// export as default for use with React.lazy -export { LockCheckout as default } from './LockCheckout'; +export { LockCheckout } from './LockCheckout'; diff --git a/web/packages/teleport/src/LocksV2/NewLock/index.ts b/web/packages/teleport/src/LocksV2/NewLock/index.ts index 9dbae704863dd..89cca3f2e7598 100644 --- a/web/packages/teleport/src/LocksV2/NewLock/index.ts +++ b/web/packages/teleport/src/LocksV2/NewLock/index.ts @@ -16,6 +16,4 @@ * along with this program. If not, see . */ -// export as default for use with React.lazy -import NewLockWrapper from './NewLock'; -export default NewLockWrapper; +export { NewLockView } from './NewLock'; diff --git a/web/packages/teleport/src/Login/Login.story.tsx b/web/packages/teleport/src/Login/Login.story.tsx index 5804c5f1701a8..01bdfde0651a5 100644 --- a/web/packages/teleport/src/Login/Login.story.tsx +++ b/web/packages/teleport/src/Login/Login.story.tsx @@ -18,9 +18,9 @@ import React from 'react'; -import LoginSuccess from './LoginSuccess'; -import { LoginFailed } from './LoginFailed'; -import { Login } from './Login'; +import { LoginSuccess } from './LoginSuccess'; +import { LoginFailedComponent as LoginFailed } from './LoginFailed'; +import { LoginComponent as Login } from './Login'; import { State } from './useLogin'; export default { diff --git a/web/packages/teleport/src/Login/Login.test.tsx b/web/packages/teleport/src/Login/Login.test.tsx index 4128f7604a876..6bb8318933214 100644 --- a/web/packages/teleport/src/Login/Login.test.tsx +++ b/web/packages/teleport/src/Login/Login.test.tsx @@ -23,7 +23,7 @@ import auth from 'teleport/services/auth/auth'; import history from 'teleport/services/history'; import cfg from 'teleport/config'; -import Login from './Login'; +import { Login } from './Login'; beforeEach(() => { jest.restoreAllMocks(); diff --git a/web/packages/teleport/src/Login/Login.tsx b/web/packages/teleport/src/Login/Login.tsx index 932e0dc6eaf56..d7e4a967b000f 100644 --- a/web/packages/teleport/src/Login/Login.tsx +++ b/web/packages/teleport/src/Login/Login.tsx @@ -26,12 +26,12 @@ import Logo from 'teleport/components/LogoHero'; import useLogin, { State } from './useLogin'; import Motd from './Motd'; -export default function Container() { +export function Login() { const state = useLogin(); - return ; + return ; } -export function Login({ +export function LoginComponent({ attempt, onLogin, onLoginWithWebauthn, diff --git a/web/packages/teleport/src/Login/LoginFailed.tsx b/web/packages/teleport/src/Login/LoginFailed.tsx index b74d88b520151..30a8562b90531 100644 --- a/web/packages/teleport/src/Login/LoginFailed.tsx +++ b/web/packages/teleport/src/Login/LoginFailed.tsx @@ -23,21 +23,21 @@ import { Route, Switch } from 'teleport/components/Router'; import LogoHero from 'teleport/components/LogoHero'; import cfg from 'teleport/config'; -export default function Container() { +export function LoginFailed() { return ( - + - + ); } -export function LoginFailed({ message }: { message?: string }) { +export function LoginFailedComponent({ message }: { message?: string }) { const defaultMsg = "unable to login, please check Teleport's log for details"; return ( <> diff --git a/web/packages/teleport/src/Login/LoginSuccess.test.tsx b/web/packages/teleport/src/Login/LoginSuccess.test.tsx index ceb09c1289caf..3c9fb3650b7eb 100644 --- a/web/packages/teleport/src/Login/LoginSuccess.test.tsx +++ b/web/packages/teleport/src/Login/LoginSuccess.test.tsx @@ -19,7 +19,7 @@ import React from 'react'; import { render } from 'design/utils/testing'; -import LoginSuccess from './LoginSuccess'; +import { LoginSuccess } from './LoginSuccess'; test('renders', () => { const { container } = render(); diff --git a/web/packages/teleport/src/Login/LoginSuccess.tsx b/web/packages/teleport/src/Login/LoginSuccess.tsx index 96737e5a9ee5a..0f668cb423a0a 100644 --- a/web/packages/teleport/src/Login/LoginSuccess.tsx +++ b/web/packages/teleport/src/Login/LoginSuccess.tsx @@ -21,7 +21,7 @@ import { CardSuccessLogin } from 'design'; import LogoHero from 'teleport/components/LogoHero'; -export default function LoginSuccess() { +export function LoginSuccess() { return ( <> diff --git a/web/packages/teleport/src/Login/index.ts b/web/packages/teleport/src/Login/index.ts index f3cffc3d1ed79..fa8b4881e8f0d 100644 --- a/web/packages/teleport/src/Login/index.ts +++ b/web/packages/teleport/src/Login/index.ts @@ -16,9 +16,6 @@ * along with this program. If not, see . */ -import Login from './Login'; -import LoginFailed from './LoginFailed'; -import LoginSuccess from './LoginSuccess'; - -export default Login; -export { LoginFailed, LoginSuccess }; +export { Login } from './Login'; +export { LoginFailed } from './LoginFailed'; +export { LoginSuccess } from './LoginSuccess'; diff --git a/web/packages/teleport/src/Main/index.ts b/web/packages/teleport/src/Main/index.ts index ebb6c99fb0fc8..52815afd5f5f8 100644 --- a/web/packages/teleport/src/Main/index.ts +++ b/web/packages/teleport/src/Main/index.ts @@ -17,7 +17,7 @@ */ export { - Main as default, + Main, useContentMinWidthContext, useNoMinWidth, HorizontalSplit, diff --git a/web/packages/teleport/src/Nodes/index.ts b/web/packages/teleport/src/Nodes/index.ts index 2d074ee6cc75a..cf78baeafff2b 100644 --- a/web/packages/teleport/src/Nodes/index.ts +++ b/web/packages/teleport/src/Nodes/index.ts @@ -16,5 +16,4 @@ * along with this program. If not, see . */ -import Nodes from './Nodes'; -export default Nodes; +export { Nodes } from './Nodes'; diff --git a/web/packages/teleport/src/Player/Player.story.tsx b/web/packages/teleport/src/Player/Player.story.tsx index bc9ce6ecfbc25..0675d066d0a84 100644 --- a/web/packages/teleport/src/Player/Player.story.tsx +++ b/web/packages/teleport/src/Player/Player.story.tsx @@ -24,7 +24,7 @@ import { createMemoryHistory } from 'history'; import { Router, Route } from 'teleport/components/Router'; -import PlayerComponent from './Player'; +import { Player } from './Player'; export default { title: 'Teleport/Player', @@ -40,7 +40,7 @@ export const SSH = () => { - + @@ -59,7 +59,7 @@ export const Desktop = () => { - + @@ -76,7 +76,7 @@ export const RecordingTypeError = () => { - + @@ -95,7 +95,7 @@ export const DurationMsError = () => { - + diff --git a/web/packages/teleport/src/Player/Player.tsx b/web/packages/teleport/src/Player/Player.tsx index b2078a2cc7d24..7e5012660098e 100644 --- a/web/packages/teleport/src/Player/Player.tsx +++ b/web/packages/teleport/src/Player/Player.tsx @@ -38,7 +38,7 @@ import Tabs, { TabItem } from './PlayerTabs'; const validRecordingTypes = ['ssh', 'k8s', 'desktop']; -export default function Player() { +export function Player() { const { sid, clusterId } = useParams(); const { search } = useLocation(); diff --git a/web/packages/teleport/src/Player/index.ts b/web/packages/teleport/src/Player/index.ts index fe2477c567fe3..cb1de670a073f 100644 --- a/web/packages/teleport/src/Player/index.ts +++ b/web/packages/teleport/src/Player/index.ts @@ -16,5 +16,4 @@ * along with this program. If not, see . */ -import Player from './Player'; -export default Player; +export { Player } from './Player'; diff --git a/web/packages/teleport/src/Recordings/Recordings.story.tsx b/web/packages/teleport/src/Recordings/Recordings.story.tsx index e78d1fb5c030b..ecf3a537a009b 100644 --- a/web/packages/teleport/src/Recordings/Recordings.story.tsx +++ b/web/packages/teleport/src/Recordings/Recordings.story.tsx @@ -24,7 +24,7 @@ import { Context, ContextProvider } from 'teleport'; import { makeRecording } from 'teleport/services/recordings/makeRecording'; -import Recordings from './Recordings'; +import { RecordingsContainer as Recordings } from './Recordings'; export default { title: 'Teleport/Recordings', diff --git a/web/packages/teleport/src/Recordings/Recordings.tsx b/web/packages/teleport/src/Recordings/Recordings.tsx index 254a38c33e657..7729fafb64231 100644 --- a/web/packages/teleport/src/Recordings/Recordings.tsx +++ b/web/packages/teleport/src/Recordings/Recordings.tsx @@ -36,7 +36,7 @@ import RecordingsList from './RecordingsList'; import useRecordings, { State } from './useRecordings'; -export default function Container() { +export function RecordingsContainer() { const ctx = useTeleport(); const state = useRecordings(ctx); return ; diff --git a/web/packages/teleport/src/Recordings/index.ts b/web/packages/teleport/src/Recordings/index.ts index 24d24d426f068..d95f264faf6b7 100644 --- a/web/packages/teleport/src/Recordings/index.ts +++ b/web/packages/teleport/src/Recordings/index.ts @@ -16,5 +16,4 @@ * along with this program. If not, see . */ -import Recordings from './Recordings'; -export default Recordings; +export { Recordings, RecordingsContainer } from './Recordings'; diff --git a/web/packages/teleport/src/Roles/Roles.tsx b/web/packages/teleport/src/Roles/Roles.tsx index 4b68d43961183..e51098c7feaff 100644 --- a/web/packages/teleport/src/Roles/Roles.tsx +++ b/web/packages/teleport/src/Roles/Roles.tsx @@ -36,7 +36,7 @@ import useRoles, { State } from './useRoles'; import templates from './templates'; -export default function Container() { +export function RolesContainer() { const ctx = useTeleport(); const state = useRoles(ctx); return ; diff --git a/web/packages/teleport/src/Roles/index.ts b/web/packages/teleport/src/Roles/index.ts index ef729ba78e26b..f617f63df957c 100644 --- a/web/packages/teleport/src/Roles/index.ts +++ b/web/packages/teleport/src/Roles/index.ts @@ -16,5 +16,4 @@ * along with this program. If not, see . */ -import Roles from './Roles'; -export default Roles; +export { Roles, RolesContainer } from './Roles'; diff --git a/web/packages/teleport/src/Sessions/Sessions.tsx b/web/packages/teleport/src/Sessions/Sessions.tsx index 9660305f40d15..cefe75a86b759 100644 --- a/web/packages/teleport/src/Sessions/Sessions.tsx +++ b/web/packages/teleport/src/Sessions/Sessions.tsx @@ -34,7 +34,7 @@ import { CtaEvent } from 'teleport/services/userEvent'; import SessionList from './SessionList'; import useSessions from './useSessions'; -export default function Container() { +export function SessionsContainer() { const ctx = useTeleport(); const { clusterId } = useStickerClusterId(); const state = useSessions(ctx, clusterId); diff --git a/web/packages/teleport/src/Sessions/index.js b/web/packages/teleport/src/Sessions/index.js index 49e1a76e489ac..b9cd6c8d11a7d 100644 --- a/web/packages/teleport/src/Sessions/index.js +++ b/web/packages/teleport/src/Sessions/index.js @@ -16,5 +16,4 @@ * along with this program. If not, see . */ -import Sessions from './Sessions'; -export default Sessions; +export { SessionsContainer } from './Sessions'; diff --git a/web/packages/teleport/src/Support/Support.tsx b/web/packages/teleport/src/Support/Support.tsx index 649d1f7940222..885cf6db0cd1c 100644 --- a/web/packages/teleport/src/Support/Support.tsx +++ b/web/packages/teleport/src/Support/Support.tsx @@ -29,11 +29,7 @@ import cfg from 'teleport/config'; import { ButtonLockedFeature } from 'teleport/components/ButtonLockedFeature'; import { CtaEvent } from 'teleport/services/userEvent'; -export default function Container({ - children, -}: { - children?: React.ReactNode; -}) { +export function SupportContainer({ children }: { children?: React.ReactNode }) { const ctx = useTeleport(); const cluster = ctx.storeUser.state.cluster; diff --git a/web/packages/teleport/src/Support/index.ts b/web/packages/teleport/src/Support/index.ts index 5e813983434e1..3520785cd62be 100644 --- a/web/packages/teleport/src/Support/index.ts +++ b/web/packages/teleport/src/Support/index.ts @@ -16,7 +16,4 @@ * along with this program. If not, see . */ -import Support from './Support'; - -// export as default for use with React.lazy -export default Support; +export { SupportContainer as Support } from './Support'; diff --git a/web/packages/teleport/src/Teleport.tsx b/web/packages/teleport/src/Teleport.tsx index b2063de95abd9..431340d89dbc6 100644 --- a/web/packages/teleport/src/Teleport.tsx +++ b/web/packages/teleport/src/Teleport.tsx @@ -16,7 +16,7 @@ * along with this program. If not, see . */ -import React, { lazy, Suspense } from 'react'; +import React, { Suspense } from 'react'; import ThemeProvider from 'design/ThemeProvider'; import { Route, Router, Switch } from 'teleport/components/Router'; @@ -32,10 +32,21 @@ import { NewCredentials } from 'teleport/Welcome/NewCredentials'; import TeleportContextProvider from './TeleportContextProvider'; import TeleportContext from './teleportContext'; import cfg from './config'; +import { AppLauncher } from './AppLauncher'; +import { LoginFailedComponent as LoginFailed } from './Login/LoginFailed'; +import { LoginSuccess } from './Login/LoginSuccess'; +import { Login } from './Login'; +import { Welcome } from './Welcome'; -import type { History } from 'history'; +import { ConsoleWithContext as Console } from './Console'; +import { Player } from './Player'; +import { DesktopSessionContainer as DesktopSession } from './DesktopSession'; + +import { HeadlessRequest } from './HeadlessRequest'; -const AppLauncher = lazy(() => import('./AppLauncher')); +import { Main } from './Main'; + +import type { History } from 'history'; const Teleport: React.FC = props => { const { ctx, history } = props; @@ -74,19 +85,6 @@ const Teleport: React.FC = props => { ); }; -const LoginFailed = lazy(() => import('./Login/LoginFailed')); -const LoginSuccess = lazy(() => import('./Login/LoginSuccess')); -const Login = lazy(() => import('./Login')); -const Welcome = lazy(() => import('./Welcome')); - -const Console = lazy(() => import('./Console')); -const Player = lazy(() => import('./Player')); -const DesktopSession = lazy(() => import('./DesktopSession')); - -const HeadlessRequest = lazy(() => import('./HeadlessRequest')); - -const Main = lazy(() => import('./Main')); - function publicOSSRoutes() { return [ . */ -// export as default for use with React.lazy -export { UnifiedResources as default } from './UnifiedResources'; +export { UnifiedResources } from './UnifiedResources'; diff --git a/web/packages/teleport/src/Users/Users.tsx b/web/packages/teleport/src/Users/Users.tsx index d12acbeadf6d3..ba69a64da231f 100644 --- a/web/packages/teleport/src/Users/Users.tsx +++ b/web/packages/teleport/src/Users/Users.tsx @@ -31,7 +31,7 @@ import UserDelete from './UserDelete'; import UserReset from './UserReset'; import useUsers, { State, UsersContainerProps } from './useUsers'; -export default function Container(props: UsersContainerProps) { +export function UsersContainer(props: UsersContainerProps) { const state = useUsers(props); return ; } diff --git a/web/packages/teleport/src/Users/index.ts b/web/packages/teleport/src/Users/index.ts index bb709bf298c5f..8174b5db7cf9a 100644 --- a/web/packages/teleport/src/Users/index.ts +++ b/web/packages/teleport/src/Users/index.ts @@ -16,6 +16,4 @@ * along with this program. If not, see . */ -import Users from './Users'; - -export default Users; +export { UsersContainer as Users } from './Users'; diff --git a/web/packages/teleport/src/Users/useUsers.ts b/web/packages/teleport/src/Users/useUsers.ts index 94fdebaece54d..175bab0c911bb 100644 --- a/web/packages/teleport/src/Users/useUsers.ts +++ b/web/packages/teleport/src/Users/useUsers.ts @@ -16,7 +16,7 @@ * along with this program. If not, see . */ -import { LazyExoticComponent, ReactElement, useEffect, useState } from 'react'; +import { ReactElement, useEffect, useState } from 'react'; import { useAttempt } from 'shared/hooks'; import { User } from 'teleport/services/user'; @@ -181,12 +181,8 @@ type EmailPasswordResetElement = ( ) => ReactElement; export type UsersContainerProps = { - InviteCollaborators?: - | LazyExoticComponent - | InviteCollaboratorsElement; - EmailPasswordReset?: - | LazyExoticComponent - | EmailPasswordResetElement; + InviteCollaborators?: InviteCollaboratorsElement; + EmailPasswordReset?: EmailPasswordResetElement; }; export type State = ReturnType; diff --git a/web/packages/teleport/src/Welcome/Welcome.story.tsx b/web/packages/teleport/src/Welcome/Welcome.story.tsx index 3a5cef83a6873..b565fef0f0d23 100644 --- a/web/packages/teleport/src/Welcome/Welcome.story.tsx +++ b/web/packages/teleport/src/Welcome/Welcome.story.tsx @@ -23,7 +23,7 @@ import { WelcomeWrapper } from 'design/Onboard/WelcomeWrapper'; import { NewCredentials } from 'teleport/Welcome/NewCredentials'; -import Welcome from './Welcome'; +import { Welcome } from './Welcome'; import { CardWelcome } from './CardWelcome'; export default { title: 'Teleport/Welcome' }; diff --git a/web/packages/teleport/src/Welcome/Welcome.test.tsx b/web/packages/teleport/src/Welcome/Welcome.test.tsx index 28bde3ca9fbfd..9e5d1d1ab9392 100644 --- a/web/packages/teleport/src/Welcome/Welcome.test.tsx +++ b/web/packages/teleport/src/Welcome/Welcome.test.tsx @@ -32,7 +32,7 @@ import { userEventService } from 'teleport/services/userEvent'; import { NewCredentials } from 'teleport/Welcome/NewCredentials'; -import Welcome from './Welcome'; +import { Welcome } from './Welcome'; const invitePath = '/web/invite/5182'; const inviteContinuePath = '/web/invite/5182/continue'; diff --git a/web/packages/teleport/src/Welcome/Welcome.tsx b/web/packages/teleport/src/Welcome/Welcome.tsx index d6bf659d37ce8..27415c73c225a 100644 --- a/web/packages/teleport/src/Welcome/Welcome.tsx +++ b/web/packages/teleport/src/Welcome/Welcome.tsx @@ -37,7 +37,7 @@ type WelcomeProps = { NewCredentials: (props: NewCredentialsContainerProps) => JSX.Element; }; -export default function Welcome({ NewCredentials }: WelcomeProps) { +export function Welcome({ NewCredentials }: WelcomeProps) { const { tokenId } = useParams<{ tokenId: string }>(); const { search } = useLocation(); diff --git a/web/packages/teleport/src/Welcome/index.ts b/web/packages/teleport/src/Welcome/index.ts index 6cc4c4344a6ab..c26cd64efc462 100644 --- a/web/packages/teleport/src/Welcome/index.ts +++ b/web/packages/teleport/src/Welcome/index.ts @@ -16,6 +16,4 @@ * along with this program. If not, see . */ -import Welcome from './Welcome'; - -export default Welcome; +export { Welcome } from './Welcome'; diff --git a/web/packages/teleport/src/features.tsx b/web/packages/teleport/src/features.tsx index 0e65ececf1985..932d2b9e208b2 100644 --- a/web/packages/teleport/src/features.tsx +++ b/web/packages/teleport/src/features.tsx @@ -16,7 +16,7 @@ * along with this program. If not, see . */ -import React, { lazy } from 'react'; +import React from 'react'; import { AddCircle, @@ -44,38 +44,32 @@ import { ManagementSection, NavigationCategory, } from 'teleport/Navigation/categories'; +import { IntegrationEnroll } from '@gravitational/teleport/src/Integrations/Enroll'; import { NavTitle } from './types'; -import type { FeatureFlags, TeleportFeature } from './types'; - -const Audit = lazy(() => import('./Audit')); -const Sessions = lazy(() => import('./Sessions')); -const UnifiedResources = lazy(() => import('./UnifiedResources')); -const Account = lazy(() => import('./Account')); -const Support = lazy(() => import('./Support')); -const Clusters = lazy(() => import('./Clusters')); -const Nodes = lazy(() => import('./Nodes')); -const Trust = lazy(() => import('./TrustedClusters')); -const Users = lazy(() => import('./Users')); -const Roles = lazy(() => import('./Roles')); -const DeviceTrust = lazy(() => import('./DeviceTrust')); -const Recordings = lazy(() => import('./Recordings')); -const AuthConnectors = lazy(() => import('./AuthConnectors')); -const Locks = lazy(() => import('./LocksV2/Locks')); -const NewLock = lazy(() => import('./LocksV2/NewLock')); -const Discover = lazy(() => import('./Discover')); -const LockedAccessRequests = lazy(() => import('./AccessRequests')); -const Integrations = lazy(() => import('./Integrations')); -const IntegrationEnroll = lazy( - () => import('@gravitational/teleport/src/Integrations/Enroll') -); -const Bots = lazy(() => import('./Bots')); -const AddBots = lazy(() => import('./Bots/Add')); +import { AuditContainer as Audit } from './Audit'; +import { SessionsContainer as Sessions } from './Sessions'; +import { UnifiedResources } from './UnifiedResources'; +import { Account } from './Account'; +import { Support } from './Support'; +import { Clusters } from './Clusters'; +import { Nodes } from './Nodes'; +import { TrustedClusters } from './TrustedClusters'; +import { Users } from './Users'; +import { RolesContainer as Roles } from './Roles'; +import { DeviceTrustLocked } from './DeviceTrust'; +import { RecordingsContainer as Recordings } from './Recordings'; +import { AuthConnectors } from './AuthConnectors'; +import { Locks } from './LocksV2/Locks'; +import { NewLockView } from './LocksV2/NewLock'; +import { Discover } from './Discover'; +import { LockedAccessRequests } from './AccessRequests'; +import { Integrations } from './Integrations'; +import { Bots } from './Bots'; +import { AddBots } from './Bots/Add'; -// **************************** -// Resource Features -// **************************** +import type { FeatureFlags, TeleportFeature } from './types'; class AccessRequests implements TeleportFeature { category = NavigationCategory.Resources; @@ -341,7 +335,7 @@ export class FeatureNewLock implements TeleportFeature { title: 'Create New Lock', path: cfg.routes.newLock, exact: true, - component: NewLock, + component: NewLockView, }; hasAccess(flags: FeatureFlags) { @@ -527,7 +521,7 @@ export class FeatureTrust implements TeleportFeature { route = { title: 'Trusted Clusters', path: cfg.routes.trustedClusters, - component: Trust, + component: TrustedClusters, }; hasAccess(flags: FeatureFlags) { @@ -550,7 +544,7 @@ class FeatureDeviceTrust implements TeleportFeature { title: 'Manage Trusted Devices', path: cfg.routes.deviceTrust, exact: true, - component: DeviceTrust, + component: DeviceTrustLocked, }; hasAccess(flags: FeatureFlags) {