feat: App list filter counters and labels should dynamically update (a…

…rgoproj#4822) Signed-off-by: Keith Chong <[email protected]>
fishman · Dec 15, 2020 · 09a1bf4 · 09a1bf4
1 parent e08e0d2
commit 09a1bf4
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/ui/src/app/applications/components/applications-list/applications-filter.tsx b/ui/src/app/applications/components/applications-list/applications-filter.tsx
@@ -33,7 +33,7 @@ class ItemsFilter extends React.Component<
 
     public render() {
         const unavailableSelected = this.props.selected.filter(selected => !this.props.items.some(item => item.name === selected));
-        const items = this.props.items.sort((first, second) => second.count - first.count).concat(unavailableSelected.map(selected => ({name: selected, count: 0})));
+        const items = this.props.items.sort((first, second) => (first.name > second.name ? 1 : -1)).concat(unavailableSelected.map(selected => ({name: selected, count: 0})));
         return (
             <React.Fragment>
                 <ul className={classNames('applications-list__filter', {'applications-list__filter--expanded': this.state.expanded})}>

diff --git a/ui/src/app/applications/components/applications-list/applications-list.tsx b/ui/src/app/applications/components/applications-list/applications-list.tsx
@@ -270,8 +270,9 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
                                                 <MockupList height={100} marginTop={30} />
                                             </div>
                                         )}>
-                                        {(applications: models.Application[]) =>
-                                            applications.length === 0 && (pref.labelsFilter || []).length === 0 ? (
+                                        {(applications: models.Application[]) => {
+                                            const filteredApps = filterApps(applications, pref, pref.search);
+                                            return applications.length === 0 && (pref.labelsFilter || []).length === 0 ? (
                                                 <EmptyState icon='argo-icon-application'>
                                                     <h4>No applications yet</h4>
                                                     <h5>Create new application to start managing resources in your cluster</h5>
@@ -334,7 +335,7 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
                                                                 return (
                                                                     <ApplicationsFilter
                                                                         clusters={clusterList}
-                                                                        applications={applications}
+                                                                        applications={filteredApps}
                                                                         pref={pref}
                                                                         onChange={newPref => onFilterPrefChanged(ctx, newPref)}
                                                                     />
@@ -347,12 +348,12 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
                                                                 key='syncsPanel'
                                                                 show={syncAppsInput}
                                                                 hide={() => ctx.navigation.goto('.', {syncApps: null})}
-                                                                apps={filterApps(applications, pref, pref.search)}
+                                                                apps={filteredApps}
                                                             />
                                                         )}
                                                     </div>
                                                     <div className='columns small-12 xxlarge-10'>
-                                                        {(pref.view === 'summary' && <ApplicationsSummary applications={filterApps(applications, pref, pref.search)} />) || (
+                                                        {(pref.view === 'summary' && <ApplicationsSummary applications={filteredApps} />) || (
                                                             <Paginate
                                                                 preferencesKey='applications-list'
                                                                 page={pref.page}
@@ -371,7 +372,7 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
                                                                         </h5>
                                                                     </EmptyState>
                                                                 )}
-                                                                data={filterApps(applications, pref, pref.search)}
+                                                                data={filteredApps}
                                                                 onPageChange={page => ctx.navigation.goto('.', {page})}>
                                                                 {data =>
                                                                     (pref.view === 'tiles' && (
@@ -394,8 +395,8 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
                                                         )}
                                                     </div>
                                                 </div>
-                                            )
-                                        }
+                                            );
+                                        }}
                                     </DataLoader>
                                 )}
                             </ViewPref>