Web: Build - Tidy up the Gitcoin Issue Explorer search and filter functions and move them to the left hand sidebar.

[frankchen07]

User Story

As a contributor who regularly uses the Gitcoin Issue Explorer, I would like a neater, less intrusive search and filter function for the explorer.

Current Implementation & Reasoning for Change

1. Currently, the filter options crowd the left hand sidebar of the Issue Explorer. Given our heatmap data of clicks, certain filters are seldomly used, as compared to "project status" and "experience level". We will openly display the ones that are more commonly used, and shuttle the remaining filters under an "advanced" tab.

1. Currently, the search bar spans a majority width of the page, which is unnecessary, given most search terms that are typed in are no longer than a word or a phrase. Shortening the search bar and shuttling it to the left hand sidebar frees up screen real estate at the top of the page.

1. Currently, below the search bar there is a tracker that tracks the history of the search terms. I'd say that it's a bit confusing. Terms that are inputted into the search bar should just end up as a card that one can X out. For the v1 migration of the search bar to the left hand sidebar, we will leave out the historical tracker (@PixelantDesign to confirm).

Expected Output

Definition of Done

1. Left-hand side bar contains an advanced tab that hides less commonly used filters.
2. Experience level, project type, and issue status are filters that are by default, shown.
3. Experience level and project type have more than one selection type checkboxes, and issue status filters have only one selection type.
4. Search bar should be shortened to fit the left hand sidebar and follows the coloring guidelines in the expected output section.
5. Adding a search function should add a purple keyword card that can be X'ed out by the user. Multiple keywords must be comma delineated in order for separate keyword cards to show up.
6. Question marks next to the experience level and project type filters will retain their default function of popping up information.
7. The reset filters option should retain its function, but follow the new coloring schema.

[thelostone-mc]

@willsputra could I get the sketch file for this ? ^_^

[PixelantDesign]

Looking at it again, the only thing I'm wondering is, should the status be below the search... @frankchen07 @thelostone-mc @willsputra

[thelostone-mc]

@PixelantDesign I am leaning towards it but I'm not sure how many users would use it more often than project type and experience.
Ideally, the explorer is a place where folks come to solve bounties so 90% of the time it would with the open filter !

[willsputra]

@thelostone-mc Here's the sketch file
https://drive.google.com/open?id=1lf1JOGyI_IKqgjT5a-8mCzQjQXUEHaQd

Do let me know if I missed anything :p

[PixelantDesign]

Looks like users are clicking on experience level and project type more, so lets leave as is!

[thelostone-mc]

Had some weird issues with the history search bit.
Clicking on the history should ideally add all the missing filters but that doesn't seem to be happening
It also sort of seems broken in live. Is that how it was intended to work ? @owocki

For the v1 migration of the search bar to the left hand sidebar, we will leave out the historical tracker

@frankchen07 @PixelantDesign Do I hide it for now? If we are not gonna keep it -> I'd rather just delete the code than sit and fix it

This is the current state of the this task

I sort of ended up sitting pulling a few late nights with this and lost track of time.
Figured I'd wrap this up and take a break 😅

[owocki]

search history seems to work on live to me..

http://bits.owocki.com/656b75bcb926/Screen%20Recording%202018-11-09%20at%2010.28%20AM.gif

@thelostone-mc mind posting repro steps for what you think is broken on live? btw, what branch is that on (your screencast)?

[frankchen07]

@thelostone-mc - commented in the Slack channel as well, but it seems multiple Gitcoin Core members are a bit confused by the history tagging.

I'll recommend that we hide the history tabs as we migrate to the left hand side for now, and bring that feature back when we have other prioritized items finished (mainly Gitcoin Bot, project workflow stuff, and surfacing open issues, and a bunch of other things that are up there).

When the time comes, @octavioamu had a good idea to incorporate a Google-like drop down menu for search history, but we can implement this later.

[thelostone-mc]

@owocki
PR: https://github.com/gitcoinco/web/pull/2744
branch : explorer

In live :

@frankchen07 Alrighty will hide it for now ^_^

[owocki]

hmm its the damnest thing.. i just cannot repro that..

maybe we should disable it and place a bounty on someone rewriting it to be a little bit more object orieted?