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

Signed-off-by: Anton Gilgur <[email protected]>

ui/src/app/api-docs/api-docs.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';

ui/src/app/app-router.tsx

@@ -1,5 +1,9 @@
-import {Layout, Notifications, NotificationsManager, NotificationType, Popup, PopupManager, PopupProps} from 'argo-ui';
 import * as H from 'history';
+import {Layout} from 'argo-ui/src/components/layout/layout';
+import {NotificationsManager} from 'argo-ui/src/components/notifications/notification-manager';
+import {Notifications, NotificationType} from 'argo-ui/src/components/notifications/notifications';
+import {PopupManager} from 'argo-ui/src/components/popup/popup-manager';
+import {Popup, PopupProps} from 'argo-ui/src/components/popup/popup';
 
 import * as React from 'react';
 import {useEffect, useState} from 'react';

ui/src/app/app.tsx

@@ -1,7 +1,11 @@
-import {NavigationManager, NotificationsManager, PopupManager} from 'argo-ui';
-
 import {createBrowserHistory} from 'history';
 import * as React from 'react';
+import {NavigationManager} from 'argo-ui/src/components/navigation';
+import {NotificationsManager} from 'argo-ui/src/components/notifications/notification-manager';
+import {PopupManager} from 'argo-ui/src/components/popup/popup-manager';
+
+import 'argo-ui/src/styles/main.scss';
+
 import {AppRouter} from './app-router';
 import {ContextApis, Provider} from './shared/context';
 

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

@@ -1,5 +1,6 @@
-import {NotificationType, Page} from 'argo-ui';
-import {SlidingPanel} from 'argo-ui/src/index';
+import {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/cluster-workflow-templates/cluster-workflow-template-editor.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Tabs} from 'argo-ui';
+import {Tabs} from 'argo-ui/src/components/tabs/tabs';
 
 import {WorkflowTemplate} from '../../models';
 import {LabelsAndAnnotationsEditor} from '../shared/components/editors/labels-and-annotations-editor';

ui/src/app/cluster-workflow-templates/cluster-workflow-template-list.tsx

@@ -1,4 +1,5 @@
-import {Page, SlidingPanel} from 'argo-ui';
+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 {Link, RouteComponentProps} from 'react-router-dom';

ui/src/app/cron-workflows/cron-workflow-details.tsx

@@ -1,4 +1,6 @@
-import {NotificationType, Page, SlidingPanel} from 'argo-ui';
+import {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/cron-workflows/cron-workflow-editor.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Tabs} from 'argo-ui';
+import {Tabs} from 'argo-ui/src/components/tabs/tabs';
 
 import {CronWorkflow} from '../../models';
 import {LabelsAndAnnotationsEditor} from '../shared/components/editors/labels-and-annotations-editor';

ui/src/app/cron-workflows/cron-workflow-list.tsx

@@ -1,4 +1,6 @@
-import {Page, SlidingPanel, Ticker} from 'argo-ui';
+import {Page} from 'argo-ui/src/components/page/page';
+import {SlidingPanel} from 'argo-ui/src/components/sliding-panel/sliding-panel';
+import {Ticker} from 'argo-ui/src/components/ticker';
 import * as React from 'react';
 import {useContext, useEffect, useState} from 'react';
 import {Link, RouteComponentProps} from 'react-router-dom';

ui/src/app/cron-workflows/cron-workflow-spec-editior.tsx

@@ -1,4 +1,5 @@
-import {Checkbox, Select} from 'argo-ui';
+import {Checkbox} from 'argo-ui/src/components/checkbox';
+import {Select} from 'argo-ui/src/components/select/select';
 import * as React from 'react';
 
 import {ConcurrencyPolicy, CronWorkflowSpec} from '../../models';

ui/src/app/event-flow/event-flow-page.tsx

@@ -1,4 +1,6 @@
-import {Page, SlidingPanel, Tabs} from 'argo-ui';
+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 {useContext, useEffect, useState} from 'react';
 import * as React from 'react';
 import {RouteComponentProps} from 'react-router-dom';

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

@@ -1,5 +1,7 @@
-import {NotificationType, Page} from 'argo-ui';
-import {SlidingPanel, Tabs} from 'argo-ui/src/index';
+import {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/event-sources/event-source-editor.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Tabs} from 'argo-ui';
+import {Tabs} from 'argo-ui/src/components/tabs/tabs';
 
 import {EventSource} from '../../models';
 import {MetadataEditor} from '../shared/components/editors/metadata-editor';

ui/src/app/event-sources/event-source-list.tsx

@@ -1,4 +1,6 @@
-import {Page, SlidingPanel, Tabs} from 'argo-ui';
+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 classNames from 'classnames';
 import * as React from 'react';
 import {useContext, useEffect, useState} from 'react';

ui/src/app/help/help.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';

ui/src/app/login/login.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, uiUrlWithParams} from '../shared/base';

ui/src/app/plugins/plugin-list.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 {RouteComponentProps} from 'react-router-dom';

ui/src/app/reports/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/sensors/sensor-details.tsx

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

