feat(sdk): show roles in org member list (#396)

* chore: update proto client

* feat: add member roles in org member list

* chore: show domain created_at in human readable format

* fix: add loader in user name column

sdks/js/packages/core/client/data-contracts.ts

@@ -639,6 +639,12 @@ export interface V1Beta1ListOrganizationServiceUsersResponse {
 
 export interface V1Beta1ListOrganizationUsersResponse {
   users?: V1Beta1User[];
+  rolePairs?: V1Beta1ListOrganizationUsersResponseRolePair[];
+}
+
+export interface V1Beta1ListOrganizationUsersResponseRolePair {
+  userId?: string;
+  roles?: V1Beta1Role[];
 }
 
 export interface V1Beta1ListOrganizationsByCurrentUserResponse {

sdks/js/packages/core/package.json

@@ -75,6 +75,7 @@
     "@tanstack/react-router": "0.0.1-beta.174",
     "axios": "^1.5.0",
     "class-variance-authority": "^0.7.0",
+    "dayjs": "^1.11.10",
     "react-hook-form": "^7.46.2",
     "react-loading-skeleton": "^3.3.1",
     "sonner": "^0.6.2",

sdks/js/packages/core/react/components/organization/domain/domain.columns.tsx

@@ -6,6 +6,7 @@ import { toast } from 'sonner';
 import { useFrontier } from '~/react/contexts/FrontierContext';
 import { V1Beta1Domain } from '~/src';
 import Skeleton from 'react-loading-skeleton';
+import dayjs from 'dayjs';
 
 export const getColumns: (
   canCreateDomain?: boolean,
@@ -34,7 +35,9 @@ export const getColumns: (
     accessorKey: 'created_at',
     cell: isLoading
       ? () => <Skeleton />
-      : info => <Text>{info.getValue()}</Text>
+      : info => (
+          <Text>{dayjs(info.getValue()).format('DD MMM YY, hh:mmA')}</Text>
+        )
   },
   {
     header: '',

sdks/js/packages/core/react/components/organization/members/index.tsx

@@ -44,7 +44,7 @@ export default function WorkspaceMembers() {
     };
   }, [permissions, resource]);
 
-  const { isFetching, members } = useOrganizationMembers({
+  const { isFetching, members, memberRoles } = useOrganizationMembers({
     showInvitations: canCreateInvite
   });
 
@@ -64,6 +64,7 @@ export default function WorkspaceMembers() {
               isLoading={isFetching}
               canCreateInvite={canCreateInvite}
               canDeleteUser={canDeleteUser}
+              memberRoles={memberRoles}
             />
           ) : null}
         </Flex>
@@ -89,7 +90,8 @@ const MembersTable = ({
   users,
   canCreateInvite,
   canDeleteUser,
-  organizationId
+  organizationId,
+  memberRoles
 }: MembersTableType) => {
   let navigate = useNavigate({ from: '/members' });
 
@@ -100,8 +102,8 @@ const MembersTable = ({
   );
 
   const columns = useMemo(
-    () => getColumns(organizationId, canDeleteUser, isLoading),
-    [organizationId, canDeleteUser, isLoading]
+    () => getColumns(organizationId, memberRoles, canDeleteUser, isLoading),
+    [organizationId, memberRoles, canDeleteUser, isLoading]
   );
 
   return (

sdks/js/packages/core/react/components/organization/members/member.columns.tsx

@@ -6,14 +6,17 @@ import Skeleton from 'react-loading-skeleton';
 import { toast } from 'sonner';
 import { useFrontier } from '~/react/contexts/FrontierContext';
 import { V1Beta1User, V1Beta1Invitation } from '~/src';
+import { Role } from '~/src/types';
 import { getInitials } from '~/utils';
 
 export const getColumns: (
   id: string,
+  memberRoles: Record<string, Role[]>,
   canDeleteUser?: boolean,
   isLoading?: boolean
 ) => ColumnDef<V1Beta1User & V1Beta1Invitation, any>[] = (
   organizationId,
+  memberRoles = {},
   canDeleteUser = false,
   isLoading
 ) => [
@@ -64,15 +67,18 @@ export const getColumns: (
         }
   },
   {
-    header: 'Email',
+    header: 'Roles',
     accessorKey: 'email',
-    meta: {},
     cell: isLoading
       ? () => <Skeleton />
       : ({ row, getValue }) => {
           return (
-            // @ts-ignore
-            <Text>{getValue() || row.original?.user_id}</Text>
+            (row.original?.id &&
+              memberRoles[row.original?.id] &&
+              memberRoles[row.original?.id]
+                .map((r: any) => r.title || r.name)
+                .join(', ')) ??
+            'Inherited role'
           );
         }
   },

sdks/js/packages/core/react/components/organization/members/member.types.tsx

@@ -1,4 +1,4 @@
-import { User } from '~/src/types';
+import { Role, User } from '~/src/types';
 
 export type MembersType = {
   users: User[];
@@ -14,4 +14,5 @@ export type MembersTableType = {
   organizationId: string;
   canCreateInvite?: boolean;
   canDeleteUser?: boolean;
+  memberRoles: Record<string, Role[]>;
 };

sdks/js/packages/core/react/hooks/useOrganizationMembers.ts

@@ -2,13 +2,15 @@ import { useRouterState } from '@tanstack/react-router';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { V1Beta1User } from '~/src';
 import { useFrontier } from '../contexts/FrontierContext';
+import { Role } from '~/src/types';
 
 export const useOrganizationMembers = ({ showInvitations = false }) => {
   const [users, setUsers] = useState([]);
   const [invitations, setInvitations] = useState([]);
 
   const [isUsersLoading, setIsUsersLoading] = useState(false);
   const [isInvitationsLoading, setIsInvitationsLoading] = useState(false);
+  const [memberRoles, setMemberRoles] = useState<Record<string, Role[]>>({});
 
   const { client, activeOrganization: organization } = useFrontier();
   const routerState = useRouterState();
@@ -19,9 +21,16 @@ export const useOrganizationMembers = ({ showInvitations = false }) => {
       setIsUsersLoading(true);
       const {
         // @ts-ignore
-        data: { users }
-      } = await client?.frontierServiceListOrganizationUsers(organization?.id);
+        data: { users, role_pairs }
+      } = await client?.frontierServiceListOrganizationUsers(organization?.id, {
+        withRoles: true
+      });
       setUsers(users);
+      setMemberRoles(
+        role_pairs.reduce((previous: any, mr: any) => {
+          return { ...previous, [mr.user_id]: mr.roles };
+        }, {})
+      );
     } catch (err) {
       console.error(err);
     } finally {
@@ -75,6 +84,7 @@ export const useOrganizationMembers = ({ showInvitations = false }) => {
 
   return {
     isFetching,
-    members: updatedUsers
+    members: updatedUsers,
+    memberRoles
   };
 };