Consolidate webasset bundle to single chunks

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>