Implement sidebar on Group Profile Page

[ajpeddakotla]

User Story for Group Profile page As a Hypothesis user, specifically a user of hypothesis that belongs to an annotation group, I want to be able to view all the information about my group in one centralized location, so that I can manage my group's members from one location, and see how much they are annotating.

Description of the sidebar The sidebar on the group profile page aims to serve as a point of reference, allowing the user to view the following information:

• Group Name
• Group Description
• Total number of annotations within the group
• Created: Date that group was created
• Link to group's site. (If no link is added, don't show this field)
• Links for editing the group (only available to the Group Admin)
• Link to leave the group (need to figure out the user flow for the exit path)
• Tags (Implementation discussed in another ticket)
• Members of the group, and how many annotations they've made
• Ability to invite new members to join

Work completed when

• [ ] All elements of sidebar listed above have been implemented (tags are being tracked/implemented in #10 )
• [ ] Group member is able to edit the group profile (do we restrict this to admin only?)
• [ ] User is able to leave the group

[dwhly]

I notice that the users are in frequency order w/ no control to switch sort. Should we implement a similar control to mirror tags? Some groups will have very long member lists. I can imagine alpha order would be helpful as an option there.

For the "Leave this group" we should make sure there is a confirmation on that step, otherwise too easy to click by accident.

[sean-roberts]

• What are the requirements that toggle if the sidebar is visible?
  • Cases that I am thinking about:
  • Multiple groups in search. group:A group:B
  • Search results has only one group on the results but they did not search for a group specifically
• What are the expectations of the mobile UI?
  • This seems like it would be a good idea: something like Facebook's activity feed sidebar does where it's only available for resolutions large enough to support a sidebar?
  • Accommodating it for mobile could be, only show a link on mobile - at the top of the page before the results. Clicking of that link slides in the content. This can be pretty easily managed from a responsive ui standpoint

[dwhly]

Clicking of that link slides in the content.

I like that... could be an icon of some sort, as are typically used to slide in another menu / context on mobile, and then slide it back out.

[ghost]

@dwhly Yes, that is a fine observation. I had added these controls to some of the 3rd party accounts admin pages with this in mind. Perhaps we could just do this now? To discuss.

@sean-roberts

Multiple groups in search. group:A group:B

The only thing visible in the sidebar would be the tags module (if there are any - same as other searches). Although it would be nice to perhaps provide a link to each of the group’s pages. (to discuss)

Search results has only one group on the results but they did not search for a group specifically

There is no group facet so the sidebar would only show the tags module.

What are the expectations of the mobile UI?

I had imagined we would use the same truncation that we use elsewhere in our products. (see below)

Accommodating it for mobile could be, only show a link on mobile - at the top of the page before the results. Clicking of that link slides in the content.

Would like to hear more about the effort required for this approach vs. truncation

[seanh]

Ok, I need to specify this a little more precisely and limit the scope somewhat in order to get started implementing it. At least for the first version that I'm going to implement to start with, I'm going to make a few assumptions when implementing this:

• The group sidebar shown in this card is going to be shown on the group's search page. I'm calling it the "group's search page" for lack of a better name. Currently on production, if you create a group whose automatically generated secret ID is, say, xyz123, and then you go to the /search page and search for "group:xyz123" then you will be redirected to /groups/xyz123/search?q=. This is the search page that I'm talking about. The group sidebar always shows when you're on at any URL that starts with /groups/*/search and never shows when you're at any other URL.
• "Manage my group's members" (from the user story) simply means seeing who is a member of the group and how many shared annotations each member has created in the group, and being able to invite new members to the group. Nothing else comes under "manage" (for example, there will be no ability to remove users from the group.)

• When you click on the "Leave this group" link you will get an ugly "Are you sure?" browser popup like you currently do when you click on an (x) in the groups dropdown in the sidebar to leave a group:

  

• If you click the OK in this dialog you'll be removed from the group and the page will reload. You will find yourself on the /search page (no longer on the group's search page) and with any search terms you had typed still in the search box, except that the group:xyz123 facet will now be gone (now that you're no longer a member of the group, it wouldn't make sense to facet by that group, since you're not allowed to see any of that group's annotations nor see the group's sidebar info).
• No tags will be shown in this sidebar (tracking tags separately in https://github.com/hypothesis/product-backlog/issues/10 means that they're to be implemented as part of that card, not this one)
• The members of the group will be listed with the members with the most annotations first (how it appears to be listed in the designs). There'll be no controls for sorting the members, e.g. alphabetically or in any order.
• The members of the group will simply be a list of all the members of the group. There'll be no scrolling or truncating of this list if it gets really long.
• Only group admins will see the Edit group link
• Edit group is a simple link to the completely separate group edit page (there is not any "inline" editing of group names/descriptions/etc on the search page, for example). It's just a link to the standalone /groups/xyz123/edit page.

• If someone who is not even a member of a group at all types group:xyz123 into the search bar, or directly visits (e.g. clicks on a link to) a group profile page such as https://hypothes.is/groups/xyz123/search?q= then they will see the group info sidebar just like a group member would do. They won't see the Edit group link.

  This is the same as how the existing group profile pages (e.g. /groups/xyz123/my-test-group) work. Anyone with the URL to that page can join the group. There is no security except that the URLs are kept private.

  It's worth drawing attention to this: when we first implemented groups there was one group page, /groups/xyz123/my-test-group, and anyone with a link to that page could get access to the group and become a member. Now, with activity pages, we also have the new group edit page (/groups/xyz123/edit) and the group search page (/groups/xyz123/search?q= and derived pages like /groups/xyz123/search?q=user%3Aseanh+foo+bar). If any of these links is shared (e.g. by email, twitter...) then everyone who sees the link can get access to and become a member of the group. (There's no link to join the group on the group's search page, but if you know the URL of the search page then you can derive the URL of the join page.)

• "Ability to invite new members to join" just means copying the link to the group's page, which you must then email or otherwise give to people, same as how group joining works currently. The link that you copy is the link to the "classic" group page (for example /groups/YNieDEMG/seans-test-group) and not the "new" group search page (/groups/YNieDEMG/search?q=).
• There will be no group link in the sidebar, even though one is shown in the design, because groups don't have links yet

[seanh]

Multiple groups in search. group:A group:B

The only thing visible in the sidebar would be the tags module (if there are any - same as other searches). Although it would be nice to perhaps provide a link to each of the group’s pages. (to discuss)

I'm going to assume that this is something to be done separately, and not something that I'm going to do as part of implementing this sidebar (at least not for the first pass).

My rule:

The group sidebar shown in this card is going to be shown on the group's search page, that is the /groups/xyz123/search page and any subpages thereof (/groups/xyz123/search?q=user%3Aseanh+foo+bar and so on). Any URL that starts with /groups/xyz123/search will have group xyz123's sidebar on it.

The current behaviour on production is:

1. Go to /search and search for a group, type "group:xyz123" into the search bar and hit Enter.
2. You get redirected to /groups/xyz123/search?q=.
3. Now on this page, add a second group to the search: type "group:abc456" into the search bar. You will still be on group xyz123's search page, but the search is faceted by group abc456 as well: /groups/xyz123/search?q=group:abc456. Clearly there's an issue here but I think it's one that we should solve separately from implementing this sidebar.

The solution is probably that if you are on /groups/xyz123/search and you add a second group into the search terms you should be sent to /search?q=group:xyz123&group:abc456. This would be a search page that searches all annotations from either xyz123 or abc456, but it is not the "group search" page of either group. (And as Conor says this would show the tags sidebar module but not any group sidebar module.)

[seanh]

@conordelahunty I think I need more information about how the truncation-based approach to this sidebar on mobile would work. There isn't currently any space for a sidebar on mobile as the documents and annotations take up the full width of the screen:

Do you mean that the sidebar should still appear to the right of the documents, but that it should be (entirely?) off screen? Should there be a horizontal scrollbar?

[dwhly]

I think the URLs here are getting strange. I know this is late in the game, but worth asking.

Why are we implementing a URL of the format /groups/xyz123/search

Why don't we keep this simple and have URLs of the following structure: /search?q=group:xyz123 for the explicit search syntax. /groups/xyz123/my-test-group for the invite link, and after you've joined the group as an alias for /search?q=group:xyz123

But: /groups/xyz123/search?q=tag:foo For what is essentially: /search?q=group:xyz123&tag:foo

Just seems odd to me. I don't get the reasoning behind it.

The activity page will be the home for the group. So special case /search?q=group:xyz123 and show /groups/xyz123/my-test-group instead.

If the person then clicks on a tag, switch to the multiple search term format: /search?q=group:xyz123&tag:foo

[sean-roberts]

Do you mean that the sidebar should still appear to the right of the documents, but that it should be (entirely?) off screen? Should there be a horizontal scrollbar?

Check out his comment: https://github.com/hypothesis/product-backlog/issues/12#issuecomment-254552636

it has a screenshot of what he's thinking. Basically, the content needs to be above the actual results on mobile. But it will only be partially visible and will change visibility when you click more - which slides down the bottom, making the rest of the content visible

[seanh]

Ah right, I just finally realized what that screenshot is showing:

So on small screens the sidebar will appear above the timeframes/documents/annotations and will be vertically truncated with a -More- line. I'll find the existing implementation of this in the client to see how it's done.

[seanh]

The design asks for group links to be shown:

But groups don't actually have links yet. Here's what the group create/edit form looks like:

No group links in the database either. Not sure if there's an existing Trello card somewhere to add links to groups and let people enter them. So I'm not going to put group links into this sidebar, will assume it will be done later as part of a different card.

[sean-roberts]

isn't the link a derived link? Like /groups/xyz123/edit if they have access to edit that group?

[seanh]

The Edit group link is derived (also Leave this group) but the Link: mr-edision.com/english-101 looks like it's supposed to be a third-party link that users can give when they create/edit their group.

[seanh]

Discussion of the responsive layout for this in Slack.

I'm going to back off a bit for now and get a fully functional version of this sidebar for desktop-sized windows working, without any responsive layout, get that merged then do the responsive layout separately.

But when I do get to it, my plan is now to implement this version:

(Though note that some of the controls and icons etc in that mockup are new parts that I won't be implementing as part of this card - just the layout.)

When the screen gets too small the sidebar will disappear and the group name and More info button will appear at the top. The More info button is a simple link to /groups/abc123/search?q=...&more-info, full page reload, loads a version of the page that shows the sidebar fullscreen instead of the search results (and with a Back button). This will be simple to implement without any JavaScript or fancy CSS hacks.

I think that what Conor actually wants is that when you click More info this second "panel" does an animated slide-in, without doing a full page reload. I think that can be implemented as a JavaScript enhancement later, if/when we have time. When we do implement that, the initial full-page-load version of it can remain and be used as the fallback when JavaScript isn't available or fails to load (we should have such a fallback for any solution anyway, imo).

My personal suspicion is that a full page load implementation will be plenty good enough for a first MVP of the activity pages feature that we can ship (full page load sounds bad but it should happen really quickly, if it doesn't then we already have a problem anyway and we should make our page load times faster). JS enhancement will be a very much optional extra.

[seanh]

As discussed with @conordelahunty and @dwhly the invite component:

is gonna have the text changed from "Invite people to join this group using the link below:" to "Sharing the link below lets people join this group:" and the Twitter, Facebook and email icons are going to be removed (because Conor said they were too loud, but the link including clipboard button will remain). I'll send a PR first to make this change on the classic group pages, then I can reuse the component from those pages on the new sidebar.

[dwhly]

Thanks @seanh!

[seanh]

Interesting note: currently the Edit group and Leave this group links will never be shown at the same time, as in the mockup. Only the creator of a group can edit the group, but the creator can't leave the group. So the creator sees Edit group only, whereas all other members see Leave this group only.