refactor(ui): code-split out large xterm dep

- after the past few code-splits, `xterm` was left as one of the largest deps in the main bundle
  - `xterm` is only used by `argo-ui` in its `LogsViewer` component, which is only used by Workflows' `FullHeightLogsViewer` component
    - so lazy load `LogsViewer` within `FullHeightLogsViewer` in order to code-split it
      - add a [`webpackPrefetch`](https://webpack.js.org/guides/code-splitting/#prefetchingpreloading-modules) magic comment as logs are _very_ commonly used, at least in my experience

- **NOTE**: this is currently **not working** as a code-split as `argo-ui` does not seem to be tree-shakeable
  - so even with this code-split, the component is still being imported from other imports
  - from a quick glance, the lack of tree-shaking may be due to [this SCSS import](https://github.com/argoproj/argo-ui/blob/5ff344ac9692c14dd108468bd3c020c3c75181cb/src/components/index.ts#L1) in `argo-ui`, which is a side-effect
    - a potential workaround may be to import all the components individually and then import the styles individually in our own code
      - started on this, did not finish, still draft

Signed-off-by: Anton Gilgur <agilgur5@gmail.com>

ui/src/app/apidocs/components/apiDocs.tsx

@@ -1,4 +1,4 @@
-import {Page} from 'argo-ui';
+import {Page} from 'argo-ui/src/components/page/page';
 import * as React from 'react';
 import {uiUrl} from '../../shared/base';
 import {Loading} from '../../shared/components/loading';

ui/src/app/cluster-workflow-templates/components/cluster-workflow-template-details/cluster-workflow-template-details.tsx

@@ -1,5 +1,5 @@
 import {NotificationType, Page} from 'argo-ui';
-import {SlidingPanel} from 'argo-ui/src/index';
+import {SlidingPanel} from 'argo-ui/src/components/sliding-panel/sliding-panel';
 import * as React from 'react';
 import {useContext, useEffect, useState} from 'react';
 import {RouteComponentProps} from 'react-router';

ui/src/app/event-sources/components/event-source-details/event-source-details.tsx

@@ -1,5 +1,7 @@
-import {NotificationType, Page} from 'argo-ui';
-import {SlidingPanel, Tabs} from 'argo-ui/src/index';
+import type {NotificationType} from 'argo-ui/src/components/notifications/notifications';
+import {Page} from 'argo-ui/src/components/page/page';
+import {SlidingPanel} from 'argo-ui/src/components/sliding-panel/sliding-panel';
+import {Tabs} from 'argo-ui/src/components/tabs/tabs';
 import * as React from 'react';
 import {useContext, useEffect, useState} from 'react';
 import {RouteComponentProps} from 'react-router';

ui/src/app/reports/components/reports.tsx

@@ -1,4 +1,4 @@
-import {Page} from 'argo-ui/src/index';
+import {Page} from 'argo-ui/src/components/page/page';
 import {ChartOptions} from 'chart.js';
 import 'chartjs-plugin-annotation';
 import * as React from 'react';

ui/src/app/userinfo/components/user-info.tsx

@@ -1,4 +1,4 @@
-import {Page} from 'argo-ui';
+import {Page} from 'argo-ui/src/components/page/page';
 import * as React from 'react';
 import {useEffect, useState} from 'react';
 import {GetUserInfoResponse} from '../../../models';

ui/src/app/workflow-templates/components/workflow-template-details/workflow-template-details.tsx

@@ -1,5 +1,6 @@
-import {NotificationType, Page} from 'argo-ui';
-import {SlidingPanel} from 'argo-ui/src/index';
+import type {NotificationType} from 'argo-ui/src/components/notifications/notifications'
+import {Page} from 'argo-ui/src/components/page/page';
+import {SlidingPanel} from 'argo-ui/src/components/sliding-panel/sliding-panel';
 import * as React from 'react';
 import {useContext, useEffect, useState} from 'react';
 import {RouteComponentProps} from 'react-router';

ui/src/app/workflows/components/workflow-logs-viewer/full-height-logs-viewer.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import {useEffect, useRef, useState} from 'react';
 
-import {LogsViewer} from 'argo-ui';
-import {LogsViewerProps} from 'argo-ui/src/components/logs-viewer/logs-viewer';
+import type {LogsViewerProps} from 'argo-ui/src/components/logs-viewer/logs-viewer';
+
+import {Loading} from '../../../shared/components/loading';
 
 import './workflow-logs-viewer.scss';
 
@@ -18,7 +19,22 @@ export function FullHeightLogsViewer(props: LogsViewerProps) {
 
     return (
         <div ref={ref} style={{height}} className='log-box'>
-            {height && <LogsViewer source={source} />}
+            {height && <SuspenseLogsViewer source={source} />}
         </div>
     );
 }
+
+// lazy load LogsViewer as it imports a large component: xterm (which can be split into a separate bundle)
+const LazyLogsViewer = React.lazy(async () => {
+    // prefetch b/c logs are commonly used
+    const module = await import(/* webpackPrefetch: true, webpackChunkName: "argo-ui-logs-viewer" */ 'argo-ui/src/components/logs-viewer/logs-viewer');
+    return { default: module.LogsViewer }; // React.lazy requires a default import, so we create an intermediate module
+});
+
+function SuspenseLogsViewer(props: LogsViewerProps) {
+    return (
+        <React.Suspense fallback={<Loading />}>
+            <LazyLogsViewer {...props} />
+        </React.Suspense>
+    );
+}

ui/src/app/workflows/components/workflows-row/workflows-row.tsx

@@ -1,4 +1,4 @@
-import {Ticker} from 'argo-ui/src/index';
+import {Ticker} from 'argo-ui/src/components/ticker';
 import * as React from 'react';
 import {useState} from 'react';
 import {Link} from 'react-router-dom';

ui/src/app/workflows/components/workflows-toolbar/workflows-toolbar.tsx

@@ -1,4 +1,4 @@
-import {NotificationType} from 'argo-ui';
+import type {NotificationType} from 'argo-ui/src/components/notifications/notifications';
 import * as React from 'react';
 import {useContext, useMemo} from 'react';
 

ui/src/models/index.ts

@@ -8,4 +8,4 @@ export * from './cluster-workflow-templates';
 export * from './submit-opts';
 export {EventSource} from './event-source';
 export {Sensor, SensorList} from './sensor';
-export {models as kubernetes} from 'argo-ui';
+export * as kubernetes from 'argo-ui/src/models/kubernetes';