How to map a mongodb comparison (e.g. $ne) inside a <Filter /> input

Question

We are using some softDelete functionality for some of our mongodb collections (e.g. Users). The deletedAT prop of these collections is either null or a date. I need to use a filter input to show active (deletedAt = null) or inactive (e.g., deletedAt = ISODate("2019-07-18T20:45:45.340Z")) collection items.

This works for a <List /> filter prop

<List title="User List" {...props} filter={{ deletedAt: null }} >
OR
<List title="User List" {...props} filter={{ deletedAt: { $ne: null } }} >

It actually also works for the filterDefaultValues prop

<List title="User List" {...props} filterDefaultValues={{ deletedAt: null }} >
OR
<List title="User List" {...props} filterDefaultValues={{ deletedAt: { $ne: null } }} >

However, I cannot make this work inside a <Filter /> input e.g.,

export const UserFilter = (props) => (
  <Filter {...props}>
    <RadioButtonGroupInput source="deletedAt" choices={[
      { id: null, name: 'No' },
      { id: '$ne: null', name: 'Yes' },
    ]} alwaysOn />
  </Filter>

)

I get errors like this Cast to date failed for value "$ne: null" at path "deletedAt" for model "User" I've tried a number of different syntaxes, including trying to pass as objects, strings, etc with no luck. I suspect there is a difference in the request between a filter input and the filter/filterDefaultValues props of <List />. I'm hoping for a nudge in the right direction for creating a filter input that will handle mongodb comparison query operators?

Answer 1

This ended up working:

<List title="User List" {...props} bulkActionButtons={<ConfirmBulkDelete />} {...paginationProps} filters={ <UserFilter /> } filterDefaultValues={{ deletedAt: { $type: 'null' } }} >

export const UserFilter = (props) => (
    <SelectInput label="Status" source="deletedAt[$type]" choices={[
      { id: 'null', name: 'Active' },
      { id: 'date', name: 'Archived' },
    ]} alwaysOn />
  </Filter>
)