ui/src/app/sensors/sensor-editor.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Tabs} from 'argo-ui';
+import {Tabs} from 'argo-ui/src/components/tabs/tabs';
 
 import {Sensor} from '../../models';
 import {MetadataEditor} from '../shared/components/editors/metadata-editor';

ui/src/app/sensors/sensor-list.tsx

@@ -1,4 +1,5 @@
-import {Page, SlidingPanel} from 'argo-ui';
+import {Page} from 'argo-ui/src/components/page/page';
+import {SlidingPanel} from 'argo-ui/src/components/sliding-panel/sliding-panel';
 import classNames from 'classnames';
 import * as React from 'react';
 import {useContext, useEffect, useState} from 'react';

ui/src/app/sensors/sensor-side-panel.tsx

@@ -1,6 +1,8 @@
-import {SlidingPanel, Tabs} from 'argo-ui';
+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 {useState} from 'react';
+
 import {Sensor} from '../../models';
 import {Node} from '../shared/components/graph/types';
 import {EventsPanel} from '../workflows/components/events-panel';

ui/src/app/shared/components/checkbox-filter/checkbox-filter.tsx

@@ -1,4 +1,4 @@
-import {Checkbox} from 'argo-ui';
+import {Checkbox} from 'argo-ui/src/components/checkbox';
 import * as React from 'react';
 
 import './checkbox-filter.scss';

ui/src/app/shared/components/clipboard-text.tsx

@@ -1,4 +1,4 @@
-import {Tooltip} from 'argo-ui';
+import {Tooltip} from 'argo-ui/src/components/tooltip/tooltip';
 import * as React from 'react';
 import {useState} from 'react';
 

ui/src/app/shared/components/data-loader-dropdown.tsx

@@ -1,4 +1,5 @@
-import {DataLoader, Select, SelectOption} from 'argo-ui';
+import {DataLoader} from 'argo-ui/src/components/data-loader';
+import {Select, SelectOption} from 'argo-ui/src/components/select/select';
 import * as React from 'react';
 import {useState} from 'react';
 

ui/src/app/shared/components/filter-drop-down.tsx

@@ -1,4 +1,4 @@
-import {Checkbox} from 'argo-ui';
+import {Checkbox} from 'argo-ui/src/components/checkbox';
 import classNames from 'classnames';
 import * as React from 'react';
 

ui/src/app/shared/components/input-filter.tsx

