show team members

Author: Laurie T. Malau

components/dashboard/src/admin/TeamDetail.tsx

@@ -5,28 +5,19 @@
  */
 
 import moment from "moment";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Team, TeamMemberInfo, TeamMemberRole } from "@gitpod/gitpod-protocol";
 import { getGitpodService } from "../service/service";
 import { Item, ItemField, ItemsList } from "../components/ItemsList";
 import DropDown from "../components/DropDown";
 import { Link } from "react-router-dom";
 import Label from "./Label";
 
-export default function TeamDetail(props: { team: Team }) {
-    const { team } = props;
-    const [teamMembers, setTeamMembers] = useState<TeamMemberInfo[] | undefined>(undefined);
+export default function TeamDetail(props: { team: Team, members: TeamMemberInfo[] }) {
+    const { team, members } = props;
+    const [teamMembers, setTeamMembers] = useState<TeamMemberInfo[] | undefined>(members);
     const [searchText, setSearchText] = useState<string>('');
 
-    useEffect(() => {
-        (async () => {
-            const members = await getGitpodService().server.adminGetTeamMembers(team.id);
-            if (members.length > 0) {
-                setTeamMembers(members)
-            }
-        })();
-    }, [team]);
-
     const filteredMembers = teamMembers?.filter(m => {
         const memberSearchText = `${m.fullName || ''}${m.primaryEmail || ''}`.toLocaleLowerCase();
         if (!memberSearchText.includes(searchText.toLocaleLowerCase())) {
@@ -74,7 +65,7 @@ export default function TeamDetail(props: { team: Team }) {
                     <span className="flex-grow">Role</span>
                 </ItemField>
             </Item>
-            {!team.markedDeleted || (!filteredMembers || filteredMembers.length === 0)
+            {team.markedDeleted || (!filteredMembers || filteredMembers.length === 0)
                 ? <p className="pt-16 text-center">No members found</p>
                 : filteredMembers && filteredMembers.map(m => <Item className="grid grid-cols-3" key={m.userId}>
                     <ItemField className="flex items-center my-auto">

components/dashboard/src/admin/TeamsSearch.tsx

@@ -14,7 +14,7 @@ import { Link, Redirect } from "react-router-dom";
 import { UserContext } from "../user-context";
 import { getGitpodService } from "../service/service";
 import { PageWithSubMenu } from "../components/PageWithSubMenu";
-import { AdminGetListResult, Team } from "@gitpod/gitpod-protocol";
+import { AdminGetListResult, Team, TeamMemberInfo } from "@gitpod/gitpod-protocol";
 import Label from "./Label";
 
 export default function TeamsSearchPage() {
@@ -32,6 +32,7 @@ export function TeamsSearch() {
     const [searchTerm, setSearchTerm] = useState('');
     const [currentTeam, setCurrentTeam] = useState<Team | undefined>(undefined);
     const [searchResult, setSearchResult] = useState<AdminGetListResult<Team>>({ total: 0, rows: [] });
+    const [teamMembers, setTeamMembers] = useState<Record<string, TeamMemberInfo[]>>({});
 
     useEffect(() => {
         const teamId = location.pathname.split('/')[3];
@@ -49,12 +50,29 @@ export function TeamsSearch() {
         }
     }, [location]);
 
+    useEffect(() => {
+        if (!searchResult) {
+            return;
+        }
+        (async () => {
+            const members: Record<string, TeamMemberInfo[]> = {};
+            await Promise.all(searchResult.rows.map(async (team) => {
+                try {
+                    members[team.id] = await getGitpodService().server.adminGetTeamMembers(team.id);
+                } catch (error) {
+                    console.error('Could not retrieve team members', team, error);
+                }
+            }));
+            setTeamMembers(members);
+        })();
+    }, [ searchResult ]);
+
     if (!user || !user?.rolesOrPermissions?.includes('admin')) {
         return <Redirect to="/"/>
     }
 
     if (currentTeam) {
-        return <TeamDetail team={currentTeam} />;
+        return <TeamDetail team={currentTeam} members={teamMembers[currentTeam.id]} />;
     }
 
     const search = async () => {
@@ -95,21 +113,23 @@ export function TeamsSearch() {
 
 
             </div>
-            {searchResult.rows.map(team => <TeamResultItem team={team} />)}
+            {searchResult.rows.map(team => <TeamResultItem team={team} members={teamMembers[team.id]} />)}
         </div>
     </>
 
-function TeamResultItem(props: { team: Team }) {
+function TeamResultItem(props: { team: Team, members: TeamMemberInfo[]}) {
+    const { team, members } = props;
     return (
-        <Link key={'pr-' + props.team.name} to={'/admin/teams/' + props.team.id} data-analytics='{"button_type":"sidebar_menu"}'>
+        <Link key={'pr-' + team.name} to={'/admin/teams/' + team.id} data-analytics='{"button_type":"sidebar_menu"}'>
             <div className="rounded-xl whitespace-nowrap flex py-6 px-6 w-full justify-between hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gitpod-kumquat-light group">
                 <div className="flex flex-col w-7/12 truncate">
-                    <div className="font-medium text-gray-800 dark:text-gray-100 truncate">{props.team.name}
-                    {props.team.markedDeleted && <Label text='Deleted' color="red"/>}
+                    <div className="font-medium text-gray-800 dark:text-gray-100 truncate">{team.name}
+                    {team.markedDeleted && <Label text='Deleted' color="red"/>}
+                    {members?.length > 0 && <p>{`${members?.length} ${members?.length > 1 ? `members` : `member`}`}</p>}
                     </div>
                 </div>
                 <div className="flex w-5/12 self-center">
-                    <div className="text-sm w-full text-gray-400 truncate">{moment(props.team.creationTime).format('MMM D, YYYY')}</div>
+                    <div className="text-sm w-full text-gray-400 truncate">{moment(team.creationTime).format('MMM D, YYYY')}</div>
                 </div>
             </div>
         </Link>