feat(organizations): add functions for managing members TASK-985

jsapp/js/account/organizations/MembersRoute.tsx

@@ -0,0 +1,102 @@
+// Libraries
+import React from 'react';
+
+// Partial components
+import PaginatedQueryUniversalTable from 'js/universalTable/paginatedQueryUniversalTable.component';
+import LoadingSpinner from 'js/components/common/loadingSpinner';
+import Avatar from 'js/components/common/avatar';
+import Badge from 'jsapp/js/components/common/badge';
+
+// Stores, hooks and utilities
+import {formatTime} from 'js/utils';
+import {useOrganizationQuery} from 'js/account/stripe.api';
+import useOrganizationMembersQuery from './membersQuery';
+
+// Constants and types
+import type {OrganizationMember} from './membersQuery';
+
+// Styles
+import styles from './membersRoute.module.scss';
+
+export default function MembersRoute() {
+  const orgQuery = useOrganizationQuery();
+
+  if (!orgQuery.data?.id) {
+    return (
+      <LoadingSpinner />
+    );
+  }
+
+  return (
+    <div className={styles.membersRouteRoot}>
+      <header className={styles.header}>
+        <h2 className={styles.headerText}>{t('Members')}</h2>
+      </header>
+
+      <PaginatedQueryUniversalTable<OrganizationMember>
+        queryHook={useOrganizationMembersQuery}
+        columns={[
+          {
+            key: 'user__username',
+            label: t('Name'),
+            cellFormatter: (member: OrganizationMember) => (
+              <Avatar
+                size='m'
+                username={member.user__username}
+                isUsernameVisible
+                email={member.user__email}
+                // We pass `undefined` for the case it's an empty string
+                fullName={member.user__name || undefined}
+              />
+            ),
+            size: 360,
+          },
+          {
+            key: 'invite',
+            label: t('Status'),
+            size: 120,
+            cellFormatter: (member: OrganizationMember) => {
+              if (member.invite?.status) {
+                return member.invite.status;
+              } else {
+                return <Badge color='light-green' size='s' label={t('Active')} />;
+              }
+              return null;
+            },
+          },
+          {
+            key: 'date_joined',
+            label: t('Date added'),
+            size: 140,
+            cellFormatter: (member: OrganizationMember) => formatTime(member.date_joined),
+          },
+          {
+            key: 'role',
+            label: t('Role'),
+            size: 120,
+          },
+          {
+            key: 'user__has_mfa_enabled',
+            label: t('2FA'),
+            size: 90,
+            cellFormatter: (member: OrganizationMember) => {
+              if (member.user__has_mfa_enabled) {
+                return <Badge size='s' color='light-blue' icon='check' />;
+              }
+              return <Badge size='s' color='light-storm' icon='minus' />;
+            },
+          },
+          {
+            // We use `url` here, but the cell would contain interactive UI
+            // element
+            key: 'url',
+            label: '',
+            size: 64,
+            // TODO: this will be added soon
+            cellFormatter: () => (' '),
+          },
+        ]}
+      />
+    </div>
+  );
+}

jsapp/js/account/organizations/membersQuery.ts

