Add clear stops button

[zachzwy]

Fixes #438.

Proposed changes

Add a clear stops button.

It will clear the selected stops. However, the URL doesn't change. Ideally, the URL should be updated as well. I guess redux-first-router should be able to handle it somehow. Not sure how to do it though. Look for any feedback and suggestions.

Also, when the screen becomes smaller, it is not well responsive. See the screenshot below. I will need to address this as well.

Screenshot

...

[exxonvaldez]

Look at #347 to see how to push links that remove state info. Pushing the new url would replace the call to onGraphParams, because the push triggers a call to onGraphParams.

In terms of UI design, the button seems kind of disconnected from the stop pickers by being on the other side of the screen, and doesn't disable itself when no stops are chosen. Also, we that react-select stop pickers are in the works. In their demo at https://react-select.com/home , you can see there are "x" buttons to clear selections, which seem intuitive. The next best choice, if we still had regular MUI selects, would be a clear ("x") button just to the right of the select.

[hathix]

This has been sitting around for a while. @zachzwy , are you OK to finish this?

[zachzwy]

I'll keep working on this PR. @hathix

[zachzwy]

The below screenshot is a very react-select native "clear" button (An "X" icon right next to the select content).

It looks good until I revisit the issue #438 we are trying to solve. I believe the goal here to enable user to easily go back to the route overview screen. With this proposal, user needs to click "X" icon twice for from stop and to stop, which I don't think is a good idea.

We might want to think of a different UI to enable this. Or, I actually believe clicking the breadcrumb button is a pretty good way to achieve this goal.

What do you think? @exxonvaldez @hathix

[exxonvaldez]

Hmm, there may not be any quick solution here. Seems like the most intuitive thing is to group the stop pickers together into a "fieldset" (in HTML terms) aka outlined inputs (in Material UI terms). Then you can associate a clear button with the entire fieldset.

As for quick fixes, the react-selects with clear buttons look good. If the user clears the "to" picker or the "from" picker, then the UI will be showing the route summary (because trip summary requires both pickers to have selections), so the route summary is just one click away, although it's not obvious.

The breadcrumbs are working to go back to the route summary, but are also not obvious. There are actually two breadcrumb links that can work -- one to go to the route summary with no direction chosen, and one for the route summary in a given direction.

The browser back button also works to go the route summary, if the user didn't follow a direct link with stops preselected.

Finally, there's the new #469 "return to dashboard" button, which could be enhanced to be more like the brower's back button. Especially now that we have a clickable logo which always goes to the dashboard.