Repository: strapi/strapi
File: packages/core/admin/admin/src/components/Filters.tsx (TypeScript)

Code before:
          {label || formatMessage({ id: 'app.utils.filters', defaultMessage: 'Filters' })}
        </Button>
      </Popover.Trigger>
    );
  }
);

/* -------------------------------------------------------------------------------------------------
 * Popover
 * -----------------------------------------------------------------------------------------------*/

const PopoverImpl = () => {
  const [{ query }, setQuery] = useQueryParams<Filters.Query>();
  const { formatMessage } = useIntl();
  const options = useFilters('Popover', ({ options }) => options);
  const onChange = useFilters('Popover', ({ onChange }) => onChange);
  const setOpen = useFilters('Popover', ({ setOpen }) => setOpen);

  if (options.length === 0) {
    return null;
  }

  const handleSubmit = (data: FilterFormData) => {
    const value = FILTERS_WITH_NO_VALUE.includes(data.filter)
      ? 'true'
      : encodeURIComponent(data.value as string);

    if (!value) {
      return;
    }

    if (onChange) {
      onChange(data);
    }

    /**
     * There will ALWAYS be an option because we use the options to create the form data.
     */
    const fieldOptions = options.find((filter) => filter.name === data.name)!;

    /**
     * If the filter is a relation, we need to nest the filter object,
     * we filter based on the mainField of the relation, if there is no mainField, we use the id.
     * At the end, we pass the operator & value. This value _could_ look like:
     * ```json
     * {
     *  "$eq": "1",
     * }
     * ```
     */
    const operatorValuePairing = {

Review comment (suggestion):
```suggestion
      : encodeURIComponent(data.value ?? '');
```

Code after:
          {label || formatMessage({ id: 'app.utils.filters', defaultMessage: 'Filters' })}
        </Button>
      </Popover.Trigger>
    );
  }
);

/* -------------------------------------------------------------------------------------------------
 * Popover
 * -----------------------------------------------------------------------------------------------*/

const PopoverImpl = () => {
  const [{ query }, setQuery] = useQueryParams<Filters.Query>();
  const { formatMessage } = useIntl();
  const options = useFilters('Popover', ({ options }) => options);
  const onChange = useFilters('Popover', ({ onChange }) => onChange);
  const setOpen = useFilters('Popover', ({ setOpen }) => setOpen);

  if (options.length === 0) {
    return null;
  }

  const handleSubmit = (data: FilterFormData) => {
    const value = FILTERS_WITH_NO_VALUE.includes(data.filter)
      ? 'true'
      : encodeURIComponent(data.value ?? '');

    if (!value) {
      return;
    }

    if (onChange) {
      onChange(data);
    }

    /**
     * There will ALWAYS be an option because we use the options to create the form data.
     */
    const fieldOptions = options.find((filter) => filter.name === data.name)!;

    /**
     * If the filter is a relation, we need to nest the filter object,
     * we filter based on the mainField of the relation, if there is no mainField, we use the id.
     * At the end, we pass the operator & value. This value _could_ look like:
     * ```json
     * {
     *  "$eq": "1",
     * }
     * ```
     */
    const operatorValuePairing = {