fix(webapp): Only allow one error filter at a time (#3013)

## Describe your changes

Right now it's kind of odd that you can select both error states but on
the server it only applies the first one chosen. This makes it where the
UI only allows one error state to be chosen, which is more consistent
with the API.

## Issue ticket number and link


https://linear.app/nango/issue/NAN-2197/connections-error-filter-shoudnt-be-a-multiselect

## Checklist before requesting a review (skip if just adding/editing
APIs & templates)
- [ ] I added tests, otherwise the reason is: 
- [ ] I added observability, otherwise the reason is:
- [ ] I added analytics, otherwise the reason is:

packages/webapp/src/pages/Connection/List.tsx

@@ -120,14 +120,14 @@ export const ConnectionList: React.FC = () => {
     const [selectedIntegration, setSelectedIntegration] = useState<string[]>(defaultFilter);
     const [search, setSearch] = useState<string>('');
     const [debouncedSearch, setDebouncedSearch] = useState<string>('');
-    const [filterWithError, setFilterWithError] = useState<string[]>(defaultFilter);
+    const [filterWithError, setFilterWithError] = useState<string>('');
     const [readyToDisplay, setReadyToDisplay] = useState<boolean>(false);
 
     const { data, loading, error, hasNext, offset, setOffset, mutate } = useConnections({
         env,
         search: debouncedSearch,
         integrationIds: selectedIntegration,
-        withError: filterWithError[0] === 'all' ? undefined : filterWithError[0] === 'error'
+        withError: filterWithError === 'all' ? undefined : filterWithError === 'error'
     });
 
     useUnmount(() => {
@@ -150,6 +150,11 @@ export const ConnectionList: React.FC = () => {
         setSelectedIntegration(values);
     };
 
+    const handleFilterErrorChange = (values: string[]) => {
+        const newItems = values.filter((f) => !filterWithError.includes(f));
+        setFilterWithError(newItems.length > 0 ? newItems[0] : defaultFilter[0]);
+    };
+
     const onEvent: OnConnectEvent = useCallback(
         (event) => {
             if (event.type === 'close') {
@@ -221,7 +226,7 @@ export const ConnectionList: React.FC = () => {
         columns,
         getCoreRowModel: getCoreRowModel()
     });
-    const hasFiltered = debouncedSearch || selectedIntegration[0] !== 'all' || filterWithError[0] !== 'all';
+    const hasFiltered = debouncedSearch || selectedIntegration[0] !== 'all' || filterWithError !== 'all';
 
     if (error) {
         return (
@@ -315,9 +320,9 @@ export const ConnectionList: React.FC = () => {
                             <MultiSelect
                                 label="Filter Errors"
                                 options={filterErrors}
-                                selected={filterWithError}
+                                selected={[filterWithError]}
                                 defaultSelect={defaultFilter}
-                                onChange={setFilterWithError}
+                                onChange={handleFilterErrorChange}
                                 all
                             />
                         </div>