Add notification bubble on Main Nav for super-librarians # pending MRs

[mekarpeles]

Describe the problem that you'd like solved

Options are to add a bubble to the avatar and then a entry + bubble into the sub-navigation within the hamburger

Or to add a bubble directly to the black IA topbar which when clicked goes directly to /merges

.mr-notifications {
    position: absolute;
    z-index: 4;
    background: #02598b;
    color: white;
    border-radius: 8px;
    padding: 3px 7px;
    font-size: 12px;
    margin-left: 9px;
    margin-top: 35px;
    font-weight: bold;
 }

Proposal & Constraints

Additional context

Stakeholders

[SyedMa3]

Hi @mekarpeles. I have just started contributing to open source and I would like to work on this. Can you please explain "entry + bubble into the sub-navigation within the hamburger"? Thanks

[jimchamp]

I believe that @mekarpeles is asking for a new link to be added to the navigation drawer that is opened when the avatar is clicked:

The entry can be something like "Pending Requests", and appear in the "My Open Library" section. A bubble can also be added to the new entry.

The new entry should only appear for members of /usergroup/admin and /usergroup/super-librarians.

The bubble should contain the number of "Pending" merge requests, and should not appear if there are no such requests.

One can get the pending merge request counts by passing mode='open' the this method: https://github.com/internetarchive/openlibrary/blob/851864fdb37ba789f5170234638c11fe431af9d3/openlibrary/core/edits.py#L74

Both the avatar and navigation drawer are in the same template: https://github.com/internetarchive/openlibrary/blob/master/openlibrary/templates/lib/header_dropdown.html

That template takes a dict defining the drawer's headings and links. That dict is defined in this file: https://github.com/internetarchive/openlibrary/blob/master/openlibrary/templates/lib/nav_head.html

Lastly, the template for the IA top bar is: https://github.com/internetarchive/openlibrary/blob/master/openlibrary/templates/site/alert.html

The bubble should be added to either the IA top bar or the avatar, but not both.

[ciannellaleo]

Hello! I am a new contributor and would like to work on this issue. Does it is still available? If yes, could you assign me, please, @jimchamp?

[jimchamp]

@SyedMa3, are you still interested in working on this? @ciannellaleo if there is no response from @SyedMa3 by this time tomorrow, consider yourself assigned.

[SyedMa3]

@jimchamp Yes, I have been going through the codebase. Can you assign me the issue? Thanks.

[SyedMa3]

@jimchamp . I have a doubt. How do I access the get_counts_by_mode method from https://github.com/internetarchive/openlibrary/blob/master/openlibrary/templates/lib/header_dropdown.html using templetor.

PS: I have completed the bubble and hamburger list part. Only the The bubble should contain the number of "Pending" merge requests, and should not appear if there are no such requests. is left.

[jimchamp]

We can expose functions for use in templates by using the @public decorator. I recommend adding a new top-level public function in /openlibrary/core/edits.py that returns the counts for a given mode.

You'll probably have to restart the application before the new function can be used. You can do this by running the following:

docker-compose restart web

You should then be able to call the new function from any template.

[jimchamp]

@ciannellaleo #6660 is another good first issue, if you're interested.

[ciannellaleo]

Ok @jimchamp. Can you assign it to me, please?

[jimchamp]

Please comment on that issue, and then Github will permit me to assign you. In the meantime, feel free to start working on it.

[SyedMa3]

@jimchamp. I implemented everything. How do I create "Pending merge requests" in order to test my implementation? Thanks.

[jimchamp]

Adding new merge requests in local dev environments is a very cumbersome process at the moment. It's probably best to import test data for now. Running the commands found here will populate the merge request table 3 merge requests (2 pending and 1 closed).