Prevent code splitting (#38706)

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

@@ -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({

web/packages/teleport/src/AccessRequests/index.ts

@@ -16,4 +16,4 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-export { LockedAccessRequests as default } from './LockedAccessRequests/LockedAccessRequests';
+export { LockedAccessRequests } from './LockedAccessRequests/LockedAccessRequests';

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';
 

web/packages/teleport/src/Account/Account.tsx

@@ -53,7 +53,7 @@ export interface AccountPageProps {
   enterpriseComponent?: React.ComponentType<EnterpriseComponentProps>;
 }
 
-export default function AccountPage({ enterpriseComponent }: AccountPageProps) {
+export function AccountPage({ enterpriseComponent }: AccountPageProps) {
   const ctx = useTeleport();
   const isSso = ctx.storeUser.isSso();
   const manageDevicesState = useManageDevices(ctx);

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;

web/packages/teleport/src/Account/index.ts

@@ -16,5 +16,4 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import Account from './Account';
-export default Account;
+export { AccountPage, Account } from './Account';

web/packages/teleport/src/AppLauncher/index.ts

@@ -16,4 +16,4 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-export { AppLauncher as default } from './AppLauncher';
+export { AppLauncher } from './AppLauncher';

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';
 

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);

web/packages/teleport/src/Audit/index.tsx

@@ -16,6 +16,4 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import Audit from './Audit';
-
-export default Audit;
+export { Audit, AuditContainer } from './Audit';

web/packages/teleport/src/AuthConnectors/index.ts

@@ -16,5 +16,4 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import AuthConnectors from './AuthConnectors';
-export default AuthConnectors;
+export { AuthConnectors } from './AuthConnectors';

web/packages/teleport/src/Bots/Add/index.tsx

@@ -16,4 +16,4 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-export { AddBots as default } from './AddBots';
+export { AddBots } from './AddBots';

web/packages/teleport/src/Bots/index.ts

@@ -16,5 +16,4 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-// export as default for use with React.lazy
-export { Bots as default } from './List/Bots';
+export { Bots } from './List/Bots';

web/packages/teleport/src/Clusters/index.ts

@@ -16,4 +16,4 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-export { Clusters as default } from './Clusters';
+export { Clusters } from './Clusters';

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();
   });

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 <DesktopSession {...state} />;
 }

web/packages/teleport/src/DesktopSession/index.ts

@@ -16,5 +16,4 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import DesktopSession from './DesktopSession';
-export default DesktopSession;
+export { DesktopSession, DesktopSessionContainer } from './DesktopSession';

web/packages/teleport/src/DeviceTrust/index.ts

@@ -16,4 +16,4 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-export { DeviceTrustLocked as default } from './DeviceTrustLocked';
+export { DeviceTrustLocked } from './DeviceTrustLocked';

web/packages/teleport/src/Discover/index.tsx

@@ -16,5 +16,4 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-// export as default for use with React.lazy
-export { Discover as default } from './Discover';
+export { Discover } from './Discover';

web/packages/teleport/src/HeadlessRequest/index.ts

@@ -16,5 +16,4 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-// export as default for use with React.lazy
-export { HeadlessRequest as default } from './HeadlessRequest';
+export { HeadlessRequest } from './HeadlessRequest';

web/packages/teleport/src/Integrations/Enroll/AwsOidc/index.ts

@@ -16,5 +16,4 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-// export as default for use with React.lazy
-export { AwsOidc as default } from './AwsOidc';
+export { AwsOidc } from './AwsOidc';

web/packages/teleport/src/Integrations/Enroll/IntegrationRoute.tsx

@@ -16,21 +16,21 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-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 [
     <Route
       key={IntegrationKind.AwsOidc}
       exact
       path={cfg.getIntegrationEnrollRoute(IntegrationKind.AwsOidc)}
-      component={EnrollAwsOidc}
+      component={AwsOidc}
     />,
   ];
 }

web/packages/teleport/src/Integrations/Enroll/index.ts

@@ -16,8 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-// 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';

web/packages/teleport/src/Integrations/index.ts

@@ -16,7 +16,6 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-// 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';

web/packages/teleport/src/LocksV2/Locks/index.ts

@@ -16,5 +16,4 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-// export as default for use with React.lazy
-export { Locks as default } from './Locks';
+export { Locks } from './Locks';

web/packages/teleport/src/LocksV2/NewLock/LockCheckout/index.ts

@@ -16,5 +16,4 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-// export as default for use with React.lazy
-export { LockCheckout as default } from './LockCheckout';
+export { LockCheckout } from './LockCheckout';

web/packages/teleport/src/LocksV2/NewLock/index.ts

@@ -16,6 +16,4 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-// export as default for use with React.lazy
-import NewLockWrapper from './NewLock';
-export default NewLockWrapper;
+export { NewLockView } from './NewLock';

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 {

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();

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 <Login {...state} />;
+  return <LoginComponent {...state} />;
 }
 
-export function Login({
+export function LoginComponent({
   attempt,
   onLogin,
   onLoginWithWebauthn,

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 (
     <Switch>
       <Route path={cfg.routes.loginErrorCallback}>
-        <LoginFailed message="unable to process callback" />
+        <LoginFailedComponent message="unable to process callback" />
       </Route>
       <Route path={cfg.routes.loginErrorUnauthorized}>
-        <LoginFailed message="You are not authorized, please contact your SSO administrator." />
+        <LoginFailedComponent message="You are not authorized, please contact your SSO administrator." />
       </Route>
       <Route component={LoginFailed} />
     </Switch>
   );
 }
 
-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 (
     <>

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(<LoginSuccess />);

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 (
     <>
       <LogoHero />

web/packages/teleport/src/Login/index.ts

@@ -16,9 +16,6 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-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';

web/packages/teleport/src/Main/index.ts

@@ -17,7 +17,7 @@
  */
 
 export {
-  Main as default,
+  Main,
   useContentMinWidthContext,
   useNoMinWidth,
   HorizontalSplit,

web/packages/teleport/src/Nodes/index.ts

@@ -16,5 +16,4 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import Nodes from './Nodes';
-export default Nodes;
+export { Nodes } from './Nodes';

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 = () => {
     <Router history={history}>
       <Flex m={-3}>
         <Route path="/web/cluster/:clusterId/session/:sid">
-          <PlayerComponent />
+          <Player />
         </Route>
       </Flex>
     </Router>
@@ -59,7 +59,7 @@ export const Desktop = () => {
     <Router history={history}>
       <Flex m={-3}>
         <Route path="/web/cluster/:clusterId/session/:sid">
-          <PlayerComponent />
+          <Player />
         </Route>
       </Flex>
     </Router>
@@ -76,7 +76,7 @@ export const RecordingTypeError = () => {
     <Router history={history}>
       <Flex m={-3}>
         <Route path="/web/cluster/:clusterId/session/:sid">
-          <PlayerComponent />
+          <Player />
         </Route>
       </Flex>
     </Router>
@@ -95,7 +95,7 @@ export const DurationMsError = () => {
     <Router history={history}>
       <Flex m={-3}>
         <Route path="/web/cluster/:clusterId/session/:sid">
-          <PlayerComponent />
+          <Player />
         </Route>
       </Flex>
     </Router>