diff --git a/ui/src/app/app.tsx b/ui/src/app/app.tsx
index 5a080e20d451f..74e71dad56f28 100644
--- a/ui/src/app/app.tsx
+++ b/ui/src/app/app.tsx
@@ -5,7 +5,6 @@ import * as React from 'react';
 import {Helmet} from 'react-helmet';
 import {Redirect, Route, RouteComponentProps, Router, Switch} from 'react-router';
 import applications from './applications';
-// import applicationsets from './applicationsets';
 import help from './help';
 import login from './login';
 import settings from './settings';
@@ -32,7 +31,7 @@ type Routes = {[path: string]: {component: React.ComponentType<RouteComponentPro
 const routes: Routes = {
     '/login': {component: login.component as any, noLayout: true},
     '/applications': {component: applications.component},
-    '/applicationsets': {component: applications.component}, 
+    '/applicationsets': {component: applications.component},
     '/settings': {component: settings.component},
     '/user-info': {component: userInfo.component},
     '/help': {component: help.component},
@@ -53,7 +52,7 @@ const navItems: NavItem[] = [
         path: '/applications',
         iconClassName: 'argo-icon argo-icon-application'
     },
-        {
+    {
         title: 'Settings',
         tooltip: 'Manage your repositories, projects, settings, application sets',
         path: '/settings',
diff --git a/ui/src/app/applications/components/application-details/application-details.tsx b/ui/src/app/applications/components/application-details/application-details.tsx
index c4a9f7c900a85..8b4ad0eda700b 100644
--- a/ui/src/app/applications/components/application-details/application-details.tsx
+++ b/ui/src/app/applications/components/application-details/application-details.tsx
@@ -1,36 +1,44 @@
-import { DropDownMenu, NotificationType, SlidingPanel, Tooltip } from 'argo-ui';
+import {DropDownMenu, NotificationType, SlidingPanel, Tooltip} from 'argo-ui';
 import * as classNames from 'classnames';
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import * as models from '../../../shared/models';
-import { RouteComponentProps } from 'react-router';
-import { BehaviorSubject, combineLatest, from, merge, Observable } from 'rxjs';
-import { delay, filter, map, mergeMap, repeat, retryWhen } from 'rxjs/operators';
+import {RouteComponentProps} from 'react-router';
+import {BehaviorSubject, combineLatest, from, merge, Observable} from 'rxjs';
+import {delay, filter, map, mergeMap, repeat, retryWhen} from 'rxjs/operators';
 
-import { DataLoader, EmptyState, ErrorNotification, ObservableQuery, Page, Paginate, Revision, Timestamp } from '../../../shared/components';
-import { AppContext, ContextApis } from '../../../shared/context';
+import {DataLoader, EmptyState, ErrorNotification, ObservableQuery, Page, Paginate, Revision, Timestamp} from '../../../shared/components';
+import {AppContext, ContextApis} from '../../../shared/context';
 import * as appModels from '../../../shared/models';
-import { AbstractAppDetailsPreferences, AppDetailsPreferences, AppSetsDetailsViewKey, AppSetsDetailsViewType, AppsDetailsViewKey, AppsDetailsViewType, services } from '../../../shared/services';
+import {
+    AbstractAppDetailsPreferences,
+    AppDetailsPreferences,
+    AppSetsDetailsViewKey,
+    AppSetsDetailsViewType,
+    AppsDetailsViewKey,
+    AppsDetailsViewType,
+    services
+} from '../../../shared/services';
 
-import { ApplicationConditions } from '../application-conditions/application-conditions';
-import { ApplicationDeploymentHistory } from '../application-deployment-history/application-deployment-history';
-import { ApplicationOperationState } from '../application-operation-state/application-operation-state';
-import { PodGroupType, PodView } from '../application-pod-view/pod-view';
-import { ApplicationResourceTree, ResourceTreeNode } from '../application-resource-tree/application-resource-tree';
-import { ApplicationStatusPanel } from '../application-status-panel/application-status-panel';
-import { ApplicationSyncPanel } from '../application-sync-panel/application-sync-panel';
-import { ResourceDetails } from '../resource-details/resource-details';
+import {ApplicationConditions} from '../application-conditions/application-conditions';
+import {ApplicationDeploymentHistory} from '../application-deployment-history/application-deployment-history';
+import {ApplicationOperationState} from '../application-operation-state/application-operation-state';
+import {PodGroupType, PodView} from '../application-pod-view/pod-view';
+import {ApplicationResourceTree, ResourceTreeNode} from '../application-resource-tree/application-resource-tree';
+import {ApplicationStatusPanel} from '../application-status-panel/application-status-panel';
+import {ApplicationSyncPanel} from '../application-sync-panel/application-sync-panel';
+import {ResourceDetails} from '../resource-details/resource-details';
 import * as AppUtils from '../utils';
-import { ApplicationResourceList } from './application-resource-list';
-import { AbstractFiltersProps, Filters } from './application-resource-filter';
-import { getAppDefaultSource, urlPattern, helpTip, isApp, isInvokedFromApps } from '../utils';
-import { ChartDetails, ResourceStatus } from '../../../shared/models';
-import { ApplicationsDetailsAppDropdown } from './application-details-app-dropdown';
-import { useSidebarTarget } from '../../../sidebar/sidebar';
+import {ApplicationResourceList} from './application-resource-list';
+import {AbstractFiltersProps, Filters} from './application-resource-filter';
+import {getAppDefaultSource, urlPattern, helpTip, isApp, isInvokedFromApps} from '../utils';
+import {ChartDetails, ResourceStatus} from '../../../shared/models';
+import {ApplicationsDetailsAppDropdown} from './application-details-app-dropdown';
+import {useSidebarTarget} from '../../../sidebar/sidebar';
 
 import './application-details.scss';
-import { AppViewExtension } from '../../../shared/services/extensions-service';
+import {AppViewExtension} from '../../../shared/services/extensions-service';
 
 interface ApplicationDetailsState {
     page: number;
@@ -41,7 +49,7 @@ interface ApplicationDetailsState {
     truncateNameOnRight?: boolean;
     collapsedNodes?: string[];
     extensions?: AppViewExtension[];
-    extensionsMap?: { [key: string]: AppViewExtension };
+    extensionsMap?: {[key: string]: AppViewExtension};
 }
 
 interface FilterInput {
@@ -57,8 +65,8 @@ const ApplicationDetailsFilters = (props: AbstractFiltersProps) => {
     return ReactDOM.createPortal(<Filters {...props} />, sidebarTarget?.current);
 };
 
-export const NodeInfo = (node?: string): { key: string; container: number } => {
-    const nodeContainer = { key: '', container: 0 };
+export const NodeInfo = (node?: string): {key: string; container: number} => {
+    const nodeContainer = {key: '', container: 0};
     if (node) {
         const parts = node.split('/');
         nodeContainer.key = parts.slice(0, 4).join('/');
@@ -69,10 +77,10 @@ export const NodeInfo = (node?: string): { key: string; container: number } => {
 
 export const SelectNode = (fullName: string, containerIndex = 0, tab: string = null, appContext: ContextApis) => {
     const node = fullName ? `${fullName}/${containerIndex}` : null;
-    appContext.navigation.goto('.', { node, tab }, { replace: true });
+    appContext.navigation.goto('.', {node, tab}, {replace: true});
 };
 
-export class ApplicationDetails extends React.Component<RouteComponentProps<{ appnamespace: string; name: string }>, ApplicationDetailsState> {
+export class ApplicationDetails extends React.Component<RouteComponentProps<{appnamespace: string; name: string}>, ApplicationDetailsState> {
     public static contextTypes = {
         apis: PropTypes.object
     };
@@ -80,10 +88,10 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ ap
     private appChanged = new BehaviorSubject<appModels.AbstractApplication>(null);
     private appNamespace: string;
 
-    constructor(props: RouteComponentProps<{ appnamespace: string; name: string }>) {
+    constructor(props: RouteComponentProps<{appnamespace: string; name: string}>) {
         super(props);
         const extensions = services.extensions.getAppViewExtensions();
-        const extensionsMap: { [key: string]: AppViewExtension } = {};
+        const extensionsMap: {[key: string]: AppViewExtension} = {};
         extensions.forEach(ext => {
             extensionsMap[ext.title] = ext;
         });
@@ -113,11 +121,11 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ ap
         if (isExpanded && index >= 0) {
             this.state.collapsedNodes.splice(index, 1);
             const updatedNodes = this.state.collapsedNodes.slice();
-            this.setState({ collapsedNodes: updatedNodes });
+            this.setState({collapsedNodes: updatedNodes});
         } else if (!isExpanded && index < 0) {
             const updatedNodes = this.state.collapsedNodes.slice();
             updatedNodes.push(node);
-            this.setState({ collapsedNodes: updatedNodes });
+            this.setState({collapsedNodes: updatedNodes});
         }
     }
 
@@ -143,20 +151,22 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ ap
     }
 
     private closeGroupedNodesPanel() {
-        this.setState({ groupedResources: [] });
-        this.setState({ slidingPanelPage: 0 });
+        this.setState({groupedResources: []});
+        this.setState({slidingPanelPage: 0});
     }
 
     private toggleCompactView(appName: string, pref: AbstractAppDetailsPreferences) {
         if (isInvokedFromApps()) {
-            (pref as AppDetailsPreferences).userHelpTipMsgs = (pref as AppDetailsPreferences).userHelpTipMsgs.map(usrMsg => (usrMsg.appName === appName && usrMsg.msgKey === 'groupNodes' ? { ...usrMsg, display: true } : usrMsg));
+            (pref as AppDetailsPreferences).userHelpTipMsgs = (pref as AppDetailsPreferences).userHelpTipMsgs.map(usrMsg =>
+                usrMsg.appName === appName && usrMsg.msgKey === 'groupNodes' ? {...usrMsg, display: true} : usrMsg
+            );
         }
-        services.viewPreferences.updatePreferences({ appDetails: { ...pref, groupNodes: !pref.groupNodes } });
+        services.viewPreferences.updatePreferences({appDetails: {...pref, groupNodes: !pref.groupNodes}});
     }
 
     private getPageTitle(view: string) {
         if (isInvokedFromApps()) {
-            const { Tree, Pods, Network, List } = AppsDetailsViewKey;
+            const {Tree, Pods, Network, List} = AppsDetailsViewKey;
             switch (view) {
                 case Tree:
                     return 'Application Details Tree';
@@ -167,9 +177,8 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ ap
                 case List:
                     return 'Application Details List';
             }
-        }
-        else {
-            const { Tree, List } = AppSetsDetailsViewKey;
+        } else {
+            const {Tree, List} = AppSetsDetailsViewKey;
             switch (view) {
                 case Tree:
                     return 'ApplicationSet Details Tree';
@@ -201,13 +210,15 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ ap
                                             .filter(item => !!item);
                                     }
                                     if (params.get('view') != null) {
-                                        pref.view = isApp(application) ? params.get('view') as AppsDetailsViewType : params.get('view') as AppSetsDetailsViewType;
+                                        pref.view = isApp(application) ? (params.get('view') as AppsDetailsViewType) : (params.get('view') as AppSetsDetailsViewType);
                                     } else {
-                                        const appDefaultView = isApp(application) ? (application.metadata &&
-                                            application.metadata.annotations &&
-                                            application.metadata.annotations[appModels.AnnotationDefaultView]) as AppsDetailsViewType : (application.metadata &&
-                                                application.metadata.annotations &&
-                                                application.metadata.annotations[appModels.AnnotationDefaultView]) as AppSetsDetailsViewType;
+                                        const appDefaultView = isApp(application)
+                                            ? ((application.metadata &&
+                                                  application.metadata.annotations &&
+                                                  application.metadata.annotations[appModels.AnnotationDefaultView]) as AppsDetailsViewType)
+                                            : ((application.metadata &&
+                                                  application.metadata.annotations &&
+                                                  application.metadata.annotations[appModels.AnnotationDefaultView]) as AppSetsDetailsViewType);
                                         if (appDefaultView != null) {
                                             pref.view = appDefaultView;
                                         }
@@ -215,26 +226,26 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ ap
                                     if (params.get('orphaned') != null) {
                                         pref.orphanedResources = params.get('orphaned') === 'true';
                                     }
-                                    if ((params.get('podSortMode') != null) && isApp(application)) {
+                                    if (params.get('podSortMode') != null && isApp(application)) {
                                         (pref as AppDetailsPreferences).podView.sortMode = params.get('podSortMode') as PodGroupType;
                                     } else {
                                         const appDefaultPodSort = (application.metadata &&
                                             application.metadata.annotations &&
                                             application.metadata.annotations[appModels.AnnotationDefaultPodSort]) as PodGroupType;
-                                        if ((appDefaultPodSort != null) && isApp(application)) {
+                                        if (appDefaultPodSort != null && isApp(application)) {
                                             (pref as AppDetailsPreferences).podView.sortMode = appDefaultPodSort;
                                         }
                                     }
-                                    return { ...items[0], pref };
+                                    return {...items[0], pref};
                                 })
                             )
                         }>
-                        {({ application, tree, pref }: { application: appModels.AbstractApplication; tree: appModels.ApplicationTree; pref: AbstractAppDetailsPreferences }) => {
+                        {({application, tree, pref}: {application: appModels.AbstractApplication; tree: appModels.ApplicationTree; pref: AbstractAppDetailsPreferences}) => {
                             tree.nodes = tree.nodes || [];
                             const treeFilter = this.getTreeFilter(pref.resourceFilter);
                             const setFilter = (items: string[]) => {
-                                this.appContext.apis.navigation.goto('.', { resource: items.join(',') }, { replace: true });
-                                services.viewPreferences.updatePreferences({ appDetails: { ...pref, resourceFilter: items } });
+                                this.appContext.apis.navigation.goto('.', {resource: items.join(',')}, {replace: true});
+                                services.viewPreferences.updatePreferences({appDetails: {...pref, resourceFilter: items}});
                             };
                             const clearFilter = () => setFilter([]);
                             const refreshing = application.metadata.annotations && application.metadata.annotations[appModels.AnnotationRefreshKey];
@@ -246,8 +257,10 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ ap
                             const conditions = isApp(application) ? (application as models.Application).status.conditions || [] : [];
                             const syncResourceKey = new URLSearchParams(this.props.history.location.search).get('deploy');
                             const tab = new URLSearchParams(this.props.history.location.search).get('tab');
-                            const source = isApp(application) ? getAppDefaultSource((application as models.Application)) : null;
-                            const showToolTip = isApp(application) ? (pref as AppDetailsPreferences)?.userHelpTipMsgs.find(usrMsg => usrMsg.appName === application.metadata.name) : null;
+                            const source = isApp(application) ? getAppDefaultSource(application as models.Application) : null;
+                            const showToolTip = isApp(application)
+                                ? (pref as AppDetailsPreferences)?.userHelpTipMsgs.find(usrMsg => usrMsg.appName === application.metadata.name)
+                                : null;
                             const resourceNodes = (): any[] => {
                                 const statusByKey = new Map<string, models.ResourceStatus>();
                                 if (isApp(application)) {
@@ -255,10 +268,10 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ ap
                                 }
                                 const resources = new Map<string, any>();
                                 tree.nodes
-                                    .map(node => ({ ...node, orphaned: false }))
-                                    .concat(((pref.orphanedResources && tree.orphanedNodes) || []).map(node => ({ ...node, orphaned: true })))
+                                    .map(node => ({...node, orphaned: false}))
+                                    .concat(((pref.orphanedResources && tree.orphanedNodes) || []).map(node => ({...node, orphaned: true})))
                                     .forEach(node => {
-                                        const resource: any = { ...node };
+                                        const resource: any = {...node};
                                         resource.uid = node.uid;
                                         const status = statusByKey.get(AppUtils.nodeKey(node));
                                         if (status) {
@@ -275,7 +288,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ ap
                             };
 
                             const filteredRes = resourceNodes().filter(res => {
-                                const resNode: ResourceTreeNode = { ...res, root: null, info: null, parentRefs: [], resourceVersion: '', uid: '' };
+                                const resNode: ResourceTreeNode = {...res, root: null, info: null, parentRefs: [], resourceVersion: '', uid: ''};
                                 resNode.root = resNode;
                                 return this.filterTreeNode(resNode, treeFilter);
                             });
@@ -291,14 +304,14 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ ap
                             const renderCommitMessage = (message: string) =>
                                 message.split(/\s/).map(part =>
                                     urlPattern.test(part) ? (
-                                        <a href={part} target='_blank' rel='noopener noreferrer' style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }}>
+                                        <a href={part} target='_blank' rel='noopener noreferrer' style={{overflowWrap: 'anywhere', wordBreak: 'break-word'}}>
                                             {part}{' '}
                                         </a>
                                     ) : (
                                         part + ' '
                                     )
                                 );
-                            const { Tree, Pods, Network, List } = AppsDetailsViewKey;
+                            const {Tree, Pods, Network, List} = AppsDetailsViewKey;
                             const zoomNum = (pref.zoom * 100).toFixed(0);
                             const setZoom = (s: number) => {
                                 let targetZoom: number = pref.zoom + s;
@@ -307,17 +320,19 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ ap
                                 } else if (targetZoom > 2.0) {
                                     targetZoom = 2.0;
                                 }
-                                services.viewPreferences.updatePreferences({ appDetails: { ...pref, zoom: targetZoom } });
+                                services.viewPreferences.updatePreferences({appDetails: {...pref, zoom: targetZoom}});
                             };
                             const setFilterGraph = (filterGraph: any[]) => {
-                                this.setState({ filteredGraph: filterGraph });
+                                this.setState({filteredGraph: filterGraph});
                             };
                             const setShowCompactNodes = (showCompactView: boolean) => {
-                                services.viewPreferences.updatePreferences({ appDetails: { ...pref, groupNodes: showCompactView } });
+                                services.viewPreferences.updatePreferences({appDetails: {...pref, groupNodes: showCompactView}});
                             };
                             const updateHelpTipState = (usrHelpTip: models.UserMessages) => {
                                 if (isApp(application)) {
-                                    const existingIndex = (pref as AppDetailsPreferences).userHelpTipMsgs.findIndex(msg => msg.appName === usrHelpTip.appName && msg.msgKey === usrHelpTip.msgKey);
+                                    const existingIndex = (pref as AppDetailsPreferences).userHelpTipMsgs.findIndex(
+                                        msg => msg.appName === usrHelpTip.appName && msg.msgKey === usrHelpTip.msgKey
+                                    );
                                     if (existingIndex !== -1) {
                                         (pref as AppDetailsPreferences).userHelpTipMsgs[existingIndex] = usrHelpTip;
                                     } else {
@@ -326,18 +341,18 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ ap
                                 }
                             };
                             const toggleNameDirection = () => {
-                                this.setState({ truncateNameOnRight: !this.state.truncateNameOnRight });
+                                this.setState({truncateNameOnRight: !this.state.truncateNameOnRight});
                             };
                             const expandAll = () => {
-                                this.setState({ collapsedNodes: [] });
+                                this.setState({collapsedNodes: []});
                             };
                             const collapseAll = () => {
                                 const nodes = new Array<ResourceTreeNode>();
                                 tree.nodes
-                                    .map(node => ({ ...node, orphaned: false }))
-                                    .concat((tree.orphanedNodes || []).map(node => ({ ...node, orphaned: true })))
+                                    .map(node => ({...node, orphaned: false}))
+                                    .concat((tree.orphanedNodes || []).map(node => ({...node, orphaned: true})))
                                     .forEach(node => {
-                                        const resourceNode: ResourceTreeNode = { ...node };
+                                        const resourceNode: ResourceTreeNode = {...node};
                                         nodes.push(resourceNode);
                                     });
                                 const collapsedNodesList = this.state.collapsedNodes.slice();
@@ -349,7 +364,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ ap
                                             collapsedNodesList.push(parentId);
                                         }
                                     });
-                                    this.setState({ collapsedNodes: collapsedNodesList });
+                                    this.setState({collapsedNodes: collapsedNodesList});
                                 } else {
                                     const managedKeys = new Set(application.status.resources.map(AppUtils.nodeKey));
                                     nodes.forEach(node => {
@@ -363,7 +378,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ ap
                                         }
                                     });
                                     collapsedNodesList.push(application.kind + '-' + application.metadata.namespace + '-' + application.metadata.name);
-                                    this.setState({ collapsedNodes: collapsedNodesList });
+                                    this.setState({collapsedNodes: collapsedNodesList});
                                 }
                             };
                             const appFullName = AppUtils.nodeKey({
@@ -375,59 +390,67 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ ap
                             return (
                                 <div className={`application-details ${this.props.match.params.name}`}>
                                     <Page
-                                        title={isApp(application) ? this.props.match.params.name + ' - ' + this.getPageTitle(pref.view) : this.props.match.params.name + ' - ' + this.getPageTitle(pref.view)}
+                                        title={
+                                            isApp(application)
+                                                ? this.props.match.params.name + ' - ' + this.getPageTitle(pref.view)
+                                                : this.props.match.params.name + ' - ' + this.getPageTitle(pref.view)
+                                        }
                                         useTitleOnly={true}
                                         topBarTitle={this.getPageTitle(pref.view)}
                                         toolbar={{
                                             breadcrumbs: [
-                                                { title: 'Applications', path: '/applications' },
-                                                { title: <ApplicationsDetailsAppDropdown appName={this.props.match.params.name} /> }
+                                                {title: 'Applications', path: '/applications'},
+                                                {title: <ApplicationsDetailsAppDropdown appName={this.props.match.params.name} />}
                                             ],
-                                            actionMenu: { items: this.getApplicationActionMenu(application, true) },
+                                            actionMenu: {items: this.getApplicationActionMenu(application, true)},
                                             tools: (
                                                 <React.Fragment key='app-list-tools'>
                                                     <div className='application-details__view-type'>
                                                         <i
-                                                            className={classNames('fa fa-sitemap', { selected: pref.view === Tree })}
+                                                            className={classNames('fa fa-sitemap', {selected: pref.view === Tree})}
                                                             title='Tree'
                                                             onClick={() => {
-                                                                this.appContext.apis.navigation.goto('.', { view: Tree });
-                                                                services.viewPreferences.updatePreferences({ appDetails: { ...pref, view: Tree } });
+                                                                this.appContext.apis.navigation.goto('.', {view: Tree});
+                                                                services.viewPreferences.updatePreferences({appDetails: {...pref, view: Tree}});
                                                             }}
                                                         />
-                                                        {isApp(application) && <i
-                                                            className={classNames('fa fa-th', { selected: pref.view === Pods })}
-                                                            title='Pods'
-                                                            onClick={() => {
-                                                                this.appContext.apis.navigation.goto('.', { view: Pods });
-                                                                services.viewPreferences.updatePreferences({ appDetails: { ...pref, view: Pods } });
-                                                            }}
-                                                        />}
-                                                        {isApp(application) && <i
-                                                            className={classNames('fa fa-network-wired', { selected: pref.view === Network })}
-                                                            title='Network'
-                                                            onClick={() => {
-                                                                this.appContext.apis.navigation.goto('.', { view: Network });
-                                                                services.viewPreferences.updatePreferences({ appDetails: { ...pref, view: Network } });
-                                                            }}
-                                                        />}
+                                                        {isApp(application) && (
+                                                            <i
+                                                                className={classNames('fa fa-th', {selected: pref.view === Pods})}
+                                                                title='Pods'
+                                                                onClick={() => {
+                                                                    this.appContext.apis.navigation.goto('.', {view: Pods});
+                                                                    services.viewPreferences.updatePreferences({appDetails: {...pref, view: Pods}});
+                                                                }}
+                                                            />
+                                                        )}
+                                                        {isApp(application) && (
+                                                            <i
+                                                                className={classNames('fa fa-network-wired', {selected: pref.view === Network})}
+                                                                title='Network'
+                                                                onClick={() => {
+                                                                    this.appContext.apis.navigation.goto('.', {view: Network});
+                                                                    services.viewPreferences.updatePreferences({appDetails: {...pref, view: Network}});
+                                                                }}
+                                                            />
+                                                        )}
                                                         <i
-                                                            className={classNames('fa fa-th-list', { selected: pref.view === List })}
+                                                            className={classNames('fa fa-th-list', {selected: pref.view === List})}
                                                             title='List'
                                                             onClick={() => {
-                                                                this.appContext.apis.navigation.goto('.', { view: List });
-                                                                services.viewPreferences.updatePreferences({ appDetails: { ...pref, view: List } });
+                                                                this.appContext.apis.navigation.goto('.', {view: List});
+                                                                services.viewPreferences.updatePreferences({appDetails: {...pref, view: List}});
                                                             }}
                                                         />
                                                         {this.state.extensions &&
                                                             (this.state.extensions || []).map(ext => (
                                                                 <i
                                                                     key={ext.title}
-                                                                    className={classNames(`fa ${ext.icon}`, { selected: pref.view === ext.title })}
+                                                                    className={classNames(`fa ${ext.icon}`, {selected: pref.view === ext.title})}
                                                                     title={ext.title}
                                                                     onClick={() => {
-                                                                        this.appContext.apis.navigation.goto('.', { view: ext.title });
-                                                                        services.viewPreferences.updatePreferences({ appDetails: { ...pref, view: ext.title } });
+                                                                        this.appContext.apis.navigation.goto('.', {view: ext.title});
+                                                                        services.viewPreferences.updatePreferences({appDetails: {...pref, view: ext.title}});
                                                                     }}
                                                                 />
                                                             ))}
@@ -592,11 +615,11 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ ap
                                                                     )}
                                                                 </Paginate>
                                                             )) || (
-                                                                    <EmptyState icon='fa fa-search'>
-                                                                        <h4>No resources found</h4>
-                                                                        <h5>Try to change filter criteria</h5>
-                                                                    </EmptyState>
-                                                                )}
+                                                                <EmptyState icon='fa fa-search'>
+                                                                    <h4>No resources found</h4>
+                                                                    <h5>Try to change filter criteria</h5>
+                                                                </EmptyState>
+                                                            )}
                                                         </div>
                                                     )}
                                             </div>
@@ -606,14 +629,14 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ ap
                                                 <Paginate
                                                     page={this.state.slidingPanelPage}
                                                     data={this.state.groupedResources}
-                                                    onPageChange={page => this.setState({ slidingPanelPage: page })}
+                                                    onPageChange={page => this.setState({slidingPanelPage: page})}
                                                     preferencesKey='grouped-nodes-details'>
                                                     {data => (
                                                         <ApplicationResourceList
                                                             onNodeClick={fullName => this.selectNode(fullName)}
                                                             resources={data}
                                                             nodeMenu={node =>
-                                                                AppUtils.renderResourceMenu({ ...node, root: node }, application, tree, this.appContext.apis, this.appChanged, () =>
+                                                                AppUtils.renderResourceMenu({...node, root: node}, application, tree, this.appContext.apis, this.appChanged, () =>
                                                                     this.getApplicationActionMenu(application, false)
                                                                 )
                                                             }
@@ -628,7 +651,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ ap
                                                 tree={tree}
                                                 application={application}
                                                 isAppSelected={isAppSelected}
-                                                updateApp={(app: models.Application, query: { validate?: boolean }) => this.updateApp(app, query)}
+                                                updateApp={(app: models.Application, query: {validate?: boolean}) => this.updateApp(app, query)}
                                                 selectedNode={selectedNode}
                                                 tab={tab}
                                             />
@@ -654,7 +677,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ ap
                                         <SlidingPanel isShown={this.showConditions && !!conditions} onClose={() => this.setConditionsStatusVisible(false)}>
                                             {conditions && <ApplicationConditions conditions={conditions} />}
                                         </SlidingPanel>
-                                        <SlidingPanel isShown={!!this.state.revision} isMiddle={true} onClose={() => this.setState({ revision: null })}>
+                                        <SlidingPanel isShown={!!this.state.revision} isMiddle={true} onClose={() => this.setState({revision: null})}>
                                             {this.state.revision &&
                                                 (source.chart ? (
                                                     <DataLoader
@@ -663,7 +686,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ ap
                                                             services.applications.revisionChartDetails(input.metadata.name, input.metadata.namespace, this.state.revision)
                                                         }>
                                                         {(m: ChartDetails) => (
-                                                            <div className='white-box' style={{ marginTop: '1.5em' }}>
+                                                            <div className='white-box' style={{marginTop: '1.5em'}}>
                                                                 <div className='white-box__details'>
                                                                     <div className='row white-box__details-row'>
                                                                         <div className='columns small-3'>Revision:</div>
@@ -707,7 +730,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ ap
                                                             services.applications.revisionMetadata(application.metadata.name, application.metadata.namespace, this.state.revision)
                                                         }>
                                                         {metadata => (
-                                                            <div className='white-box' style={{ marginTop: '1.5em' }}>
+                                                            <div className='white-box' style={{marginTop: '1.5em'}}>
                                                                 <div className='white-box__details'>
                                                                     <div className='row white-box__details-row'>
                                                                         <div className='columns small-3'>SHA:</div>
@@ -741,7 +764,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ ap
                                                                 <div className='white-box__details'>
                                                                     <div className='row white-box__details-row'>
                                                                         <div className='columns small-3'>Message:</div>
-                                                                        <div className='columns small-9' style={{ display: 'flex', alignItems: 'center' }}>
+                                                                        <div className='columns small-9' style={{display: 'flex', alignItems: 'center'}}>
                                                                             <div className='application-details__commit-message'>{renderCommitMessage(metadata.message)}</div>
                                                                         </div>
                                                                     </div>
@@ -763,84 +786,86 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ ap
 
     private getApplicationActionMenu(app: appModels.AbstractApplication, needOverlapLabelOnNarrowScreen: boolean) {
         const refreshing = app.metadata.annotations && app.metadata.annotations[appModels.AnnotationRefreshKey];
-        const fullName = AppUtils.nodeKey({ group: 'argoproj.io', kind: app.kind, name: app.metadata.name, namespace: app.metadata.namespace });
-        const ActionMenuItem = (prop: { actionLabel: string }) => <span className={needOverlapLabelOnNarrowScreen ? 'show-for-large' : ''}>{prop.actionLabel}</span>;
+        const fullName = AppUtils.nodeKey({group: 'argoproj.io', kind: app.kind, name: app.metadata.name, namespace: app.metadata.namespace});
+        const ActionMenuItem = (prop: {actionLabel: string}) => <span className={needOverlapLabelOnNarrowScreen ? 'show-for-large' : ''}>{prop.actionLabel}</span>;
         const hasMultipleSources = isApp(app) ? app.spec.sources && app.spec.sources.length > 0 : false;
-        return isApp(app) ? [
-            {
-                iconClassName: 'fa fa-info-circle',
-                title: <ActionMenuItem actionLabel='Details' />,
-                action: () => this.selectNode(fullName)
-            },
-            {
-                iconClassName: 'fa fa-file-medical',
-                title: <ActionMenuItem actionLabel='Diff' />,
-                action: () => this.selectNode(fullName, 0, 'diff'),
-                disabled: (app as models.Application).status.sync.status === appModels.SyncStatuses.Synced
-            },
-            {
-                iconClassName: 'fa fa-sync',
-                title: <ActionMenuItem actionLabel='Sync' />,
-                action: () => AppUtils.showDeploy('all', null, this.appContext.apis)
-            },
-            {
-                iconClassName: 'fa fa-info-circle',
-                title: <ActionMenuItem actionLabel='Sync Status' />,
-                action: () => this.setOperationStatusVisible(true),
-                disabled: !(app as models.Application).status.operationState
-            },
-            {
-                iconClassName: 'fa fa-history',
-                title: hasMultipleSources ? (
-                    <React.Fragment>
-                        <ActionMenuItem actionLabel=' History and rollback' />
-                        {helpTip('Rollback is not supported for apps with multiple sources')}
-                    </React.Fragment>
-                ) : (
-                    <ActionMenuItem actionLabel='History and rollback' />
-                ),
-                action: () => {
-                    this.setRollbackPanelVisible(0);
-                },
-                disabled: !(app as models.Application).status.operationState || hasMultipleSources
-            },
-            {
-                iconClassName: 'fa fa-times-circle',
-                title: <ActionMenuItem actionLabel='Delete' />,
-                action: () => this.deleteApplication()
-            },
-            {
-                iconClassName: classNames('fa fa-redo', { 'status-icon--spin': !!refreshing }),
-                title: (
-                    <React.Fragment>
-                        <ActionMenuItem actionLabel='Refresh' />{' '}
-                        <DropDownMenu
-                            items={[
-                                {
-                                    title: 'Hard Refresh',
-                                    action: () => !refreshing && services.applications.get(app.metadata.name, app.metadata.namespace, 'hard')
-                                }
-                            ]}
-                            anchor={() => <i className='fa fa-caret-down' />}
-                        />
-                    </React.Fragment>
-                ),
-                disabled: !!refreshing,
-                action: () => {
-                    if (!refreshing) {
-                        services.applications.get(app.metadata.name, app.metadata.namespace, 'normal');
-                        AppUtils.setAppRefreshing(app);
-                        this.appChanged.next(app);
-                    }
-                }
-            }
-        ] : [
-            {
-                iconClassName: 'fa fa-info-circle',
-                title: <ActionMenuItem actionLabel='AppSet Details' />,
-                action: () => this.selectNode(fullName)
-            }
-        ];
+        return isApp(app)
+            ? [
+                  {
+                      iconClassName: 'fa fa-info-circle',
+                      title: <ActionMenuItem actionLabel='Details' />,
+                      action: () => this.selectNode(fullName)
+                  },
+                  {
+                      iconClassName: 'fa fa-file-medical',
+                      title: <ActionMenuItem actionLabel='Diff' />,
+                      action: () => this.selectNode(fullName, 0, 'diff'),
+                      disabled: (app as models.Application).status.sync.status === appModels.SyncStatuses.Synced
+                  },
+                  {
+                      iconClassName: 'fa fa-sync',
+                      title: <ActionMenuItem actionLabel='Sync' />,
+                      action: () => AppUtils.showDeploy('all', null, this.appContext.apis)
+                  },
+                  {
+                      iconClassName: 'fa fa-info-circle',
+                      title: <ActionMenuItem actionLabel='Sync Status' />,
+                      action: () => this.setOperationStatusVisible(true),
+                      disabled: !(app as models.Application).status.operationState
+                  },
+                  {
+                      iconClassName: 'fa fa-history',
+                      title: hasMultipleSources ? (
+                          <React.Fragment>
+                              <ActionMenuItem actionLabel=' History and rollback' />
+                              {helpTip('Rollback is not supported for apps with multiple sources')}
+                          </React.Fragment>
+                      ) : (
+                          <ActionMenuItem actionLabel='History and rollback' />
+                      ),
+                      action: () => {
+                          this.setRollbackPanelVisible(0);
+                      },
+                      disabled: !(app as models.Application).status.operationState || hasMultipleSources
+                  },
+                  {
+                      iconClassName: 'fa fa-times-circle',
+                      title: <ActionMenuItem actionLabel='Delete' />,
+                      action: () => this.deleteApplication()
+                  },
+                  {
+                      iconClassName: classNames('fa fa-redo', {'status-icon--spin': !!refreshing}),
+                      title: (
+                          <React.Fragment>
+                              <ActionMenuItem actionLabel='Refresh' />{' '}
+                              <DropDownMenu
+                                  items={[
+                                      {
+                                          title: 'Hard Refresh',
+                                          action: () => !refreshing && services.applications.get(app.metadata.name, app.metadata.namespace, 'hard')
+                                      }
+                                  ]}
+                                  anchor={() => <i className='fa fa-caret-down' />}
+                              />
+                          </React.Fragment>
+                      ),
+                      disabled: !!refreshing,
+                      action: () => {
+                          if (!refreshing) {
+                              services.applications.get(app.metadata.name, app.metadata.namespace, 'normal');
+                              AppUtils.setAppRefreshing(app);
+                              this.appChanged.next(app);
+                          }
+                      }
+                  }
+              ]
+            : [
+                  {
+                      iconClassName: 'fa fa-info-circle',
+                      title: <ActionMenuItem actionLabel='AppSet Details' />,
+                      action: () => this.selectNode(fullName)
+                  }
+              ];
     }
 
     private filterTreeNode(node: ResourceTreeNode, filterInput: FilterInput): boolean {
@@ -884,12 +909,12 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ ap
         return input.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
     }
 
-    private loadAppInfo(name: string, appNamespace: string): Observable<{ application: appModels.AbstractApplication; tree: appModels.ApplicationTree }> {
+    private loadAppInfo(name: string, appNamespace: string): Observable<{application: appModels.AbstractApplication; tree: appModels.ApplicationTree}> {
         return from(services.applications.get(name, appNamespace))
             .pipe(
                 mergeMap(app => {
                     const fallbackTree = {
-                        nodes: isApp(app) ? (app as models.Application).status.resources.map(res => ({ ...res, parentRefs: [], info: [], resourceVersion: '', uid: '' })) : [],
+                        nodes: isApp(app) ? (app as models.Application).status.resources.map(res => ({...res, parentRefs: [], info: [], resourceVersion: '', uid: ''})) : [],
                         orphanedNodes: [],
                         hosts: []
                     } as appModels.ApplicationTree;
@@ -899,7 +924,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ ap
                             this.appChanged.pipe(filter(item => !!item)),
                             AppUtils.handlePageVisibility(() =>
                                 services.applications
-                                    .watch({ name, appNamespace })
+                                    .watch({name, appNamespace})
                                     .pipe(
                                         map(watchEvent => {
                                             if (watchEvent.type === 'DELETED') {
@@ -926,15 +951,15 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ ap
                 })
             )
             .pipe(filter(([application, tree]) => !!application && !!tree))
-            .pipe(map(([application, tree]) => ({ application, tree })));
+            .pipe(map(([application, tree]) => ({application, tree})));
     }
 
     private onAppDeleted() {
-        this.appContext.apis.notifications.show({ type: NotificationType.Success, content: `Application '${this.props.match.params.name}' was deleted` });
+        this.appContext.apis.notifications.show({type: NotificationType.Success, content: `Application '${this.props.match.params.name}' was deleted`});
         this.appContext.apis.navigation.goto('/applications');
     }
 
-    private async updateApp(app: appModels.Application, query: { validate?: boolean }) {
+    private async updateApp(app: appModels.Application, query: {validate?: boolean}) {
         const latestApp = await services.applications.get(app.metadata.name, app.metadata.namespace);
         latestApp.metadata.labels = app.metadata.labels;
         latestApp.metadata.annotations = app.metadata.annotations;
@@ -946,7 +971,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ ap
     private groupAppNodesByKey(application: appModels.Application, tree: appModels.ApplicationTree) {
         const nodeByKey = new Map<string, appModels.ResourceDiff | appModels.ResourceNode | appModels.Application>();
         tree.nodes.concat(tree.orphanedNodes || []).forEach(node => nodeByKey.set(AppUtils.nodeKey(node), node));
-        nodeByKey.set(AppUtils.nodeKey({ group: 'argoproj.io', kind: application.kind, name: application.metadata.name, namespace: application.metadata.namespace }), application);
+        nodeByKey.set(AppUtils.nodeKey({group: 'argoproj.io', kind: application.kind, name: application.metadata.name, namespace: application.metadata.namespace}), application);
         return nodeByKey;
     }
 
@@ -976,19 +1001,19 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ ap
                     break;
             }
         }
-        return { kind, health, sync, namespace, name };
+        return {kind, health, sync, namespace, name};
     }
 
     private setOperationStatusVisible(isVisible: boolean) {
-        this.appContext.apis.navigation.goto('.', { operation: isVisible }, { replace: true });
+        this.appContext.apis.navigation.goto('.', {operation: isVisible}, {replace: true});
     }
 
     private setConditionsStatusVisible(isVisible: boolean) {
-        this.appContext.apis.navigation.goto('.', { conditions: isVisible }, { replace: true });
+        this.appContext.apis.navigation.goto('.', {conditions: isVisible}, {replace: true});
     }
 
     private setRollbackPanelVisible(selectedDeploymentIndex = 0) {
-        this.appContext.apis.navigation.goto('.', { rollback: selectedDeploymentIndex }, { replace: true });
+        this.appContext.apis.navigation.goto('.', {rollback: selectedDeploymentIndex}, {replace: true});
     }
 
     private selectNode(fullName: string, containerIndex = 0, tab: string = null) {
@@ -1008,7 +1033,7 @@ Are you sure you want to disable auto-sync and rollback application '${this.prop
             if (confirmed) {
                 if (needDisableRollback) {
                     const update = JSON.parse(JSON.stringify(application)) as appModels.Application;
-                    update.spec.syncPolicy = { automated: null };
+                    update.spec.syncPolicy = {automated: null};
                     await services.applications.update(update);
                 }
                 await services.applications.rollback(this.props.match.params.name, this.appNamespace, revisionHistory.id);
@@ -1032,7 +1057,7 @@ Are you sure you want to disable auto-sync and rollback application '${this.prop
     }
 }
 
-const ExtensionView = (props: { extension: AppViewExtension; application: models.Application; tree: models.ApplicationTree }) => {
-    const { extension, application, tree } = props;
+const ExtensionView = (props: {extension: AppViewExtension; application: models.Application; tree: models.ApplicationTree}) => {
+    const {extension, application, tree} = props;
     return <extension.component application={application} tree={tree} />;
 };
diff --git a/ui/src/app/applications/components/application-status-panel/application-status-panel.tsx b/ui/src/app/applications/components/application-status-panel/application-status-panel.tsx
index af98f9c646362..365c0535ef8ce 100644
--- a/ui/src/app/applications/components/application-status-panel/application-status-panel.tsx
+++ b/ui/src/app/applications/components/application-status-panel/application-status-panel.tsx
@@ -1,13 +1,13 @@
-import { HelpIcon } from 'argo-ui';
+import {HelpIcon} from 'argo-ui';
 import * as React from 'react';
-import { ARGO_GRAY6_COLOR, DataLoader } from '../../../shared/components';
-import { Revision } from '../../../shared/components/revision';
-import { Timestamp } from '../../../shared/components/timestamp';
+import {ARGO_GRAY6_COLOR, DataLoader} from '../../../shared/components';
+import {Revision} from '../../../shared/components/revision';
+import {Timestamp} from '../../../shared/components/timestamp';
 import * as models from '../../../shared/models';
-import { services } from '../../../shared/services';
-import { AppSetHealthStatusIcon, ApplicationSyncWindowStatusIcon, ComparisonStatusIcon, getAppDefaultSource, getAppOperationState, getAppSetHealthStatus, isApp } from '../utils';
-import { getConditionCategory, HealthStatusIcon, OperationState, syncStatusMessage, helpTip } from '../utils';
-import { RevisionMetadataPanel } from './revision-metadata-panel';
+import {services} from '../../../shared/services';
+import {AppSetHealthStatusIcon, ApplicationSyncWindowStatusIcon, ComparisonStatusIcon, getAppDefaultSource, getAppOperationState, getAppSetHealthStatus, isApp} from '../utils';
+import {getConditionCategory, HealthStatusIcon, OperationState, syncStatusMessage, helpTip} from '../utils';
+import {RevisionMetadataPanel} from './revision-metadata-panel';
 
 import './application-status-panel.scss';
 
@@ -25,7 +25,7 @@ interface SectionInfo {
 }
 
 const sectionLabel = (info: SectionInfo) => (
-    <label style={{ fontSize: '12px', fontWeight: 600, color: ARGO_GRAY6_COLOR }}>
+    <label style={{fontSize: '12px', fontWeight: 600, color: ARGO_GRAY6_COLOR}}>
         {info.title}
         {info.helpContent && <HelpIcon title={info.helpContent} />}
     </label>
@@ -33,7 +33,7 @@ const sectionLabel = (info: SectionInfo) => (
 
 const sectionHeader = (info: SectionInfo, hasMultipleSources: boolean, onClick?: () => any) => {
     return (
-        <div style={{ display: 'flex', alignItems: 'center', marginBottom: '0.5em' }}>
+        <div style={{display: 'flex', alignItems: 'center', marginBottom: '0.5em'}}>
             {sectionLabel(info)}
             {onClick && (
                 <button className='application-status-panel__more-button' onClick={onClick} disabled={hasMultipleSources}>
@@ -45,7 +45,7 @@ const sectionHeader = (info: SectionInfo, hasMultipleSources: boolean, onClick?:
     );
 };
 
-export const ApplicationStatusPanel = ({ application, showDiff, showOperation, showConditions, showMetadataInfo }: Props) => {
+export const ApplicationStatusPanel = ({application, showDiff, showOperation, showConditions, showMetadataInfo}: Props) => {
     let cntByCategory;
     let hasMultipleSources;
     let source;
@@ -69,10 +69,8 @@ export const ApplicationStatusPanel = ({ application, showDiff, showOperation, s
             showOperation = null;
         }
         hasMultipleSources = (application as models.Application).spec.sources && (application as models.Application).spec.sources.length > 0;
-        source = getAppDefaultSource((application as models.Application));
-
-    }
-    else {
+        source = getAppDefaultSource(application as models.Application);
+    } else {
         cntByCategory = ((application as models.ApplicationSet).status.conditions || []).reduce(
             (map, next) => map.set(getConditionCategory(next), (map.get(getConditionCategory(next)) || 0) + 1),
             new Map<string, number>()
@@ -83,57 +81,68 @@ export const ApplicationStatusPanel = ({ application, showDiff, showOperation, s
     const warnings = cntByCategory.get('warning');
     const errors = cntByCategory.get('error');
 
-
     return (
         <div className='application-status-panel row'>
             <div className='application-status-panel__item'>
-                <div style={{ lineHeight: '19.5px', marginBottom: '0.3em' }}>{sectionLabel({ title: 'APP HEALTH', helpContent: 'The health status of your app' })}</div>
+                <div style={{lineHeight: '19.5px', marginBottom: '0.3em'}}>{sectionLabel({title: 'APP HEALTH', helpContent: 'The health status of your app'})}</div>
                 <div className='application-status-panel__item-value'>
                     {isApp(application) && <HealthStatusIcon state={(application as models.Application).status.health} />}
                     {!isApp(application) && <AppSetHealthStatusIcon state={(application as models.ApplicationSet).status} />}
                     &nbsp;
                     {isApp(application) ? (application as models.Application).status.health.status : getAppSetHealthStatus((application as models.ApplicationSet).status)}
                 </div>
-                {isApp(application) && (application as models.Application).status.health.message && <div className='application-status-panel__item-name'>{(application as models.Application).status.health.message}</div>}
-                {!isApp(application) && (application as models.ApplicationSet).status.conditions[0].message && <div className='application-status-panel__item-name'>{(application as models.ApplicationSet).status.conditions[0].message}</div>}
+                {isApp(application) && (application as models.Application).status.health.message && (
+                    <div className='application-status-panel__item-name'>{(application as models.Application).status.health.message}</div>
+                )}
+                {!isApp(application) && (application as models.ApplicationSet).status.conditions[0].message && (
+                    <div className='application-status-panel__item-name'>{(application as models.ApplicationSet).status.conditions[0].message}</div>
+                )}
             </div>
-            {isApp(application) && <div className='application-status-panel__item'>
-                <React.Fragment>
-                    {sectionHeader(
-                        {
-                            title: 'SYNC STATUS',
-                            helpContent: 'Whether or not the version of your app is up to date with your repo. You may wish to sync your app if it is out-of-sync.'
-                        },
-                        hasMultipleSources,
-                        () => showMetadataInfo((application as models.Application).status.sync ? (application as models.Application).status.sync.revision : '')
-                    )}
-                    <div className={`application-status-panel__item-value${appOperationState?.phase ? ` application-status-panel__item-value--${appOperationState.phase}` : ''}`}>
-                        <div>
-                            {(application as models.Application).status.sync.status === models.SyncStatuses.OutOfSync ? (
-                                <a onClick={() => showDiff && showDiff()}>
+            {isApp(application) && (
+                <div className='application-status-panel__item'>
+                    <React.Fragment>
+                        {sectionHeader(
+                            {
+                                title: 'SYNC STATUS',
+                                helpContent: 'Whether or not the version of your app is up to date with your repo. You may wish to sync your app if it is out-of-sync.'
+                            },
+                            hasMultipleSources,
+                            () => showMetadataInfo((application as models.Application).status.sync ? (application as models.Application).status.sync.revision : '')
+                        )}
+                        <div
+                            className={`application-status-panel__item-value${
+                                appOperationState?.phase ? ` application-status-panel__item-value--${appOperationState.phase}` : ''
+                            }`}>
+                            <div>
+                                {(application as models.Application).status.sync.status === models.SyncStatuses.OutOfSync ? (
+                                    <a onClick={() => showDiff && showDiff()}>
+                                        <ComparisonStatusIcon status={(application as models.Application).status.sync.status} label={true} />
+                                    </a>
+                                ) : (
                                     <ComparisonStatusIcon status={(application as models.Application).status.sync.status} label={true} />
-                                </a>
-                            ) : (
-                                <ComparisonStatusIcon status={(application as models.Application).status.sync.status} label={true} />
-                            )}
+                                )}
+                            </div>
+                            <div className='application-status-panel__item-value__revision show-for-large'>{syncStatusMessage(application)}</div>
                         </div>
-                        <div className='application-status-panel__item-value__revision show-for-large'>{syncStatusMessage(application)}</div>
-                    </div>
-                    <div className='application-status-panel__item-name' style={{marginBottom: '0.5em'}}>
-                        {(application as models.Application).spec.syncPolicy?.automated ? 'Auto sync is enabled.' : 'Auto sync is not enabled.'}
-                    </div>
-                    {(application as models.Application).status && (application as models.Application).status.sync && (application as models.Application).status.sync.revision && !(application as models.Application).spec.source.chart && (
-                        <div className='application-status-panel__item-name'>
-                            <RevisionMetadataPanel
-                                appName={application.metadata.name}
-                                appNamespace={application.metadata.namespace}
-                                type={source && source.chart && 'helm'}
-                                revision={(application as models.Application).status.sync.revision}
-                            />
+                        <div className='application-status-panel__item-name' style={{marginBottom: '0.5em'}}>
+                            {(application as models.Application).spec.syncPolicy?.automated ? 'Auto sync is enabled.' : 'Auto sync is not enabled.'}
                         </div>
-                    )}
-                </React.Fragment>
-            </div> }
+                        {(application as models.Application).status &&
+                            (application as models.Application).status.sync &&
+                            (application as models.Application).status.sync.revision &&
+                            !(application as models.Application).spec.source.chart && (
+                                <div className='application-status-panel__item-name'>
+                                    <RevisionMetadataPanel
+                                        appName={application.metadata.name}
+                                        appNamespace={application.metadata.namespace}
+                                        type={source && source.chart && 'helm'}
+                                        revision={(application as models.Application).status.sync.revision}
+                                    />
+                                </div>
+                            )}
+                    </React.Fragment>
+                </div>
+            )}
             {isApp(application) && appOperationState && (
                 <div className='application-status-panel__item'>
                     <React.Fragment>
@@ -159,7 +168,7 @@ export const ApplicationStatusPanel = ({ application, showDiff, showOperation, s
                             )}
                         </div>
 
-                        <div className='application-status-panel__item-name' style={{ marginBottom: '0.5em' }}>
+                        <div className='application-status-panel__item-name' style={{marginBottom: '0.5em'}}>
                             {appOperationState.phase} <Timestamp date={appOperationState.finishedAt || appOperationState.startedAt} />
                         </div>
                         {(appOperationState.syncResult && appOperationState.syncResult.revision && (
@@ -175,7 +184,7 @@ export const ApplicationStatusPanel = ({ application, showDiff, showOperation, s
             )}
             {application.status.conditions && (
                 <div className={`application-status-panel__item`}>
-                    {sectionLabel({ title: 'APP CONDITIONS' })}
+                    {sectionLabel({title: 'APP CONDITIONS'})}
                     <div className='application-status-panel__item-value application-status-panel__conditions' onClick={() => showConditions && showConditions()}>
                         {infos && (
                             <a className='info'>
@@ -195,32 +204,34 @@ export const ApplicationStatusPanel = ({ application, showDiff, showOperation, s
                     </div>
                 </div>
             )}
-            {isApp(application) && <DataLoader
-                noLoaderOnInputChange={true}
-                input={application}
-                load={async app => {
-                    return await services.applications.getApplicationSyncWindowState(app.metadata.name, app.metadata.namespace);
-                }}>
-                {(data: models.ApplicationSyncWindowState) => (
-                    <React.Fragment>
-                        {data.assignedWindows && (
-                            <div className='application-status-panel__item' style={{ position: 'relative' }}>
-                                {sectionLabel({
-                                    title: 'SYNC WINDOWS',
-                                    helpContent:
-                                        'The aggregate state of sync windows for this app. ' +
-                                        'Red: no syncs allowed. ' +
-                                        'Yellow: manual syncs allowed. ' +
-                                        'Green: all syncs allowed'
-                                })}
-                                <div className='application-status-panel__item-value' style={{ margin: 'auto 0' }}>
-                                    <ApplicationSyncWindowStatusIcon project={application.spec.project} state={data} />
+            {isApp(application) && (
+                <DataLoader
+                    noLoaderOnInputChange={true}
+                    input={application}
+                    load={async app => {
+                        return await services.applications.getApplicationSyncWindowState(app.metadata.name, app.metadata.namespace);
+                    }}>
+                    {(data: models.ApplicationSyncWindowState) => (
+                        <React.Fragment>
+                            {data.assignedWindows && (
+                                <div className='application-status-panel__item' style={{position: 'relative'}}>
+                                    {sectionLabel({
+                                        title: 'SYNC WINDOWS',
+                                        helpContent:
+                                            'The aggregate state of sync windows for this app. ' +
+                                            'Red: no syncs allowed. ' +
+                                            'Yellow: manual syncs allowed. ' +
+                                            'Green: all syncs allowed'
+                                    })}
+                                    <div className='application-status-panel__item-value' style={{margin: 'auto 0'}}>
+                                        <ApplicationSyncWindowStatusIcon project={application.spec.project} state={data} />
+                                    </div>
                                 </div>
-                            </div>
-                        )}
-                    </React.Fragment>
-                )}
-            </DataLoader> }
+                            )}
+                        </React.Fragment>
+                    )}
+                </DataLoader>
+            )}
         </div>
     );
 };
diff --git a/ui/src/app/applications/components/applications-list/applications-filter.tsx b/ui/src/app/applications/components/applications-list/applications-filter.tsx
index f0af07d462b5f..669d20a582e92 100644
--- a/ui/src/app/applications/components/applications-list/applications-filter.tsx
+++ b/ui/src/app/applications/components/applications-list/applications-filter.tsx
@@ -1,13 +1,29 @@
-import { useData, Checkbox } from 'argo-ui/v2';
+import {useData, Checkbox} from 'argo-ui/v2';
 import * as minimatch from 'minimatch';
 import * as React from 'react';
-import { Context } from '../../../shared/context';
-import { AbstractApplication, Application, ApplicationDestination, ApplicationSet, ApplicationSetConditionStatuses, ApplicationSetSpec, ApplicationSetStatus, ApplicationSpec, ApplicationStatus, Cluster, HealthStatusCode, HealthStatuses, Operation, SyncPolicy, SyncStatusCode, SyncStatuses } from '../../../shared/models';
-import { AbstractAppsListPreferences, AppSetsListPreferences, AppsListPreferences, services } from '../../../shared/services';
-import { Filter, FiltersGroup } from '../filter/filter';
+import {Context} from '../../../shared/context';
+import {
+    AbstractApplication,
+    Application,
+    ApplicationDestination,
+    ApplicationSet,
+    ApplicationSetConditionStatuses,
+    ApplicationSetSpec,
+    ApplicationSetStatus,
+    ApplicationSpec,
+    ApplicationStatus,
+    Cluster,
+    HealthStatusCode,
+    HealthStatuses,
+    Operation,
+    SyncPolicy,
+    SyncStatusCode,
+    SyncStatuses
+} from '../../../shared/models';
+import {AbstractAppsListPreferences, AppSetsListPreferences, AppsListPreferences, services} from '../../../shared/services';
+import {Filter, FiltersGroup} from '../filter/filter';
 import * as LabelSelector from '../label-selector';
-import { ComparisonStatusIcon, getAppDefaultSource, getAppSetHealthStatus, HealthStatusIcon, isApp } from '../utils';
-
+import {ComparisonStatusIcon, getAppDefaultSource, getAppSetHealthStatus, HealthStatusIcon, isApp} from '../utils';
 
 export interface AbstractFilterResult {
     favourite: boolean;
@@ -22,8 +38,7 @@ export interface FilterResult extends AbstractFilterResult {
     clusters: boolean;
 }
 
-export interface ApplicationSetFilterResult extends AbstractFilterResult {
-}
+export interface ApplicationSetFilterResult extends AbstractFilterResult {}
 
 export interface AbstractFilteredApp extends AbstractApplication {
     filterResult: AbstractFilterResult;
@@ -55,33 +70,38 @@ function getAutoSyncStatus(syncPolicy?: SyncPolicy) {
 export function getFilterResults(applications: AbstractApplication[], pref: AbstractAppsListPreferences): AbstractFilteredApp[] {
     return applications.map(app => ({
         ...app,
-        filterResult: isApp(app) ? {
-            repos: (pref as AppsListPreferences).reposFilter.length === 0 || (pref as AppsListPreferences).reposFilter.includes(getAppDefaultSource(app).repoURL),
-            sync: (pref as AppsListPreferences).syncFilter.length === 0 || (pref as AppsListPreferences).syncFilter.includes(app.status.sync.status),
-            autosync: (pref as AppsListPreferences).autoSyncFilter.length === 0 || (pref as AppsListPreferences).autoSyncFilter.includes(getAutoSyncStatus(app.spec.syncPolicy)),
-            health: pref.healthFilter.length === 0 || pref.healthFilter.includes(app.status.health.status),
-            namespaces: (pref as AppsListPreferences).namespacesFilter.length === 0 || (pref as AppsListPreferences).namespacesFilter.some(ns => app.spec.destination.namespace && minimatch(app.spec.destination.namespace, ns)),
-            favourite: !pref.showFavorites || (pref.favoritesAppList && pref.favoritesAppList.includes(app.metadata.name)),
-            clusters:
-            (pref as AppsListPreferences).clustersFilter.length === 0 ||
-            (pref as AppsListPreferences).clustersFilter.some(filterString => {
-                    const match = filterString.match('^(.*) [(](http.*)[)]$');
-                    if (match?.length === 3) {
-                        const [, name, url] = match;
-                        return url === app.spec.destination.server || name === app.spec.destination.name;
-                    } else {
-                        const inputMatch = filterString.match('^http.*$');
-                        return (inputMatch && inputMatch[0] === app.spec.destination.server) || (app.spec.destination.name && minimatch(app.spec.destination.name, filterString));
-                    }
-                }),
-            labels: pref.labelsFilter.length === 0 || pref.labelsFilter.every(selector => LabelSelector.match(selector, app.metadata.labels))
-
-        } : {
-            health: pref.healthFilter.length === 0 || pref.healthFilter.includes(getAppSetHealthStatus((app as ApplicationSet).status)),
-            favourite: !pref.showFavorites || (pref.favoritesAppList && pref.favoritesAppList.includes(app.metadata.name)),
-            labels: pref.labelsFilter.length === 0 || pref.labelsFilter.every(selector => LabelSelector.match(selector, app.metadata.labels))
-        }
-
+        filterResult: isApp(app)
+            ? {
+                  repos: (pref as AppsListPreferences).reposFilter.length === 0 || (pref as AppsListPreferences).reposFilter.includes(getAppDefaultSource(app).repoURL),
+                  sync: (pref as AppsListPreferences).syncFilter.length === 0 || (pref as AppsListPreferences).syncFilter.includes(app.status.sync.status),
+                  autosync:
+                      (pref as AppsListPreferences).autoSyncFilter.length === 0 || (pref as AppsListPreferences).autoSyncFilter.includes(getAutoSyncStatus(app.spec.syncPolicy)),
+                  health: pref.healthFilter.length === 0 || pref.healthFilter.includes(app.status.health.status),
+                  namespaces:
+                      (pref as AppsListPreferences).namespacesFilter.length === 0 ||
+                      (pref as AppsListPreferences).namespacesFilter.some(ns => app.spec.destination.namespace && minimatch(app.spec.destination.namespace, ns)),
+                  favourite: !pref.showFavorites || (pref.favoritesAppList && pref.favoritesAppList.includes(app.metadata.name)),
+                  clusters:
+                      (pref as AppsListPreferences).clustersFilter.length === 0 ||
+                      (pref as AppsListPreferences).clustersFilter.some(filterString => {
+                          const match = filterString.match('^(.*) [(](http.*)[)]$');
+                          if (match?.length === 3) {
+                              const [, name, url] = match;
+                              return url === app.spec.destination.server || name === app.spec.destination.name;
+                          } else {
+                              const inputMatch = filterString.match('^http.*$');
+                              return (
+                                  (inputMatch && inputMatch[0] === app.spec.destination.server) || (app.spec.destination.name && minimatch(app.spec.destination.name, filterString))
+                              );
+                          }
+                      }),
+                  labels: pref.labelsFilter.length === 0 || pref.labelsFilter.every(selector => LabelSelector.match(selector, app.metadata.labels))
+              }
+            : {
+                  health: pref.healthFilter.length === 0 || pref.healthFilter.includes(getAppSetHealthStatus((app as ApplicationSet).status)),
+                  favourite: !pref.showFavorites || (pref.favoritesAppList && pref.favoritesAppList.includes(app.metadata.name)),
+                  labels: pref.labelsFilter.length === 0 || pref.labelsFilter.every(selector => LabelSelector.match(selector, app.metadata.labels))
+              }
     }));
 }
 
@@ -89,7 +109,7 @@ const optionsFrom = (options: string[], filter: string[]) => {
     return options
         .filter(s => filter.indexOf(s) === -1)
         .map(item => {
-            return { label: item };
+            return {label: item};
         });
 };
 
@@ -112,7 +132,7 @@ interface ApplicationSetFilterProps extends AbstractAppFilterProps {
     onChange: (newPrefs: AppSetsListPreferences) => void;
 }
 export function isAppFilterProps(abstractAppFilterProps: AbstractAppFilterProps): abstractAppFilterProps is AppFilterProps {
-       return isApp(abstractAppFilterProps.apps[0]);
+    return isApp(abstractAppFilterProps.apps[0]);
 }
 
 const getCounts = (apps: FilteredApp[], filterType: keyof FilterResult, filter: (app: Application) => string, init?: string[]) => {
@@ -150,7 +170,13 @@ const getOptions = (apps: FilteredApp[], filterType: keyof FilterResult, filter:
     });
 };
 
-const getAppSetOptions = (apps: ApplicationSetFilteredApp[], filterType: keyof ApplicationSetFilterResult, filter: (app: ApplicationSet) => string, keys: string[], getIcon?: (k: string) => React.ReactNode) => {
+const getAppSetOptions = (
+    apps: ApplicationSetFilteredApp[],
+    filterType: keyof ApplicationSetFilterResult,
+    filter: (app: ApplicationSet) => string,
+    keys: string[],
+    getIcon?: (k: string) => React.ReactNode
+) => {
     const counts = getAppSetCounts(apps, filterType, filter, keys);
     return keys.map(k => {
         return {
@@ -165,7 +191,7 @@ const SyncFilter = (props: AppFilterProps) => (
     <Filter
         label='SYNC STATUS'
         selected={props.pref.syncFilter}
-        setSelected={s => props.onChange({ ...props.pref, syncFilter: s })}
+        setSelected={s => props.onChange({...props.pref, syncFilter: s})}
         options={getOptions(
             props.apps,
             'sync',
@@ -182,24 +208,28 @@ const HealthFilter = (props: AbstractAppFilterProps) => (
     <Filter
         label='HEALTH STATUS'
         selected={props.pref.healthFilter}
-        setSelected={s => isAppFilterProps(props) ? props.onChange({ ...props.pref, healthFilter: s }) : props.onChange({ ...(props as ApplicationSetFilterProps).pref, healthFilter: s })}
-        options= {isAppFilterProps(props) ? getOptions(
-            props.apps,
-            'health',
-            app => app.status.health.status,
-            Object.keys(HealthStatuses),
-            s => (
-                <HealthStatusIcon state={{ status: s as HealthStatusCode, message: '' }} noSpin={true} />
-            )
-        ) : getAppSetOptions(
-            (props as ApplicationSetFilterProps).apps,
-            'health',
-            app => getAppSetHealthStatus(app.status),
-            Object.keys(ApplicationSetConditionStatuses),
-            // s => (
-            //     <HealthStatusIcon state={{ status: s as HealthStatusCode, message: '' }} noSpin={true} />
-            // )
-        ) }
+        setSelected={s =>
+            isAppFilterProps(props) ? props.onChange({...props.pref, healthFilter: s}) : props.onChange({...(props as ApplicationSetFilterProps).pref, healthFilter: s})
+        }
+        options={
+            isAppFilterProps(props)
+                ? getOptions(
+                      props.apps,
+                      'health',
+                      app => app.status.health.status,
+                      Object.keys(HealthStatuses),
+                      s => <HealthStatusIcon state={{status: s as HealthStatusCode, message: ''}} noSpin={true} />
+                  )
+                : getAppSetOptions(
+                      (props as ApplicationSetFilterProps).apps,
+                      'health',
+                      app => getAppSetHealthStatus(app.status),
+                      Object.keys(ApplicationSetConditionStatuses)
+                      // s => (
+                      //     <HealthStatusIcon state={{ status: s as HealthStatusCode, message: '' }} noSpin={true} />
+                      // )
+                  )
+        }
     />
 );
 
@@ -223,10 +253,10 @@ const LabelsFilter = (props: AbstractAppFilterProps) => {
         values.forEach(val => suggestions.push(`${label}=${val}`));
     });
     const labelOptions = suggestions.map(s => {
-        return { label: s };
+        return {label: s};
     });
 
-    return <Filter label='LABELS' selected={props.pref.labelsFilter} setSelected={s => props.onChange({ ...props.pref, labelsFilter: s })} field={true} options={labelOptions} />;
+    return <Filter label='LABELS' selected={props.pref.labelsFilter} setSelected={s => props.onChange({...props.pref, labelsFilter: s})} field={true} options={labelOptions} />;
 };
 
 const ProjectFilter = (props: AppFilterProps) => {
@@ -236,13 +266,13 @@ const ProjectFilter = (props: AppFilterProps) => {
         () => null
     );
     const projectOptions = (projects || []).map(proj => {
-        return { label: proj.metadata.name };
+        return {label: proj.metadata.name};
     });
     return (
         <Filter
             label='PROJECTS'
             selected={props.pref.projectsFilter}
-            setSelected={s => props.onChange({ ...props.pref, projectsFilter: s })}
+            setSelected={s => props.onChange({...props.pref, projectsFilter: s})}
             field={true}
             options={projectOptions}
             error={error.state}
@@ -274,7 +304,7 @@ const ClusterFilter = (props: AppFilterProps) => {
         <Filter
             label='CLUSTERS'
             selected={props.pref.clustersFilter}
-            setSelected={s => props.onChange({ ...props.pref, clustersFilter: s })}
+            setSelected={s => props.onChange({...props.pref, clustersFilter: s})}
             field={true}
             options={clusterOptions}
             error={error.state}
@@ -290,7 +320,7 @@ const NamespaceFilter = (props: AppFilterProps) => {
         <Filter
             label='NAMESPACES'
             selected={props.pref.namespacesFilter}
-            setSelected={s => props.onChange({ ...props.pref, namespacesFilter: s })}
+            setSelected={s => props.onChange({...props.pref, namespacesFilter: s})}
             field={true}
             options={namespaceOptions}
         />
@@ -300,13 +330,13 @@ const NamespaceFilter = (props: AppFilterProps) => {
 const FavoriteFilter = (props: AbstractAppFilterProps) => {
     const ctx = React.useContext(Context);
     const onChange = (val: boolean) => {
-        ctx.navigation.goto('.', { showFavorites: val }, { replace: true });
-        services.viewPreferences.updatePreferences({ appList: { ...props.pref, showFavorites: val } });
+        ctx.navigation.goto('.', {showFavorites: val}, {replace: true});
+        services.viewPreferences.updatePreferences({appList: {...props.pref, showFavorites: val}});
     };
     return (
         <div
             className={`filter filter__item ${props.pref.showFavorites ? 'filter__item--selected' : ''}`}
-            style={{ margin: '0.5em 0', marginTop: '0.5em' }}
+            style={{margin: '0.5em 0', marginTop: '0.5em'}}
             onClick={() => onChange(!props.pref.showFavorites)}>
             <Checkbox
                 value={!!props.pref.showFavorites}
@@ -315,8 +345,8 @@ const FavoriteFilter = (props: AbstractAppFilterProps) => {
                     marginRight: '8px'
                 }}
             />
-            <div style={{ marginRight: '5px', textAlign: 'center', width: '25px' }}>
-                <i style={{ color: '#FFCE25' }} className='fas fa-star' />
+            <div style={{marginRight: '5px', textAlign: 'center', width: '25px'}}>
+                <i style={{color: '#FFCE25'}} className='fas fa-star' />
             </div>
             <div className='filter__item__label'>Favorites Only</div>
         </div>
@@ -343,7 +373,7 @@ const AutoSyncFilter = (props: AppFilterProps) => (
     <Filter
         label='AUTO SYNC'
         selected={props.pref.autoSyncFilter}
-        setSelected={s => props.onChange({ ...props.pref, autoSyncFilter: s })}
+        setSelected={s => props.onChange({...props.pref, autoSyncFilter: s})}
         options={getAutoSyncOptions(props.apps)}
         collapsed={props.collapsed || false}
     />
@@ -352,14 +382,14 @@ const AutoSyncFilter = (props: AppFilterProps) => (
 export const ApplicationsFilter = (props: AbstractAppFilterProps) => {
     return (
         <FiltersGroup content={props.children} collapsed={props.collapsed}>
-            <FavoriteFilter {...props } />
-            {isAppFilterProps(props) && <SyncFilter {...props}  /> }
+            <FavoriteFilter {...props} />
+            {isAppFilterProps(props) && <SyncFilter {...props} />}
             <HealthFilter {...props} />
             <LabelsFilter {...props} />
-            {isAppFilterProps(props) && <ProjectFilter {...props} /> }
-            {isAppFilterProps(props) && <ClusterFilter {...props } /> }
-            {isAppFilterProps(props) && <NamespaceFilter {...props } /> }
-            {isAppFilterProps(props) && <AutoSyncFilter {...props } collapsed={true} /> }
+            {isAppFilterProps(props) && <ProjectFilter {...props} />}
+            {isAppFilterProps(props) && <ClusterFilter {...props} />}
+            {isAppFilterProps(props) && <NamespaceFilter {...props} />}
+            {isAppFilterProps(props) && <AutoSyncFilter {...props} collapsed={true} />}
         </FiltersGroup>
     );
 };
diff --git a/ui/src/app/applications/components/applications-list/applications-list.tsx b/ui/src/app/applications/components/applications-list/applications-list.tsx
index 185c1aba1de58..090d0fe0cef52 100644
--- a/ui/src/app/applications/components/applications-list/applications-list.tsx
+++ b/ui/src/app/applications/components/applications-list/applications-list.tsx
@@ -1,31 +1,39 @@
-import { Autocomplete, ErrorNotification, MockupList, NotificationType, SlidingPanel, Toolbar, Tooltip } from 'argo-ui';
+import {Autocomplete, ErrorNotification, MockupList, NotificationType, SlidingPanel, Toolbar, Tooltip} from 'argo-ui';
 import * as classNames from 'classnames';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { Key, KeybindingContext, KeybindingProvider } from 'argo-ui/v2';
-import { RouteComponentProps } from 'react-router';
-import { combineLatest, from, merge, Observable } from 'rxjs';
-import { bufferTime, delay, filter, map, mergeMap, repeat, retryWhen } from 'rxjs/operators';
-import { AddAuthToToolbar, ClusterCtx, DataLoader, EmptyState, ObservableQuery, Page, Paginate, Query, Spinner } from '../../../shared/components';
-import { AuthSettingsCtx, Consumer, Context, ContextApis } from '../../../shared/context';
+import {Key, KeybindingContext, KeybindingProvider} from 'argo-ui/v2';
+import {RouteComponentProps} from 'react-router';
+import {combineLatest, from, merge, Observable} from 'rxjs';
+import {bufferTime, delay, filter, map, mergeMap, repeat, retryWhen} from 'rxjs/operators';
+import {AddAuthToToolbar, ClusterCtx, DataLoader, EmptyState, ObservableQuery, Page, Paginate, Query, Spinner} from '../../../shared/components';
+import {AuthSettingsCtx, Consumer, Context, ContextApis} from '../../../shared/context';
 import * as models from '../../../shared/models';
-import { AppsListViewKey, AppsListPreferences, AppsListViewType, HealthStatusBarPreferences, services, AbstractAppsListPreferences, AppSetsListPreferences } from '../../../shared/services';
-import { ApplicationCreatePanel } from '../application-create-panel/application-create-panel';
-import { ApplicationSyncPanel } from '../application-sync-panel/application-sync-panel';
-import { ApplicationsSyncPanel } from '../applications-sync-panel/applications-sync-panel';
+import {
+    AppsListViewKey,
+    AppsListPreferences,
+    AppsListViewType,
+    HealthStatusBarPreferences,
+    services,
+    AbstractAppsListPreferences,
+    AppSetsListPreferences
+} from '../../../shared/services';
+import {ApplicationCreatePanel} from '../application-create-panel/application-create-panel';
+import {ApplicationSyncPanel} from '../application-sync-panel/application-sync-panel';
+import {ApplicationsSyncPanel} from '../applications-sync-panel/applications-sync-panel';
 import * as AppUtils from '../utils';
-import { AbstractFilteredApp, ApplicationsFilter, getFilterResults } from './applications-filter';
-import { ApplicationsStatusBar } from './applications-status-bar';
-import { ApplicationsSummary } from './applications-summary';
-import { ApplicationsTable } from './applications-table';
-import { AbstractApplicationTilesProps, ApplicationSetTilesProps, ApplicationTiles, ApplicationTilesProps } from './applications-tiles';
-import { ApplicationsRefreshPanel } from '../applications-refresh-panel/applications-refresh-panel';
-import { useSidebarTarget } from '../../../sidebar/sidebar';
+import {AbstractFilteredApp, ApplicationsFilter, getFilterResults} from './applications-filter';
+import {ApplicationsStatusBar} from './applications-status-bar';
+import {ApplicationsSummary} from './applications-summary';
+import {ApplicationsTable} from './applications-table';
+import {AbstractApplicationTilesProps, ApplicationSetTilesProps, ApplicationTiles, ApplicationTilesProps} from './applications-tiles';
+import {ApplicationsRefreshPanel} from '../applications-refresh-panel/applications-refresh-panel';
+import {useSidebarTarget} from '../../../sidebar/sidebar';
 
 import './applications-list.scss';
 import './flex-top-bar.scss';
-import { isApp, isInvokedFromApps } from '../utils';
-import { AbstractApplication, Application, ApplicationSet } from '../../../shared/models';
+import {isApp, isInvokedFromApps} from '../utils';
+import {AbstractApplication, Application, ApplicationSet} from '../../../shared/models';
 
 const EVENTS_BUFFER_TIMEOUT = 500;
 const WATCH_RETRY_TIMEOUT = 500;
@@ -51,27 +59,23 @@ const APP_FIELDS = [
     'status.resources'
 ];
 
-const APPSET_FIELDS = [
-    'metadata.name',
-    'metadata.namespace',
-    'metadata.annotations',
-    'metadata.labels',
-    'metadata.creationTimestamp',
-    'metadata.deletionTimestamp',
-    'spec',
-];
+const APPSET_FIELDS = ['metadata.name', 'metadata.namespace', 'metadata.annotations', 'metadata.labels', 'metadata.creationTimestamp', 'metadata.deletionTimestamp', 'spec'];
 
-const APP_LIST_FIELDS = AppUtils.isInvokedFromApps() ? ['metadata.resourceVersion', ...APP_FIELDS.map(field => `items.${field}`)] : ['metadata.resourceVersion', ...APPSET_FIELDS.map(field => `items.${field}`)];
-const APP_WATCH_FIELDS = AppUtils.isInvokedFromApps() ? ['result.type', ...APP_FIELDS.map(field => `result.application.${field}`)] : ['result.type', ...APPSET_FIELDS.map(field => `result.application.${field}`)];
+const APP_LIST_FIELDS = AppUtils.isInvokedFromApps()
+    ? ['metadata.resourceVersion', ...APP_FIELDS.map(field => `items.${field}`)]
+    : ['metadata.resourceVersion', ...APPSET_FIELDS.map(field => `items.${field}`)];
+const APP_WATCH_FIELDS = AppUtils.isInvokedFromApps()
+    ? ['result.type', ...APP_FIELDS.map(field => `result.application.${field}`)]
+    : ['result.type', ...APPSET_FIELDS.map(field => `result.application.${field}`)];
 
 function loadApplications(projects: string[], appNamespace: string): Observable<models.AbstractApplication[]> {
-    return from(services.applications.list(projects, { appNamespace, fields: APP_LIST_FIELDS })).pipe(
+    return from(services.applications.list(projects, {appNamespace, fields: APP_LIST_FIELDS})).pipe(
         mergeMap(applicationsList => {
             const applications = applicationsList.items;
             return merge(
                 from([applications]),
                 services.applications
-                    .watch({ projects, resourceVersion: applicationsList.metadata.resourceVersion }, { fields: APP_WATCH_FIELDS })
+                    .watch({projects, resourceVersion: applicationsList.metadata.resourceVersion}, {fields: APP_WATCH_FIELDS})
                     .pipe(repeat())
                     .pipe(retryWhen(errors => errors.pipe(delay(WATCH_RETRY_TIMEOUT))))
                     // batch events to avoid constant re-rendering and improve UI performance
@@ -96,17 +100,17 @@ function loadApplications(projects: string[], appNamespace: string): Observable<
                                         break;
                                 }
                             });
-                            return { applications, updated: appChanges.length > 0 };
+                            return {applications, updated: appChanges.length > 0};
                         })
                     )
                     .pipe(filter(item => item.updated))
-                    .pipe(map(item => isInvokedFromApps() ? item.applications as models.Application[] : item.applications as models.ApplicationSet[]))
+                    .pipe(map(item => (isInvokedFromApps() ? (item.applications as models.Application[]) : (item.applications as models.ApplicationSet[]))))
             );
         })
     );
 }
 
-const ViewPref = ({ children }: { children: (pref: AbstractAppsListPreferences & { page: number; search: string }) => React.ReactNode }) => (
+const ViewPref = ({children}: {children: (pref: AbstractAppsListPreferences & {page: number; search: string}) => React.ReactNode}) => (
     <ObservableQuery>
         {q => (
             <DataLoader
@@ -114,7 +118,7 @@ const ViewPref = ({ children }: { children: (pref: AbstractAppsListPreferences &
                     combineLatest([services.viewPreferences.getPreferences().pipe(map(item => item.appList)), q]).pipe(
                         map(items => {
                             const params = items[1];
-                            const viewPref: AbstractAppsListPreferences = { ...items[0] };
+                            const viewPref: AbstractAppsListPreferences = {...items[0]};
                             if (isInvokedFromApps()) {
                                 // App specific filters
                                 // TODO: the knowledge about what is relevant for Apps and what for AppSets should be elsewhere and not here
@@ -170,7 +174,7 @@ const ViewPref = ({ children }: { children: (pref: AbstractAppsListPreferences &
                                     .map(decodeURIComponent)
                                     .filter(item => !!item);
                             }
-                            return { ...viewPref, page: parseInt(params.get('page') || '0', 10), search: params.get('search') || '' };
+                            return {...viewPref, page: parseInt(params.get('page') || '0', 10), search: params.get('search') || ''};
                         })
                     )
                 }>
@@ -180,13 +184,18 @@ const ViewPref = ({ children }: { children: (pref: AbstractAppsListPreferences &
     </ObservableQuery>
 );
 
-function filterApps(applications: AbstractApplication[], pref: AbstractAppsListPreferences, search: string): { filteredApps: AbstractApplication[]; filterResults: AbstractFilteredApp[] } {
+function filterApps(
+    applications: AbstractApplication[],
+    pref: AbstractAppsListPreferences,
+    search: string
+): {filteredApps: AbstractApplication[]; filterResults: AbstractFilteredApp[]} {
     applications = applications.map(app => {
         let isAppOfAppsPattern = false;
-        if (!isInvokedFromApps()) { // AppSet behaves like an app of apps
+        if (!isInvokedFromApps()) {
+            // AppSet behaves like an app of apps
             isAppOfAppsPattern = true;
-        }
-        else { // It is an App and may or may not be app-of-apps pattern
+        } else {
+            // It is an App and may or may not be app-of-apps pattern
             for (const resource of (app as models.Application).status.resources) {
                 if (resource.kind === 'Application') {
                     isAppOfAppsPattern = true;
@@ -194,9 +203,11 @@ function filterApps(applications: AbstractApplication[], pref: AbstractAppsListP
                 }
             }
         }
-        return { ...app, isAppOfAppsPattern };
+        return {...app, isAppOfAppsPattern};
     });
-    const filterResults = isInvokedFromApps() ? getFilterResults(applications as Application[], pref as AppsListPreferences) : getFilterResults(applications as ApplicationSet[], pref as AppSetsListPreferences);
+    const filterResults = isInvokedFromApps()
+        ? getFilterResults(applications as Application[], pref as AppsListPreferences)
+        : getFilterResults(applications as ApplicationSet[], pref as AppSetsListPreferences);
     return {
         filterResults,
         filteredApps: filterResults.filter(
@@ -213,19 +224,19 @@ function tryJsonParse(input: string) {
     }
 }
 
-const SearchBar = (props: { content: string; ctx: ContextApis; apps: models.AbstractApplication[] }) => {
-    const { content, ctx, apps } = { ...props };
+const SearchBar = (props: {content: string; ctx: ContextApis; apps: models.AbstractApplication[]}) => {
+    const {content, ctx, apps} = {...props};
 
     const searchBar = React.useRef<HTMLDivElement>(null);
 
     const query = new URLSearchParams(window.location.search);
     const appInput = tryJsonParse(query.get('new'));
 
-    const { useKeybinding } = React.useContext(KeybindingContext);
+    const {useKeybinding} = React.useContext(KeybindingContext);
     const [isFocused, setFocus] = React.useState(false);
     const useAuthSettingsCtx = React.useContext(AuthSettingsCtx);
 
-    const placeholderText = isInvokedFromApps() ? 'Search applications...' : 'Search application sets...'
+    const placeholderText = isInvokedFromApps() ? 'Search applications...' : 'Search application sets...';
 
     useKeybinding({
         keys: Key.SLASH,
@@ -258,7 +269,7 @@ const SearchBar = (props: { content: string; ctx: ContextApis; apps: models.Abst
                 <div className='applications-list__search' ref={searchBar}>
                     <i
                         className='fa fa-search'
-                        style={{ marginRight: '9px', cursor: 'pointer' }}
+                        style={{marginRight: '9px', cursor: 'pointer'}}
                         onClick={() => {
                             if (searchBar.current) {
                                 searchBar.current.querySelector('input').focus();
@@ -273,17 +284,17 @@ const SearchBar = (props: { content: string; ctx: ContextApis; apps: models.Abst
                                 inputProps.onFocus(e);
                             }
                         }}
-                        style={{ fontSize: '14px' }}
+                        style={{fontSize: '14px'}}
                         className='argo-field'
                         placeholder={placeholderText}
                     />
                     <div className='keyboard-hint'>/</div>
                     {content && (
-                        <i className='fa fa-times' onClick={() => ctx.navigation.goto('.', { search: null }, { replace: true })} style={{ cursor: 'pointer', marginLeft: '5px' }} />
+                        <i className='fa fa-times' onClick={() => ctx.navigation.goto('.', {search: null}, {replace: true})} style={{cursor: 'pointer', marginLeft: '5px'}} />
                     )}
                 </div>
             )}
-            wrapperProps={{ className: 'applications-list__search-wrapper' }}
+            wrapperProps={{className: 'applications-list__search-wrapper'}}
             renderItem={item => (
                 <React.Fragment>
                     <i className='icon argo-icon-application' /> {item.label}
@@ -292,14 +303,14 @@ const SearchBar = (props: { content: string; ctx: ContextApis; apps: models.Abst
             onSelect={val => {
                 ctx.navigation.goto(`./${val}`);
             }}
-            onChange={e => ctx.navigation.goto('.', { search: e.target.value }, { replace: true })}
+            onChange={e => ctx.navigation.goto('.', {search: e.target.value}, {replace: true})}
             value={content || ''}
             items={apps.map(app => AppUtils.appQualifiedName(app, useAuthSettingsCtx?.appsInAnyNamespaceEnabled))}
         />
     );
 };
 
-const FlexTopBar = (props: { toolbar: Toolbar | Observable<Toolbar> }) => {
+const FlexTopBar = (props: {toolbar: Toolbar | Observable<Toolbar>}) => {
     const ctx = React.useContext(Context);
     const loadToolbar = AddAuthToToolbar(props.toolbar, ctx);
     return (
@@ -317,9 +328,9 @@ const FlexTopBar = (props: { toolbar: Toolbar | Observable<Toolbar> }) => {
                                                 qe-id={item.qeId}
                                                 className='argo-button argo-button--base'
                                                 onClick={() => item.action()}
-                                                style={{ marginRight: 2 }}
+                                                style={{marginRight: 2}}
                                                 key={i}>
-                                                {item.iconClassName && <i className={item.iconClassName} style={{ marginLeft: '-5px', marginRight: '5px' }} />}
+                                                {item.iconClassName && <i className={item.iconClassName} style={{marginLeft: '-5px', marginRight: '5px'}} />}
                                                 <span className='show-for-large'>{item.title}</span>
                                             </button>
                                         ))}
@@ -345,7 +356,7 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
     const clusters = React.useMemo(() => services.clusters.list(), []);
     const [isAppCreatePending, setAppCreatePending] = React.useState(false);
     const loaderRef = React.useRef<DataLoader>();
-    const { List, Summary, Tiles } = AppsListViewKey;
+    const {List, Summary, Tiles} = AppsListViewKey;
 
     function refreshApp(appName: string, appNamespace: string) {
         // app refreshing might be done too quickly so that UI might miss it due to event batching
@@ -362,7 +373,7 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
     }
 
     function onFilterPrefChanged(ctx: ContextApis, newPref: AbstractAppsListPreferences) {
-        services.viewPreferences.updatePreferences({ appList: newPref });
+        services.viewPreferences.updatePreferences({appList: newPref});
         ctx.navigation.goto(
             '.',
 
@@ -375,12 +386,11 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
                 cluster: isInvokedFromApps() ? (newPref as AppsListPreferences).clustersFilter.join(',') : '',
                 labels: newPref.labelsFilter.map(encodeURIComponent).join(',')
             },
-            { replace: true }
-
+            {replace: true}
         );
     }
 
-    const pageTitlePrefix = isInvokedFromApps() ? "Applications " : "ApplicationSets "
+    const pageTitlePrefix = isInvokedFromApps() ? 'Applications ' : 'ApplicationSets ';
 
     function getPageTitle(view: string) {
         switch (view) {
@@ -394,42 +404,37 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
         return '';
     }
 
-
     const sidebarTarget = useSidebarTarget();
 
-    const getEmptyStateText = isInvokedFromApps() ? 'No matching applications found' : 'No matching application sets found'
+    const getEmptyStateText = isInvokedFromApps() ? 'No matching applications found' : 'No matching application sets found';
 
     const applicationTilesProps = (ctx: ContextApis, data: models.Application[]): ApplicationTilesProps => {
         return {
             applications: data,
-            syncApplication: (appName, appNamespace) =>
-                ctx.navigation.goto('.', { syncApp: appName, appNamespace }, { replace: true }),
+            syncApplication: (appName, appNamespace) => ctx.navigation.goto('.', {syncApp: appName, appNamespace}, {replace: true}),
 
             refreshApplication: refreshApp,
-            deleteApplication: (appName, appNamespace) =>
-                AppUtils.deleteApplication(appName, appNamespace, ctx)
-        }
-    }
+            deleteApplication: (appName, appNamespace) => AppUtils.deleteApplication(appName, appNamespace, ctx)
+        };
+    };
 
     const applicationSetTilesProps = (ctx: ContextApis, data: models.ApplicationSet[]): ApplicationSetTilesProps => {
         return {
             applications: data,
-            deleteApplication: (appName, appNamespace) =>
-                AppUtils.deleteApplication(appName, appNamespace, ctx)
-        }
-    }
+            deleteApplication: (appName, appNamespace) => AppUtils.deleteApplication(appName, appNamespace, ctx)
+        };
+    };
 
     const abstractApplicationTilesProps = (ctx: ContextApis, applications: models.AbstractApplication[]): AbstractApplicationTilesProps => {
         if (isApp(applications[0])) {
-            return applicationTilesProps(ctx, applications)
+            return applicationTilesProps(ctx, applications);
+        } else {
+            return applicationSetTilesProps(ctx, applications);
         }
-        else {
-            return applicationSetTilesProps(ctx, applications)
-        }
-    }
+    };
 
     function getProjectsFilter(pref: AbstractAppsListPreferences): string[] {
-        return isInvokedFromApps() ? (pref as AppsListPreferences & { page: number, search: string }).projectsFilter : []
+        return isInvokedFromApps() ? (pref as AppsListPreferences & {page: number; search: string}).projectsFilter : [];
     }
 
     return (
@@ -443,12 +448,23 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
                                     key={pref.view}
                                     title={getPageTitle(pref.view)}
                                     useTitleOnly={true}
-                                    toolbar={isInvokedFromApps() ? { breadcrumbs: [{ title: 'Applications', path: '/applications' }] } : { breadcrumbs: [{ title: 'Settings', path: '/settings' }, { title: 'ApplicationSets' }] }}
+                                    toolbar={
+                                        isInvokedFromApps()
+                                            ? {breadcrumbs: [{title: 'Applications', path: '/applications'}]}
+                                            : {breadcrumbs: [{title: 'Settings', path: '/settings'}, {title: 'ApplicationSets'}]}
+                                    }
                                     hideAuth={true}>
                                     <DataLoader
-                                        input={isInvokedFromApps() ? (pref as AppsListPreferences & { page: number, search: string }).projectsFilter?.join(',') : ''}
+                                        input={isInvokedFromApps() ? (pref as AppsListPreferences & {page: number; search: string}).projectsFilter?.join(',') : ''}
                                         ref={loaderRef}
-                                        load={() => AppUtils.handlePageVisibility(() => loadApplications(isInvokedFromApps() ? (pref as AppsListPreferences & { page: number, search: string }).projectsFilter : [], query.get('appNamespace')))}
+                                        load={() =>
+                                            AppUtils.handlePageVisibility(() =>
+                                                loadApplications(
+                                                    isInvokedFromApps() ? (pref as AppsListPreferences & {page: number; search: string}).projectsFilter : [],
+                                                    query.get('appNamespace')
+                                                )
+                                            )
+                                        }
                                         loadingRenderer={() => (
                                             <div className='argo-container'>
                                                 <MockupList height={100} marginTop={30} />
@@ -456,7 +472,13 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
                                         )}>
                                         {(applications: models.AbstractApplication[]) => {
                                             const healthBarPrefs = pref.statusBarView || ({} as HealthStatusBarPreferences);
-                                            const { filteredApps, filterResults } = filterApps(isInvokedFromApps() ? applications as Application[] : applications as ApplicationSet[], isInvokedFromApps() ? (pref as AppsListPreferences & { page: number, search: string }) : (pref as AppSetsListPreferences & { page: number, search: string }), pref.search);
+                                            const {filteredApps, filterResults} = filterApps(
+                                                isInvokedFromApps() ? (applications as Application[]) : (applications as ApplicationSet[]),
+                                                isInvokedFromApps()
+                                                    ? (pref as AppsListPreferences & {page: number; search: string})
+                                                    : (pref as AppSetsListPreferences & {page: number; search: string}),
+                                                pref.search
+                                            );
                                             return (
                                                 <React.Fragment>
                                                     <FlexTopBar
@@ -466,9 +488,10 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
                                                                     <Query>{q => <SearchBar content={q.get('search')} apps={applications} ctx={ctx} />}</Query>
                                                                     <Tooltip content='Toggle Health Status Bar'>
                                                                         <button
-                                                                            className={`applications-list__accordion argo-button argo-button--base${healthBarPrefs.showHealthStatusBar ? '-o' : ''
-                                                                                }`}
-                                                                            style={{ border: 'none' }}
+                                                                            className={`applications-list__accordion argo-button argo-button--base${
+                                                                                healthBarPrefs.showHealthStatusBar ? '-o' : ''
+                                                                            }`}
+                                                                            style={{border: 'none'}}
                                                                             onClick={() => {
                                                                                 healthBarPrefs.showHealthStatusBar = !healthBarPrefs.showHealthStatusBar;
                                                                                 services.viewPreferences.updatePreferences({
@@ -484,58 +507,56 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
                                                                             <i className={`fas fa-ruler-horizontal`} />
                                                                         </button>
                                                                     </Tooltip>
-                                                                    <div className='applications-list__view-type' style={{ marginLeft: 'auto' }}>
+                                                                    <div className='applications-list__view-type' style={{marginLeft: 'auto'}}>
                                                                         <i
-                                                                            className={classNames('fa fa-th', { selected: pref.view === Tiles }, 'menu_icon')}
+                                                                            className={classNames('fa fa-th', {selected: pref.view === Tiles}, 'menu_icon')}
                                                                             title='Tiles'
                                                                             onClick={() => {
-                                                                                ctx.navigation.goto('.', { view: Tiles });
-                                                                                services.viewPreferences.updatePreferences({ appList: { ...pref, view: Tiles } });
+                                                                                ctx.navigation.goto('.', {view: Tiles});
+                                                                                services.viewPreferences.updatePreferences({appList: {...pref, view: Tiles}});
                                                                             }}
                                                                         />
                                                                         <i
-                                                                            className={classNames('fa fa-th-list', { selected: pref.view === List }, 'menu_icon')}
+                                                                            className={classNames('fa fa-th-list', {selected: pref.view === List}, 'menu_icon')}
                                                                             title='List'
                                                                             onClick={() => {
-                                                                                ctx.navigation.goto('.', { view: List });
-                                                                                services.viewPreferences.updatePreferences({ appList: { ...pref, view: List } });
+                                                                                ctx.navigation.goto('.', {view: List});
+                                                                                services.viewPreferences.updatePreferences({appList: {...pref, view: List}});
                                                                             }}
                                                                         />
                                                                         <i
-                                                                            className={classNames('fa fa-chart-pie', { selected: pref.view === Summary }, 'menu_icon')}
+                                                                            className={classNames('fa fa-chart-pie', {selected: pref.view === Summary}, 'menu_icon')}
                                                                             title='Summary'
                                                                             onClick={() => {
-                                                                                ctx.navigation.goto('.', { view: Summary });
-                                                                                services.viewPreferences.updatePreferences({ appList: { ...pref, view: Summary } });
+                                                                                ctx.navigation.goto('.', {view: Summary});
+                                                                                services.viewPreferences.updatePreferences({appList: {...pref, view: Summary}});
                                                                             }}
                                                                         />
                                                                     </div>
                                                                 </React.Fragment>
                                                             ),
                                                             actionMenu: {
-                                                                items: isApp(applications[0]) ?
-                                                                    [
-                                                                        {
-                                                                            title: 'New App',
-                                                                            iconClassName: 'fa fa-plus',
-                                                                            qeId: 'applications-list-button-new-app',
-                                                                            action: () => ctx.navigation.goto('.', { new: '{}' }, { replace: true })
-                                                                        },
-                                                                        {
-                                                                            title: 'Sync Apps',
-                                                                            iconClassName: 'fa fa-sync',
-                                                                            action: () => ctx.navigation.goto('.', { syncApps: true }, { replace: true })
-                                                                        },
-                                                                        {
-                                                                            title: 'Refresh Apps',
-                                                                            iconClassName: 'fa fa-redo',
-                                                                            action: () => ctx.navigation.goto('.', { refreshApps: true }, { replace: true })
-                                                                        }
-                                                                    ]
+                                                                items: isApp(applications[0])
+                                                                    ? [
+                                                                          {
+                                                                              title: 'New App',
+                                                                              iconClassName: 'fa fa-plus',
+                                                                              qeId: 'applications-list-button-new-app',
+                                                                              action: () => ctx.navigation.goto('.', {new: '{}'}, {replace: true})
+                                                                          },
+                                                                          {
+                                                                              title: 'Sync Apps',
+                                                                              iconClassName: 'fa fa-sync',
+                                                                              action: () => ctx.navigation.goto('.', {syncApps: true}, {replace: true})
+                                                                          },
+                                                                          {
+                                                                              title: 'Refresh Apps',
+                                                                              iconClassName: 'fa fa-redo',
+                                                                              action: () => ctx.navigation.goto('.', {refreshApps: true}, {replace: true})
+                                                                          }
+                                                                      ]
                                                                     : []
                                                             }
-
-
                                                         }}
                                                     />
                                                     <div className='applications-list'>
@@ -546,7 +567,7 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
                                                                 <button
                                                                     qe-id='applications-list-button-create-application'
                                                                     className='argo-button argo-button--base'
-                                                                    onClick={() => ctx.navigation.goto('.', { new: JSON.stringify({}) }, { replace: true })}>
+                                                                    onClick={() => ctx.navigation.goto('.', {new: JSON.stringify({})}, {replace: true})}>
                                                                     Create application
                                                                 </button>
                                                             </EmptyState>
@@ -558,7 +579,11 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
                                                                             <ApplicationsFilter
                                                                                 apps={filterResults}
                                                                                 onChange={newPrefs => onFilterPrefChanged(ctx, newPrefs)}
-                                                                                pref={isInvokedFromApps() ? pref as AppsListPreferences & { page: number; search: string; } : pref as AppSetsListPreferences}
+                                                                                pref={
+                                                                                    isInvokedFromApps()
+                                                                                        ? (pref as AppsListPreferences & {page: number; search: string})
+                                                                                        : (pref as AppSetsListPreferences)
+                                                                                }
                                                                                 collapsed={allpref.hideSidebar}
                                                                             />
                                                                         )}
@@ -580,9 +605,10 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
                                                                                     <a
                                                                                         onClick={() => {
                                                                                             if (isInvokedFromApps()) {
-                                                                                                AppsListPreferences.clearFilters(pref as AppsListPreferences & { page: number; search: string; });
-                                                                                            }
-                                                                                            else {
+                                                                                                AppsListPreferences.clearFilters(
+                                                                                                    pref as AppsListPreferences & {page: number; search: string}
+                                                                                                );
+                                                                                            } else {
                                                                                                 AppSetsListPreferences.clearFilters(pref as AppSetsListPreferences);
                                                                                             }
                                                                                             onFilterPrefChanged(ctx, pref);
@@ -592,37 +618,40 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
                                                                                 </h5>
                                                                             </EmptyState>
                                                                         )}
-                                                                        sortOptions={isApp(applications[0]) ? [
-                                                                            { title: 'Name', compare: (a, b) => a.metadata.name.localeCompare(b.metadata.name) },
-                                                                            {
-                                                                                title: 'Created At',
-                                                                                compare: (b, a) => a.metadata.creationTimestamp.localeCompare(b.metadata.creationTimestamp)
-                                                                            },
-                                                                            {
-                                                                                title: 'Synchronized',
-                                                                                compare: (b, a) =>
-                                                                                    a.status.operationState?.finishedAt?.localeCompare(b.status.operationState?.finishedAt)
-                                                                            }
-                                                                        ] : [
-                                                                            { title: 'Name', compare: (a, b) => a.metadata.name.localeCompare(b.metadata.name) },
-                                                                            {
-                                                                                title: 'Created At',
-                                                                                compare: (b, a) => a.metadata.creationTimestamp.localeCompare(b.metadata.creationTimestamp)
-                                                                            },
-                                                                        ]
-
+                                                                        sortOptions={
+                                                                            isApp(applications[0])
+                                                                                ? [
+                                                                                      {title: 'Name', compare: (a, b) => a.metadata.name.localeCompare(b.metadata.name)},
+                                                                                      {
+                                                                                          title: 'Created At',
+                                                                                          compare: (b, a) =>
+                                                                                              a.metadata.creationTimestamp.localeCompare(b.metadata.creationTimestamp)
+                                                                                      },
+                                                                                      {
+                                                                                          title: 'Synchronized',
+                                                                                          compare: (b, a) =>
+                                                                                              a.status.operationState?.finishedAt?.localeCompare(
+                                                                                                  b.status.operationState?.finishedAt
+                                                                                              )
+                                                                                      }
+                                                                                  ]
+                                                                                : [
+                                                                                      {title: 'Name', compare: (a, b) => a.metadata.name.localeCompare(b.metadata.name)},
+                                                                                      {
+                                                                                          title: 'Created At',
+                                                                                          compare: (b, a) =>
+                                                                                              a.metadata.creationTimestamp.localeCompare(b.metadata.creationTimestamp)
+                                                                                      }
+                                                                                  ]
                                                                         }
                                                                         data={filteredApps}
-                                                                        onPageChange={page => ctx.navigation.goto('.', { page })}>
+                                                                        onPageChange={page => ctx.navigation.goto('.', {page})}>
                                                                         {data =>
-                                                                            (pref.view === 'tiles' && (
-                                                                                <ApplicationTiles  {...(abstractApplicationTilesProps(ctx, data))}
-                                                                                />
-                                                                            )) || (
+                                                                            (pref.view === 'tiles' && <ApplicationTiles {...abstractApplicationTilesProps(ctx, data)} />) || (
                                                                                 <ApplicationsTable
                                                                                     applications={data}
                                                                                     syncApplication={(appName, appNamespace) =>
-                                                                                        ctx.navigation.goto('.', { syncApp: appName, appNamespace }, { replace: true })
+                                                                                        ctx.navigation.goto('.', {syncApp: appName, appNamespace}, {replace: true})
                                                                                     }
                                                                                     refreshApplication={refreshApp}
                                                                                     deleteApplication={(appName, appNamespace) =>
@@ -639,18 +668,18 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
                                                             <ApplicationsSyncPanel
                                                                 key='syncsPanel'
                                                                 show={syncAppsInput}
-                                                                hide={() => ctx.navigation.goto('.', { syncApps: null }, { replace: true })}
+                                                                hide={() => ctx.navigation.goto('.', {syncApps: null}, {replace: true})}
                                                                 apps={filteredApps}
                                                             />
                                                         )}
-                                                        {!isApp(applications[0]) &&
-                                                            (<ApplicationsRefreshPanel
+                                                        {!isApp(applications[0]) && (
+                                                            <ApplicationsRefreshPanel
                                                                 key='refreshPanel'
                                                                 show={refreshAppsInput}
-                                                                hide={() => ctx.navigation.goto('.', { refreshApps: null }, { replace: true })}
+                                                                hide={() => ctx.navigation.goto('.', {refreshApps: null}, {replace: true})}
                                                                 apps={filteredApps}
                                                             />
-                                                            )}
+                                                        )}
                                                     </div>
                                                     {isApp(applications[0]) && (
                                                         <ObservableQuery>
@@ -670,7 +699,7 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
                                                                             key='syncPanel'
                                                                             application={app}
                                                                             selectedResource={'all'}
-                                                                            hide={() => ctx.navigation.goto('.', { syncApp: null }, { replace: true })}
+                                                                            hide={() => ctx.navigation.goto('.', {syncApp: null}, {replace: true})}
                                                                         />
                                                                     )}
                                                                 </DataLoader>
@@ -679,7 +708,7 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
                                                     )}
                                                     <SlidingPanel
                                                         isShown={!!appInput}
-                                                        onClose={() => ctx.navigation.goto('.', { new: null }, { replace: true })}
+                                                        onClose={() => ctx.navigation.goto('.', {new: null}, {replace: true})}
                                                         header={
                                                             <div>
                                                                 {isApp(applications[0]) && (
@@ -688,13 +717,13 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
                                                                         className='argo-button argo-button--base'
                                                                         disabled={isAppCreatePending}
                                                                         onClick={() => createApi && createApi.submitForm(null)}>
-                                                                        <Spinner show={isAppCreatePending} style={{ marginRight: '5px' }} />
+                                                                        <Spinner show={isAppCreatePending} style={{marginRight: '5px'}} />
                                                                         Create
                                                                     </button>
                                                                 )}{' '}
                                                                 <button
                                                                     qe-id='applications-list-button-cancel'
-                                                                    onClick={() => ctx.navigation.goto('.', { new: null }, { replace: true })}
+                                                                    onClick={() => ctx.navigation.goto('.', {new: null}, {replace: true})}
                                                                     className='argo-button argo-button--base-o'>
                                                                     Cancel
                                                                 </button>
@@ -709,7 +738,7 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
                                                                     setAppCreatePending(true);
                                                                     try {
                                                                         await services.applications.create(app);
-                                                                        ctx.navigation.goto('.', { new: null }, { replace: true });
+                                                                        ctx.navigation.goto('.', {new: null}, {replace: true});
                                                                     } catch (e) {
                                                                         ctx.notifications.show({
                                                                             content: <ErrorNotification title='Unable to create application' e={e} />,
@@ -720,7 +749,7 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
                                                                     }
                                                                 }}
                                                                 app={appInput}
-                                                                onAppChanged={app => ctx.navigation.goto('.', { new: JSON.stringify(app) }, { replace: true })}
+                                                                onAppChanged={app => ctx.navigation.goto('.', {new: JSON.stringify(app)}, {replace: true})}
                                                             />
                                                         )}
                                                     </SlidingPanel>
diff --git a/ui/src/app/applications/components/applications-list/applications-status-bar.tsx b/ui/src/app/applications/components/applications-list/applications-status-bar.tsx
index d998998909466..510770ef1e793 100644
--- a/ui/src/app/applications/components/applications-list/applications-status-bar.tsx
+++ b/ui/src/app/applications/components/applications-list/applications-status-bar.tsx
@@ -1,25 +1,26 @@
-import { Tooltip } from 'argo-ui/v2';
+import {Tooltip} from 'argo-ui/v2';
 import * as React from 'react';
-import { COLORS } from '../../../shared/components';
-import { Consumer } from '../../../shared/context';
+import {COLORS} from '../../../shared/components';
+import {Consumer} from '../../../shared/context';
 import * as models from '../../../shared/models';
 
 import './applications-status-bar.scss';
-import { getAppSetHealthStatus, isInvokedFromApps } from '../utils';
-import { Application, ApplicationSet } from '../../../shared/models';
+import {getAppSetHealthStatus, isInvokedFromApps} from '../utils';
+import {Application, ApplicationSet} from '../../../shared/models';
 
 export interface ApplicationsStatusBarProps {
     applications: models.AbstractApplication[];
 }
 
-export const ApplicationsStatusBar = ({ applications }: ApplicationsStatusBarProps) => {
+export const ApplicationsStatusBar = ({applications}: ApplicationsStatusBarProps) => {
     const readings: any[] = [];
     if (isInvokedFromApps()) {
-        readings.push({
-            name: 'Healthy',
-            value: applications.filter(app => (app as Application).status.health.status === 'Healthy').length,
-            color: COLORS.health.healthy
-        },
+        readings.push(
+            {
+                name: 'Healthy',
+                value: applications.filter(app => (app as Application).status.health.status === 'Healthy').length,
+                color: COLORS.health.healthy
+            },
             {
                 name: 'Progressing',
                 value: applications.filter(app => (app as Application).status.health.status === 'Progressing').length,
@@ -44,9 +45,9 @@ export const ApplicationsStatusBar = ({ applications }: ApplicationsStatusBarPro
                 name: 'Unknown',
                 value: applications.filter(app => (app as Application).status.health.status === 'Unknown').length,
                 color: COLORS.health.unknown
-            })
-    }
-    else {
+            }
+        );
+    } else {
         readings.push(
             {
                 name: 'Healthy',
@@ -84,7 +85,7 @@ export const ApplicationsStatusBar = ({ applications }: ApplicationsStatusBarPro
                                 readings.map((item, i) => {
                                     if (item.value > 0) {
                                         return (
-                                            <div className='status-bar__segment' style={{ backgroundColor: item.color, width: (item.value / totalItems) * 100 + '%' }} key={i}>
+                                            <div className='status-bar__segment' style={{backgroundColor: item.color, width: (item.value / totalItems) * 100 + '%'}} key={i}>
                                                 <Tooltip content={`${item.value} ${item.name}`} inverted={true}>
                                                     <div className='status-bar__segment__fill' />
                                                 </Tooltip>
diff --git a/ui/src/app/applications/components/applications-list/applications-summary.tsx b/ui/src/app/applications/components/applications-list/applications-summary.tsx
index 1ceb0750286fe..f9c267c91f4c1 100644
--- a/ui/src/app/applications/components/applications-list/applications-summary.tsx
+++ b/ui/src/app/applications/components/applications-list/applications-summary.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 const PieChart = require('react-svg-piechart').default;
 
-import { COLORS } from '../../../shared/components';
+import {COLORS} from '../../../shared/components';
 import * as models from '../../../shared/models';
-import { Application, ApplicationSet, HealthStatusCode, SyncStatusCode } from '../../../shared/models';
-import { ComparisonStatusIcon, HealthStatusIcon, getAppSetHealthStatus, isInvokedFromApps } from '../utils';
+import {Application, ApplicationSet, HealthStatusCode, SyncStatusCode} from '../../../shared/models';
+import {ComparisonStatusIcon, HealthStatusIcon, getAppSetHealthStatus, isInvokedFromApps} from '../utils';
 
 const healthColors = new Map<models.HealthStatusCode, string>();
 healthColors.set('Unknown', COLORS.health.unknown);
@@ -24,69 +24,74 @@ syncColors.set('Unknown', COLORS.sync.unknown);
 syncColors.set('Synced', COLORS.sync.synced);
 syncColors.set('OutOfSync', COLORS.sync.out_of_sync);
 
-export const ApplicationsSummary = ({ applications }: { applications: models.AbstractApplication[] }) => {
+export const ApplicationsSummary = ({applications}: {applications: models.AbstractApplication[]}) => {
     const sync = new Map<string, number>();
     const health = new Map<string, number>();
 
     // if (isApp(applications[0])) {
-        if (isInvokedFromApps()) {
+    if (isInvokedFromApps()) {
         applications.forEach(app => sync.set((app as Application).status.sync.status, (sync.get((app as Application).status.sync.status) || 0) + 1));
         applications.forEach(app => health.set((app as Application).status.health.status, (health.get((app as Application).status.health.status) || 0) + 1));
+    } else {
+        applications.forEach(app =>
+            health.set(getAppSetHealthStatus((app as ApplicationSet).status), (health.get(getAppSetHealthStatus((app as ApplicationSet).status)) || 0) + 1)
+        );
     }
-    else {
-        applications.forEach(app => health.set(getAppSetHealthStatus((app as ApplicationSet).status), (health.get(getAppSetHealthStatus((app as ApplicationSet).status)) || 0) + 1));
-    }
-    
-    const attributes = isInvokedFromApps() ? ([{
-        title: 'APPLICATIONS',
-        value: applications.length
-    },
-    {
-        title: 'SYNCED',
-        value: applications.filter(app => app.status.sync.status === 'Synced').length
-    },
-    {
-        title: 'HEALTHY',
-        value: applications.filter(app => app.status.health.status === 'Healthy').length
-    },
-    {
-        title: 'CLUSTERS',
-        value: new Set(applications.map(app => app.spec.destination.server)).size
-    },
-    {
-        title: 'NAMESPACES',
-        value: new Set(applications.map(app => app.spec.destination.namespace)).size
-    }]) : ([
-        {
-            title: 'APPLICATIONSETS',
-            value: applications.length
-        },
-        {
-            title: 'HEALTHY',
-            value: applications.filter(app => getAppSetHealthStatus((app as ApplicationSet).status) === 'True').length
-        }
-    ]);
 
-    
+    const attributes = isInvokedFromApps()
+        ? [
+              {
+                  title: 'APPLICATIONS',
+                  value: applications.length
+              },
+              {
+                  title: 'SYNCED',
+                  value: applications.filter(app => app.status.sync.status === 'Synced').length
+              },
+              {
+                  title: 'HEALTHY',
+                  value: applications.filter(app => app.status.health.status === 'Healthy').length
+              },
+              {
+                  title: 'CLUSTERS',
+                  value: new Set(applications.map(app => app.spec.destination.server)).size
+              },
+              {
+                  title: 'NAMESPACES',
+                  value: new Set(applications.map(app => app.spec.destination.namespace)).size
+              }
+          ]
+        : [
+              {
+                  title: 'APPLICATIONSETS',
+                  value: applications.length
+              },
+              {
+                  title: 'HEALTHY',
+                  value: applications.filter(app => getAppSetHealthStatus((app as ApplicationSet).status) === 'True').length
+              }
+          ];
 
-    const charts = isInvokedFromApps() ? ([
-        {
-            title: 'Sync',
-            data: Array.from(sync.keys()).map(key => ({ title: key, value: sync.get(key), color: syncColors.get(key as models.SyncStatusCode) })),
-            legend: syncColors as Map<string, string>
-        },
-        {
-            title: 'Health',
-            data: Array.from(health.keys()).map(key => ({ title: key, value: health.get(key), color: healthColors.get(key as models.HealthStatusCode) })),
-            legend: healthColors as Map<string, string>
-        }
-    ]) : ([
-        {
-            title: 'Health',
-            data: Array.from(health.keys()).map(key => ({ title: key, value: health.get(key), color: appSetHealthColors.get(key as models.ApplicationSetConditionStatus) })),
-            legend: appSetHealthColors as Map<string, string>
-        }
-    ]);
+    const charts = isInvokedFromApps()
+        ? [
+              {
+                  title: 'Sync',
+                  data: Array.from(sync.keys()).map(key => ({title: key, value: sync.get(key), color: syncColors.get(key as models.SyncStatusCode)})),
+                  legend: syncColors as Map<string, string>
+              },
+              {
+                  title: 'Health',
+                  data: Array.from(health.keys()).map(key => ({title: key, value: health.get(key), color: healthColors.get(key as models.HealthStatusCode)})),
+                  legend: healthColors as Map<string, string>
+              }
+          ]
+        : [
+              {
+                  title: 'Health',
+                  data: Array.from(health.keys()).map(key => ({title: key, value: health.get(key), color: appSetHealthColors.get(key as models.ApplicationSetConditionStatus)})),
+                  legend: appSetHealthColors as Map<string, string>
+              }
+          ];
 
     return (
         <div className='white-box applications-list__summary'>
@@ -97,7 +102,7 @@ export const ApplicationsSummary = ({ applications }: { applications: models.Abs
                         {attributes.map(attr => (
                             <div className='row white-box__details-row' key={attr.title}>
                                 <div className='columns small-8'>{attr.title}</div>
-                                <div style={{ textAlign: 'right' }} className='columns small-4'>
+                                <div style={{textAlign: 'right'}} className='columns small-4'>
                                     {attr.value}
                                 </div>
                             </div>
@@ -108,7 +113,7 @@ export const ApplicationsSummary = ({ applications }: { applications: models.Abs
                     <div className='row chart-group'>
                         {charts.map(chart => {
                             const getLegendValue = (key: string) => {
-                                const index = chart.data.findIndex((data: { title: string }) => data.title === key);
+                                const index = chart.data.findIndex((data: {title: string}) => data.title === key);
                                 return index > -1 ? chart.data[index].value : 0;
                             };
                             return (
@@ -116,14 +121,16 @@ export const ApplicationsSummary = ({ applications }: { applications: models.Abs
                                     <div className='columns large-6 small-12'>
                                         <div className='row chart'>
                                             <div className='large-8 small-6'>
-                                                <h4 style={{ textAlign: 'center' }}>{chart.title}</h4>
+                                                <h4 style={{textAlign: 'center'}}>{chart.title}</h4>
                                                 <PieChart data={chart.data} />
                                             </div>
                                             <div className='large-3 small-1'>
                                                 <ul>
                                                     {Array.from(chart.legend.keys()).map(key => (
-                                                        <li style={{ listStyle: 'none', whiteSpace: 'nowrap' }} key={key}>
-                                                            {isInvokedFromApps() && chart.title === 'Health' && <HealthStatusIcon state={{ status: key as HealthStatusCode, message: '' }} noSpin={true} />}
+                                                        <li style={{listStyle: 'none', whiteSpace: 'nowrap'}} key={key}>
+                                                            {isInvokedFromApps() && chart.title === 'Health' && (
+                                                                <HealthStatusIcon state={{status: key as HealthStatusCode, message: ''}} noSpin={true} />
+                                                            )}
                                                             {/* {chart.title === 'Health' && <AppSetHealthStatusIcon state={{conditions : key as ApplicationSetConditionStatus}} noSpin={true} />}  */}
                                                             {chart.title === 'Sync' && <ComparisonStatusIcon status={key as SyncStatusCode} noSpin={true} />}
                                                             {` ${key} (${getLegendValue(key)})`}
diff --git a/ui/src/app/applications/components/applications-list/applications-table.tsx b/ui/src/app/applications/components/applications-list/applications-table.tsx
index 5c64d7e495cf0..b8d3817e418bb 100644
--- a/ui/src/app/applications/components/applications-list/applications-table.tsx
+++ b/ui/src/app/applications/components/applications-list/applications-table.tsx
@@ -1,18 +1,18 @@
-import { DataLoader, DropDownMenu, Tooltip } from 'argo-ui';
+import {DataLoader, DropDownMenu, Tooltip} from 'argo-ui';
 import * as React from 'react';
 import Moment from 'react-moment';
-import { Key, KeybindingContext, useNav } from 'argo-ui/v2';
-import { Cluster } from '../../../shared/components';
-import { Consumer, Context } from '../../../shared/context';
+import {Key, KeybindingContext, useNav} from 'argo-ui/v2';
+import {Cluster} from '../../../shared/components';
+import {Consumer, Context} from '../../../shared/context';
 import * as models from '../../../shared/models';
-import { ApplicationURLs } from '../application-urls';
+import {ApplicationURLs} from '../application-urls';
 import * as AppUtils from '../utils';
-import { getAppDefaultSource, getAppSetHealthStatus, isApp, OperationState } from '../utils';
-import { ApplicationsLabels } from './applications-labels';
-import { ApplicationsSource } from './applications-source';
-import { services } from '../../../shared/services';
+import {getAppDefaultSource, getAppSetHealthStatus, isApp, OperationState} from '../utils';
+import {ApplicationsLabels} from './applications-labels';
+import {ApplicationsSource} from './applications-source';
+import {services} from '../../../shared/services';
 import './applications-table.scss';
-import { Application, ApplicationSet } from '../../../shared/models';
+import {Application, ApplicationSet} from '../../../shared/models';
 
 export const ApplicationsTable = (props: {
     applications: models.AbstractApplication[];
@@ -23,10 +23,10 @@ export const ApplicationsTable = (props: {
     const [selectedApp, navApp, reset] = useNav(props.applications.length);
     const ctxh = React.useContext(Context);
 
-    const { useKeybinding } = React.useContext(KeybindingContext);
+    const {useKeybinding} = React.useContext(KeybindingContext);
 
-    useKeybinding({ keys: Key.DOWN, action: () => navApp(1) });
-    useKeybinding({ keys: Key.UP, action: () => navApp(-1) });
+    useKeybinding({keys: Key.DOWN, action: () => navApp(1)});
+    useKeybinding({keys: Key.UP, action: () => navApp(-1)});
     useKeybinding({
         keys: Key.ESCAPE,
         action: () => {
@@ -57,10 +57,12 @@ export const ApplicationsTable = (props: {
                                     <div
                                         key={AppUtils.appInstanceName(app)}
                                         className={`argo-table-list__row
-                applications-list__entry applications-list__entry--health-${isApp(app) ? (app as models.Application).status.health.status : getAppSetHealthStatus((app as ApplicationSet).status)} ${selectedApp === i ? 'applications-tiles__selected' : ''}`}>
+                applications-list__entry applications-list__entry--health-${
+                    isApp(app) ? (app as models.Application).status.health.status : getAppSetHealthStatus((app as ApplicationSet).status)
+                } ${selectedApp === i ? 'applications-tiles__selected' : ''}`}>
                                         <div
                                             className={`row applications-list__table-row`}
-                                            onClick={e => ctx.navigation.goto(`${AppUtils.getRootPath()}/${app.metadata.namespace}/${app.metadata.name}`, {}, { event: e })}>
+                                            onClick={e => ctx.navigation.goto(`${AppUtils.getRootPath()}/${app.metadata.namespace}/${app.metadata.name}`, {}, {event: e})}>
                                             <div className='columns small-4'>
                                                 <div className='row'>
                                                     <div className=' columns small-2'>
@@ -72,7 +74,7 @@ export const ApplicationsTable = (props: {
                                                                         favList?.includes(app.metadata.name)
                                                                             ? favList.splice(favList.indexOf(app.metadata.name), 1)
                                                                             : favList.push(app.metadata.name);
-                                                                        services.viewPreferences.updatePreferences({ appList: { ...pref.appList, favoritesAppList: favList } });
+                                                                        services.viewPreferences.updatePreferences({appList: {...pref.appList, favoritesAppList: favList}});
                                                                     }}>
                                                                     <i
                                                                         className={favList?.includes(app.metadata.name) ? 'fas fa-star' : 'far fa-star'}
@@ -110,44 +112,50 @@ export const ApplicationsTable = (props: {
                                                 </div>
                                             </div>
 
-                                            {isApp(app) && (<div className='columns small-6'>
-                                                <div className='row'>
-                                                    <div className='show-for-xxlarge columns small-2'>Source:</div>
-                                                    <div className='columns small-12 xxlarge-10 applications-table-source' style={{ position: 'relative' }}>
-                                                        <div className='applications-table-source__link'>
-                                                            <ApplicationsSource source={getAppDefaultSource(app as models.Application)} />
-                                                        </div>
-                                                        <div className='applications-table-source__labels'>
-                                                            <ApplicationsLabels app={(app as models.Application)} />
+                                            {isApp(app) && (
+                                                <div className='columns small-6'>
+                                                    <div className='row'>
+                                                        <div className='show-for-xxlarge columns small-2'>Source:</div>
+                                                        <div className='columns small-12 xxlarge-10 applications-table-source' style={{position: 'relative'}}>
+                                                            <div className='applications-table-source__link'>
+                                                                <ApplicationsSource source={getAppDefaultSource(app as models.Application)} />
+                                                            </div>
+                                                            <div className='applications-table-source__labels'>
+                                                                <ApplicationsLabels app={app as models.Application} />
+                                                            </div>
                                                         </div>
                                                     </div>
-                                                </div>
-                                                <div className='row'>
-                                                    <div className='show-for-xxlarge columns small-2'>Destination:</div>
-                                                    <div className='columns small-12 xxlarge-10'>
-                                                        <Cluster server={(app as Application).spec.destination.server} name={(app as Application).spec.destination.name} />/{(app as Application).spec.destination.namespace}
+                                                    <div className='row'>
+                                                        <div className='show-for-xxlarge columns small-2'>Destination:</div>
+                                                        <div className='columns small-12 xxlarge-10'>
+                                                            <Cluster server={(app as Application).spec.destination.server} name={(app as Application).spec.destination.name} />/
+                                                            {(app as Application).spec.destination.namespace}
+                                                        </div>
                                                     </div>
                                                 </div>
-                                            </div>
                                             )}
                                             <div className='columns small-2'>
-                                                {isApp(app) && <AppUtils.HealthStatusIcon state={(app as Application).status.health} />} {isApp(app) && <span>{(app as Application).status.health.status}</span>} {isApp(app) && <br />}
-                                                {!isApp(app) && <AppUtils.AppSetHealthStatusIcon state={(app as ApplicationSet).status} />} {!isApp(app) && <span>{getAppSetHealthStatus((app as ApplicationSet).status)}</span>} {!isApp(app) && <br />}
+                                                {isApp(app) && <AppUtils.HealthStatusIcon state={(app as Application).status.health} />}{' '}
+                                                {isApp(app) && <span>{(app as Application).status.health.status}</span>} {isApp(app) && <br />}
+                                                {!isApp(app) && <AppUtils.AppSetHealthStatusIcon state={(app as ApplicationSet).status} />}{' '}
+                                                {!isApp(app) && <span>{getAppSetHealthStatus((app as ApplicationSet).status)}</span>} {!isApp(app) && <br />}
                                                 {isApp(app) && <AppUtils.ComparisonStatusIcon status={(app as Application).status.sync.status} />}
-                                                {isApp(app) && <span>{(app as Application).status.sync.status}</span>} {isApp(app) && <OperationState app={(app as Application)} quiet={true} />}
-                                                {isApp(app) && <DropDownMenu
-                                                    anchor={() => (
-                                                        <button className='argo-button argo-button--light argo-button--lg argo-button--short'>
-                                                            <i className='fa fa-ellipsis-v' />
-                                                        </button>
-                                                    )}
-                                                    items={[
-                                                        { title: 'Sync', action: () => props.syncApplication(app.metadata.name, app.metadata.namespace) },
-                                                        { title: 'Refresh', action: () => props.refreshApplication(app.metadata.name, app.metadata.namespace) },
-                                                        { title: 'Delete', action: () => props.deleteApplication(app.metadata.name, app.metadata.namespace) }
-                                                    ]}
-                                                />
-                                                }
+                                                {isApp(app) && <span>{(app as Application).status.sync.status}</span>}{' '}
+                                                {isApp(app) && <OperationState app={app as Application} quiet={true} />}
+                                                {isApp(app) && (
+                                                    <DropDownMenu
+                                                        anchor={() => (
+                                                            <button className='argo-button argo-button--light argo-button--lg argo-button--short'>
+                                                                <i className='fa fa-ellipsis-v' />
+                                                            </button>
+                                                        )}
+                                                        items={[
+                                                            {title: 'Sync', action: () => props.syncApplication(app.metadata.name, app.metadata.namespace)},
+                                                            {title: 'Refresh', action: () => props.refreshApplication(app.metadata.name, app.metadata.namespace)},
+                                                            {title: 'Delete', action: () => props.deleteApplication(app.metadata.name, app.metadata.namespace)}
+                                                        ]}
+                                                    />
+                                                )}
                                             </div>
                                         </div>
                                     </div>
diff --git a/ui/src/app/applications/components/applications-list/applications-tiles.tsx b/ui/src/app/applications/components/applications-list/applications-tiles.tsx
index 01d0f39b573a1..61319f6718491 100644
--- a/ui/src/app/applications/components/applications-list/applications-tiles.tsx
+++ b/ui/src/app/applications/components/applications-list/applications-tiles.tsx
@@ -1,17 +1,17 @@
-import { DataLoader, Tooltip } from 'argo-ui';
+import {DataLoader, Tooltip} from 'argo-ui';
 import * as classNames from 'classnames';
 import * as React from 'react';
-import { Key, KeybindingContext, NumKey, NumKeyToNumber, NumPadKey, useNav } from 'argo-ui/v2';
-import { Cluster } from '../../../shared/components';
-import { Consumer, Context, AuthSettingsCtx } from '../../../shared/context';
+import {Key, KeybindingContext, NumKey, NumKeyToNumber, NumPadKey, useNav} from 'argo-ui/v2';
+import {Cluster} from '../../../shared/components';
+import {Consumer, Context, AuthSettingsCtx} from '../../../shared/context';
 import * as models from '../../../shared/models';
-import { ApplicationURLs } from '../application-urls';
+import {ApplicationURLs} from '../application-urls';
 import * as AppUtils from '../utils';
-import { getAppDefaultSource, getAppSetHealthStatus, isApp, OperationState } from '../utils';
-import { services } from '../../../shared/services';
+import {getAppDefaultSource, getAppSetHealthStatus, isApp, OperationState} from '../utils';
+import {services} from '../../../shared/services';
 
 import './applications-tiles.scss';
-import { Application, ApplicationSet } from '../../../shared/models';
+import {Application, ApplicationSet} from '../../../shared/models';
 
 export interface ApplicationTilesProps extends AbstractApplicationTilesProps {
     applications: models.Application[];
@@ -59,17 +59,17 @@ export const ApplicationTiles = (tilesProps: AbstractApplicationTilesProps) => {
     const [selectedApp, navApp, reset] = useNav(tilesProps.applications.length);
 
     const ctxh = React.useContext(Context);
-    const appRef = { ref: React.useRef(null), set: false };
+    const appRef = {ref: React.useRef(null), set: false};
     const appContainerRef = React.useRef(null);
     const appsPerRow = useItemsPerContainer(appRef.ref, appContainerRef);
     const useAuthSettingsCtx = React.useContext(AuthSettingsCtx);
 
-    const { useKeybinding } = React.useContext(KeybindingContext);
+    const {useKeybinding} = React.useContext(KeybindingContext);
 
-    useKeybinding({ keys: Key.RIGHT, action: () => navApp(1) });
-    useKeybinding({ keys: Key.LEFT, action: () => navApp(-1) });
-    useKeybinding({ keys: Key.DOWN, action: () => navApp(appsPerRow) });
-    useKeybinding({ keys: Key.UP, action: () => navApp(-1 * appsPerRow) });
+    useKeybinding({keys: Key.RIGHT, action: () => navApp(1)});
+    useKeybinding({keys: Key.LEFT, action: () => navApp(-1)});
+    useKeybinding({keys: Key.DOWN, action: () => navApp(appsPerRow)});
+    useKeybinding({keys: Key.UP, action: () => navApp(-1 * appsPerRow)});
 
     useKeybinding({
         keys: Key.ENTER,
@@ -121,36 +121,44 @@ export const ApplicationTiles = (tilesProps: AbstractApplicationTilesProps) => {
                                 {tilesProps.applications.map((app, i) => {
                                     const source = getAppDefaultSource(app);
                                     return (
-                                        <div 
-                                                key={AppUtils.appInstanceName(app)}
-                                                ref={appRef.set ? null : appRef.ref}
-                                                className={isApp(app) ? `argo-table-list__row applications-list__entry applications-list__entry--health-${(app as models.Application).status.health.status} ${
-                                                    selectedApp === i ? 'applications-tiles__selected' : ''
-                                                }`: `argo-table-list__row applications-list__entry applications-list__entry--health-${getAppSetHealthStatus((app as ApplicationSet).status)} ${selectedApp === i ? 'applications-tiles__selected' : '' 
-                                            }`}>
+                                        <div
+                                            key={AppUtils.appInstanceName(app)}
+                                            ref={appRef.set ? null : appRef.ref}
+                                            className={
+                                                isApp(app)
+                                                    ? `argo-table-list__row applications-list__entry applications-list__entry--health-${
+                                                          (app as models.Application).status.health.status
+                                                      } ${selectedApp === i ? 'applications-tiles__selected' : ''}`
+                                                    : `argo-table-list__row applications-list__entry applications-list__entry--health-${getAppSetHealthStatus(
+                                                          (app as ApplicationSet).status
+                                                      )} ${selectedApp === i ? 'applications-tiles__selected' : ''}`
+                                            }>
+                                            <div
+                                                className='row applications-tiles__wrapper'
+                                                onClick={e =>
+                                                    ctx.navigation.goto(
+                                                        `${AppUtils.getRootPath()}/${app.metadata.namespace}/${app.metadata.name}`,
+                                                        {view: pref.appDetails.view},
+                                                        {event: e}
+                                                    )
+                                                }>
                                                 <div
-                                                    className='row applications-tiles__wrapper'
-                                                    onClick={e =>
-                                                        ctx.navigation.goto(
-                                                            `${AppUtils.getRootPath()}/${app.metadata.namespace}/${app.metadata.name}`,
-                                                            { view: pref.appDetails.view },
-                                                            { event: e }
-                                                        )
-                                                    }>
-                                                    <div
-                                                        className={`columns small-12 applications-list__info qe-applications-list-${AppUtils.appInstanceName(
-                                                            app
-                                                        )} applications-tiles__item`}>
-                                                        <div className='row'>
-                                                            {isApp(app) && <div className={app.status.summary.externalURLs?.length > 0 ? 'columns small-10' : 'columns small-11'}>
+                                                    className={`columns small-12 applications-list__info qe-applications-list-${AppUtils.appInstanceName(
+                                                        app
+                                                    )} applications-tiles__item`}>
+                                                    <div className='row'>
+                                                        {isApp(app) && (
+                                                            <div className={app.status.summary.externalURLs?.length > 0 ? 'columns small-10' : 'columns small-11'}>
                                                                 <i className={'icon argo-icon-' + (source.chart != null ? 'helm' : 'git')} />
                                                                 <Tooltip content={AppUtils.appInstanceName(app)}>
                                                                     <span className='applications-list__title'>
                                                                         {AppUtils.appQualifiedName(app, useAuthSettingsCtx?.appsInAnyNamespaceEnabled)}
                                                                     </span>
                                                                 </Tooltip>
-                                                            </div>}
-                                                            {isApp(app) && <div className={app.status.summary.externalURLs?.length > 0 ? 'columns small-2' : 'columns small-1'}>
+                                                            </div>
+                                                        )}
+                                                        {isApp(app) && (
+                                                            <div className={app.status.summary.externalURLs?.length > 0 ? 'columns small-2' : 'columns small-1'}>
                                                                 <div className='applications-list__external-link'>
                                                                     <ApplicationURLs urls={app.status.summary.externalURLs} />
                                                                     <Tooltip content={favList?.includes(app.metadata.name) ? 'Remove Favorite' : 'Add Favorite'}>
@@ -174,55 +182,61 @@ export const ApplicationTiles = (tilesProps: AbstractApplicationTilesProps) => {
                                                                         </button>
                                                                     </Tooltip>
                                                                 </div>
-                                                            </div>}
-                                                        </div>
-                                                        {isApp(app) && <div className='row'>
+                                                            </div>
+                                                        )}
+                                                    </div>
+                                                    {isApp(app) && (
+                                                        <div className='row'>
                                                             <div className='columns small-3' title='Project:'>
                                                                 Project:
                                                             </div>
                                                             <div className='columns small-9'>{app.spec.project}</div>
-                                                        </div>}
-                                                        <div className='row'>
-                                                            <div className='columns small-3' title='Labels:'>
-                                                                Labels:
-                                                            </div>
-                                                            <div className='columns small-9'>
-                                                                <Tooltip
-                                                                    zIndex={4}
-                                                                    content={
-                                                                        <div>
-                                                                            {Object.keys(app.metadata.labels || {})
-                                                                                .map(label => ({label, value: app.metadata.labels[label]}))
-                                                                                .map(item => (
-                                                                                    <div key={item.label}>
-                                                                                        {item.label}={item.value}
-                                                                                    </div>
-                                                                                ))}
-                                                                        </div>
-                                                                    }>
-                                                                    <span>
+                                                        </div>
+                                                    )}
+                                                    <div className='row'>
+                                                        <div className='columns small-3' title='Labels:'>
+                                                            Labels:
+                                                        </div>
+                                                        <div className='columns small-9'>
+                                                            <Tooltip
+                                                                zIndex={4}
+                                                                content={
+                                                                    <div>
                                                                         {Object.keys(app.metadata.labels || {})
-                                                                            .map(label => `${label}=${app.metadata.labels[label]}`)
-                                                                            .join(', ')}
-                                                                    </span>
-                                                                </Tooltip>
-                                                            </div>
+                                                                            .map(label => ({label, value: app.metadata.labels[label]}))
+                                                                            .map(item => (
+                                                                                <div key={item.label}>
+                                                                                    {item.label}={item.value}
+                                                                                </div>
+                                                                            ))}
+                                                                    </div>
+                                                                }>
+                                                                <span>
+                                                                    {Object.keys(app.metadata.labels || {})
+                                                                        .map(label => `${label}=${app.metadata.labels[label]}`)
+                                                                        .join(', ')}
+                                                                </span>
+                                                            </Tooltip>
                                                         </div>
-                                                        <div className='row'>
-                                                            <div className='columns small-3' title='Status:'>
-                                                                Status:
-                                                            </div>
-                                                            <div className='columns small-9' qe-id='applications-tiles-health-status'>
-                                                            {isApp(app) && <AppUtils.HealthStatusIcon state={(app as Application).status.health} />} {isApp(app) && (app as Application).status.health.status}
-                                                                {!isApp(app) && <AppUtils.AppSetHealthStatusIcon state={(app as ApplicationSet).status} />} {!isApp(app) && getAppSetHealthStatus((app as ApplicationSet).status)}
-                                                                &nbsp;
-                                                                {isApp(app) && <AppUtils.ComparisonStatusIcon status={(app as Application).status.sync.status} />} {isApp(app) && (app as Application).status.sync.status}
-                                                                &nbsp;
-                                                                {isApp(app) && <OperationState app={app} quiet={true} />}
-                                                            </div>
+                                                    </div>
+                                                    <div className='row'>
+                                                        <div className='columns small-3' title='Status:'>
+                                                            Status:
+                                                        </div>
+                                                        <div className='columns small-9' qe-id='applications-tiles-health-status'>
+                                                            {isApp(app) && <AppUtils.HealthStatusIcon state={(app as Application).status.health} />}{' '}
+                                                            {isApp(app) && (app as Application).status.health.status}
+                                                            {!isApp(app) && <AppUtils.AppSetHealthStatusIcon state={(app as ApplicationSet).status} />}{' '}
+                                                            {!isApp(app) && getAppSetHealthStatus((app as ApplicationSet).status)}
+                                                            &nbsp;
+                                                            {isApp(app) && <AppUtils.ComparisonStatusIcon status={(app as Application).status.sync.status} />}{' '}
+                                                            {isApp(app) && (app as Application).status.sync.status}
+                                                            &nbsp;
+                                                            {isApp(app) && <OperationState app={app} quiet={true} />}
                                                         </div>
-                                                        {isApp(app) &&
-                                                            (<div className='row'>
+                                                    </div>
+                                                    {isApp(app) && (
+                                                        <div className='row'>
                                                             <div className='columns small-3' title='Repository:'>
                                                                 Repository:
                                                             </div>
@@ -232,32 +246,32 @@ export const ApplicationTiles = (tilesProps: AbstractApplicationTilesProps) => {
                                                                 </Tooltip>
                                                             </div>
                                                         </div>
-                                                         )}
-                                                        {isApp(app) &&
-                                                        (<div className='row'>
+                                                    )}
+                                                    {isApp(app) && (
+                                                        <div className='row'>
                                                             <div className='columns small-3' title='Target Revision:'>
                                                                 Target Revision:
                                                             </div>
                                                             <div className='columns small-9'>{source.targetRevision || 'HEAD'}</div>
                                                         </div>
-                                                        )}
-                                                        {isApp(app) && source.path && (
-                                                            <div className='row'>
-                                                                <div className='columns small-3' title='Path:'>
-                                                                    Path:
-                                                                </div>
-                                                                <div className='columns small-9'>{source.path}</div>
+                                                    )}
+                                                    {isApp(app) && source.path && (
+                                                        <div className='row'>
+                                                            <div className='columns small-3' title='Path:'>
+                                                                Path:
                                                             </div>
-                                                        )}
-                                                        {isApp(app) && source.chart && (
-                                                            <div className='row'>
-                                                                <div className='columns small-3' title='Chart:'>
-                                                                    Chart:
-                                                                </div>
-                                                                <div className='columns small-9'>{source.chart}</div>
+                                                            <div className='columns small-9'>{source.path}</div>
+                                                        </div>
+                                                    )}
+                                                    {isApp(app) && source.chart && (
+                                                        <div className='row'>
+                                                            <div className='columns small-3' title='Chart:'>
+                                                                Chart:
                                                             </div>
-                                                        )}
-                                                        {isApp(app) && (
+                                                            <div className='columns small-9'>{source.chart}</div>
+                                                        </div>
+                                                    )}
+                                                    {isApp(app) && (
                                                         <div className='row'>
                                                             <div className='columns small-3' title='Destination:'>
                                                                 Destination:
@@ -266,32 +280,34 @@ export const ApplicationTiles = (tilesProps: AbstractApplicationTilesProps) => {
                                                                 <Cluster server={(app as models.Application).spec.destination.server} name={app.spec.destination.name} />
                                                             </div>
                                                         </div>
-                                                        )}
-                                                         {isApp(app) && (
+                                                    )}
+                                                    {isApp(app) && (
                                                         <div className='row'>
                                                             <div className='columns small-3' title='Namespace:'>
                                                                 Namespace:
                                                             </div>
                                                             <div className='columns small-9'>{(app as models.Application).spec.destination.namespace}</div>
                                                         </div>
-                                                         )}
+                                                    )}
+                                                    <div className='row'>
+                                                        <div className='columns small-3' title='Age:'>
+                                                            Created At:
+                                                        </div>
+                                                        <div className='columns small-9'>{AppUtils.formatCreationTimestamp(app.metadata.creationTimestamp)}</div>
+                                                    </div>
+                                                    {isApp(app) && (app as models.Application).status.operationState && (
                                                         <div className='row'>
-                                                            <div className='columns small-3' title='Age:'>
-                                                                Created At:
+                                                            <div className='columns small-3' title='Last sync:'>
+                                                                Last Sync:
                                                             </div>
-                                                            <div className='columns small-9'>{AppUtils.formatCreationTimestamp(app.metadata.creationTimestamp)}</div>
-                                                        </div>
-                                                        {isApp(app) && (app as models.Application).status.operationState && (
-                                                            <div className='row'>
-                                                                <div className='columns small-3' title='Last sync:'>
-                                                                    Last Sync:
-                                                                </div>
-                                                                <div className='columns small-9'>
-                                                                    {AppUtils.formatCreationTimestamp((app as Application).status.operationState.finishedAt || app.status.operationState.startedAt)}
-                                                                </div>
+                                                            <div className='columns small-9'>
+                                                                {AppUtils.formatCreationTimestamp(
+                                                                    (app as Application).status.operationState.finishedAt || app.status.operationState.startedAt
+                                                                )}
                                                             </div>
-                                                        )}
-                                                        {isApp(app) && (
+                                                        </div>
+                                                    )}
+                                                    {isApp(app) && (
                                                         <div className='row'>
                                                             <div className='columns applications-list__entry--actions'>
                                                                 <a
@@ -328,10 +344,10 @@ export const ApplicationTiles = (tilesProps: AbstractApplicationTilesProps) => {
                                                                 </a>
                                                             </div>
                                                         </div>
-                                                        )}
-                                                    </div>
+                                                    )}
                                                 </div>
                                             </div>
+                                        </div>
                                     );
                                 })}
                             </div>
diff --git a/ui/src/app/applications/components/resource-details/resource-details.tsx b/ui/src/app/applications/components/resource-details/resource-details.tsx
index 81bc6f2ca4f0e..01f3647971a63 100644
--- a/ui/src/app/applications/components/resource-details/resource-details.tsx
+++ b/ui/src/app/applications/components/resource-details/resource-details.tsx
@@ -1,33 +1,33 @@
-import { DataLoader, DropDown, Tab, Tabs } from 'argo-ui';
+import {DataLoader, DropDown, Tab, Tabs} from 'argo-ui';
 import * as React from 'react';
-import { useState } from 'react';
-import { EventsList, YamlEditor } from '../../../shared/components';
+import {useState} from 'react';
+import {EventsList, YamlEditor} from '../../../shared/components';
 import * as models from '../../../shared/models';
-import { ErrorBoundary } from '../../../shared/components/error-boundary/error-boundary';
-import { Context } from '../../../shared/context';
-import { AbstractApplication, Application, ApplicationTree, AppSourceType, Event, RepoAppDetails, ResourceNode, State, SyncStatuses } from '../../../shared/models';
-import { services } from '../../../shared/services';
-import { ResourceTabExtension } from '../../../shared/services/extensions-service';
-import { NodeInfo, SelectNode } from '../application-details/application-details';
-import { ApplicationNodeInfo } from '../application-node-info/application-node-info';
-import { ApplicationParameters } from '../application-parameters/application-parameters';
-import { ApplicationResourceEvents } from '../application-resource-events/application-resource-events';
-import { ResourceTreeNode } from '../application-resource-tree/application-resource-tree';
-import { ApplicationResourcesDiff } from '../application-resources-diff/application-resources-diff';
-import { ApplicationSummary } from '../application-summary/application-summary';
-import { PodsLogsViewer } from '../pod-logs-viewer/pod-logs-viewer';
-import { PodTerminalViewer } from '../pod-terminal-viewer/pod-terminal-viewer';
-import { ResourceIcon } from '../resource-icon';
-import { ResourceLabel } from '../resource-label';
+import {ErrorBoundary} from '../../../shared/components/error-boundary/error-boundary';
+import {Context} from '../../../shared/context';
+import {AbstractApplication, Application, ApplicationTree, AppSourceType, Event, RepoAppDetails, ResourceNode, State, SyncStatuses} from '../../../shared/models';
+import {services} from '../../../shared/services';
+import {ResourceTabExtension} from '../../../shared/services/extensions-service';
+import {NodeInfo, SelectNode} from '../application-details/application-details';
+import {ApplicationNodeInfo} from '../application-node-info/application-node-info';
+import {ApplicationParameters} from '../application-parameters/application-parameters';
+import {ApplicationResourceEvents} from '../application-resource-events/application-resource-events';
+import {ResourceTreeNode} from '../application-resource-tree/application-resource-tree';
+import {ApplicationResourcesDiff} from '../application-resources-diff/application-resources-diff';
+import {ApplicationSummary} from '../application-summary/application-summary';
+import {PodsLogsViewer} from '../pod-logs-viewer/pod-logs-viewer';
+import {PodTerminalViewer} from '../pod-terminal-viewer/pod-terminal-viewer';
+import {ResourceIcon} from '../resource-icon';
+import {ResourceLabel} from '../resource-label';
 import * as AppUtils from '../utils';
 import './resource-details.scss';
-import { isApp } from '../utils';
+import {isApp} from '../utils';
 
 const jsonMergePatch = require('json-merge-patch');
 
 interface ResourceDetailsProps {
     selectedNode: ResourceNode;
-    updateApp: (app: AbstractApplication, query: { validate?: boolean }) => Promise<any>;
+    updateApp: (app: AbstractApplication, query: {validate?: boolean}) => Promise<any>;
     application: Application;
     isAppSelected: boolean;
     tree: ApplicationTree;
@@ -35,7 +35,7 @@ interface ResourceDetailsProps {
 }
 
 export const ResourceDetails = (props: ResourceDetailsProps) => {
-    const { selectedNode, updateApp, application, isAppSelected, tree } = { ...props };
+    const {selectedNode, updateApp, application, isAppSelected, tree} = {...props};
     const [activeContainer, setActiveContainer] = useState();
     const appContext = React.useContext(Context);
     const tab = new URLSearchParams(appContext.history.location.search).get('tab');
@@ -155,13 +155,14 @@ export const ResourceDetails = (props: ResourceDetailsProps) => {
     };
 
     const getApplicationTabs = () => {
-        const tabs: Tab[] = []
+        const tabs: Tab[] = [];
         if (isApp(application)) {
-            tabs.push({
-                title: 'SUMMARY',
-                key: 'summary',
-                content: <ApplicationSummary app={application} updateApp={(app, query: { validate?: boolean }) => updateApp(app, query)} />
-            },
+            tabs.push(
+                {
+                    title: 'SUMMARY',
+                    key: 'summary',
+                    content: <ApplicationSummary app={application} updateApp={(app, query: {validate?: boolean}) => updateApp(app, query)} />
+                },
                 {
                     title: 'PARAMETERS',
                     key: 'parameters',
@@ -177,14 +178,15 @@ export const ResourceDetails = (props: ResourceDetailsProps) => {
                             }>
                             {(details: RepoAppDetails) => (
                                 <ApplicationParameters
-                                    save={(app: models.Application, query: { validate?: boolean }) => updateApp(app, query)}
+                                    save={(app: models.Application, query: {validate?: boolean}) => updateApp(app, query)}
                                     application={application}
                                     details={details}
                                 />
                             )}
                         </DataLoader>
                     )
-                })
+                }
+            );
         }
         tabs.push({
             title: 'MANIFEST',
@@ -199,7 +201,7 @@ export const ResourceDetails = (props: ResourceDetailsProps) => {
                     }}
                 />
             )
-        })
+        });
 
         if (isApp(application) && (application as Application).status.sync.status !== SyncStatuses.Synced) {
             tabs.push({
@@ -239,7 +241,7 @@ export const ResourceDetails = (props: ResourceDetailsProps) => {
     const extensions = selectedNode?.kind ? services.extensions.getResourceTabs(selectedNode?.group || '', selectedNode?.kind) : [];
 
     return (
-        <div style={{ width: '100%', height: '100%' }}>
+        <div style={{width: '100%', height: '100%'}}>
             {selectedNode && (
                 <DataLoader
                     noLoaderOnInputChange={true}
@@ -255,8 +257,8 @@ export const ResourceDetails = (props: ResourceDetailsProps) => {
                         });
                         const controlled = managedResources.find(item => AppUtils.isSameNode(selectedNode, item));
                         const summary = application.status.resources.find(item => AppUtils.isSameNode(selectedNode, item));
-                        const controlledState = (controlled && summary && { summary, state: controlled }) || null;
-                        const resQuery = { ...selectedNode };
+                        const controlledState = (controlled && summary && {summary, state: controlled}) || null;
+                        const resQuery = {...selectedNode};
                         if (controlled && controlled.targetState) {
                             resQuery.version = AppUtils.parseApiVersion(controlled.targetState.apiVersion).version;
                         }
@@ -284,33 +286,33 @@ export const ResourceDetails = (props: ResourceDetailsProps) => {
                         const logsAllowed = await services.accounts.canI('logs', 'get', application.spec.project + '/' + application.metadata.name);
                         const execAllowed = await services.accounts.canI('exec', 'create', application.spec.project + '/' + application.metadata.name);
                         const links = await services.applications.getResourceLinks(application.metadata.name, application.metadata.namespace, selectedNode).catch(() => null);
-                        return { controlledState, liveState, events, podState, execEnabled, execAllowed, logsAllowed, links };
+                        return {controlledState, liveState, events, podState, execEnabled, execAllowed, logsAllowed, links};
                     }}>
                     {data => (
                         <React.Fragment>
                             <div className='resource-details__header'>
-                                <div style={{ display: 'flex', flexDirection: 'column', marginRight: '15px', alignItems: 'center', fontSize: '12px' }}>
+                                <div style={{display: 'flex', flexDirection: 'column', marginRight: '15px', alignItems: 'center', fontSize: '12px'}}>
                                     <ResourceIcon kind={selectedNode.kind} />
-                                    {ResourceLabel({ kind: selectedNode.kind })}
+                                    {ResourceLabel({kind: selectedNode.kind})}
                                 </div>
                                 <h1>{selectedNode.name}</h1>
                                 {data.controlledState && (
                                     <React.Fragment>
-                                        <span style={{ marginRight: '5px' }}>
+                                        <span style={{marginRight: '5px'}}>
                                             <AppUtils.ComparisonStatusIcon status={data.controlledState.summary.status} resource={data.controlledState.summary} />
                                         </span>
                                     </React.Fragment>
                                 )}
                                 {(selectedNode as ResourceTreeNode).health && <AppUtils.HealthStatusIcon state={(selectedNode as ResourceTreeNode).health} />}
                                 <button
-                                    onClick={() => appContext.navigation.goto('.', { deploy: AppUtils.nodeKey(selectedNode) }, { replace: true })}
-                                    style={{ marginLeft: 'auto', marginRight: '5px' }}
+                                    onClick={() => appContext.navigation.goto('.', {deploy: AppUtils.nodeKey(selectedNode)}, {replace: true})}
+                                    style={{marginLeft: 'auto', marginRight: '5px'}}
                                     className='argo-button argo-button--base'>
                                     <i className='fa fa-sync-alt' /> <span className='show-for-large'>SYNC</span>
                                 </button>
                                 <button
                                     onClick={() => AppUtils.deletePopup(appContext, selectedNode, application)}
-                                    style={{ marginRight: '5px' }}
+                                    style={{marginRight: '5px'}}
                                     className='argo-button argo-button--base'>
                                     <i className='fa fa-trash' /> <span className='show-for-large'>DELETE</span>
                                 </button>
@@ -353,7 +355,7 @@ export const ResourceDetails = (props: ResourceDetailsProps) => {
                                     data.logsAllowed
                                 )}
                                 selectedTabKey={props.tab}
-                                onTabSelected={selected => appContext.navigation.goto('.', { tab: selected }, { replace: true })}
+                                onTabSelected={selected => appContext.navigation.goto('.', {tab: selected}, {replace: true})}
                             />
                         </React.Fragment>
                     )}
@@ -364,7 +366,7 @@ export const ResourceDetails = (props: ResourceDetailsProps) => {
                     navTransparent={true}
                     tabs={getApplicationTabs()}
                     selectedTabKey={tab}
-                    onTabSelected={selected => appContext.navigation.goto('.', { tab: selected }, { replace: true })}
+                    onTabSelected={selected => appContext.navigation.goto('.', {tab: selected}, {replace: true})}
                 />
             )}
         </div>
diff --git a/ui/src/app/shared/components/application-selector/application-selector.tsx b/ui/src/app/shared/components/application-selector/application-selector.tsx
index 07aa70d83ba89..c7767b568a231 100644
--- a/ui/src/app/shared/components/application-selector/application-selector.tsx
+++ b/ui/src/app/shared/components/application-selector/application-selector.tsx
@@ -1,23 +1,25 @@
 import * as React from 'react';
-import { FormFunctionProps } from 'react-form';
-import { CheckboxField } from '..';
+import {FormFunctionProps} from 'react-form';
+import {CheckboxField} from '..';
 import * as models from '../../models';
-import { appInstanceName, appQualifiedName, AppSetHealthStatusIcon, ComparisonStatusIcon, HealthStatusIcon, isApp, OperationPhaseIcon } from '../../../applications/components/utils';
-import { AuthSettingsCtx } from '../../context';
+import {appInstanceName, appQualifiedName, AppSetHealthStatusIcon, ComparisonStatusIcon, HealthStatusIcon, isApp, OperationPhaseIcon} from '../../../applications/components/utils';
+import {AuthSettingsCtx} from '../../context';
 
-export const ApplicationSelector = ({ apps, formApi }: { apps: models.AbstractApplication[]; formApi: FormFunctionProps }) => {
+export const ApplicationSelector = ({apps, formApi}: {apps: models.AbstractApplication[]; formApi: FormFunctionProps}) => {
     const useAuthSettingsCtx = React.useContext(AuthSettingsCtx);
     return (
         <>
             <label>
                 Apps (<a onClick={() => apps.forEach((_, i) => formApi.setValue('app/' + i, true))}>all</a>/
-                <a onClick={() => apps.forEach((app, i) => formApi.setValue('app/' + i, (app as models.Application).status.sync.status === models.SyncStatuses.OutOfSync))}>out of sync</a>/
-                <a onClick={() => apps.forEach((_, i) => formApi.setValue('app/' + i, false))}>none</a>
+                <a onClick={() => apps.forEach((app, i) => formApi.setValue('app/' + i, (app as models.Application).status.sync.status === models.SyncStatuses.OutOfSync))}>
+                    out of sync
+                </a>
+                /<a onClick={() => apps.forEach((_, i) => formApi.setValue('app/' + i, false))}>none</a>
                 ):
             </label>
-            <div style={{ marginTop: '0.4em' }}>
+            <div style={{marginTop: '0.4em'}}>
                 {apps.map((app, i) => (
-                    <label key={appInstanceName(app)} style={{ marginTop: '0.5em', cursor: 'pointer' }}>
+                    <label key={appInstanceName(app)} style={{marginTop: '0.5em', cursor: 'pointer'}}>
                         <CheckboxField field={`app/${i}`} />
                         &nbsp;
                         {/* if not an AppSet, can safely cast to Application. For Appset, (App of Apps) is not needed */}