@@ -0,0 +1,125 @@
+import {keepPreviousData, useQuery} from '@tanstack/react-query';
+import {endpoints} from 'js/api.endpoints';
+import type {PaginatedResponse} from 'js/dataInterface';
+import {fetchGet, fetchPatch, fetchDelete} from 'js/api';
+import {QueryKeys} from 'js/query/queryKeys';
+import {useOrganizationQuery} from '../stripe.api';
+
+/**
+ * Note that it's only possible to update the role via API to either `admin` or
+ * `member`.
+ */
+export enum OrganizationMemberRole {
+  admin = 'admin',
+  member = 'member',
+  owner = 'owner',
+  external = 'external',
+}
+
+export interface OrganizationMember {
+  /**
+   * The url to the member within the organization
+   * `/api/v2/organizations/<organization_uid>/members/<username>/`
+   */
+  url: string;
+  /** `/api/v2/users/<username>/` */
+  user: string;
+  user__username: string;
+  /** can be empty an string in some edge cases */
+  user__email: string | '';
+  /** can be empty an string in some edge cases */
+  user__name: string | '';
+  role: OrganizationMemberRole;
+  user__has_mfa_enabled: boolean;
+  user__is_active: boolean;
+  /** yyyy-mm-dd HH:MM:SS */
+  date_joined: string;
+  invite?: {
+    /** '/api/v2/organizations/<organization_uid>/invites/<invite_uid>/' */
+    url: string;
+    /** yyyy-mm-dd HH:MM:SS */
+    date_created: string;
+    /** yyyy-mm-dd HH:MM:SS */
+    date_modified: string;
+    status: 'sent' | 'accepted' | 'expired' | 'declined';
+  };
+}
+
+/**
+ * For updating member within given organization. Accepts partial properties
+ * of `OrganizationMember`.
+ */
+export async function patchOrganizationMember(
+  organizationId: string,
+  username: string,
+  newMemberData: Partial<OrganizationMember>
+) {
+  const apiUrl = endpoints.ORGANIZATION_MEMBER_URL
+    .replace(':organization_id', organizationId)
+    .replace(':username', username);
+  return fetchPatch<OrganizationMember>(apiUrl, newMemberData);
+}
+
+/**
+ * For removing member from given organization.
+ */
+export async function removeOrganizationMember(
+  organizationId: string,
+  username: string
+) {
+  const apiUrl = endpoints.ORGANIZATION_MEMBER_URL
+    .replace(':organization_id', organizationId)
+    .replace(':username', username);
+  return fetchDelete(apiUrl);
+}
+
+/**
+ * Fetches paginated list of members for given organization.
+ * This is mainly needed for `useOrganizationMembersQuery`, so you most probably
+ * would use it through that hook rather than directly.
+ */
+async function getOrganizationMembers(
+  limit: number,
+  offset: number,
+  orgId: string
+) {
+  const params = new URLSearchParams({
+    limit: limit.toString(),
+    offset: offset.toString(),
+  });
+
+  let apiUrl = endpoints.ORGANIZATION_MEMBERS_URL;
+  apiUrl = apiUrl.replace(':organization_id', orgId);
+
+  return fetchGet<PaginatedResponse<OrganizationMember>>(
+    apiUrl + '?' + params,
+    {
+      errorMessageDisplay: t('There was an error getting the list.'),
+    }
+  );
+}
+
+/**
+ * A hook that gives you paginated list of organization members. Uses
+ * `useOrganizationQuery` to get the id.
+ */
+export default function useOrganizationMembersQuery(
+  itemLimit: number,
+  pageOffset: number
+) {
+  const orgQuery = useOrganizationQuery();
+  const orgId = orgQuery.data?.id;
+
+  return useQuery({
+    queryKey: [QueryKeys.organizationMembers, itemLimit, pageOffset, orgId],
+    // `orgId!` because it's ensured to be there in `enabled` property :ok:
+    queryFn: () => getOrganizationMembers(itemLimit, pageOffset, orgId!),
+    placeholderData: keepPreviousData,
+    enabled: !!orgId,
+    // We might want to improve this in future, for now let's not retry
+    retry: false,
+    // The `refetchOnWindowFocus` option is `true` by default, I'm setting it
+    // here so we don't forget about it.
+    refetchOnWindowFocus: true,
+  });
+}

jsapp/js/account/organizations/membersRoute.module.scss

@@ -0,0 +1,26 @@
+@use 'scss/colors';
+@use 'scss/breakpoints';
+
+.membersRouteRoot {
+  padding: 20px;
+  overflow-y: auto;
+  height: 100%;
+}
+
+.header {
+  margin-bottom: 20px;
+}
+
+h2.headerText {
+  color: colors.$kobo-storm;
+  text-transform: uppercase;
+  font-size: 18px;
+  font-weight: 700;
+  margin: 0;
+}
+
+@include breakpoints.breakpoint(mediumAndUp) {
+  .membersRouteRoot {
+    padding: 50px;
+  }
+}

jsapp/js/account/routes.constants.ts

