feat: Implement new filters panel

[vsgoulart]

Description

Creates feature flagged side panel with new filters UI

Related issues

related #17714

[vsgoulart]

@volodymyr-melnykc Could you take a look into this locally?
I can show you how to enable the feature flag

[douglasbouttell-camunda]

Can this be simplified to sortBy === 'completion'?

[vsgoulart]

No, there's a bug. It should be (sortBy === 'completion' && !['custom', 'completed'].includes(filter))

[vsgoulart]

I'll actually use you suggestion, it will make it more complicated than it needs to be if do what I originally wanted to do

[douglasbouttell-camunda]

filter === 'custom' always evaluates to true

[vsgoulart]

Yep, it was a copy and paste mistake

[douglasbouttell-camunda]

Could this be simplified to

new URLSearchParams({
  ...convertedParams,
  ...values,
  ...customFiltersParams
})

The key length check seems redundant.

[vsgoulart]

Yeah, there were some type issues before on the old implementation but on this one I do some manipulation before so it's not really necessary anymore

[douglasbouttell-camunda]

I would extract this as a function which returns an object with the values to update. That way you don't have to repeat the params to delete.

const {filter, userId, currentParams} = options;
const {sortBy, ...convertedParams} = Object.fromEntries( currentParams.entries() );
const customFilterParams = filter === 'custom' ? getCustomFilterParams( userId ) : {};

const updatedParams = new URLSearchParams({
  filter,
  ...convertedParams,
  ...values,
  ...customFilterParams,
});

if (sortBy !== undefined && sortBy !== 'completion') {
  updatedParams.set('sortBy', sortBy);
}
if (filter === 'completed') {
  updatedParams.set('sortBy', 'completion');
}

difference(
  CUSTOM_FILTERS_PARAMS,
  Object.keys(customFiltersParams),
).forEach((param) => {
  updatedParams.delete(param);
});

return updatedParams.toString();

[douglasbouttell-camunda]

What are your thoughts on having a isActive prop? This is the only instance that uses isActiveOnEmpty.

isActive={filter === 'all-open' || filter === null}

Just seems like you're passing a lot of data to do this comparison in the Link component rather than here.

[vsgoulart]

yep, this is better

[vsgoulart]

@douglasbouttell-camunda Should be ready for review again

[douglasbouttell-camunda]

Looks good. Some things to think about as you progress.

[douglasbouttell-camunda]

Looks like you're trying to build a collapsible menu here. I would start with markup that looks like:

<nav>
  <ul>
    <li>
     <a aria-owns="filters-menu" aria-expanded="false">Filters <Icon/></a>
     <ul role="group" id="filters-menu">
      <li>...</li>
     </ul>
    <li>
    <li>
     <a aria-owns="custom-filters-menu" aria-expanded="false">Custom Filters <Icon/></a>
     <ul role="group" id="custom-filters-menu">
      <li>...</li>
     </ul>
    <li>
  </ul>
</nav>

The rest is styles.

I'm fine to keep it like this for now but we should make a proper menu component in the near future.

[vsgoulart]

@douglasbouttell-camunda I can do that, but this menu will only have one group for the foreseeable future

[douglasbouttell-camunda]

Is the !important necessary?

[vsgoulart]

I just wanted to make sure it wouldn't break the layout with the flag disabled, but this feature flag won't live for long so I'll just remove for now