New Competition Search UI | various improvements

[kr-matthews]

Addresses a few issues from #9788 - see commit list.
The region dropdown bug isn't fully fixed - I left details about that on the linked issue.

Edit: not sure how to best resolve the cyclical dependency. Should I move this (or all) filter constants to a new file?

[gregorbg]

Code changes fine per se. You should probably move WCA_EVENT_IDS to filterUtils to avoid the cyclic dependency as you suggested.

[kr-matthews]

@gregorbg Any insight on the drop-down icon issue? From the linked issue:

The dropdown is 'clearable', so when something is selected, there should be an "x" icon to clear it. The component does this via class="dropdown icon clear". For some reason, that's not working, and the dropdown arrow icon is still showing up. Possibly we're missing semantic-ui-css, or need to update semantic-ui-react? I'm stuck here.

[gregorbg]

That was actually an interesting issue to debug. I checked that we are definitely using an up-to-date version of the stylesheets, but we're using Fomantic CSS (a maintained fork) whereas the clearable feature lives in Semantic CSS.

The clearable feature must have been one of the last things they added around the time it was forked, so the CSS styles are missing in Fomantic stylesheets. I have now manually ported them over and pushed a commit, which should fix the isse.

[kr-matthews]

I have now manually ported them over and pushed a commit, which should fix the isse.

Running locally, I see nothing (as opposed to the "x" I should, or the "v" drop-down arrow I was before).

I have been having trouble with docker recently, so maybe it's just my setup.

[gregorbg]

This most likely means that your browser is caching some stylesheets. Try hitting Ctrl+Shift+R (or the Mac equivalent, which I think is Cmd+Shift+R)