refactor more components to use individual imports

- this should be pretty much all components except for the few context references

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

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

@@ -1,8 +1,10 @@
-import {NotificationType, Page} from 'argo-ui';
+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';
+
 import {ClusterWorkflowTemplate} from '../../../../models';
 import {uiUrl} from '../../../shared/base';
 import {ErrorNotice} from '../../../shared/components/error-notice';

ui/src/app/cluster-workflow-templates/components/cluster-workflow-template-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 {WorkflowTemplate} from '../../../models';
 import {LabelsAndAnnotationsEditor} from '../../shared/components/editors/labels-and-annotations-editor';
 import {MetadataEditor} from '../../shared/components/editors/metadata-editor';

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

@@ -1,7 +1,9 @@
-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';
+
 import * as models from '../../../../models';
 import {uiUrl} from '../../../shared/base';
 import {ErrorNotice} from '../../../shared/components/error-notice';

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

@@ -1,7 +1,10 @@
-import {NotificationType, Page, SlidingPanel} from 'argo-ui';
+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';
+
 import * as models from '../../../../models';
 import {CronWorkflow, Link, Workflow} from '../../../../models';
 import {uiUrl} from '../../../shared/base';

ui/src/app/cron-workflows/components/cron-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 {CronWorkflow} from '../../../models';
 import {LabelsAndAnnotationsEditor} from '../../shared/components/editors/labels-and-annotations-editor';
 import {MetadataEditor} from '../../shared/components/editors/metadata-editor';

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

@@ -1,7 +1,10 @@
-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';
+
 import {CronWorkflow} from '../../../../models';
 import {uiUrl} from '../../../shared/base';
 import {ErrorNotice} from '../../../shared/components/error-notice';

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

@@ -1,5 +1,7 @@
-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';
 import {NumberInput} from '../../shared/components/number-input';
 import {TextInput} from '../../shared/components/text-input';

ui/src/app/cron-workflows/components/cron-workflow-status-viewer.tsx

@@ -1,5 +1,6 @@
 import * as kubernetes from 'argo-ui/src/models/kubernetes';
 import * as React from 'react';
+
 import {CronWorkflowSpec, CronWorkflowStatus} from '../../../models';
 import {Timestamp} from '../../shared/components/timestamp';
 import {ConditionsPanel} from '../../shared/conditions-panel';

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

@@ -1,9 +1,12 @@
-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';
 import {Observable} from 'rxjs';
 import {filter, map} from 'rxjs/operators';
+
 import {kubernetes, Workflow} from '../../../../models';
 import {EventSource} from '../../../../models/event-source';
 import {Sensor} from '../../../../models/sensor';

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

@@ -5,6 +5,7 @@ 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';
+
 import {EventSource} from '../../../../models';
 import {ID} from '../../../event-flow/components/event-flow-details/id';
 import {uiUrl} from '../../../shared/base';

ui/src/app/event-sources/components/event-source-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 {EventSource} from '../../../models';
 import {MetadataEditor} from '../../shared/components/editors/metadata-editor';
 import {ObjectEditor} from '../../shared/components/object-editor/object-editor';

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

@@ -1,8 +1,11 @@
-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';
 import {Link, RouteComponentProps} from 'react-router-dom';
+
 import {EventSource, kubernetes} from '../../../../models';
 import {ID} from '../../../event-flow/components/event-flow-details/id';
 import {Utils as EventsUtils} from '../../../sensors/components/utils';

ui/src/app/help/components/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/components/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/components/plugin-list/plugin-list.tsx

@@ -1,7 +1,8 @@
-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';
+
 import {uiUrl} from '../../../shared/base';
 import {useCollectEvent} from '../../../shared/components/use-collect-event';
 import {ZeroState} from '../../../shared/components/zero-state';

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

@@ -5,6 +5,7 @@ import * as React from 'react';
 import {useContext, useEffect, useState} from 'react';
 import {Bar, ChartData} from 'react-chartjs-2';
 import {RouteComponentProps} from 'react-router-dom';
