Merge pull request #5 from merenbach/support-force-delete

Support cascading delete

Author: merenbach

src/app/applications/components/application-details/application-details.tsx

@@ -130,7 +130,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ na
                     }, {
                         className: 'icon fa fa-times-circle',
                         title: 'Delete',
-                        action: () => this.deleteApplication(true),
+                        action: () => this.deleteApplication(),
                     }],
                 } }}>
                 {this.state.application && <ApplicationStatusPanel application={this.state.application}
@@ -322,19 +322,10 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ na
         }
     }
 
-    private async deleteApplication(force: boolean) {
-        const confirmed = await this.appContext.apis.popup.confirm('Delete application', `Are your sure you want to delete application '${this.props.match.params.name}'?`);
-        if (confirmed) {
-            try {
-                await services.applications.delete(this.props.match.params.name, force);
-                this.appContext.apis.navigation.goto('/applications');
-            } catch (e) {
-                this.appContext.apis.notifications.show({
-                    content: <ErrorNotification title='Unable to delete application' e={e}/>,
-                    type: NotificationType.Error,
-                });
-            }
-        }
+    private async deleteApplication() {
+        AppUtils.deleteApplication(this.props.match.params.name, this.appContext, () => {
+            this.appContext.apis.navigation.goto('/applications');
+        });
     }
 
     private getResourceLabels(resource: appModels.ResourceNode | appModels.ResourceState): string[] {

src/app/applications/components/applications-list/applications-list.tsx

@@ -10,7 +10,7 @@ import { AppContext } from '../../../shared/context';
 import * as models from '../../../shared/models';
 import { services } from '../../../shared/services';
 import { ApplicationCreationWizardContainer, NewAppParams, WizardStepState } from '../application-creation-wizard/application-creation-wizard';
-import { ComparisonStatusIcon, HealthStatusIcon } from '../utils';
+import * as AppUtils from '../utils';
 
 require('./applications-list.scss');
 
@@ -132,13 +132,13 @@ export class ApplicationsList extends React.Component<Props, State> {
                                                 <div className='row'>
                                                     <div className='columns small-3'>Status:</div>
                                                     <div className='columns small-9'>
-                                                        <ComparisonStatusIcon status={app.status.comparisonResult.status}/> {app.status.comparisonResult.status}
+                                                        <AppUtils.ComparisonStatusIcon status={app.status.comparisonResult.status}/> {app.status.comparisonResult.status}
                                                     </div>
                                                 </div>
                                                 <div className='row'>
                                                     <div className='columns small-3'>Health:</div>
                                                     <div className='columns small-9'>
-                                                        <HealthStatusIcon state={app.status.health}/> {app.status.health.status}
+                                                        <AppUtils.HealthStatusIcon state={app.status.health}/> {app.status.health.status}
                                                     </div>
                                                 </div>
                                                 <div className='row'>
@@ -167,7 +167,7 @@ export class ApplicationsList extends React.Component<Props, State> {
                                                             <button className='argo-button argo-button--base-o'>Actions  <i className='fa fa-caret-down'/></button>
                                                         } items={[
                                                             { title: 'Sync', action: () => this.syncApplication(app.metadata.name, 'HEAD') },
-                                                            { title: 'Delete', action: () => this.deleteApplication(app.metadata.name, false) },
+                                                            { title: 'Delete', action: () => this.deleteApplication(app.metadata.name) },
                                                         ]} />
                                                     </div>
                                                 </div>
@@ -263,18 +263,9 @@ export class ApplicationsList extends React.Component<Props, State> {
         }
     }
 
-    private async deleteApplication(appName: string, force: boolean) {
-        const confirmed = await this.appContext.apis.popup.confirm('Delete application', `Are your sure you want to delete application '${appName}'?`);
-        if (confirmed) {
-            try {
-                await services.applications.delete(appName, force);
-                this.appContext.router.history.push('/applications');
-            } catch (e) {
-                this.appContext.apis.notifications.show({
-                    content: <ErrorNotification title='Unable to delete application' e={e}/>,
-                    type: NotificationType.Error,
-                });
-            }
-        }
+    private async deleteApplication(appName: string) {
+        AppUtils.deleteApplication(appName, this.appContext, () => {
+            this.appContext.router.history.push('/applications');
+        });
     }
 }

src/app/applications/components/utils.tsx

@@ -1,7 +1,43 @@
 import * as React from 'react';
 
-import { ARGO_FAILED_COLOR, ARGO_RUNNING_COLOR, ARGO_SUCCESS_COLOR } from '../../shared/components';
+import { Checkbox, NotificationType } from 'argo-ui';
+import { ARGO_FAILED_COLOR, ARGO_RUNNING_COLOR, ARGO_SUCCESS_COLOR, ErrorNotification } from '../../shared/components';
+import { AppContext } from '../../shared/context';
 import * as appModels from '../../shared/models';
+import { services } from '../../shared/services';
+
+export async function deleteApplication(appName: string, context: AppContext, success: () => void) {
+    let cascade = false;
+    const confirmationForm = class extends React.Component<{}, { cascade: boolean } > {
+        constructor(props: any) {
+            super(props);
+            this.state = {cascade: false};
+        }
+        public render() {
+            return (
+                <div>
+                    <p>Are you sure you want to delete the application "{appName}"?</p>
+                    <p><Checkbox checked={this.state.cascade} onChange={(val) => this.setState({ cascade: val })} /> Cascade</p>
+                </div>
+            )
+        }
+        componentWillUnmount() {
+            cascade = this.state.cascade;
+        }
+    };
+    const confirmed = await context.apis.popup.confirm('Delete application', confirmationForm);
+    if (confirmed) {
+        try {
+            await services.applications.delete(appName, cascade);
+            success();
+        } catch (e) {
+            this.appContext.apis.notifications.show({
+                content: <ErrorNotification title='Unable to delete application' e={e}/>,
+                type: NotificationType.Error,
+            });
+        }
+    }
+}
 
 export const ComparisonStatusIcon = ({status}: { status: appModels.ComparisonStatus }) => {
     let className = '';

src/app/shared/services/applications-service.ts

@@ -21,8 +21,8 @@ export class ApplicationsService {
         }).then((res) => this.parseAppFields(res.body));
     }
 
-    public delete(name: string, force: boolean): Promise<boolean> {
-        return requests.delete(`/applications/${name}?force=${force}`).send({}).then(() => true);
+    public delete(name: string, cascade: boolean): Promise<boolean> {
+        return requests.delete(`/applications/${name}`).query({cascade}).send({}).then(() => true);
     }
 
     public watch(query?: {name: string}): Observable<models.ApplicationWatchEvent> {