feat(MembersRoute): add actions dropdown to the table of organization members TASK-987 TASK-990 #5309

magicznyleszek · 2024-11-28T20:00:39Z

📣 Summary

In Members Table (from Account → Team/Organization → Members) add actions dropdown with one action. The action allows removing a member or leaving the organization.

📖 Description

The availability of "Remove" action is based on the role of the logged in user. When trying to remove user (or leave organization) a confirmation prompt is being shown.

👀 Preview steps

ℹ️ have multiple different users
for one of the users (e.g. "joe"), use http://kf.kobo.local/admin/organizations/organization/ to add multiple users into joe's organization
For one of the users (e.g. "sue") set the role to "admin"
enable "Multi-members override" for joe's organization
enable feature flag mmosEnabled
navigate to #/account/organization/members
🟢 notice that a table of organization members displays a list of users added in step 2
🟢 notice that in the table "joe" (as owner) has an ability to remove all organization members (excluding themselves) including "sue" who's an admin

As continuation for above steps:

log in as "sue"
navigate to #/account/organization/members
🟢 notice that in the table "joe" (the owner) has no actions available
🟢 notice that any "member" user in the table has actions available, and if you click "Remove" a confirmation prompt will appear
🟢 notice that for "sue" the action available is "Leave team"/"Leave organization", and if you click it, a confirmation prompt will appear - and it will have different content than confirmation prompt for removing a member

As continuation for above steps:

pick a "member" user and use "Remove" action
confirm prompt
🟢 verify that user was removed successfuly

💭 Notes

Build atop #5281

…e-endpoints-to-handle-org-members

… query for user mfa details

…hook more customizable and then use it in `MembersRoute`

…x/kpi into leszek/task-980-members-table

…eszek/task-980-members-table

…omprehensive tests

…eszek/task-980-members-table

…x/kpi into leszek/task-980-members-table

…eszek/task-980-members-table

…x/kpi into leszek/task-980-members-table

…ers-table-actions-dropdown

jsapp/js/account/organization/MemberRemoveModal.tsx

jsapp/js/account/organization/MemberActionsDropdown.tsx

jsapp/js/account/organization/MemberRemoveModal.tsx

jsapp/js/account/organization/MemberActionsDropdown.tsx

jsapp/js/account/organization/MembersRoute.tsx

jamesrkiger

Looks good, works good. I just left some code style comments.

jamesrkiger · 2024-12-10T14:28:58Z

The dropdown here is running into trouble when it is near the bottom of the list:

(Same applies to the org member role selector, fyi)

jsapp/js/account/organization/MemberRemoveModal.tsx

jamesrkiger

Left two minor comments

jamesrkiger

lgtm

### 📣 Summary In Members Table (from Account → Team/Organization → Members) add UI for changing member's role. ### 📖 Description Only owner and admins can modify the role. ### 👀 Preview steps 1. ℹ️ have multiple different users 2. for one of the users (e.g. "joe"), use http://kf.kobo.local/admin/organizations/organization/ to add multiple users into joe's organization 3. For one of the users (e.g. "sue") set the role to "admin" 4. enable "Multi-members override" for joe's organization 5. enable feature flag `mmosEnabled` 6. navigate to `#/account/organization/members` (as "joe") 7. 🟢 notice that in the table there is no way to change "joe" (owner) role 8. 🟢 notice that in the table you can change any other user role As continuation for above steps: 1. log in as "sue" 2. navigate to `#/account/organization/members` 3. 🟢 notice (again) that in the table there is no way to change "joe" (owner) role (even though you're an "admin") 4. 🟢 notice that for "sue" you can change the role (to stop being an admin) ### 💭 Notes Build atop #5309

@magicznyleszek

