Group membership change propegation
Summary
Closes #2228
This MR makes it so that when joining, leaving, creating and destroying a group, the sidebar updates without the user having to refresh.
Steps to test
Create and Delete
- Log in.
- Create a new group.
- Check the sidebar has the new group without you having to reload.
- Delete the group, it should now be gone.
Leave and Join
- Join a group that you are not an admin of.
- Leave the group - it should now be gone from the sidebar.
- Rejoin, it should be back.
Estimated Regression Scope
GroupsService, The group sidebar have been the main focus of this change, most of the logical changes are in there.
I've also touched two other areas due to errors flooding my console when testing:
Avatar component, the only change is an extra condition in an if statement, so I don't see much of an issue with that but note it has been touched.
Other than that some changeDetection was added to the videochat component.
added scoped labels
39 39 this.isActive = false; 40 40 } 41 41 this.cd.markForCheck(); 42 this.cd.detectChanges(); 42 if (!this.cd['destroyed']) { 43 this.cd.detectChanges(); 44 } 43 45 } 44 46 ); 45 47 } 46 48 47 49 ngOnDestroy() { 50 this.cd.detach(); 48 51 this.service.deactivate(); ![Ben Hayward](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><rect fill-opacity="0"/></svg>)
DeveloperNot related to this change per se, but trying to use a destroyed change detector was flooding the console; this is likely somewhere in sentry but I could not find the issue.
- Resolved by Brian Hatchet
added 7 commits
-
f0812700...52608901 - 6 commits from branch
master - 20ca45a7 - Merge branch 'master' of gitlab.com:minds/front into fix/group-membership-propegation-2228
-
f0812700...52608901 - 6 commits from branch
- Last updated by Ben Hayward
73 78 }) 74 79 75 80 it('should be able to toggle conversation and comment on it', () => { 76 77 cy.get("m-group--sidebar-markers li:contains('test group')") 78 .first() 79 .click(); 80 81 cy.get('.m-groupSidebarMarkers__list').children().its('length').then((size) => { 82 cy.get(`m-group--sidebar-markers li:nth-child(${size - 1})`).click(); - Developer
Why did we change that to a more brittle nth-child selector?
- Developer
I don't see it as more brittle, as the element I was to get is always going to be at that index, clicking the last group in the list (array length - 1) which is the group that the e2e test creates every time.
Doing the following:
cy.get("m-group--sidebar-markers li:contains('test group')") .first() .click();Grabs the first group in the list named test group. If the test is interrupted you'll find yourself with more than one test group, so actually be deleting the first one every time. That said this solution also is not perfect as if the test is interrupted more than 12 times, the groups bar will be full so you'll only ever get the 12th group in (as we aren't going searching through the "see more".
Multiple things we could do to switch this up if you'd like adding randomized group names in so we can identify which one it is. I liked this approach though because then I verify that the bar is one item shorter after the deletion.
- Developer
Actually, I've made a change to unshift to the start of the array, rather than push to the end. I think that makes the most sense to handle the 12 group issue, and it makes more sense for the end-user to see their newly joined group top of the list.
98 101 }) 99 102 100 103 it('should post an activity inside the group and record the view when scrolling', () => { 101 cy.get("m-group--sidebar-markers li:contains('test group')") 102 .first() 103 .click(); 104 cy.get('.m-groupSidebarMarkers__list').children().its('length').then((size) => { 105 cy.get(`m-group--sidebar-markers li:nth-child(${size - 1})`).click(); - Developer
Same here, nth-child
![:speech_balloon:](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><rect fill-opacity="0"/></svg> ":speech_balloon:"){kind=small}