Add Organizations' User Invitation UI - #6126
Conversation
Adds the frontend for issue learningequality#6088: a My Organizations landing page (pending-invitations banner + org card grid), an organization edit page with Details and Sharing tabs, an invite-by-email form, and a unified members/pending-invites table with role change, remove, resend, and revoke actions. Reuses StudioImmersiveModal for the edit page so it matches the channel edit/details page pattern, including its focus trap and dark banner header. Also supports creating a new organization through the same page. All new state is Composition API composables (no new Vuex), and every new component uses Kolibri Design System components exclusively (no Vuetify). Backend: adds a `revoke` action and organization support to InvitationViewSet, and adds a `role` annotation on top of learningequality#6080's OrganizationViewSet so the frontend can show the current user's role in an organization without an extra request per organization. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
|
👋 Hi @yasinelmi, thanks for contributing! For the review process to begin, please verify that the following is satisfied:
Also check that issue requirements are satisfied & you ran Pull requests that don't follow the guidelines will be closed. Reviewer assignment can take up to 2 weeks. |
Summary
Implements the frontend for #6088: a My Organizations landing page, an organization
edit page with Details and Sharing tabs (invite/manage members), and organization
creation — following the existing channel edit/details page pattern.
Closes #6088
New pages and features
Screenshots below are placeholders — see "How to reproduce these screenshots" underneath
for exactly what to capture. Log in as
a@a.com/aon a localpnpm devsetupinstance(seeded via
python manage.py setup, which now also creates two sample organizations anda pending invitation).
/#/my-organizations)Framework compliance (per the issue's Frameworks checklist)
(
KCard,KButton,KTextbox,KCheckbox,KSelect,KTable,KTabsList,KModal,KDropdownMenu,StudioImmersiveModal).(
useOrganization,useOrganizationList,useOrganizationMembers,useOrganizationInvitations).Accessibility
ariaLabel/tooltip; the options button on eachorganization card carries a per-card distinguishing label ("More options for
{org name}") rather than a generic repeated one.
StudioImmersiveModal'sKFocusTrap), with Escape closing it — matching the existing channel details page.cue that the SPA navigated even though there's no real page reload.
a visual dimming.
Test plan
pytest— organization, organization-role-annotation, invitation, and channelviewset tests pass (219 backend tests)
pnpm test— full channelList frontend suite passes (226 tests)pre-commit run --all-fileson all touched fileschanges, resend/revoke invites, member removal (including the last-active-admin
guard), organization creation, and the non-admin read-only states
Notes for reviewers
composables) per the issue's Frameworks requirements.
still being reviewed/iterated on. Screenshots to be added shortly.
🤖 Generated with Claude Code