### 📣 Summary Improve multiple pinned columns handling. Allow pinning columns to right side. Improve pinned column styling based on table having horizontal scrollbar. Add reusable `useViewportSize` and `useWindowEvent` hooks. Add extensive story for testing the component, including left/right column pinning, the amount of columns and much more. ### 💭 Notes Both `useViewportSize` and `useWindowEvent` hooks were copied from `@mantine/hooks`, retaining the original code as closely as possible. We most possibly will use Mantine in near future, and we should replace both with the ones from Mantine package. Pinned columns have visual shadow to distinct them from other columns (useful when scrolling table horizontally). That shadow is not being added if table has no horizontal scrollbar. @magicznyleszek this should be used in actions column added in #5309 (should be always pinned to right) ### 👀 Preview steps Best way to test component changes: 1. run storybook locally 2. go to http://localhost:6006/?path=/docs/misc-universaltable--docs 3. 🟢 verify columns pinning works for all possible combinations - story allows pinning one or two columns on both sides 4. 🟢 verify pinned columns have shadow only if table has lots of columns (i.e. if there is horizontal scrollbar) 5. 🟢 verify all the other props of component work as expected Verify that Organization Members table still works: 1. ℹ️ have multiple different users 2. for one of the users (e.g. "joe"), use http://kf.kobo.local/admin/organizations/organization/ to add multiple users into joe's organization 3. for one of the users (e.g. "sue") set the role to "admin" 4. enable "Multi-members override" for joe's organization 5. enable feature flag `mmosEnabled` 7. navigate to `#/account/organization/members` (as "joe") 8. 🟢 notice that the table works as previously 👌 Verify that Recent Project Activity table still works: 1. note: this particular table displays mock data right now 2. for a deployed project go to `#/forms/<uid>/settings/activity` 3. 🟢 notice that the table works as previously 👌 --------- Co-authored-by: RuthShryock <81720958+RuthShryock@users.noreply.github.com>

rajpatel24 and others added 30 commits November 7, 2024 01:42

Add endpoints to handle organization members

e17f6a7

Merge branch 'main' of github.com:kobotoolbox/kpi into task-963-creat…

024f911

…e-endpoints-to-handle-org-members

add initial files for organization members route (WIP)

56cd7cf

pass org id to hook (WIP)

95e48c4

Refactor organization member API to eliminate redundancy and optimize…

0401fc4

… query for user mfa details

Merge branch 'main' into task-963-create-endpoints-to-handle-org-members

1dec6eb

Add queryHookOptions to PaginatedQueryUniversalTable to make the …

99eea0c

…hook more customizable and then use it in `MembersRoute`

Merge branch 'main' into leszek/task-980-members-table

9527848

add initial files for organization members route (WIP)

a75ca3b

pass org id to hook (WIP)

f2301b7

Add queryHookOptions to PaginatedQueryUniversalTable to make the …

2066a3b

…hook more customizable and then use it in `MembersRoute`

