team detail

Author: Laurie T. Malau

components/dashboard/src/admin/TeamDetail.tsx

@@ -6,37 +6,71 @@
 
 import moment from "moment";
 import { useEffect, useState } from "react";
-import Property from "./Property";
 import { Team, TeamMemberInfo } from "@gitpod/gitpod-protocol";
 import { getGitpodService } from "../service/service";
+import { Item, ItemField, ItemsList } from "../components/ItemsList";
+import DropDown from "../components/DropDown";
 
  export default function TeamDetail(props: { team: Team }) {
+    const { team } = props;
     const [teamMembers, setTeamMembers] = useState<TeamMemberInfo[] | undefined>(undefined);
 
     useEffect(() => {
         (async () => {
-            const members = await getGitpodService().server.adminGetTeamMembers(props.team.id);
+            const members = await getGitpodService().server.adminGetTeamMembers(team.id);
             if (members.length > 0) {
-                console.log("members ", members.length);
                 setTeamMembers(members)
             }
         })();
-    }, [props.team.id]);
+    }, [team]);
 
      return <>
         <div className="flex">
             <div className="flex-1">
-                <div className="flex"><h3>{props.team.name}</h3><span className="my-auto"></span></div>
-                <p>{props.team.slug}</p>
-            </div>
-        </div>
-        <div className="flex flex-col w-full">
-            <div className="flex w-full mt-6">
-                <Property name="Created">{moment(props.team.creationTime).format('MMM D, YYYY')}</Property>
-                <Property name="Marked Deleted">{props.team.markedDeleted ? "Yes" : "No"}</Property>
-                <Property name="Members">{teamMembers ? teamMembers.length : "0"}</Property>
+                <div className="flex"><h3>{team.name}</h3><span className="my-auto">{team.markedDeleted ? " Deleted" : ""}</span></div>
+                <p>{teamMembers && teamMembers.length} member(s)</p>
+                <p>Created {moment(team.creationTime).format('MMM D, YYYY')}</p>
             </div>
         </div>
 
+        <ItemsList className="mt-8">
+                <Item header={true} className="grid grid-cols-3">
+                    <ItemField className="my-auto">
+                        <span className="pl-14">Name</span>
+                    </ItemField>
+                    <ItemField className="flex items-center space-x-1 my-auto">
+                        <span>Joined</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" className="h-4 w-4" viewBox="0 0 16 16"><path fill="#A8A29E" fill-rule="evenodd" d="M13.366 8.234a.8.8 0 010 1.132l-4.8 4.8a.8.8 0 01-1.132 0l-4.8-4.8a.8.8 0 111.132-1.132L7.2 11.67V2.4a.8.8 0 111.6 0v9.269l3.434-3.435a.8.8 0 011.132 0z" clip-rule="evenodd"/></svg>
+                    </ItemField>
+                    <ItemField className="flex items-center my-auto">
+                        <span className="flex-grow">Role</span>
+                    </ItemField>
+                </Item>
+                {!teamMembers || teamMembers.length === 0
+                    ? <p className="pt-16 text-center">No members found</p>
+                    : teamMembers && teamMembers.map(m => <Item className="grid grid-cols-3" key={m.userId}>
+                        <ItemField className="flex items-center my-auto">
+                            <div className="w-14">{m.avatarUrl && <img className="rounded-full w-8 h-8" src={m.avatarUrl || ''} alt={m.fullName} />}</div>
+                            <div>
+                                <div className="text-base text-gray-900 dark:text-gray-50 font-medium">{m.fullName}</div>
+                                <p>{m.primaryEmail}</p>
+                            </div>
+                        </ItemField>
+                        <ItemField className="my-auto">
+                            <span className="text-gray-400">{moment(m.memberSince).fromNow()}</span>
+                        </ItemField>
+                        <ItemField className="flex items-center my-auto">
+                            <span className="text-gray-400 capitalize">{
+                                <DropDown contextMenuWidth="w-32" activeEntry={m.role} entries={[{
+                                    title: 'owner',
+                                    onClick: () => {}
+                                }, {
+                                    title: 'member',
+                                    onClick: () => {}
+                                }]} />}</span>
+                            <span className="flex-grow" />
+                        </ItemField>
+                    </Item>)}
+            </ItemsList>
      </>
  }