feat(frontend): None selection option in filters dropdown

[vunder]

Description

Adds "None" button to multi-selector within the filter's dropdown. Deselects all values

Related issue

Closes #1691

[vercel]

@vunder is attempting to deploy a commit to the measure Team on Vercel.

A member of the Team first needs to authorize it.

[anupcowkur]

Thanks for the PR!

This is a legitimate UX issue and needs addressing.

The issue with the current PR is that some of our APIs require at least one selection to be present and will throw errors if no filter option is selected. It is invalid to have no selection for those filters in certain cases.

Suggestion: Make a "First" option instead of "None".

App version filter already has a "Latest" option to select only one app version so can be left as is. For the other two filter types you've modified, you can add a "First" option that will select the first item in the list. This should solve the problem of having to deselect everything one by one and make things easier.

[vunder]

The issue with the current PR is that some of our APIs require at least one selection to be present and will throw errors if no filter option is selected. It is invalid to have no selection for those filters in certain cases.

What is UI will not make any request to BE if nothing was selected?

[anupcowkur]

The issue with the current PR is that some of our APIs require at least one selection to be present and will throw errors if no filter option is selected. It is invalid to have no selection for those filters in certain cases.

What is UI will not make any request to BE if nothing was selected?

When selection changes, we have to make a BE request.

For example, if you had selected items 1 and 2 and then hit "None", the frontend will have to request new data from backend since the selection is now different from what it was originally. If no request is made then old data will be displayed (which would be for items 1 & 2) leading to UI inconsistency.

[vunder]

What I ment is: what if not trigger onChangeSelected if nothing is selected?

measure/frontend/dashboard/app/components/dropdown_select.tsx

Line 143 in be04f8b

onChangeSelected?.(selected);

    if (selected.length > 0) {
        onChangeSelected?.(selected);
    }

[anupcowkur]

What I ment is: what if not trigger onChangeSelected if nothing is selected?

measure/frontend/dashboard/app/components/dropdown_select.tsx

Line 143 in be04f8b

onChangeSelected?.(selected);

    if (selected.length > 0) {
        onChangeSelected?.(selected);
    }

We would run into the same problem as before. If something gets unselected, the data needs to be refreshed so that the selection matches the data in the UI so we would always have to fire the listener.

[vunder]

My proposal is following:

  useEffect(() => {
    if (!Array.isArray(selected) || selected.length > 0)
      onChangeSelected?.(selected);
  }, [selected]);

Basically - do not trigger selection change event if the selected state is invalid. In this case - do not trigger event if selected array data is empty

Suggestion: Make a "First" option instead of "None".
"First" does not helpful if you have dataset with is not "historical" (e.g. Device Manufacturer). And such option forces to have several additional steps when you just want to select some specific value:

• click "First"
• find necessary item and selected it
• go to the beginning of the list to manually deselect first item

[anupcowkur]

My proposal is following:

  useEffect(() => {
    if (!Array.isArray(selected) || selected.length > 0)
      onChangeSelected?.(selected);
  }, [selected]);

Basically - do not trigger selection change event if the selected state is invalid. In this case - do not trigger event if selected array data is empty

Suggestion: Make a "First" option instead of "None".
"First" does not helpful if you have dataset with is not "historical" (e.g. Device Manufacturer). And such option forces to have several additional steps when you just want to select some specific value:

• click "First"
• find necessary item and selected it
• go to the beginning of the list to manually deselect first item

Understood the proposal. The issue still remains though - If some items are selected and then "None" is pressed, if we do not fire a change, then the UI will reflect the state of those previous items being selected and not the new state (nothing selected).

Regarding "First", it's not ideal so I think we will invest some time into making all the APIs accept no filters without throwing errors and then revisit this.

Tracking that issue here: #1725

[anupcowkur]

We discussed this internally. We'll go ahead and merge this.

Just need one change: the commit format check is failing because "None" in the commit message is Camel case. If you can make it "none" and amend the commit, we can proceed with the merge once the lint check passes.

[vunder]

Just need one change: the commit format check is failing because "None" in the commit message is Camel case. If you can make it "none" and amend the commit, we can proceed with the merge once the lint check passes.

Since changes were pushed, amend produced an additional merge commit. I can create another branch

[anupcowkur]

Just need one change: the commit format check is failing because "None" in the commit message is Camel case. If you can make it "none" and amend the commit, we can proceed with the merge once the lint check passes.

Since changes were pushed, amend produced an additional merge commit. I can create another branch

Sure. You'll have to close this PR and open a new one from that branch.

[vunder]

@anupcowkur Please check new one #1752