style(universalTable) use Array<T> for columns prop (#5260)

864e244

Merge branch 'leszek/task-980-members-table' of github.com:kobotoolbo…

47f6cf1

…x/kpi into leszek/task-980-members-table

small fixes (WIP)

1f1cc12

Add role-based validation tests for organization member permissions

3c174df

Merge branch 'main' into task-963-create-endpoints-to-handle-org-members

f432404

Revert unintended change and fix linting issue

d876fbc

Merge branch 'task-963-create-endpoints-to-handle-org-members' into l…

89721fe

…eszek/task-980-members-table

Refactor organization members API with updated permission logic and c…

953b716

…omprehensive tests

Refactor organization members API with updated permission logic and c…

f8cb95b

…omprehensive tests

Resolve merge conflicts

3d0372a

Fix failing tests

906be3d

Merge branch 'main' into task-963-create-endpoints-to-handle-org-members

d122576

adjust MembersRoute table column sizes

837c1ac

Merge branch 'task-963-create-endpoints-to-handle-org-members' into l…

1222115

…eszek/task-980-members-table

display badges in MembersRoute table and remove some WIP code

08bc12e

Merge branch 'leszek/task-980-members-table' of github.com:kobotoolbo…

78a4b51

…x/kpi into leszek/task-980-members-table

Merge branch 'main' into task-963-create-endpoints-to-handle-org-members

94b47cb

Merge branch 'task-963-create-endpoints-to-handle-org-members' into l…

adf5cad

…eszek/task-980-members-table

Merge branch 'leszek/task-980-members-table' of github.com:kobotoolbo…

696bef0

…x/kpi into leszek/task-980-members-table

magicznyleszek and others added 3 commits December 5, 2024 15:19

stop requiring orgId as parameter

9ddf55d

Merge branch 'leszek/task-985-member-mutation-api' into task-987-memb…

afd593e

…ers-table-actions-dropdown

stop requreing orgId

d8c6581

magicznyleszek mentioned this pull request Dec 5, 2024

feat(organizations): member role selector TASK-986 #5315

Merged

Base automatically changed from leszek/task-985-member-mutation-api to main December 5, 2024 17:26

Merge branch 'main' into task-987-members-table-actions-dropdown

88646f2

jamesrkiger reviewed Dec 10, 2024

View reviewed changes

jsapp/js/account/organization/MemberRemoveModal.tsx Outdated Show resolved Hide resolved

jamesrkiger reviewed Dec 10, 2024

View reviewed changes

jsapp/js/account/organization/MemberActionsDropdown.tsx Outdated Show resolved Hide resolved

jamesrkiger reviewed Dec 10, 2024

View reviewed changes

jsapp/js/account/organization/MemberRemoveModal.tsx Outdated Show resolved Hide resolved

jamesrkiger reviewed Dec 10, 2024

View reviewed changes

jsapp/js/account/organization/MemberActionsDropdown.tsx Outdated Show resolved Hide resolved

jamesrkiger reviewed Dec 10, 2024

View reviewed changes

jsapp/js/account/organization/MembersRoute.tsx Outdated Show resolved Hide resolved

jamesrkiger requested changes Dec 10, 2024

View reviewed changes

magicznyleszek mentioned this pull request Dec 10, 2024

feat(UniversalTable): column pinning improvements TASK-1312 #5338

Merged

magicznyleszek added 3 commits December 10, 2024 14:54

update placeholder

049492f

rename username prop

2791697

simplify text to display flow

ec90b08

magicznyleszek added 2 commits December 10, 2024 15:37

dont import unnecessarily

ebbc129

remove comment

6c9ca6f

jamesrkiger reviewed Dec 10, 2024

View reviewed changes

jsapp/js/account/organization/MemberRemoveModal.tsx Outdated Show resolved Hide resolved

jamesrkiger reviewed Dec 10, 2024

View reviewed changes

jsapp/js/account/organization/MemberRemoveModal.tsx Outdated Show resolved Hide resolved

jamesrkiger requested changes Dec 10, 2024

View reviewed changes

magicznyleszek and others added 2 commits December 11, 2024 11:07

code review fixes

1ad007f

Merge branch 'main' into task-987-members-table-actions-dropdown

8846df1

magicznyleszek requested a review from jamesrkiger December 11, 2024 10:35

jamesrkiger approved these changes Dec 11, 2024

View reviewed changes

magicznyleszek merged commit af28266 into main Dec 11, 2024
7 checks passed

magicznyleszek deleted the task-987-members-table-actions-dropdown branch December 11, 2024 11:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(MembersRoute): add actions dropdown to the table of organization members TASK-987 TASK-990 #5309

feat(MembersRoute): add actions dropdown to the table of organization members TASK-987 TASK-990 #5309

magicznyleszek commented Nov 28, 2024 •

edited

Loading

jamesrkiger left a comment

jamesrkiger commented Dec 10, 2024

jamesrkiger left a comment

jamesrkiger left a comment

feat(MembersRoute): add actions dropdown to the table of organization members TASK-987 TASK-990 #5309

feat(MembersRoute): add actions dropdown to the table of organization members TASK-987 TASK-990 #5309

Conversation

magicznyleszek commented Nov 28, 2024 • edited Loading

📣 Summary

📖 Description

👀 Preview steps

💭 Notes

jamesrkiger left a comment

Choose a reason for hiding this comment

jamesrkiger commented Dec 10, 2024

jamesrkiger left a comment

Choose a reason for hiding this comment

jamesrkiger left a comment

Choose a reason for hiding this comment

magicznyleszek commented Nov 28, 2024 •

edited

Loading