@@ -19,6 +19,9 @@ export const AccountSettings = React.lazy(
 export const DataStorage = React.lazy(
   () => import(/* webpackPrefetch: true */ './usage/usageTopTabs')
 );
+export const MembersRoute = React.lazy(
+  () => import(/* webpackPrefetch: true */ './organizations/MembersRoute')
+);
 export const ACCOUNT_ROUTES: {readonly [key: string]: string} = {
   ACCOUNT_SETTINGS: ROUTES.ACCOUNT_ROOT + '/settings',
   USAGE: ROUTES.ACCOUNT_ROOT + '/usage',

jsapp/js/account/routes.tsx

@@ -11,6 +11,7 @@ import {
   DataStorage,
   PlansRoute,
   SecurityRoute,
+  MembersRoute,
 } from 'js/account/routes.constants';
 import {useFeatureFlag, FeatureFlag} from 'js/featureFlags';
 
@@ -120,7 +121,7 @@ export default function routes() {
                   mmoOnly
                   redirectRoute={ACCOUNT_ROUTES.ACCOUNT_SETTINGS}
                 >
-                  <div>Organization members view to be implemented</div>
+                  <MembersRoute />
                 </ValidateOrgPermissions>
               </RequireAuth>
             }

jsapp/js/api.endpoints.ts

@@ -6,6 +6,8 @@ export const endpoints = {
   SUBSCRIPTION_URL: '/api/v2/stripe/subscriptions/',
   ADD_ONS_URL: '/api/v2/stripe/addons/',
   ORGANIZATION_URL: '/api/v2/organizations/',
+  ORGANIZATION_MEMBERS_URL: '/api/v2/organizations/:organization_id/members/',
+  ORGANIZATION_MEMBER_URL: '/api/v2/organizations/:organization_id/members/:username/',
   /** Expected parameters: price_id and organization_id **/
   CHECKOUT_URL: '/api/v2/stripe/checkout-link',
   /** Expected parameter: organization_id  **/

jsapp/js/query/queryKeys.ts

@@ -11,4 +11,5 @@ export enum QueryKeys {
   activityLogs = 'activityLogs',
   activityLogsFilter = 'activityLogsFilter',
   organization = 'organization',
+  organizationMembers = 'organizationMembers',
 }

jsapp/js/universalTable/universalTable.component.tsx

@@ -86,7 +86,7 @@ interface UniversalTableProps<DataItem> {
 
 const DEFAULT_COLUMN_SIZE = {
   size: 200, // starting column size
-  minSize: 100, // enforced during column resizing
+  minSize: 60, // enforced during column resizing
   maxSize: 600, // enforced during column resizing
 };
 

kobo/apps/organizations/permissions.py

@@ -1,14 +1,17 @@
 from django.http import Http404
 from rest_framework import permissions
+from rest_framework.permissions import IsAuthenticated
 
 from kobo.apps.organizations.constants import ORG_EXTERNAL_ROLE
+from kobo.apps.organizations.models import Organization
 from kpi.mixins.validation_password_permission import ValidationPasswordPermissionMixin
 from kpi.utils.object_permission import get_database_user
 
 
-class IsOrgAdmin(ValidationPasswordPermissionMixin, permissions.BasePermission):
+class IsOrgAdminPermission(ValidationPasswordPermissionMixin, IsAuthenticated):
     """
-    Object-level permission to only allow admin members of an object to access it.
+    Object-level permission to only allow admin (and owner) members of an object
+    to access it.
     Assumes the model instance has an `is_admin` attribute.
     """
 
@@ -26,18 +29,9 @@ def has_object_permission(self, request, view, obj):
         return obj.is_admin(user)
 
 
-class IsOrgAdminOrReadOnly(IsOrgAdmin):
-    """
-    Object-level permission to only allow admin members of an object to edit it.
-    Assumes the model instance has an `is_admin` attribute.
-    """
-
+class HasOrgRolePermission(IsOrgAdminPermission):
     def has_object_permission(self, request, view, obj):
-
-        # Read permissions are allowed to any request,
-        # so we'll always allow GET, HEAD or OPTIONS requests.
-        if request.method in permissions.SAFE_METHODS:
+        obj = obj if isinstance(obj, Organization) else obj.organization
+        if super().has_object_permission(request, view, obj):
             return True
-
-        # Instance must have an attribute named `is_admin`
-        return obj.is_admin(request.user)
+        return request.method in permissions.SAFE_METHODS