feat(organizations): member role selector TASK-986

jsapp/js/account/organization/MemberRoleSelector.tsx

@@ -0,0 +1,48 @@
+import KoboSelect from 'jsapp/js/components/common/koboSelect';
+import {usePatchOrganizationMember} from './membersQuery';
+import {OrganizationUserRole} from './organizationQuery';
+
+interface MemberRoleSelectorProps {
+  username: string;
+  /** The role of the `username` user - the one we are modifying here. */
+  role: OrganizationUserRole;
+  /** The role of the currently logged in user. */
+  currentUserRole: OrganizationUserRole;
+}
+
+export default function MemberRoleSelector(
+  {username, role, currentUserRole}: MemberRoleSelectorProps
+) {
+  const patchMember = usePatchOrganizationMember(username);
+
+  const canModifyRole = (
+    currentUserRole === 'owner' ||
+    currentUserRole === 'admin'
+  );
+
+  return (
+    <KoboSelect
+      name={`member-role-selector-${username}`}
+      type='outline'
+      size='m'
+      options={[
+        {
+          value: OrganizationUserRole.admin,
+          label: t('Admin'),
+        },
+        {
+          value: OrganizationUserRole.member,
+          label: t('Member'),
+        },
+      ]}
+      selectedOption={role}
+      onChange={(newRole: string | null) => {
+        if (newRole) {
+          patchMember.mutateAsync({role: newRole as OrganizationUserRole});
+        }
+      }}
+      isPending={patchMember.isPending}
+      isDisabled={!canModifyRole}
+    />
+  );
+}

jsapp/js/account/organization/MembersRoute.tsx

@@ -7,6 +7,7 @@ import LoadingSpinner from 'js/components/common/loadingSpinner';
 import Avatar from 'js/components/common/avatar';
 import Badge from 'jsapp/js/components/common/badge';
 import MemberActionsDropdown from './MemberActionsDropdown';
+import MemberRoleSelector from './MemberRoleSelector';
 
 // Stores, hooks and utilities
 import {formatTime} from 'js/utils';
@@ -67,6 +68,18 @@ export default function MembersRoute() {
       key: 'role',
       label: t('Role'),
       size: 120,
+      cellFormatter: (member: OrganizationMember) => {
+        if (member.role === OrganizationUserRole.owner) {
+          return t('Owner');
+        }
+        return (
+          <MemberRoleSelector
+            username={member.user__username}
+            role={member.role}
+            currentUserRole={orgQuery.data.request_user_role}
+          />
+        );
+      },
     },
     {
       key: 'user__has_mfa_enabled',