refactor(ui): flatten directory structures (argoproj#12539)

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

ui/src/app/apidocs/components/apiDocs.tsx → ui/src/app/api-docs/api-docs.tsx

@@ -1,10 +1,11 @@
 import {Page} from 'argo-ui';
 import * as React from 'react';
-import {uiUrl} from '../../shared/base';
-import {Loading} from '../../shared/components/loading';
-import {useCollectEvent} from '../../shared/components/use-collect-event';
 
-export const ApiDocs = () => {
+import {uiUrl} from '../shared/base';
+import {Loading} from '../shared/components/loading';
+import {useCollectEvent} from '../shared/use-collect-event';
+
+export function ApiDocs() {
     useCollectEvent('openedApiDocs');
     return (
         <Page title='Swagger'>
@@ -13,7 +14,7 @@ export const ApiDocs = () => {
             </div>
         </Page>
     );
-};
+}
 
 // lazy load SwaggerUI as it is infrequently used and imports very large components (which can be split into a separate bundle)
 const LazySwaggerUI = React.lazy(() => {

ui/src/app/api-docs/index.ts

@@ -0,0 +1,5 @@
+import {ApiDocs} from './api-docs';
+
+export default {
+    component: ApiDocs
+};

ui/src/app/app-router.tsx

@@ -5,7 +5,7 @@ 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 './apidocs';
+import apiDocs from './api-docs';
 import clusterWorkflowTemplates from './cluster-workflow-templates';
 import cronWorkflows from './cron-workflows';
 import eventflow from './event-flow';
@@ -172,7 +172,7 @@ export function AppRouter({popupManager, history, notificationsManager}: {popupM
                                 <Route path={reportsUrl} component={reports.component} />
                                 <Route path={pluginsUrl} component={plugins.component} />
                                 <Route exact={true} strict={true} path={helpUrl} component={help.component} />
-                                <Route exact={true} strict={true} path={apiDocsUrl} component={apidocs.component} />
+                                <Route exact={true} strict={true} path={apiDocsUrl} component={apiDocs.component} />
                                 <Route exact={true} strict={true} path={userInfoUrl} component={userinfo.component} />
                                 <Route exact={true} strict={true} path={loginUrl} component={login.component} />
                                 {Utils.managedNamespace && <Redirect to={workflowsUrl} />}

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import {Route, RouteComponentProps, Switch} from 'react-router';
-import {ClusterWorkflowTemplateDetails} from './cluster-workflow-template-details/cluster-workflow-template-details';
-import {ClusterWorkflowTemplateList} from './cluster-workflow-template-list/cluster-workflow-template-list';
+
+import {ClusterWorkflowTemplateDetails} from './cluster-workflow-template-details';
+import {ClusterWorkflowTemplateList} from './cluster-workflow-template-list';
 
 export const ClusterWorkflowTemplateContainer = (props: RouteComponentProps<any>) => (
     <Switch>

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

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import {useState} from 'react';
 
-import {ClusterWorkflowTemplate} from '../../../models';
-import {Button} from '../../shared/components/button';
-import {ErrorNotice} from '../../shared/components/error-notice';
-import {ExampleManifests} from '../../shared/components/example-manifests';
-import {UploadButton} from '../../shared/components/upload-button';
-import {exampleClusterWorkflowTemplate} from '../../shared/examples';
-import {services} from '../../shared/services';
+import {ClusterWorkflowTemplate} from '../../models';
+import {Button} from '../shared/components/button';
+import {ErrorNotice} from '../shared/components/error-notice';
+import {ExampleManifests} from '../shared/components/example-manifests';
+import {UploadButton} from '../shared/components/upload-button';
+import {exampleClusterWorkflowTemplate} from '../shared/examples';
+import {services} from '../shared/services';
 import {ClusterWorkflowTemplateEditor} from './cluster-workflow-template-editor';
 
 export function ClusterWorkflowTemplateCreator({onCreate}: {onCreate: (workflow: ClusterWorkflowTemplate) => void}) {

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

@@ -3,20 +3,21 @@ import {SlidingPanel} from 'argo-ui/src/index';
 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';
-import {Loading} from '../../../shared/components/loading';
-import {useCollectEvent} from '../../../shared/components/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 {Utils} from '../../../shared/utils';
-import {SubmitWorkflowPanel} from '../../../workflows/components/submit-workflow-panel';
-import {ClusterWorkflowTemplateEditor} from '../cluster-workflow-template-editor';
 
-import '../../../workflows/components/workflow-details/workflow-details.scss';
+import {ClusterWorkflowTemplate} 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 {Context} from '../shared/context';
+import {historyUrl} from '../shared/history';
+import {services} from '../shared/services';
+import {useQueryParams} from '../shared/use-query-params';
+import {Utils} from '../shared/utils';
+import {SubmitWorkflowPanel} from '../workflows/components/submit-workflow-panel';
+import {ClusterWorkflowTemplateEditor} from './cluster-workflow-template-editor';
+
+import '../workflows/components/workflow-details/workflow-details.scss';
 
 export function ClusterWorkflowTemplateDetails({history, location, match}: RouteComponentProps<any>) {
     // boiler-plate

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

@@ -1,13 +1,13 @@
 import * as React from 'react';
-
 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';
-import {WorkflowParametersEditor} from '../../shared/components/editors/workflow-parameters-editor';
-import {ObjectEditor} from '../../shared/components/object-editor/object-editor';
 
-export const ClusterWorkflowTemplateEditor = ({
+import {WorkflowTemplate} from '../../models';
+import {LabelsAndAnnotationsEditor} from '../shared/components/editors/labels-and-annotations-editor';
+import {MetadataEditor} from '../shared/components/editors/metadata-editor';
+import {WorkflowParametersEditor} from '../shared/components/editors/workflow-parameters-editor';
+import {ObjectEditor} from '../shared/components/object-editor';
+
+export function ClusterWorkflowTemplateEditor({
     onChange,
     template,
     onError,
@@ -19,7 +19,7 @@ export const ClusterWorkflowTemplateEditor = ({
     onError: (error: Error) => void;
     onTabSelected?: (tab: string) => void;
     selectedTabKey?: string;
-}) => {
+}) {
     return (
         <Tabs
             key='tabs'
@@ -55,4 +55,4 @@ export const ClusterWorkflowTemplateEditor = ({
             ]}
         />
     );
-};
+}

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import {uiUrl} from '../../shared/base';
-import {LinkButton} from '../../shared/components/link-button';
+
+import {uiUrl} from '../shared/base';
+import {LinkButton} from '../shared/components/link-button';
 
 export const ClusterWorkflowTemplateLink = (props: {name: string}) => (
     <LinkButton to={uiUrl('cluster-workflow-templates/' + props.name)}>

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

@@ -2,21 +2,21 @@ import {Page, SlidingPanel} from 'argo-ui';
 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';
-import {ExampleManifests} from '../../../shared/components/example-manifests';
-import {InfoIcon} from '../../../shared/components/fa-icons';
-import {Loading} from '../../../shared/components/loading';
-import {Timestamp} from '../../../shared/components/timestamp';
-import {useCollectEvent} from '../../../shared/components/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 {ClusterWorkflowTemplateCreator} from '../cluster-workflow-template-creator';
+import * as models from '../../models';
+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} 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 {ClusterWorkflowTemplateCreator} from './cluster-workflow-template-creator';
 
 import './cluster-workflow-template-list.scss';
 

ui/src/app/cluster-workflow-templates/index.ts

@@ -1,4 +1,4 @@
-import {ClusterWorkflowTemplateContainer} from './components/cluster-workflow-template-container';
+import {ClusterWorkflowTemplateContainer} from './cluster-workflow-template-container';
 
 export default {
     component: ClusterWorkflowTemplateContainer

ui/src/app/cron-workflows/components/cron-workflow-container.tsx → ui/src/app/cron-workflows/cron-workflow-container.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import {Route, RouteComponentProps, Switch} from 'react-router';
-import {CronWorkflowDetails} from './cron-workflow-details/cron-workflow-details';
-import {CronWorkflowList} from './cron-workflow-list/cron-workflow-list';
+
+import {CronWorkflowDetails} from './cron-workflow-details';
+import {CronWorkflowList} from './cron-workflow-list';
 
 export const CronWorkflowContainer = (props: RouteComponentProps<any>) => (
     <Switch>

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

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import {useState} from 'react';
 
-import {CronWorkflow} from '../../../models';
-import {Button} from '../../shared/components/button';
-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 {Utils} from '../../shared/utils';
+import {CronWorkflow} from '../../models';
+import {Button} from '../shared/components/button';
+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 {Utils} from '../shared/utils';
 import {CronWorkflowEditor} from './cron-workflow-editor';
 
 export function CronWorkflowCreator({onCreate, namespace}: {namespace: string; onCreate: (cronWorkflow: CronWorkflow) => void}) {

ui/src/app/cron-workflows/components/cron-workflow-details/cron-workflow-details.scss → ui/src/app/cron-workflows/cron-workflow-details.scss

@@ -1,14 +1,14 @@
-@import 'node_modules/argo-ui/src/styles/config';
-
-.workflows-cron-list .workflows-list {
-  &__status {
-    max-width: 80px;
-    display: flex;
-    align-items: center;
-
-    /* checkboxes are not visible and are unused on this page */
-    &--checkbox {
-      appearance: none;
-    }
-  }
-}
+@import 'node_modules/argo-ui/src/styles/config';
+
+.workflows-cron-list .workflows-list {
+  &__status {
+    max-width: 80px;
+    display: flex;
+    align-items: center;
+
+    /* checkboxes are not visible and are unused on this page */
+    &--checkbox {
+      appearance: none;
+    }
+  }
+}

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

@@ -2,23 +2,24 @@ import {NotificationType, Page, SlidingPanel} from 'argo-ui';
 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';
-import {ErrorNotice} from '../../../shared/components/error-notice';
-import {openLinkWithKey} from '../../../shared/components/links';
-import {Loading} from '../../../shared/components/loading';
-import {useCollectEvent} from '../../../shared/components/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 {WidgetGallery} from '../../../widgets/widget-gallery';
-import {WorkflowsRow} from '../../../workflows/components/workflows-row/workflows-row';
-import {CronWorkflowEditor} from '../cron-workflow-editor';
 
-import '../../../workflows/components/workflow-details/workflow-details.scss';
+import * as models from '../../models';
+import {CronWorkflow, Link, Workflow} from '../../models';
+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 {WidgetGallery} from '../widgets/widget-gallery';
+import {WorkflowsRow} from '../workflows/components/workflows-row/workflows-row';
+import {CronWorkflowEditor} from './cron-workflow-editor';
+
+import '../workflows/components/workflow-details/workflow-details.scss';
 import './cron-workflow-details.scss';
 
 export function CronWorkflowDetails({match, location, history}: RouteComponentProps<any>) {

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
-
 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';
-import {WorkflowParametersEditor} from '../../shared/components/editors/workflow-parameters-editor';
-import {ObjectEditor} from '../../shared/components/object-editor/object-editor';
+
+import {CronWorkflow} from '../../models';
+import {LabelsAndAnnotationsEditor} from '../shared/components/editors/labels-and-annotations-editor';
+import {MetadataEditor} from '../shared/components/editors/metadata-editor';
+import {WorkflowParametersEditor} from '../shared/components/editors/workflow-parameters-editor';
+import {ObjectEditor} from '../shared/components/object-editor';
 import {CronWorkflowSpecEditor} from './cron-workflow-spec-editior';
 import {CronWorkflowStatusViewer} from './cron-workflow-status-viewer';
 

ui/src/app/cron-workflows/components/cron-workflow-filters/cron-workflow-filters.tsx → ui/src/app/cron-workflows/cron-workflow-filters.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import {useEffect, useState} from 'react';
-import * as models from '../../../../models';
-import {CheckboxFilter} from '../../../shared/components/checkbox-filter/checkbox-filter';
-import {NamespaceFilter} from '../../../shared/components/namespace-filter';
-import {TagsInput} from '../../../shared/components/tags-input/tags-input';
+
+import * as models from '../../models';
+import {CheckboxFilter} from '../shared/components/checkbox-filter/checkbox-filter';
+import {NamespaceFilter} from '../shared/components/namespace-filter';
+import {TagsInput} from '../shared/components/tags-input/tags-input';
 
 import './cron-workflow-filters.scss';
 

ui/src/app/cron-workflows/components/cron-workflow-link.tsx → ui/src/app/cron-workflows/cron-workflow-link.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import {uiUrl} from '../../shared/base';
-import {LinkButton} from '../../shared/components/link-button';
+
+import {uiUrl} from '../shared/base';
+import {LinkButton} from '../shared/components/link-button';
 
 export const CronWorkflowLink = (props: {namespace: string; name: string}) => (
     <LinkButton to={uiUrl('cron-workflows/' + props.namespace + '/' + props.name)}>