+
 import {uiUrl} from '../../shared/base';
 import {ErrorNotice} from '../../shared/components/error-notice';
 import {InfoIcon} from '../../shared/components/fa-icons';

ui/src/app/sensors/components/sensor-details/sensor-details.tsx

@@ -1,4 +1,5 @@
-import {NotificationType, Page} from 'argo-ui';
+import type {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/components/sensor-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 {Sensor} from '../../../models';
 import {MetadataEditor} from '../../shared/components/editors/metadata-editor';
 import {ObjectEditor} from '../../shared/components/object-editor/object-editor';

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

@@ -1,8 +1,10 @@
-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';
 import {Link, RouteComponentProps} from 'react-router-dom';
+
 import {kubernetes, Sensor} from '../../../../models';
 import {ID} from '../../../event-flow/components/event-flow-details/id';
 import {uiUrl} from '../../../shared/base';

ui/src/app/sensors/components/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,6 +1,7 @@
-import {Checkbox} from 'argo-ui';
+import {Checkbox} from 'argo-ui/src/components/checkbox';
 import classNames from 'classnames';
 import * as React from 'react';
+
 import {DropDown} from './dropdown/dropdown';
 
 interface FilterDropDownProps {

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/parameters-input.tsx

@@ -1,5 +1,7 @@
-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';
 import {Utils} from '../../utils';
 

ui/src/app/shared/components/resource-editor/resource-editor.tsx

@@ -1,6 +1,7 @@
 import * as kubernetes from 'argo-ui/src/models/kubernetes';
 import * as React from 'react';
 import {useState} from 'react';
+
 import {Button} from '../button';
 import {ErrorNotice} from '../error-notice';
 import {ObjectEditor} from '../object-editor/object-editor';

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,5 +1,6 @@
-import {Ticker} from 'argo-ui';
+import {Ticker} from 'argo-ui/src/components/ticker';
 import * as React from 'react';
+
 import {ago} from '../duration';
 
 export const Timestamp = ({date}: {date: Date | string | number}) => {

ui/src/app/shared/context.ts

@@ -1,4 +1,4 @@
-import {AppContext as ArgoAppContext, NavigationApi, NotificationsApi, PopupApi} from 'argo-ui';
+import type {AppContext as ArgoAppContext, NavigationApi, NotificationsApi, PopupApi} from 'argo-ui';
 import {History} from 'history';
 import * as React from 'react';
 

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

@@ -1,6 +1,7 @@
 import {Page} from 'argo-ui/src/components/page/page';
 import * as React from 'react';
 import {useEffect, useState} from 'react';
+
 import {GetUserInfoResponse} from '../../../models';
 import {uiUrl} from '../../shared/base';
 import {ErrorNotice} from '../../shared/components/error-notice';

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

@@ -1,6 +1,8 @@
-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';
 import {WorkflowEventBinding} from '../../../../models';
 import {absoluteUrl, uiUrl} from '../../../shared/base';

ui/src/app/workflow-templates/components/workflow-template-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 {WorkflowTemplate} from '../../../models';
 import {LabelsAndAnnotationsEditor} from '../../shared/components/editors/labels-and-annotations-editor';
 import {MetadataEditor} from '../../shared/components/editors/metadata-editor';

ui/src/app/workflow-templates/components/workflow-template-list/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, {useState} from 'react';
+
 import {Parameter, ResubmitOpts, Workflow} from '../../../models';
 import {uiUrl} from '../../shared/base';
 import {ErrorNotice} from '../../shared/components/error-notice';

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, {useState} from 'react';
+
 import {Parameter, RetryOpts, Workflow} from '../../../models';
 import {uiUrl} from '../../shared/base';
 import {ErrorNotice} from '../../shared/components/error-notice';

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, {useMemo, useState} from 'react';
+
 import {Parameter, Template} from '../../../models';
 import {uiUrl} from '../../shared/base';
 import {ErrorNotice} from '../../shared/components/error-notice';

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

@@ -1,9 +1,9 @@
 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';
+
 import * as models from '../../../../models';
 import {execSpec} from '../../../../models';
 import {ANNOTATION_KEY_POD_NAME_VERSION} from '../../../shared/annotations';

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