alois/Verso
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[web] Migrate group management to React (#11293)

Browse Source 
* Rename manage group entry point

* Migrate group management root page to React

* Add cypress tests for the group management react page

* Fix linting

* Add checkbox labels for screen-readers + remove unused classes

* Await on add/remove members calls

* Display the export CSV link for a full group

* Display error message when group is full

* Sort locales

* Handle the managers management page in React version

* Fix missing type in GroupMemberRow

* Split members and managers React pages

* Build API paths on frontend side + add cypress tests for each page

* Fix linting

* Update unit tests

* Review improvements

* Type API errors

GitOrigin-RevId: d124a9d24cbf33de8aacc5d69e9d46e7bcda93c5
This commit is contained in:
Alexandre Bourdin
2023-02-07 09:04:18 +00:00
committed by Copybot
parent b1cf4aa1e9
commit ed40a87cdc
29 changed files with 1678 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/web/test/frontend/features/group-management/components/group-managers.spec.tsx
+154
View File
@@ -0,0 +1,154 @@
import GroupManagers from '../../../../../frontend/js/features/group-management/components/group-managers'
const JOHN_DOE = {
_id: 'abc123def456',
first_name: 'John',
last_name: 'Doe',
email: 'john.doe@test.com',
last_active_at: new Date('2023-01-15'),
invite: true,
}
const BOBBY_LAPOINTE = {
_id: 'bcd234efa567',
first_name: 'Bobby',
last_name: 'Lapointe',
email: 'bobby.lapointe@test.com',
last_active_at: new Date('2023-01-02'),
invite: false,
}
const GROUP_ID = '888fff888fff'
const PATHS = {
addMember: `/manage/groups/${GROUP_ID}/managers`,
removeMember: `/manage/groups/${GROUP_ID}/managers`,
}
describe('group managers', function () {
beforeEach(function () {
cy.window().then(win => {
win.metaAttributesCache = new Map()
win.metaAttributesCache.set('ol-users', [JOHN_DOE, BOBBY_LAPOINTE])
win.metaAttributesCache.set('ol-groupId', GROUP_ID)
win.metaAttributesCache.set('ol-groupName', 'My Awesome Team')
})
cy.mount(<GroupManagers />)
})
it('renders the group management page', function () {
cy.get('h1').contains('My Awesome Team')
cy.get('ul').within(() => {
cy.get('li:nth-child(2)').within(() => {
cy.contains('john.doe@test.com')
cy.contains('John Doe')
cy.contains('15th Jan 2023')
cy.get(`[aria-label="Invite not yet accepted"]`)
})
cy.get('li:nth-child(3)').within(() => {
cy.contains('bobby.lapointe@test.com')
cy.contains('Bobby Lapointe')
cy.contains('2nd Jan 2023')
cy.get(`[aria-label="Accepted invite"]`)
})
})
})
it('sends an invite', function () {
cy.intercept('POST', PATHS.addMember, {
statusCode: 201,
body: {
user: {
email: 'someone.else@test.com',
invite: true,
},
},
})
cy.get('.form-control').type('someone.else@test.com')
cy.get('button').click()
cy.get('ul').within(() => {
cy.get('li:nth-child(4)').within(() => {
cy.contains('someone.else@test.com')
cy.contains('N/A')
cy.get(`[aria-label="Invite not yet accepted"]`)
})
})
})
it('tries to send an invite and displays the error', function () {
cy.intercept('POST', PATHS.addMember, {
statusCode: 500,
body: {
error: {
message: 'User already added',
},
},
})
cy.get('.form-control').type('someone.else@test.com')
cy.get('button').click()
cy.get('.alert').contains('Error: User already added')
})
it('checks the select all checkbox', function () {
cy.get('ul').within(() => {
cy.get('li:nth-child(2)').within(() => {
cy.get('.select-item').should('not.be.checked')
})
cy.get('li:nth-child(3)').within(() => {
cy.get('.select-item').should('not.be.checked')
})
})
cy.get('.select-all').click()
cy.get('ul').within(() => {
cy.get('li:nth-child(2)').within(() => {
cy.get('.select-item').should('be.checked')
})
cy.get('li:nth-child(3)').within(() => {
cy.get('.select-item').should('be.checked')
})
})
})
it('remove a member', function () {
cy.intercept('DELETE', `${PATHS.removeMember}/abc123def456`, {
statusCode: 200,
})
cy.get('ul').within(() => {
cy.get('li:nth-child(2)').within(() => {
cy.get('.select-item').check()
})
})
cy.get('button').contains('Remove manager').click()
cy.get('ul').within(() => {
cy.get('li:nth-child(2)').within(() => {
cy.contains('bobby.lapointe@test.com')
cy.contains('Bobby Lapointe')
cy.contains('2nd Jan 2023')
cy.get(`[aria-label="Accepted invite"]`)
})
})
})
it('tries to remove a manager and displays the error', function () {
cy.intercept('DELETE', `${PATHS.removeMember}/abc123def456`, {
statusCode: 500,
})
cy.get('ul').within(() => {
cy.get('li:nth-child(2)').within(() => {
cy.get('.select-item').check()
})
})
cy.get('button').contains('Remove manager').click()
cy.get('.alert').contains('Sorry, something went wrong')
})
})
services/web/test/frontend/features/group-management/components/group-members.spec.tsx
+159
View File
@@ -0,0 +1,159 @@
import GroupMembers from '../../../../../frontend/js/features/group-management/components/group-members'
const JOHN_DOE = {
_id: 'abc123def456',
first_name: 'John',
last_name: 'Doe',
email: 'john.doe@test.com',
last_active_at: new Date('2023-01-15'),
invite: true,
}
const BOBBY_LAPOINTE = {
_id: 'bcd234efa567',
first_name: 'Bobby',
last_name: 'Lapointe',
email: 'bobby.lapointe@test.com',
last_active_at: new Date('2023-01-02'),
invite: false,
}
const GROUP_ID = '777fff777fff'
const PATHS = {
addMember: `/manage/groups/${GROUP_ID}/invites`,
removeMember: `/manage/groups/${GROUP_ID}/user`,
removeInvite: `/manage/groups/${GROUP_ID}/invites`,
exportMembers: `/manage/groups/${GROUP_ID}/members/export`,
}
describe('group members', function () {
beforeEach(function () {
cy.window().then(win => {
win.metaAttributesCache = new Map()
win.metaAttributesCache.set('ol-users', [JOHN_DOE, BOBBY_LAPOINTE])
win.metaAttributesCache.set('ol-groupId', GROUP_ID)
win.metaAttributesCache.set('ol-groupName', 'My Awesome Team')
win.metaAttributesCache.set('ol-groupSize', 10)
})
cy.mount(<GroupMembers />)
})
it('renders the group members page', function () {
cy.get('h1').contains('My Awesome Team')
cy.get('small').contains('You have added 2 of 10 available members')
cy.get('ul').within(() => {
cy.get('li:nth-child(2)').within(() => {
cy.contains('john.doe@test.com')
cy.contains('John Doe')
cy.contains('15th Jan 2023')
cy.get(`[aria-label="Invite not yet accepted"]`)
})
cy.get('li:nth-child(3)').within(() => {
cy.contains('bobby.lapointe@test.com')
cy.contains('Bobby Lapointe')
cy.contains('2nd Jan 2023')
cy.get(`[aria-label="Accepted invite"]`)
})
})
})
it('sends an invite', function () {
cy.intercept('POST', PATHS.addMember, {
statusCode: 201,
body: {
user: {
email: 'someone.else@test.com',
invite: true,
},
},
})
cy.get('.form-control').type('someone.else@test.com')
cy.get('button').click()
cy.get('ul').within(() => {
cy.get('li:nth-child(4)').within(() => {
cy.contains('someone.else@test.com')
cy.contains('N/A')
cy.get(`[aria-label="Invite not yet accepted"]`)
})
})
})
it('tries to send an invite and displays the error', function () {
cy.intercept('POST', PATHS.addMember, {
statusCode: 500,
body: {
error: {
message: 'User already added',
},
},
})
cy.get('.form-control').type('someone.else@test.com')
cy.get('button').click()
cy.get('.alert').contains('Error: User already added')
})
it('checks the select all checkbox', function () {
cy.get('ul').within(() => {
cy.get('li:nth-child(2)').within(() => {
cy.get('.select-item').should('not.be.checked')
})
cy.get('li:nth-child(3)').within(() => {
cy.get('.select-item').should('not.be.checked')
})
})
cy.get('.select-all').click()
cy.get('ul').within(() => {
cy.get('li:nth-child(2)').within(() => {
cy.get('.select-item').should('be.checked')
})
cy.get('li:nth-child(3)').within(() => {
cy.get('.select-item').should('be.checked')
})
})
})
it('remove a member', function () {
cy.intercept('DELETE', `${PATHS.removeMember}/abc123def456`, {
statusCode: 200,
})
cy.get('ul').within(() => {
cy.get('li:nth-child(2)').within(() => {
cy.get('.select-item').check()
})
})
cy.get('button').contains('Remove from group').click()
cy.get('small').contains('You have added 1 of 10 available members')
cy.get('ul').within(() => {
cy.get('li:nth-child(2)').within(() => {
cy.contains('bobby.lapointe@test.com')
cy.contains('Bobby Lapointe')
cy.contains('2nd Jan 2023')
cy.get(`[aria-label="Accepted invite"]`)
})
})
})
it('tries to remove a user and displays the error', function () {
cy.intercept('DELETE', `${PATHS.removeMember}/abc123def456`, {
statusCode: 500,
})
cy.get('ul').within(() => {
cy.get('li:nth-child(2)').within(() => {
cy.get('.select-item').check()
})
})
cy.get('button').contains('Remove from group').click()
cy.get('.alert').contains('Sorry, something went wrong')
})
})
services/web/test/frontend/features/group-management/components/institution-managers.spec.tsx
+154
View File
@@ -0,0 +1,154 @@
import InstitutionManagers from '../../../../../frontend/js/features/group-management/components/institution-managers'
const JOHN_DOE = {
_id: 'abc123def456',
first_name: 'John',
last_name: 'Doe',
email: 'john.doe@test.com',
last_active_at: new Date('2023-01-15'),
invite: true,
}
const BOBBY_LAPOINTE = {
_id: 'bcd234efa567',
first_name: 'Bobby',
last_name: 'Lapointe',
email: 'bobby.lapointe@test.com',
last_active_at: new Date('2023-01-02'),
invite: false,
}
const GROUP_ID = '999fff999fff'
const PATHS = {
addMember: `/manage/institutions/${GROUP_ID}/managers`,
removeMember: `/manage/institutions/${GROUP_ID}/managers`,
}
describe('institution managers', function () {
beforeEach(function () {
cy.window().then(win => {
win.metaAttributesCache = new Map()
win.metaAttributesCache.set('ol-users', [JOHN_DOE, BOBBY_LAPOINTE])
win.metaAttributesCache.set('ol-groupId', GROUP_ID)
win.metaAttributesCache.set('ol-groupName', 'My Awesome Institution')
})
cy.mount(<InstitutionManagers />)
})
it('renders the institution management page', function () {
cy.get('h1').contains('My Awesome Institution')
cy.get('ul').within(() => {
cy.get('li:nth-child(2)').within(() => {
cy.contains('john.doe@test.com')
cy.contains('John Doe')
cy.contains('15th Jan 2023')
cy.get(`[aria-label="Invite not yet accepted"]`)
})
cy.get('li:nth-child(3)').within(() => {
cy.contains('bobby.lapointe@test.com')
cy.contains('Bobby Lapointe')
cy.contains('2nd Jan 2023')
cy.get(`[aria-label="Accepted invite"]`)
})
})
})
it('sends an invite', function () {
cy.intercept('POST', PATHS.addMember, {
statusCode: 201,
body: {
user: {
email: 'someone.else@test.com',
invite: true,
},
},
})
cy.get('.form-control').type('someone.else@test.com')
cy.get('button').click()
cy.get('ul').within(() => {
cy.get('li:nth-child(4)').within(() => {
cy.contains('someone.else@test.com')
cy.contains('N/A')
cy.get(`[aria-label="Invite not yet accepted"]`)
})
})
})
it('tries to send an invite and displays the error', function () {
cy.intercept('POST', PATHS.addMember, {
statusCode: 500,
body: {
error: {
message: 'User already added',
},
},
})
cy.get('.form-control').type('someone.else@test.com')
cy.get('button').click()
cy.get('.alert').contains('Error: User already added')
})
it('checks the select all checkbox', function () {
cy.get('ul').within(() => {
cy.get('li:nth-child(2)').within(() => {
cy.get('.select-item').should('not.be.checked')
})
cy.get('li:nth-child(3)').within(() => {
cy.get('.select-item').should('not.be.checked')
})
})
cy.get('.select-all').click()
cy.get('ul').within(() => {
cy.get('li:nth-child(2)').within(() => {
cy.get('.select-item').should('be.checked')
})
cy.get('li:nth-child(3)').within(() => {
cy.get('.select-item').should('be.checked')
})
})
})
it('remove a member', function () {
cy.intercept('DELETE', `${PATHS.removeMember}/abc123def456`, {
statusCode: 200,
})
cy.get('ul').within(() => {
cy.get('li:nth-child(2)').within(() => {
cy.get('.select-item').check()
})
})
cy.get('button').contains('Remove manager').click()
cy.get('ul').within(() => {
cy.get('li:nth-child(2)').within(() => {
cy.contains('bobby.lapointe@test.com')
cy.contains('Bobby Lapointe')
cy.contains('2nd Jan 2023')
cy.get(`[aria-label="Accepted invite"]`)
})
})
})
it('tries to remove a manager and displays the error', function () {
cy.intercept('DELETE', `${PATHS.removeMember}/abc123def456`, {
statusCode: 500,
})
cy.get('ul').within(() => {
cy.get('li:nth-child(2)').within(() => {
cy.get('.select-item').check()
})
})
cy.get('button').contains('Remove manager').click()
cy.get('.alert').contains('Sorry, something went wrong')
})
})
services/web/test/frontend/features/group-management/components/publisher-managers.spec.tsx
+154
View File
@@ -0,0 +1,154 @@
import PublisherManagers from '../../../../../frontend/js/features/group-management/components/publisher-managers'
const JOHN_DOE = {
_id: 'abc123def456',
first_name: 'John',
last_name: 'Doe',
email: 'john.doe@test.com',
last_active_at: new Date('2023-01-15'),
invite: true,
}
const BOBBY_LAPOINTE = {
_id: 'bcd234efa567',
first_name: 'Bobby',
last_name: 'Lapointe',
email: 'bobby.lapointe@test.com',
last_active_at: new Date('2023-01-02'),
invite: false,
}
const GROUP_ID = '000fff000fff'
const PATHS = {
addMember: `/manage/publishers/${GROUP_ID}/managers`,
removeMember: `/manage/publishers/${GROUP_ID}/managers`,
}
describe('publisher managers', function () {
beforeEach(function () {
cy.window().then(win => {
win.metaAttributesCache = new Map()
win.metaAttributesCache.set('ol-users', [JOHN_DOE, BOBBY_LAPOINTE])
win.metaAttributesCache.set('ol-groupId', GROUP_ID)
win.metaAttributesCache.set('ol-groupName', 'My Awesome Publisher')
})
cy.mount(<PublisherManagers />)
})
it('renders the publisher management page', function () {
cy.get('h1').contains('My Awesome Publisher')
cy.get('ul').within(() => {
cy.get('li:nth-child(2)').within(() => {
cy.contains('john.doe@test.com')
cy.contains('John Doe')
cy.contains('15th Jan 2023')
cy.get(`[aria-label="Invite not yet accepted"]`)
})
cy.get('li:nth-child(3)').within(() => {
cy.contains('bobby.lapointe@test.com')
cy.contains('Bobby Lapointe')
cy.contains('2nd Jan 2023')
cy.get(`[aria-label="Accepted invite"]`)
})
})
})
it('sends an invite', function () {
cy.intercept('POST', PATHS.addMember, {
statusCode: 201,
body: {
user: {
email: 'someone.else@test.com',
invite: true,
},
},
})
cy.get('.form-control').type('someone.else@test.com')
cy.get('button').click()
cy.get('ul').within(() => {
cy.get('li:nth-child(4)').within(() => {
cy.contains('someone.else@test.com')
cy.contains('N/A')
cy.get(`[aria-label="Invite not yet accepted"]`)
})
})
})
it('tries to send an invite and displays the error', function () {
cy.intercept('POST', PATHS.addMember, {
statusCode: 500,
body: {
error: {
message: 'User already added',
},
},
})
cy.get('.form-control').type('someone.else@test.com')
cy.get('button').click()
cy.get('.alert').contains('Error: User already added')
})
it('checks the select all checkbox', function () {
cy.get('ul').within(() => {
cy.get('li:nth-child(2)').within(() => {
cy.get('.select-item').should('not.be.checked')
})
cy.get('li:nth-child(3)').within(() => {
cy.get('.select-item').should('not.be.checked')
})
})
cy.get('.select-all').click()
cy.get('ul').within(() => {
cy.get('li:nth-child(2)').within(() => {
cy.get('.select-item').should('be.checked')
})
cy.get('li:nth-child(3)').within(() => {
cy.get('.select-item').should('be.checked')
})
})
})
it('remove a member', function () {
cy.intercept('DELETE', `${PATHS.removeMember}/abc123def456`, {
statusCode: 200,
})
cy.get('ul').within(() => {
cy.get('li:nth-child(2)').within(() => {
cy.get('.select-item').check()
})
})
cy.get('button').contains('Remove manager').click()
cy.get('ul').within(() => {
cy.get('li:nth-child(2)').within(() => {
cy.contains('bobby.lapointe@test.com')
cy.contains('Bobby Lapointe')
cy.contains('2nd Jan 2023')
cy.get(`[aria-label="Accepted invite"]`)
})
})
})
it('tries to remove a manager and displays the error', function () {
cy.intercept('DELETE', `${PATHS.removeMember}/abc123def456`, {
statusCode: 500,
})
cy.get('ul').within(() => {
cy.get('li:nth-child(2)').within(() => {
cy.get('.select-item').check()
})
})
cy.get('button').contains('Remove manager').click()
cy.get('.alert').contains('Sorry, something went wrong')
})
})
services/web/test/unit/src/UserMembership/UserMembershipControllerTests.js
+17 -12
View File
@@ -96,7 +96,7 @@ describe('UserMembershipController', function () {
})
it('get users', async function () {
return await this.UserMembershipController.index(this.req, {
return await this.UserMembershipController.manageGroupMembers(this.req, {
render: () => {
sinon.assert.calledWithMatch(
this.UserMembershipHandler.getUsers,
@@ -108,7 +108,7 @@ describe('UserMembershipController', function () {
})
it('render group view', async function () {
return await this.UserMembershipController.index(this.req, {
return await this.UserMembershipController.manageGroupMembers(this.req, {
render: (viewPath, viewParams) => {
expect(viewPath).to.equal('user_membership/index')
expect(viewParams.users).to.deep.equal(this.users)
@@ -123,7 +123,7 @@ describe('UserMembershipController', function () {
it('render group managers view', async function () {
this.req.entityConfig = EntityConfigs.groupManagers
return await this.UserMembershipController.index(this.req, {
return await this.UserMembershipController.manageGroupManagers(this.req, {
render: (viewPath, viewParams) => {
expect(viewPath).to.equal('user_membership/index')
expect(viewParams.groupSize).to.equal(undefined)
@@ -139,15 +139,20 @@ describe('UserMembershipController', function () {
it('render institution view', async function () {
this.req.entity = this.institution
this.req.entityConfig = EntityConfigs.institution
return await this.UserMembershipController.index(this.req, {
render: (viewPath, viewParams) => {
expect(viewPath).to.equal('user_membership/index')
expect(viewParams.name).to.equal('Test Institution Name')
expect(viewParams.groupSize).to.equal(undefined)
expect(viewParams.translations.title).to.equal('institution_account')
expect(viewParams.paths.exportMembers).to.be.undefined
},
})
return await this.UserMembershipController.manageInstitutionManagers(
this.req,
{
render: (viewPath, viewParams) => {
expect(viewPath).to.equal('user_membership/index')
expect(viewParams.name).to.equal('Test Institution Name')
expect(viewParams.groupSize).to.equal(undefined)
expect(viewParams.translations.title).to.equal(
'institution_account'
)
expect(viewParams.paths.exportMembers).to.be.undefined
},
}
)
})
})