How to use argo-ui - 10 common examples

createApp={async app => {
                                                        setAppCreatePending(true);
                                                        try {
                                                            await services.applications.create(app);
                                                            ctx.navigation.goto('.', {new: null});
                                                        } catch (e) {
                                                            ctx.notifications.show({
                                                                content: ,
                                                                type: NotificationType.Error
                                                            });
                                                        } finally {
                                                            setAppCreatePending(false);
                                                        }
                                                    }}
                                                    app={appInput}

try {
                                    await services.applications.sync(
                                        application.metadata.name,
                                        params.revision,
                                        syncFlags.Prune || false,
                                        syncFlags.DryRun || false,
                                        syncStrategy,
                                        resources,
                                        params.syncOptions
                                    );
                                    hide();
                                } catch (e) {
                                    ctx.notifications.show({
                                        content: ,
                                        type: NotificationType.Error
                                    });
                                } finally {
                                    setPending(false);
                                }
                            }}
                            getApi={setForm}>

onSubmit={async (proj: Project) => {
                                            try {
                                                await services.projects.create(proj);
                                                ctx.navigation.goto(`./${proj.metadata.name}`, {add: null});
                                            } catch (e) {
                                                ctx.notifications.show({
                                                    content: ,
                                                    type: NotificationType.Error
                                                });
                                            }
                                        }}>
                                        {api => (

submit: async (vals, _, close) => {
                                                                                            try {
                                                                                                await services.applications.deleteResource(
                                                                                                    this.props.app.metadata.name,
                                                                                                    pod,
                                                                                                    !!vals.force,
                                                                                                    false
                                                                                                );
                                                                                                close();
                                                                                            } catch (e) {
                                                                                                this.appContext.apis.notifications.show({
                                                                                                    content: ,
                                                                                                    type: NotificationType.Error
                                                                                                });
                                                                                            }
                                                                                        }
                                                                                    }

private async addTLSCertificate(params: NewTLSCertParams) {
        try {
            await services.certs.create({items: [{serverName: params.serverName, certType: 'https', certData: params.certData, certSubType: '', certInfo: ''}], metadata: null});
            this.showAddTLSCertificate = false;
            this.loader.reload();
        } catch (e) {
            this.appContext.apis.notifications.show({
                content: ,
                type: NotificationType.Error
            });
        }
    }

onSubmit={async (params, event, api) => {
                                    const expiresIn = convertExpiresInToSeconds(params.expiresIn);
                                    const confirmed = await ctx.popup.confirm('Generate new token?', 'Are you sure you want to generate new token?');
                                    if (!confirmed) {
                                        return;
                                    }
                                    try {
                                        setNewToken(await services.accounts.createToken(props.match.params.name, params.id, expiresIn));
                                        api.resetAll();
                                        if (tokensLoaderRef.current) {
                                            tokensLoaderRef.current.reload();
                                        }
                                    } catch (e) {
                                        ctx.notifications.show({
                                            content: ,
                                            type: NotificationType.Error
                                        });
                                    }
                                }}
                                validateError={params => ({

}, step: Step.SetParams });
                            } else if (selectedAppDetails.kustomize) {
                                this.updateState({ selectedAppDetails, appParams: {
                                    applicationName: '',
                                    revision: this.state.revision,
                                    repoURL: this.state.selectedRepo,
                                    environment: '',
                                    clusterURL: '',
                                    namespace: '',
                                    path: selectedAppDetails.kustomize.path,
                                    project: this.state.projects[0].metadata.name,
                                    syncPolicy: this.state.syncPolicy,
                                }, step: Step.SetParams });
                            }
                        } catch (e) {
                            this.appContext.apis.notifications.show({type: NotificationType.Error, content: });
                        } finally {
                            this.updateState({ loading: false });
                        }
                    },
                    canPrev: () => true,

onSubmit={async input => {
                                        try {
                                            this.setState({saving: true});
                                            await this.props.save(input as any);
                                            this.setState({edit: false, saving: false});
                                            this.onModeSwitch();
                                        } catch (e) {
                                            ctx.notifications.show({
                                                content: ,
                                                type: NotificationType.Error
                                            });
                                        } finally {
                                            this.setState({saving: false});
                                        }
                                    }}
                                    defaultValues={this.props.values}

const confirmed = await this.appContext.apis.popup.confirm('Rollback application', confirmationMessage);
            if (confirmed) {
                if (needDisableRollback) {
                    const update = JSON.parse(JSON.stringify(application)) as appModels.Application;
                    update.spec.syncPolicy = {automated: null};
                    await services.applications.update(update);
                }
                await services.applications.rollback(this.props.match.params.name, revisionHistory.id);
                this.appChanged.next(await services.applications.get(this.props.match.params.name));
                this.setRollbackPanelVisible(-1);
            }
        } catch (e) {
            this.appContext.apis.notifications.show({
                content: ,
                type: NotificationType.Error
            });
        }
    }

submit: async (vals, _, close) => {
                                try {
                                    await services.applications.deleteResource(application.metadata.name, resource, !!vals.force);
                                    appChanged.next(await services.applications.get(application.metadata.name));
                                    close();
                                } catch (e) {
                                    appContext.apis.notifications.show({
                                        content: ,
                                        type: NotificationType.Error
                                    });
                                }
                            }
                        },