feat: Progress indicators in Argo CD UI (#4227) (#4411)

Signed-off-by: Keith Chong <[email protected]>
argoproj · Sep 24, 2020 · b7c2002 · b7c2002
1 parent c1ee89b
commit b7c2002
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 9 deletions.
diff --git a/ui/src/app/applications/components/application-summary/application-summary.tsx b/ui/src/app/applications/components/application-summary/application-summary.tsx
@@ -2,6 +2,7 @@ import {AutocompleteField, DropDownMenu, FormField, FormSelect, HelpIcon, PopupA
 import * as React from 'react';
 import {FormApi, Text} from 'react-form';
 import {Cluster, DataLoader, EditablePanel, EditablePanelItem, Expandable, MapInputField, Repo, Revision, RevisionHelpIcon} from '../../../shared/components';
+import {Spinner} from '../../../shared/components';
 import {Consumer, Context} from '../../../shared/context';
 import * as models from '../../../shared/models';
 import {services} from '../../../shared/services';
@@ -30,6 +31,7 @@ export const ApplicationSummary = (props: {app: models.Application; updateApp: (
     const isHelm = app.spec.source.hasOwnProperty('chart');
     const initialState = app.spec.destination.server === undefined ? 'NAME' : 'URL';
     const [destFormat, setDestFormat] = React.useState(initialState);
+    const [changeSync, setChangeSync] = React.useState(false);
     const attributes = [
         {
             title: 'PROJECT',
@@ -278,21 +280,31 @@ export const ApplicationSummary = (props: {app: models.Application; updateApp: (
     async function setAutoSync(ctx: {popup: PopupApi}, confirmationTitle: string, confirmationText: string, prune: boolean, selfHeal: boolean) {
         const confirmed = await ctx.popup.confirm(confirmationTitle, confirmationText);
         if (confirmed) {
-            const updatedApp = JSON.parse(JSON.stringify(props.app)) as models.Application;
-            if (!updatedApp.spec.syncPolicy) {
-                updatedApp.spec.syncPolicy = {};
+            try {
+                setChangeSync(true);
+                const updatedApp = JSON.parse(JSON.stringify(props.app)) as models.Application;
+                if (!updatedApp.spec.syncPolicy) {
+                    updatedApp.spec.syncPolicy = {};
+                }
+                updatedApp.spec.syncPolicy.automated = {prune, selfHeal};
+                await props.updateApp(updatedApp);
+            } finally {
+                setChangeSync(false);
             }
-            updatedApp.spec.syncPolicy.automated = {prune, selfHeal};
-            props.updateApp(updatedApp);
         }
     }
 
     async function unsetAutoSync(ctx: {popup: PopupApi}) {
         const confirmed = await ctx.popup.confirm('Disable Auto-Sync?', 'Are you sure you want to disable automated application synchronization');
         if (confirmed) {
-            const updatedApp = JSON.parse(JSON.stringify(props.app)) as models.Application;
-            updatedApp.spec.syncPolicy.automated = null;
-            props.updateApp(updatedApp);
+            try {
+                setChangeSync(true);
+                const updatedApp = JSON.parse(JSON.stringify(props.app)) as models.Application;
+                updatedApp.spec.syncPolicy.automated = null;
+                await props.updateApp(updatedApp);
+            } finally {
+                setChangeSync(false);
+            }
         }
     }
 
@@ -396,6 +408,7 @@ export const ApplicationSummary = (props: {app: models.Application; updateApp: (
                                 <div className='columns small-9'>
                                     {(app.spec.syncPolicy && app.spec.syncPolicy.automated && (
                                         <button className='argo-button argo-button--base' onClick={() => unsetAutoSync(ctx)}>
+                                            <Spinner show={changeSync} style={{marginRight: '5px'}} />
                                             Disable Auto-Sync
                                         </button>
                                     )) || (
@@ -404,6 +417,7 @@ export const ApplicationSummary = (props: {app: models.Application; updateApp: (
                                             onClick={() =>
                                                 setAutoSync(ctx, 'Enable Auto-Sync?', 'Are you sure you want to enable automated application synchronization?', false, false)
                                             }>
+                                            <Spinner show={changeSync} style={{marginRight: '5px'}} />
                                             Enable Auto-Sync
                                         </button>
                                     )}

diff --git a/ui/src/app/settings/components/repos-list/repos-list.tsx b/ui/src/app/settings/components/repos-list/repos-list.tsx
@@ -5,6 +5,7 @@ import {Form, FormApi, Text, TextArea} from 'react-form';
 import {RouteComponentProps} from 'react-router';
 
 import {CheckboxField, ConnectionStateIcon, DataLoader, EmptyState, ErrorNotification, Page, Repo} from '../../../shared/components';
+import {Spinner} from '../../../shared/components';
 import {AppContext} from '../../../shared/context';
 import * as models from '../../../shared/models';
 import {services} from '../../../shared/services';
@@ -45,7 +46,7 @@ interface NewHTTPSRepoCredsParams {
     tlsClientCertKey: string;
 }
 
-export class ReposList extends React.Component<RouteComponentProps<any>> {
+export class ReposList extends React.Component<RouteComponentProps<any>, {connecting: boolean}> {
     public static contextTypes = {
         router: PropTypes.object,
         apis: PropTypes.object,
@@ -58,6 +59,11 @@ export class ReposList extends React.Component<RouteComponentProps<any>> {
     private repoLoader: DataLoader;
     private credsLoader: DataLoader;
 
+    constructor(props: RouteComponentProps<any>) {
+        super(props);
+        this.state = {connecting: false};
+    }
+
     public render() {
         return (
             <Page
@@ -202,6 +208,7 @@ export class ReposList extends React.Component<RouteComponentProps<any>> {
                                     this.credsTemplate = false;
                                     this.formApiHTTPS.submitForm(null);
                                 }}>
+                                <Spinner show={this.state.connecting} style={{marginRight: '5px'}} />
                                 Connect
                             </button>{' '}
                             <button
@@ -280,6 +287,7 @@ export class ReposList extends React.Component<RouteComponentProps<any>> {
                                     this.credsTemplate = false;
                                     this.formApiSSH.submitForm(null);
                                 }}>
+                                <Spinner show={this.state.connecting} style={{marginRight: '5px'}} />
                                 Connect
                             </button>{' '}
                             <button
@@ -374,6 +382,7 @@ export class ReposList extends React.Component<RouteComponentProps<any>> {
         if (this.credsTemplate) {
             this.createSSHCreds({url: params.url, sshPrivateKey: params.sshPrivateKey});
         } else {
+            this.setState({connecting: true});
             try {
                 await services.repos.createSSH(params);
                 this.repoLoader.reload();
@@ -383,6 +392,8 @@ export class ReposList extends React.Component<RouteComponentProps<any>> {
                     content: <ErrorNotification title='Unable to connect SSH repository' e={e} />,
                     type: NotificationType.Error
                 });
+            } finally {
+                this.setState({connecting: false});
             }
         }
     }
@@ -398,6 +409,7 @@ export class ReposList extends React.Component<RouteComponentProps<any>> {
                 tlsClientCertKey: params.tlsClientCertKey
             });
         } else {
+            this.setState({connecting: true});
             try {
                 await services.repos.createHTTPS(params);
                 this.repoLoader.reload();
@@ -407,6 +419,8 @@ export class ReposList extends React.Component<RouteComponentProps<any>> {
                     content: <ErrorNotification title='Unable to connect HTTPS repository' e={e} />,
                     type: NotificationType.Error
                 });
+            } finally {
+                this.setState({connecting: false});
             }
         }
     }

diff --git a/ui/src/app/shared/components/editable-panel/editable-panel.tsx b/ui/src/app/shared/components/editable-panel/editable-panel.tsx
@@ -4,6 +4,7 @@ import * as React from 'react';
 import {Form, FormApi} from 'react-form';
 
 import {Consumer} from '../../context';
+import {Spinner} from '../spinner';
 
 export interface EditablePanelItem {
     title: string;
@@ -71,6 +72,7 @@ export class EditablePanel<T = {}> extends React.Component<EditablePanelProps<T>
                                                 disabled={this.state.saving}
                                                 onClick={() => !this.state.saving && this.formApi.submitForm(null)}
                                                 className='argo-button argo-button--base'>
+                                                <Spinner show={this.state.saving} style={{marginRight: '5px'}} />
                                                 Save
                                             </button>{' '}
                                             <button