Modern groups #5977 (!2267) · Merge requests · Minds / Minds Frontend

Ticket(s) / Related Merge Requests

Summary of Changes

Recreate groups feed page with new design.

Navigation

Navigating is currently limited to 2 tabs - "Discussion" (aka feed) and "Members". We land on "Discussion" by default. Clicking "Members" displays the current v1 members pane inside this new layout. The page jumps a bit when the members page is loaded. I am not concerned about that jitteriness because I imagine this page is going to be given a facelift soon.

Two additional 'tabs' are not visible here because they weren't included in designs - Requests and Review. Users with permissions and reasons to access these features can get to/from them the same way they currently can. It is not ideal, but it is tolerable because this is just a first pass on the groups redesign.

To see the Review pane (where group moderators of groups with moderation enabled can choose to approve/deny posts in the feed), a group moderator must click on a notice that will appear at the top of the feed, letting them know that posts are awaiting review. Alternatively, one can get there via url: /group/{{groupGuid}}/review. At the time of this MR, the group moderation features were broken, but Ben's MR with a fix (!2265 (merged)) is pending review. This particular feature will be difficult to test before it is merged.

Anyone can see the Requests pane by navigating to the Members tab and clicking "Requests". Not sure if the requests pane is functional or what this is supposed to look like when there are pending requests, but that is out of scope of this issue. It will display the exact same component that is currently available when someone clicks on "Requests" from the members page. Alternatively, one can get there via url: /group/{{groupGuid}}/requests.

To leave either of these "hidden" panes, the user can click the back button at the top or click one of the visible tabs ("Discussion"/"Members").

Other things to note:

Settings '…' button

(See red #1 on image above) This is a restyle of the settings cog in current groups. It shows the same items as it currently does (depending on the user and their role in the group). The only difference is that in v2, the options related to Gatherings are removed. When a user with edit permissions clicks to edit the group, they will be redirected to the legacy v1 group page, in edit mode. After making changes, they will need to click on the v1 settings cog and click "save". Clicking "save" will redirect back to the v2 group page, where they can see their changes.

Membership button

(#2) This is a restyle of the membership button in current groups. It shows the same items as it currently does (depending on the user and their role in the group). The only difference is that in v2, the text has been expanded where appropriate, as indicated in the design (e.g. "Leave" in v1 displays as "Leave Group" in v2. "Join" becomes "Join Group", etc.). Note that in mobile web, the location of this button changes (#7).

Member previews

(#3) This is a loose combination of two existing components - the current member previews (displayed on the group profile page) and the mutual subscriptions displayed on current channels. Up to 3 avatars and 2 user names will be displayed. A logged in user should not be included in the preview avatars or names. If a logged in user is the only member of the group, the component will not display. If you click on one of the names/avatars, you will be directed to the channel you clicked on. If you click on the rest of the text, you will be redirected to the Members tab of the group page.

Group description

(#4) This is the description of the group. Longer descriptions are faded out after a certain point. Clicking on the fadeout reveals the entire text. Additionally, descriptions over 5000 characters in length are truncated to 5000 characters only, even with the full text visible. As per the design, this component is moved below the group description (to the location of #8) in mobile web. However, during testing I was only able to get this component to display on mobile web if I first loaded the page on desktop and then switched to mobile view in the dev tools. A ticket has been created for this known bug, b/c I don't think it's important enough to hold up this MR: #5981 (closed)

Feed search

(#5) This was cobbled together to fit the design. It works the same as it already works, it's just in a different location. Click to reveal the search query modal, type in text and press enter to filter the feed to show only posts that include the search query text. A notice will appear at the top of the feed when a search query is active. Click "clear" to reset the feed.

Feed filter

(#6) Same as above - cobbled together to fit the design, and works the same as it currently does. Selecting a filter should add a query param to the url (e.g. /group/{{groupGuid}}/feed?filter=images). Users should be able to load a page with a filter pre-selected, as long as they include the queryParam in the url on load.

Date filter

This is in the mockups but since we didn't already have this functionality, it was non-trivial to add it into the existing group feed service. Added this ticket to handle it: #5982 (closed)