feat: add clear-all button to applications list filters (#26007)

Signed-off-by: choejwoo <jaewoo45@gmail.com>
This commit is contained in:
Jaewoo Choi
2026-02-04 05:48:22 +09:00
committed by GitHub
parent 57e9e5e201
commit d8635ca27b
2 changed files with 32 additions and 12 deletions

View File

@@ -1,7 +1,6 @@
import {useData, Checkbox} from 'argo-ui/v2';
import * as minimatch from 'minimatch';
import * as React from 'react';
import {Context} from '../../../shared/context';
import {
Application,
ApplicationDestination,
@@ -359,19 +358,17 @@ const NamespaceFilter = (props: AppFilterProps) => {
);
};
const FavoriteFilter = (props: {pref: {showFavorites?: boolean}; onChange: (showFavorites: boolean) => void}) => {
const ctx = React.useContext(Context);
const FavoriteFilter = (props: {value: boolean; onChange: (showFavorites: boolean) => void}) => {
const onChange = (val: boolean) => {
ctx.navigation.goto('.', {showFavorites: val}, {replace: true});
props.onChange(val);
};
return (
<div
className={`filter filter__item ${props.pref.showFavorites ? 'filter__item--selected' : ''}`}
className={`filter filter__item ${props.value ? 'filter__item--selected' : ''}`}
style={{margin: '0.5em 0', marginTop: '0.5em'}}
onClick={() => onChange(!props.pref.showFavorites)}>
onClick={() => onChange(!props.value)}>
<Checkbox
value={!!props.pref.showFavorites}
value={!!props.value}
onChange={onChange}
style={{
marginRight: '8px'
@@ -463,9 +460,28 @@ const OperationFilter = (props: AppFilterProps) => (
);
export const ApplicationsFilter = (props: AppFilterProps) => {
const appliedFilter = [
...(props.pref.syncFilter || []),
...(props.pref.healthFilter || []),
...(props.pref.operationFilter || []),
...(props.pref.labelsFilter || []),
...(props.pref.projectsFilter || []),
...(props.pref.clustersFilter || []),
...(props.pref.namespacesFilter || []),
...(props.pref.autoSyncFilter || []),
...(props.pref.reposFilter || []),
...(props.pref.showFavorites ? ['favorites'] : [])
];
const onClearFilter = () => {
const newPref: AppsListPreferences = {...props.pref};
AppsListPreferences.clearFilters(newPref);
props.onChange(newPref);
};
return (
<FiltersGroup title='Application filters' content={props.children} collapsed={props.collapsed}>
<FavoriteFilter pref={props.pref} onChange={val => services.viewPreferences.updatePreferences({appList: {...props.pref, showFavorites: val}})} />
<FiltersGroup title='Application filters' content={props.children} appliedFilter={appliedFilter} onClearFilter={onClearFilter} collapsed={props.collapsed}>
<FavoriteFilter value={!!props.pref.showFavorites} onChange={val => props.onChange({...props.pref, showFavorites: val})} />
<SyncFilter {...props} />
<AppHealthFilter {...props} />
<OperationFilter {...props} />
@@ -482,7 +498,7 @@ export const ApplicationsFilter = (props: AppFilterProps) => {
export const AppSetsFilter = (props: AppSetFilterProps) => {
return (
<FiltersGroup title='ApplicationSet filters' content={props.children} collapsed={props.collapsed}>
<FavoriteFilter pref={props.pref} onChange={val => services.viewPreferences.updatePreferences({appList: {...props.pref, showFavorites: val} as AppsListPreferences})} />
<FavoriteFilter value={!!props.pref.showFavorites} onChange={val => props.onChange({...props.pref, showFavorites: val})} />
<AppSetHealthFilter {...props} />
<LabelsFilter apps={props.apps} pref={props.pref} onChange={labelsFilter => props.onChange({...props.pref, labelsFilter})} />
</FiltersGroup>

View File

@@ -456,7 +456,9 @@ export const ApplicationsList = (props: RouteComponentProps<any> & {objectListKi
cluster: newPref.clustersFilter.join(','),
labels: newPref.labelsFilter.map(encodeURIComponent).join(','),
annotations: newPref.annotationsFilter.map(encodeURIComponent).join(','),
operation: newPref.operationFilter.join(',')
operation: newPref.operationFilter.join(','),
// Keep URL and preferences consistent. When false, remove the param entirely.
showFavorites: newPref.showFavorites ? 'true' : null
},
{replace: true}
);
@@ -469,7 +471,9 @@ export const ApplicationsList = (props: RouteComponentProps<any> & {objectListKi
'.',
{
health: newPref.healthFilter.join(','),
labels: newPref.labelsFilter.map(encodeURIComponent).join(',')
labels: newPref.labelsFilter.map(encodeURIComponent).join(','),
// Keep URL and preferences consistent. When false, remove the param entirely.
showFavorites: newPref.showFavorites ? 'true' : null
},
{replace: true}
);