fix(ui): don't use anti-pattern in CheckboxFilter (#11739)

argoproj · Sep 5, 2023 · a85c4b8 · a85c4b8
1 parent ea8bf4d
commit a85c4b8
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 40 deletions.
diff --git a/ui/src/app/cron-workflows/components/cron-workflow-list/cron-workflow-list.tsx b/ui/src/app/cron-workflows/components/cron-workflow-list/cron-workflow-list.tsx
@@ -35,7 +35,7 @@ export const CronWorkflowList = ({match, location, history}: RouteComponentProps
     const [namespace, setNamespace] = useState(Utils.getNamespace(match.params.namespace) || '');
     const [sidePanel, setSidePanel] = useState(queryParams.get('sidePanel') === 'true');
     const [labels, setLabels] = useState([]);
-    const [states, setStates] = useState([]);
+    const [states, setStates] = useState(['Running', 'Suspended']); // check all by default
 
     useEffect(
         useQueryParams(history, p => {

diff --git a/ui/src/app/shared/components/checkbox-filter/checkbox-filter.tsx b/ui/src/app/shared/components/checkbox-filter/checkbox-filter.tsx
@@ -10,45 +10,39 @@ interface Props {
     onChange: (selected: string[]) => void;
 }
 
-export class CheckboxFilter extends React.Component<Props> {
-    constructor(props: any) {
-        super(props);
-        this.props.items.forEach(item => this.props.selected.push(item.name));
-    }
+export function CheckboxFilter(props: Props) {
+    const unavailableSelected = props.selected.filter(selected => !props.items.some(item => item.name === selected));
+    const items = props.items.concat(unavailableSelected.map(selected => ({name: selected, count: 0})));
 
-    public render() {
-        const unavailableSelected = this.props.selected.filter(selected => !this.props.items.some(item => item.name === selected));
-        const items = this.props.items.concat(unavailableSelected.map(selected => ({name: selected, count: 0})));
-        return (
-            <ul className='checkbox-filter columns small-12'>
-                {items.map(item => (
-                    <li key={item.name}>
-                        <React.Fragment>
-                            <div className='row'>
-                                <div className='checkbox-filter__label columns small-12'>
-                                    <Checkbox
-                                        checked={this.props.selected.indexOf(item.name) > -1}
-                                        id={`filter-${this.props.type}-${item.name}`}
-                                        onChange={() => {
-                                            const newSelected = this.props.selected.slice();
-                                            const index = newSelected.indexOf(item.name);
-                                            if (index > -1) {
-                                                newSelected.splice(index, 1);
-                                            } else {
-                                                newSelected.push(item.name);
-                                            }
-                                            this.props.onChange(newSelected);
-                                        }}
-                                    />{' '}
-                                    <label title={item.name} htmlFor={`filter-${this.props.type}-${item.name}`}>
-                                        {item.name}
-                                    </label>
-                                </div>
+    return (
+        <ul className='checkbox-filter columns small-12'>
+            {items.map(item => (
+                <li key={item.name}>
+                    <React.Fragment>
+                        <div className='row'>
+                            <div className='checkbox-filter__label columns small-12'>
+                                <Checkbox
+                                    checked={props.selected.indexOf(item.name) > -1}
+                                    id={`filter-${props.type}-${item.name}`}
+                                    onChange={() => {
+                                        const newSelected = props.selected.slice();
+                                        const index = newSelected.indexOf(item.name);
+                                        if (index > -1) {
+                                            newSelected.splice(index, 1);
+                                        } else {
+                                            newSelected.push(item.name);
+                                        }
+                                        props.onChange(newSelected);
+                                    }}
+                                />{' '}
+                                <label title={item.name} htmlFor={`filter-${props.type}-${item.name}`}>
+                                    {item.name}
+                                </label>
                             </div>
-                        </React.Fragment>
-                    </li>
-                ))}
-            </ul>
-        );
-    }
+                        </div>
+                    </React.Fragment>
+                </li>
+            ))}
+        </ul>
+    );
 }