@@ -1,4 +1,4 @@
-import {Autocomplete} from 'argo-ui';
+import {Autocomplete} from 'argo-ui/src/components/autocomplete/autocomplete';
 import React, {useState} from 'react';
 
 interface InputProps {

ui/src/app/shared/components/links.tsx

@@ -1,6 +1,7 @@
 import {ObjectMeta} from 'argo-ui/src/models/kubernetes';
 import {useEffect, useState} from 'react';
 import * as React from 'react';
+
 import {Link, Workflow} from '../../../models';
 import {services} from '../services';
 import {Button} from './button';

ui/src/app/shared/components/loading.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {MockupList} from '../../../../node_modules/argo-ui';
+import {MockupList} from 'argo-ui/src/components/mockup-list/mockup-list';
 
 export const Loading = () => (
     <div style={{margin: 20}}>

ui/src/app/shared/components/parameters-input.tsx

@@ -1,4 +1,5 @@
-import {Select, Tooltip} from 'argo-ui';
+import {Select} from 'argo-ui/src/components/select/select';
+import {Tooltip} from 'argo-ui/src/components/tooltip/tooltip';
 import React from 'react';
 
 import {Parameter} from '../../../models';

ui/src/app/shared/components/tags-input/tags-input.tsx

@@ -1,4 +1,4 @@
-import {Autocomplete, AutocompleteApi, AutocompleteOption} from 'argo-ui';
+import {Autocomplete, AutocompleteApi, AutocompleteOption} from 'argo-ui/src/components/autocomplete/autocomplete';
 import classNames from 'classnames';
 import * as React from 'react';
 import {useRef, useState} from 'react';

ui/src/app/shared/components/timestamp.tsx

@@ -1,4 +1,4 @@
-import {Ticker} from 'argo-ui';
+import {Ticker} from 'argo-ui/src/components/ticker';
 import * as React from 'react';
 
 import {ago} from '../duration';

ui/src/app/shared/context.ts

@@ -1,4 +1,7 @@
-import {AppContext as ArgoAppContext, NavigationApi, NotificationsApi, PopupApi} from 'argo-ui';
+import type {AppContext as ArgoAppContext} from 'argo-ui/src/context';
+import type {NavigationApi} from 'argo-ui/src/components/navigation';
+import type {NotificationsApi} from 'argo-ui/src/components/notifications/notification-manager';
+import type {PopupApi} from 'argo-ui/src/components/popup/popup-manager';
 import {History} from 'history';
 import * as React from 'react';
 

ui/src/app/userinfo/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';
 

ui/src/app/workflow-event-bindings/workflow-event-bindings.tsx

@@ -1,4 +1,5 @@
-import {Page, SlidingPanel} from 'argo-ui';
+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-dom';

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

@@ -1,5 +1,6 @@
-import {NotificationType, Page} from 'argo-ui';
-import {SlidingPanel} from 'argo-ui/src/index';
+import {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/workflow-templates/workflow-template-editor.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Tabs} from 'argo-ui';
+import {Tabs} from 'argo-ui/src/components/tabs/tabs';
 
 import {WorkflowTemplate} from '../../models';
 import {LabelsAndAnnotationsEditor} from '../shared/components/editors/labels-and-annotations-editor';

ui/src/app/workflow-templates/workflow-template-list.tsx

@@ -1,4 +1,5 @@
-import {Page, SlidingPanel} from 'argo-ui';
+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 {Link, RouteComponentProps} from 'react-router-dom';

ui/src/app/workflows/components/resubmit-workflow-panel.tsx

@@ -1,5 +1,6 @@
-import {Checkbox} from 'argo-ui';
+import {Checkbox} from 'argo-ui/src/components/checkbox';
 import React, {useContext, useState} from 'react';
+
 import {Parameter, ResubmitOpts, Workflow} from '../../../models';
 import {Context} from '../../shared/context';
 import {uiUrl} from '../../shared/base';

ui/src/app/workflows/components/retry-workflow-panel.tsx

@@ -1,5 +1,6 @@
-import {Checkbox} from 'argo-ui';
+import {Checkbox} from 'argo-ui/src/components/checkbox';
 import React, {useContext, useState} from 'react';
+
 import {Parameter, RetryOpts, Workflow} from '../../../models';
 import {Context} from '../../shared/context';
 import {uiUrl} from '../../shared/base';

ui/src/app/workflows/components/submit-workflow-panel.tsx

@@ -1,5 +1,6 @@
-import {Select} from 'argo-ui';
+import {Select} from 'argo-ui/src/components/select/select';
 import React, {useContext, useMemo, useState} from 'react';
+
 import {Parameter, Template} from '../../../models';
 import {Context} from '../../shared/context';
 import {uiUrl} from '../../shared/base';

ui/src/app/workflows/components/workflow-details/suspend-inputs.tsx

@@ -1,4 +1,5 @@
-import {Select, Tooltip} from 'argo-ui';
+import {Select} from 'argo-ui/src/components/select/select';
+import {Tooltip} from 'argo-ui/src/components/tooltip/tooltip';
 import * as React from 'react';
 import {useState} from 'react';
 

ui/src/app/workflows/components/workflow-details/workflow-details.tsx

@@ -1,4 +1,5 @@
-import {Page, SlidingPanel} from 'argo-ui';
+import {Page} from 'argo-ui/src/components/page/page';
+import {SlidingPanel} from 'argo-ui/src/components/sliding-panel/sliding-panel';
 import classNames from 'classnames';
 import * as React from 'react';
 import {useContext, useEffect, useRef, useState} from 'react';

ui/src/app/workflows/components/workflow-editor.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
+import {Tabs} from 'argo-ui/src/components/tabs/tabs';
 
-import {Tabs} from 'argo-ui';
 import {Workflow} from '../../../models';
 import {MetadataEditor} from '../../shared/components/editors/metadata-editor';
 import {WorkflowParametersEditor} from '../../shared/components/editors/workflow-parameters-editor';

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/workflow-logs-viewer/workflow-logs-viewer.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {useContext, useEffect, useState} from 'react';
-import {Autocomplete} from 'argo-ui';
+import {Autocomplete} from 'argo-ui/src/components/autocomplete/autocomplete';
 import {Observable} from 'rxjs';
 import {map, publishReplay, refCount} from 'rxjs/operators';
 

ui/src/app/workflows/components/workflow-node-info/workflow-node-info.tsx

@@ -1,4 +1,7 @@
-import {Tabs, Ticker, Tooltip} from 'argo-ui';
+import {Tabs} from 'argo-ui/src/components/tabs/tabs';
+import {Ticker} from 'argo-ui/src/components/ticker';
+import {Tooltip} from 'argo-ui/src/components/tooltip/tooltip';
+
 import moment from 'moment';
 import * as React from 'react';
 import {useState} from 'react';

ui/src/app/workflows/components/workflow-panel/workflow-panel.tsx

@@ -1,5 +1,6 @@
 import {ObjectMeta} from 'argo-ui/src/models/kubernetes';
 import * as React from 'react';
+
 import {WorkflowStatus} from '../../../../models';
 import {Notice} from '../../../shared/components/notice';
 import {Phase} from '../../../shared/components/phase';

ui/src/app/workflows/components/workflow-summary-panel.tsx

@@ -1,4 +1,4 @@
-import {Ticker} from 'argo-ui';
+import {Ticker} from 'argo-ui/src/components/ticker';
 import * as React from 'react';
 
 import {labels, NODE_PHASE, Workflow} from '../../../models';

ui/src/app/workflows/components/workflow-yaml-viewer/workflow-yaml-viewer.tsx

@@ -1,4 +1,4 @@
-import {SlideContents} from 'argo-ui';
+import {SlideContents} from 'argo-ui/src/components/slide-contents/slide-contents';
 import * as React from 'react';
 
 import * as models from '../../../../models';