build(ui): automatically sort imports

ui/.prettierrc

@@ -1,9 +1,21 @@
 {
   "arrowParens": "avoid",
   "bracketSpacing": false,
+  "importOrder": [
+    "<BUILTIN_MODULES>",
+    "<THIRD_PARTY_MODULES>",
+    "",
+    "^[.]",
+    "",
+    ".[s?]css$"
+],
+  "importOrderTypeScriptVersion": "4.9.5",
   "jsxSingleQuote": true,
   "jsxBracketSameLine": true,
   "printWidth": 180,
+  "plugins": [
+    "@ianvs/prettier-plugin-sort-imports"
+  ],
   "quoteProps": "consistent",
   "singleQuote": true,
   "tabWidth": 4,

ui/package.json

@@ -44,6 +44,7 @@
         "@babel/core": "^7.22.11",
         "@babel/preset-env": "^7.22.10",
         "@fortawesome/fontawesome-free": "^6.5.1",
+        "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
         "@types/chart.js": "^2.9.24",
         "@types/classnames": "^2.3.1",
         "@types/dagre": "^0.7.52",

ui/src/app/app-router.tsx

@@ -1,13 +1,13 @@
-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 {PopupManager} from 'argo-ui/src/components/popup/popup-manager';
+import * as H from 'history';
 import * as React from 'react';
 import {useEffect, useState} from 'react';
 import {Redirect, Route, Router, Switch} from 'react-router';
+
 import {Version} from '../models';
 import apiDocs from './api-docs';
 import clusterWorkflowTemplates from './cluster-workflow-templates';
@@ -23,8 +23,8 @@ import sensors from './sensors';
 import {uiUrl} from './shared/base';
 import {ChatButton} from './shared/components/chat-button';
 import ErrorBoundary from './shared/components/error-boundary';
-import {services} from './shared/services';
 import * as nsUtils from './shared/namespaces';
+import {services} from './shared/services';
 import userinfo from './userinfo';
 import {Widgets} from './widgets/widgets';
 import workflowEventBindings from './workflow-event-bindings';

ui/src/app/app.tsx

@@ -1,8 +1,8 @@
-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 {createBrowserHistory} from 'history';
+import * as React from 'react';
 
 import 'argo-ui/src/styles/main.scss';
 

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

@@ -10,16 +10,16 @@ import {ClusterWorkflowTemplate, Workflow} from '../../models';
 import {uiUrl} from '../shared/base';
 import {ErrorNotice} from '../shared/components/error-notice';
 import {Loading} from '../shared/components/loading';
-import {useCollectEvent} from '../shared/use-collect-event';
 import {ZeroState} from '../shared/components/zero-state';
 import {Context} from '../shared/context';
 import {historyUrl} from '../shared/history';
+import * as nsUtils from '../shared/namespaces';
 import {services} from '../shared/services';
+import {useCollectEvent} from '../shared/use-collect-event';
 import {useEditableObject} from '../shared/use-editable-object';
 import {useQueryParams} from '../shared/use-query-params';
-import * as nsUtils from '../shared/namespaces';
-import {WorkflowDetailsList} from '../workflows/components/workflow-details-list/workflow-details-list';
 import {SubmitWorkflowPanel} from '../workflows/components/submit-workflow-panel';
+import {WorkflowDetailsList} from '../workflows/components/workflow-details-list/workflow-details-list';
 import {ClusterWorkflowTemplateEditor} from './cluster-workflow-template-editor';
 
 import '../workflows/components/workflow-details/workflow-details.scss';

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/src/components/tabs/tabs';
+import * as React from 'react';
 
 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

@@ -11,16 +11,16 @@ import {ExampleManifests} from '../shared/components/example-manifests';
 import {InfoIcon} from '../shared/components/fa-icons';
 import {Loading} from '../shared/components/loading';
 import {Timestamp, TimestampSwitch} from '../shared/components/timestamp';
-import {useCollectEvent} from '../shared/use-collect-event';
 import {ZeroState} from '../shared/components/zero-state';
 import {Context} from '../shared/context';
-import {useQueryParams} from '../shared/use-query-params';
 import {Footnote} from '../shared/footnote';
 import {services} from '../shared/services';
+import {useCollectEvent} from '../shared/use-collect-event';
+import {useQueryParams} from '../shared/use-query-params';
+import useTimestamp, {TIMESTAMP_KEYS} from '../shared/use-timestamp';
 import {ClusterWorkflowTemplateCreator} from './cluster-workflow-template-creator';
 
 import './cluster-workflow-template-list.scss';
-import useTimestamp, {TIMESTAMP_KEYS} from '../shared/use-timestamp';
 
 export function ClusterWorkflowTemplateList({history, location}: RouteComponentProps<any>) {
     const {navigation} = useContext(Context);

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

@@ -7,8 +7,8 @@ import {ErrorNotice} from '../shared/components/error-notice';
 import {ExampleManifests} from '../shared/components/example-manifests';
 import {UploadButton} from '../shared/components/upload-button';
 import {exampleCronWorkflow} from '../shared/examples';
-import {services} from '../shared/services';
 import * as nsUtils from '../shared/namespaces';
+import {services} from '../shared/services';
 import {CronWorkflowEditor} from './cron-workflow-editor';
 
 export function CronWorkflowCreator({onCreate, namespace}: {namespace: string; onCreate: (cronWorkflow: CronWorkflow) => void}) {

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

@@ -11,13 +11,13 @@ import {uiUrl} from '../shared/base';
 import {ErrorNotice} from '../shared/components/error-notice';
 import {openLinkWithKey} from '../shared/components/links';
 import {Loading} from '../shared/components/loading';
-import {useCollectEvent} from '../shared/use-collect-event';
 import {ZeroState} from '../shared/components/zero-state';
 import {Context} from '../shared/context';
 import {historyUrl} from '../shared/history';
 import {services} from '../shared/services';
-import {useQueryParams} from '../shared/use-query-params';
+import {useCollectEvent} from '../shared/use-collect-event';
 import {useEditableObject} from '../shared/use-editable-object';
+import {useQueryParams} from '../shared/use-query-params';
 import {WidgetGallery} from '../widgets/widget-gallery';
 import {WorkflowDetailsList} from '../workflows/components/workflow-details-list/workflow-details-list';
 import {CronWorkflowEditor} from './cron-workflow-editor';

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

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

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

@@ -6,28 +6,28 @@ import {useContext, useEffect, useState} from 'react';
 import {Link, RouteComponentProps} from 'react-router-dom';
 
 import {CronWorkflow, CronWorkflowSpec} from '../../models';
-import {uiUrl} from '../shared/base';
 import {ANNOTATION_DESCRIPTION, ANNOTATION_TITLE} from '../shared/annotations';
+import {uiUrl} from '../shared/base';
 import {ErrorNotice} from '../shared/components/error-notice';
 import {ExampleManifests} from '../shared/components/example-manifests';
 import {InfoIcon} from '../shared/components/fa-icons';
 import {Loading} from '../shared/components/loading';
 import {Timestamp, TimestampSwitch} from '../shared/components/timestamp';
-import {useCollectEvent} from '../shared/use-collect-event';
 import {ZeroState} from '../shared/components/zero-state';
 import {Context} from '../shared/context';
 import {getNextScheduledTime} from '../shared/cron';
 import {Footnote} from '../shared/footnote';
 import {historyUrl} from '../shared/history';
+import * as nsUtils from '../shared/namespaces';
 import {services} from '../shared/services';
+import {useCollectEvent} from '../shared/use-collect-event';
 import {useQueryParams} from '../shared/use-query-params';
-import * as nsUtils from '../shared/namespaces';
+import useTimestamp, {TIMESTAMP_KEYS} from '../shared/use-timestamp';
 import {CronWorkflowCreator} from './cron-workflow-creator';
 import {CronWorkflowFilters} from './cron-workflow-filters';
 import {PrettySchedule} from './pretty-schedule';
 
 import './cron-workflow-list.scss';
-import useTimestamp, {TIMESTAMP_KEYS} from '../shared/use-timestamp';
 
 const learnMore = <a href='https://argo-workflows.readthedocs.io/en/latest/cron-workflows/'>Learn more</a>;
 

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

@@ -4,9 +4,9 @@ import * as React from 'react';
 import {CronWorkflowSpec, CronWorkflowStatus} from '../../models';
 import {Timestamp} from '../shared/components/timestamp';
 import {ConditionsPanel} from '../shared/conditions-panel';
+import {TIMESTAMP_KEYS} from '../shared/use-timestamp';
 import {WorkflowLink} from '../workflows/components/workflow-link';
 import {PrettySchedule} from './pretty-schedule';
-import {TIMESTAMP_KEYS} from '../shared/use-timestamp';
 
 export function CronWorkflowStatusViewer({spec, status}: {spec: CronWorkflowSpec; status: CronWorkflowStatus}) {
     if (status === null) {

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

@@ -19,16 +19,16 @@ import {Node} from '../shared/components/graph/types';
 import {Links} from '../shared/components/links';
 import {NamespaceFilter} from '../shared/components/namespace-filter';
 import {ResourceEditor} from '../shared/components/resource-editor/resource-editor';
-import {useCollectEvent} from '../shared/use-collect-event';
 import {ZeroState} from '../shared/components/zero-state';
 import {Context} from '../shared/context';
 import {Footnote} from '../shared/footnote';
 import {historyUrl} from '../shared/history';
 import {ListWatch} from '../shared/list-watch';
+import * as nsUtils from '../shared/namespaces';
 import {RetryObservable} from '../shared/retry-observable';
 import {services} from '../shared/services';
+import {useCollectEvent} from '../shared/use-collect-event';
 import {useQueryParams} from '../shared/use-query-params';
-import * as nsUtils from '../shared/namespaces';
 import {EventsPanel} from '../workflows/components/events-panel';
 import {FullHeightLogsViewer} from '../workflows/components/workflow-logs-viewer/full-height-logs-viewer';
 import {buildGraph} from './build-graph';

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

@@ -6,8 +6,8 @@ import {Button} from '../shared/components/button';
 import {ErrorNotice} from '../shared/components/error-notice';
 import {UploadButton} from '../shared/components/upload-button';
 import {exampleEventSource} from '../shared/examples';
-import {services} from '../shared/services';
 import * as nsUtils from '../shared/namespaces';
+import {services} from '../shared/services';
 import {EventSourceEditor} from './event-source-editor';
 
 export function EventSourceCreator({onCreate, namespace}: {namespace: string; onCreate: (eventSource: EventSource) => void}) {

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

@@ -11,12 +11,12 @@ import {ID} from '../event-flow/id';
 import {uiUrl} from '../shared/base';
 import {ErrorNotice} from '../shared/components/error-notice';
 import {Loading} from '../shared/components/loading';
-import {useCollectEvent} from '../shared/use-collect-event';
 import {Context} from '../shared/context';
 import {historyUrl} from '../shared/history';
 import {services} from '../shared/services';
-import {useQueryParams} from '../shared/use-query-params';
+import {useCollectEvent} from '../shared/use-collect-event';
 import {useEditableObject} from '../shared/use-editable-object';
+import {useQueryParams} from '../shared/use-query-params';
 import {EventsPanel} from '../workflows/components/events-panel';
 import {EventSourceEditor} from './event-source-editor';
 import {EventSourceLogsViewer} from './event-source-log-viewer';

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

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

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

@@ -15,18 +15,18 @@ import {Node} from '../shared/components/graph/types';
 import {Loading} from '../shared/components/loading';
 import {NamespaceFilter} from '../shared/components/namespace-filter';
 import {Timestamp, TimestampSwitch} from '../shared/components/timestamp';
-import {useCollectEvent} from '../shared/use-collect-event';
 import {ZeroState} from '../shared/components/zero-state';
 import {Context} from '../shared/context';
 import {Footnote} from '../shared/footnote';
 import {historyUrl} from '../shared/history';
+import * as nsUtils from '../shared/namespaces';
 import {services} from '../shared/services';
+import {useCollectEvent} from '../shared/use-collect-event';
 import {useQueryParams} from '../shared/use-query-params';
-import * as nsUtils from '../shared/namespaces';
+import useTimestamp, {TIMESTAMP_KEYS} from '../shared/use-timestamp';
 import {EventsPanel} from '../workflows/components/events-panel';
 import {EventSourceCreator} from './event-source-creator';
 import {EventSourceLogsViewer} from './event-source-log-viewer';
-import useTimestamp, {TIMESTAMP_KEYS} from '../shared/use-timestamp';
 
 const learnMore = <a href='https://argoproj.github.io/argo-events/concepts/event_source/'>Learn more</a>;
 

ui/src/app/index.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import {App} from './app';
 import {createRoot} from 'react-dom/client';
 
+import {App} from './app';
+
 const container = document.getElementById('app');
 const root = createRoot(container!);
 root.render(<App />);

ui/src/app/modals/feedback-modal.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {useState} from 'react';
+
 import {BigButton} from '../shared/components/big-button';
 import {Modal} from '../shared/components/modal/modal';
 import {SurveyButton} from '../shared/components/survey-button';

ui/src/app/plugins/plugin-list.tsx

@@ -4,10 +4,10 @@ import {useEffect, useState} from 'react';
 import {RouteComponentProps} from 'react-router-dom';
 
 import {uiUrl} from '../shared/base';
-import {useCollectEvent} from '../shared/use-collect-event';
 import {ZeroState} from '../shared/components/zero-state';
 import {historyUrl} from '../shared/history';
 import * as nsUtils from '../shared/namespaces';
+import {useCollectEvent} from '../shared/use-collect-event';
 
 export function PluginList({match, history}: RouteComponentProps<any>) {
     // state for URL and query parameters

ui/src/app/reports/reports.tsx

@@ -1,6 +1,8 @@
 import {Page} from 'argo-ui/src/components/page/page';
 import {ChartOptions} from 'chart.js';
+
 import 'chartjs-plugin-annotation';
+
 import * as React from 'react';
 import {useContext, useEffect, useState} from 'react';
 import {Bar, ChartData} from 'react-chartjs-2';
@@ -9,13 +11,13 @@ 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';
-import {useCollectEvent} from '../shared/use-collect-event';
 import {ZeroState} from '../shared/components/zero-state';
 import {Context} from '../shared/context';
 import {Footnote} from '../shared/footnote';
 import {historyUrl} from '../shared/history';
-import {services} from '../shared/services';
 import * as nsUtils from '../shared/namespaces';
+import {services} from '../shared/services';
+import {useCollectEvent} from '../shared/use-collect-event';
 import {ReportFilters} from './reports-filters';
 import {workflowsToChartData} from './workflows-to-chart-data';
 

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

@@ -6,8 +6,8 @@ import {Button} from '../shared/components/button';
 import {ErrorNotice} from '../shared/components/error-notice';
 import {UploadButton} from '../shared/components/upload-button';
 import {exampleSensor} from '../shared/examples';
-import {services} from '../shared/services';
 import * as nsUtils from '../shared/namespaces';
+import {services} from '../shared/services';
 import {SensorEditor} from './sensor-editor';
 
 export function SensorCreator({namespace, onCreate}: {namespace: string; onCreate: (sensor: Sensor) => void}) {

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

@@ -10,12 +10,12 @@ import {uiUrl} from '../shared/base';
 import {ErrorNotice} from '../shared/components/error-notice';
 import {Node} from '../shared/components/graph/types';
 import {Loading} from '../shared/components/loading';
-import {useCollectEvent} from '../shared/use-collect-event';
 import {Context} from '../shared/context';
 import {historyUrl} from '../shared/history';
 import {services} from '../shared/services';
-import {useQueryParams} from '../shared/use-query-params';
+import {useCollectEvent} from '../shared/use-collect-event';
 import {useEditableObject} from '../shared/use-editable-object';
+import {useQueryParams} from '../shared/use-query-params';
 import {SensorEditor} from './sensor-editor';
 import {SensorSidePanel} from './sensor-side-panel';
 

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

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

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

@@ -13,15 +13,15 @@ import {Node} from '../shared/components/graph/types';
 import {Loading} from '../shared/components/loading';
 import {NamespaceFilter} from '../shared/components/namespace-filter';
 import {Timestamp, TimestampSwitch} from '../shared/components/timestamp';
-import {useCollectEvent} from '../shared/use-collect-event';
 import {ZeroState} from '../shared/components/zero-state';
 import {Context} from '../shared/context';
 import {Footnote} from '../shared/footnote';
 import {historyUrl} from '../shared/history';
+import * as nsUtils from '../shared/namespaces';
 import {services} from '../shared/services';
+import {useCollectEvent} from '../shared/use-collect-event';
 import {useQueryParams} from '../shared/use-query-params';
 import useTimestamp, {TIMESTAMP_KEYS} from '../shared/use-timestamp';
-import * as nsUtils from '../shared/namespaces';
 import {SensorCreator} from './sensor-creator';
 import {SensorSidePanel} from './sensor-side-panel';
 import {statusIconClasses} from './utils';

ui/src/app/sensors/sensors-container.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {Route, RouteComponentProps, Switch} from 'react-router';
+
 import {SensorDetails} from './sensor-details';
 import {SensorList} from './sensor-list';
 

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {MouseEventHandler, ReactNode} from 'react';
+
 import {Icon} from './icon';
 
 export const Button = ({

ui/src/app/shared/components/chat-button.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {useEffect, useState} from 'react';
+
 import {Link} from '../../../models';
 import {services} from '../services';
 

ui/src/app/shared/components/cost-optimisation-nudge.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {ReactNode} from 'react';
+
 import {Nudge} from './nudge';
 
 export const CostOptimisationNudge = (props: {name: string; children: ReactNode}) => (