fix(sdk): show teams in project member screen (#410)

* fix: refetch members list after adding to the team

* feat: show project groups in member list table

* feat: show team count in project list page

* fix: hardcode team role in project

Author: rsbh

sdks/js/packages/core/react/assets/users.svg

@@ -35,15 +35,19 @@ import { AuthTooltipMessage } from '~/react/utils';
 import { useOrganizationTeams } from '~/react/hooks/useOrganizationTeams';
 
 export type MembersProps = {
+  teams?: V1Beta1Group[];
   members?: V1Beta1User[];
   memberRoles?: Record<string, Role[]>;
   isLoading?: boolean;
+  refetch: () => void;
 };
 
 export const Members = ({
-  members,
+  teams = [],
+  members = [],
   memberRoles,
-  isLoading: isMemberLoading
+  isLoading: isMemberLoading,
+  refetch
 }: MembersProps) => {
   const { projectId } = useParams({ from: '/projects/$projectId' });
 
@@ -72,9 +76,13 @@ export const Members = ({
     };
   }, [permissions, resource]);
 
-  const tableStyle = members?.length
-    ? { width: '100%' }
-    : { width: '100%', height: '100%' };
+  const tableStyle = useMemo(
+    () =>
+      members?.length || teams?.length
+        ? { width: '100%' }
+        : { width: '100%', height: '100%' },
+    [members?.length, teams?.length]
+  );
 
   const isLoading = isMemberLoading || isPermissionsFetching;
 
@@ -84,12 +92,13 @@ export const Members = ({
   );
 
   const updatedUsers = useMemo(() => {
+    const updatedTeams = teams.map(t => ({ ...t, isTeam: true }));
     return isLoading
       ? ([{ id: 1 }, { id: 2 }, { id: 3 }] as any)
-      : members?.length
-      ? members
+      : members?.length || updatedTeams?.length
+      ? [...updatedTeams, ...members]
       : [];
-  }, [members, isLoading]);
+  }, [isLoading, members, teams]);
 
   return (
     <Flex direction="column" style={{ paddingTop: '32px' }}>
@@ -116,7 +125,11 @@ export const Members = ({
                 side="left"
                 disabled={canUpdateProject}
               >
-                <AddMemberDropdown canUpdateProject={canUpdateProject} />
+                <AddMemberDropdown
+                  canUpdateProject={canUpdateProject}
+                  refetch={refetch}
+                  members={members}
+                />
               </Tooltip>
             )}
           </Flex>
@@ -129,11 +142,13 @@ export const Members = ({
 interface AddMemberDropdownProps {
   canUpdateProject: boolean;
   members?: V1Beta1User[];
+  refetch?: () => void;
 }
 
 const AddMemberDropdown = ({
   canUpdateProject,
-  members
+  members,
+  refetch
 }: AddMemberDropdownProps) => {
   const { projectId } = useParams({ from: '/projects/$projectId' });
   const [orgMembers, setOrgMembers] = useState<V1Beta1User[]>([]);
@@ -226,14 +241,17 @@ const AddMemberDropdown = ({
         };
         await client?.frontierServiceCreatePolicy(policy);
         toast.success('member added');
+        if (refetch) {
+          refetch();
+        }
       } catch ({ error }: any) {
         console.error(error);
         toast.error('Something went wrong', {
           description: error.message
         });
       }
     },
-    [client, organization?.id, projectId]
+    [client, organization?.id, projectId, refetch]
   );
 
   const addTeam = useCallback(
@@ -250,14 +268,17 @@ const AddMemberDropdown = ({
         };
         await client?.frontierServiceCreatePolicy(policy);
         toast.success('team added');
+        if (refetch) {
+          refetch();
+        }
       } catch ({ error }: any) {
         console.error(error);
         toast.error('Something went wrong', {
           description: error.message
         });
       }
     },
-    [client, organization?.id, projectId]
+    [client, organization?.id, projectId, refetch]
   );
 
   return (

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

@@ -1,14 +1,19 @@
 import { Avatar, Flex, Label, Text } from '@raystack/apsara';
 import { ColumnDef } from '@tanstack/react-table';
 import Skeleton from 'react-loading-skeleton';
-import { V1Beta1User } from '~/src';
+import { V1Beta1Group, V1Beta1User } from '~/src';
 import { Role } from '~/src/types';
 import { getInitials } from '~/utils';
+import teamIcon from '~/react/assets/users.svg';
+
+type ColumnType = V1Beta1User & (V1Beta1Group & { isTeam: boolean });
+
+const teamAvatarStyles = { height: '20px', width: '20px', padding: '6px' };
 
 export const getColumns = (
   memberRoles: Record<string, Role[]> = {},
   isLoading: boolean
-): ColumnDef<V1Beta1User, any>[] => [
+): ColumnDef<ColumnType, any>[] => [
   {
     header: '',
     accessorKey: 'image',
@@ -22,10 +27,17 @@ export const getColumns = (
     cell: isLoading
       ? () => <Skeleton />
       : ({ row, getValue }) => {
+          const avatarSrc = row.original?.isTeam ? teamIcon : getValue();
+          const fallback = row.original?.isTeam
+            ? ''
+            : getInitials(row.original?.title || row.original?.email);
+          const imageProps = row.original?.isTeam ? teamAvatarStyles : {};
           return (
             <Avatar
-              src={getValue()}
-              fallback={getInitials(row.original?.title || row.original?.email)}
+              src={avatarSrc}
+              fallback={fallback}
+              shape={'square'}
+              imageProps={imageProps}
               // @ts-ignore
               style={{ marginRight: 'var(--mr-12)' }}
             />
@@ -43,10 +55,15 @@ export const getColumns = (
     cell: isLoading
       ? () => <Skeleton />
       : ({ row, getValue }) => {
+          const label = row.original?.isTeam ? row.original.title : getValue();
+          const subLabel = row.original?.isTeam
+            ? row.original.name
+            : row.original.email;
+
           return (
             <Flex direction="column" gap="extra-small">
-              <Label style={{ fontWeight: '$500' }}>{getValue()}</Label>
-              <Text>{row.original.email}</Text>
+              <Label style={{ fontWeight: '$500' }}>{label}</Label>
+              <Text>{subLabel}</Text>
             </Flex>
           );
         }
@@ -57,14 +74,15 @@ export const getColumns = (
     cell: isLoading
       ? () => <Skeleton />
       : ({ row, getValue }) => {
-          return (
-            (row.original?.id &&
-              memberRoles[row.original?.id] &&
-              memberRoles[row.original?.id]
-                .map((r: any) => r.title || r.name)
-                .join(', ')) ??
-            'Inherited role'
-          );
+          return row.original?.isTeam
+            ? // hardcoding roles as we dont have team roles and team are invited as viewer and we dont allow role change
+              'Project Viewer'
+            : (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/project/members/member.columns.tsx

@@ -7,22 +7,27 @@ import {
   useParams,
   useRouterState
 } from '@tanstack/react-router';
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { toast } from 'sonner';
 import backIcon from '~/react/assets/chevron-left.svg';
 import { useFrontier } from '~/react/contexts/FrontierContext';
-import { V1Beta1Project, V1Beta1User } from '~/src';
+import { V1Beta1Group, V1Beta1Project, V1Beta1User } from '~/src';
 import { Role } from '~/src/types';
 import { styles } from '../styles';
 import { General } from './general';
 import { Members } from './members';
 
 export const ProjectPage = () => {
   let { projectId } = useParams({ from: '/projects/$projectId' });
-  const [isLoading, setIsLoading] = useState(false);
+  const [isProjectLoading, setIsProjectLoading] = useState(false);
   const [project, setProject] = useState<V1Beta1Project>();
   const [members, setMembers] = useState<V1Beta1User[]>([]);
   const [memberRoles, setMemberRoles] = useState<Record<string, Role[]>>({});
+  const [isMembersLoading, setIsMembersLoading] = useState(false);
+
+  const [teams, setTeams] = useState<V1Beta1Group[]>([]);
+  const [isTeamsLoading, setIsTeamsLoading] = useState(false);
+
   const { client, activeOrganization: organization } = useFrontier();
   let navigate = useNavigate({ from: '/projects/$projectId' });
   const routeState = useRouterState();
@@ -33,46 +38,81 @@ export const ProjectPage = () => {
     );
   }, [routeState.matches]);
 
-  useEffect(() => {
-    async function getProjectDetails() {
-      if (!organization?.id || !projectId || isDeleteRoute) return;
-
-      try {
-        setIsLoading(true);
+  const getProjectTeams = useCallback(async () => {
+    if (!organization?.id || !projectId || isDeleteRoute) return;
+    try {
+      setIsTeamsLoading(true);
+      const result = await client?.frontierServiceListProjectGroups(projectId);
+      if (result) {
         const {
-          // @ts-ignore
-          data: { project }
-        } = await client?.frontierServiceGetProject(projectId);
-
-        const {
-          // @ts-ignore
-          data: { users, role_pairs }
-        } = await client?.frontierServiceListProjectUsers(projectId, {
-          withRoles: true
-        });
-        setProject(project);
-        setMembers(users);
-        setMemberRoles(
-          role_pairs.reduce((previous: any, mr: any) => {
-            return { ...previous, [mr.user_id]: mr.roles };
-          }, {})
-        );
-      } catch ({ error }: any) {
-        toast.error('Something went wrong', {
-          description: error.message
-        });
-      } finally {
-        setIsLoading(false);
+          data: { groups = [] }
+        } = result;
+        setTeams(groups);
       }
+    } catch (error: any) {
+      toast.error('Something went wrong', {
+        description: error?.message
+      });
+    } finally {
+      setIsTeamsLoading(false);
     }
+  }, [client, isDeleteRoute, organization?.id, projectId]);
+
+  const getProjectMembers = useCallback(async () => {
+    if (!organization?.id || !projectId || isDeleteRoute) return;
+    try {
+      setIsMembersLoading(true);
+      const {
+        // @ts-ignore
+        data: { users, role_pairs }
+      } = await client?.frontierServiceListProjectUsers(projectId, {
+        withRoles: true
+      });
+      setMembers(users);
+      setMemberRoles(
+        role_pairs.reduce((previous: any, mr: any) => {
+          return { ...previous, [mr.user_id]: mr.roles };
+        }, {})
+      );
+    } catch (error: any) {
+      toast.error('Something went wrong', {
+        description: error?.message
+      });
+    } finally {
+      setIsMembersLoading(false);
+    }
+  }, [client, isDeleteRoute, organization?.id, projectId]);
+
+  const getProjectDetails = useCallback(async () => {
+    if (!organization?.id || !projectId || isDeleteRoute) return;
+    try {
+      setIsProjectLoading(true);
+      const {
+        // @ts-ignore
+        data: { project }
+      } = await client?.frontierServiceGetProject(projectId);
+      setProject(project);
+    } catch (error: any) {
+      toast.error('Something went wrong', {
+        description: error?.message
+      });
+    } finally {
+      setIsProjectLoading(false);
+    }
+  }, [client, isDeleteRoute, organization?.id, projectId]);
+
+  useEffect(() => {
     getProjectDetails();
-  }, [
-    client,
-    organization?.id,
-    projectId,
-    routeState.location.state.key,
-    isDeleteRoute
-  ]);
+    getProjectMembers();
+    getProjectTeams();
+  }, [getProjectDetails, getProjectMembers, getProjectTeams]);
+
+  const isLoading = isProjectLoading || isTeamsLoading || isMembersLoading;
+
+  const refetchTeamAndMembers = useCallback(() => {
+    getProjectMembers();
+    getProjectTeams();
+  }, [getProjectMembers, getProjectTeams]);
 
   return (
     <Flex direction="column" style={{ width: '100%' }}>
@@ -99,14 +139,16 @@ export const ProjectPage = () => {
           <General
             organization={organization}
             project={project}
-            isLoading={isLoading}
+            isLoading={isProjectLoading}
           />
         </Tabs.Content>
         <Tabs.Content value="members">
           <Members
             members={members}
             memberRoles={memberRoles}
             isLoading={isLoading}
+            teams={teams}
+            refetch={refetchTeamAndMembers}
           />
         </Tabs.Content>
       </Tabs>