Add members

src/components/VirtualLab/VirtualLabHomePage/Member.tsx

@@ -1,10 +1,10 @@
 import VirtualLabMemberIcon from '../VirtualLabMemberIcon';
-import { MockRole } from '@/types/virtual-lab/members';
+import { Role } from '@/types/virtual-lab/members';
 
 type Props = {
   name: string;
   lastActive: string;
-  memberRole: MockRole;
+  memberRole: Role;
 };
 
 export default function Member({ name, lastActive, memberRole }: Props) {

src/components/VirtualLab/VirtualLabHomePage/index.tsx

@@ -14,7 +14,6 @@ import WelcomeUserBanner from './WelcomeUserBanner';
 import { basePath } from '@/config';
 import { MembersGroupIcon, StatsEditIcon } from '@/components/icons';
 import Brain from '@/components/icons/Brain';
-import { mockMembers } from '@/components/VirtualLab/mockData/members';
 import { mockProjects } from '@/components/VirtualLab/mockData/projects';
 import { mockVirtualLab } from '@/components/VirtualLab/mockData/lab';
 import { virtualLabDetailAtomFamily } from '@/state/virtual-lab/lab';
@@ -159,12 +158,12 @@ export default function VirtualLabHomePage({ id }: Props) {
       <div>
         <div className="my-5 text-lg font-bold uppercase">Members</div>
         <div className="flex-no-wrap flex overflow-x-auto overflow-y-hidden">
-          {mockMembers.map((member) => (
+          {virtualLabDetail.data.users.map((user) => (
             <Member
-              key={member.key}
-              name={member.name}
-              lastActive={member.lastActive}
-              memberRole={member.role}
+              key={user.id}
+              name={`${user.first_name} ${user.last_name}`}
+              lastActive="N/A"
+              memberRole={user.role}
             />
           ))}
         </div>

src/components/VirtualLab/VirtualLabMemberIcon/index.tsx

@@ -1,7 +1,8 @@
-import { MockRole } from '@/types/virtual-lab/members';
+import { Role } from "@/types/virtual-lab/members";
+
 
 type Props = {
-  role: MockRole;
+  role: Role;
   name: string;
 };
 

src/components/VirtualLab/VirtualLabSidebar/index.tsx

@@ -50,6 +50,19 @@ export default function VirtualLabSidebar({ virtualLabId }: Props) {
     return null;
   };
 
+  /**
+   * Returns the amount of virtual lab members
+   */
+  const renderUsersAmount = () => {
+    if (virtualLab.state === 'loading') {
+      return <Spin indicator={<LoadingOutlined />} />;
+    }
+    if (virtualLab.state === 'hasData') {
+      return virtualLab.data.users.length;
+    }
+    return null;
+  };
+
   const linkItems: LinkItem[] = [
     { key: 'lab', content: 'The Virtual Lab', href: 'lab' },
     {
@@ -67,7 +80,7 @@ export default function VirtualLabSidebar({ virtualLabId }: Props) {
       content: (
         <div className="flex justify-between">
           <span>Team</span>
-          <span className="font-normal text-primary-3">23 members</span>
+          <span className="font-normal text-primary-3">{renderUsersAmount()} members</span>
         </div>
       ),
       href: 'team',

src/components/VirtualLab/projects/VirtualLabProjectList/VirtualLabProjectItem.tsx

@@ -40,13 +40,13 @@ export default function VirtualLabProjectItem({ project }: Props) {
         <VirtualLabStatistic
           icon={<EyeTargetIcon style={iconStyle} />}
           title="Explore sessions"
-          detail={350}
+          detail="N/A"
         />
-        <VirtualLabStatistic icon={<Brain style={iconStyle} />} title="Builds" detail={18} />
+        <VirtualLabStatistic icon={<Brain style={iconStyle} />} title="Builds" detail="N/A" />
         <VirtualLabStatistic
           icon={<StatsEditIcon style={iconStyle} />}
           title="Simulation experiments"
-          detail={30}
+          detail="N/A"
         />
         <VirtualLabStatistic
           icon={<UserOutlined style={iconStyle} />}

src/services/virtual-lab/labs/index.ts

@@ -5,7 +5,8 @@ import { Project } from '@/types/virtual-lab/projects';
 
 // Add the bearer token from the frontend below
 // This constant will be replaced by the actual login token as soon as login is implemented
-const accessToken = 'Bearer <TOKEN>';
+const accessToken =
+  'Bearer eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJza2hnaTdjRWxFbEJzRFpnZXh1NGlvSzBNV081eGtQbWlXWENYang4eHVrIn0.eyJleHAiOjE3OTkxNDg2NjQsImlhdCI6MTcxMjgzNTA2NCwianRpIjoiNmVmYmZkY2UtZmVjOS00Y2Y2LWE0OWQtMzhhYmQyOWVkMzJjIiwiaXNzIjoiaHR0cDovL2tleWNsb2FrOjgwODAvcmVhbG1zL29icC1yZWFsbSIsImF1ZCI6ImFjY291bnQiLCJzdWIiOiIzYmE3MWNjZi1hNjIzLTQ1YjAtYTg1My0zYTNlYTUxZWZiY2QiLCJ0eXAiOiJCZWFyZXIiLCJhenAiOiJvYnBhcHAiLCJzZXNzaW9uX3N0YXRlIjoiYThhOGMxNWYtMWVkNy00ZjhmLThjYTgtYjM5ODhiNjczODRkIiwiYWNyIjoiMSIsInJlYWxtX2FjY2VzcyI6eyJyb2xlcyI6WyJvZmZsaW5lX2FjY2VzcyIsInVtYV9hdXRob3JpemF0aW9uIl19LCJyZXNvdXJjZV9hY2Nlc3MiOnsiYWNjb3VudCI6eyJyb2xlcyI6WyJtYW5hZ2UtYWNjb3VudCIsIm1hbmFnZS1hY2NvdW50LWxpbmtzIiwidmlldy1wcm9maWxlIl19fSwic2NvcGUiOiJvcGVuaWQgcHJvZmlsZSBlbWFpbCIsInNpZCI6ImE4YThjMTVmLTFlZDctNGY4Zi04Y2E4LWIzOTg4YjY3Mzg0ZCIsImVtYWlsX3ZlcmlmaWVkIjp0cnVlLCJuYW1lIjoidGVzdCB0ZXN0IiwicHJlZmVycmVkX3VzZXJuYW1lIjoidGVzdCIsImdpdmVuX25hbWUiOiJ0ZXN0IiwiZmFtaWx5X25hbWUiOiJ0ZXN0IiwiZW1haWwiOiJ0ZXN0QHRlc3QuY29tIn0.WleEYbDtgD108SFsDAKFZYraLjxDxgulZnjUD4cZ4fI1_5NJoo1iYnnI14yL0UZNy7robNzQEQN-xCwhXPYnYHIOWg7cRv1DbfNRLcY9hWRgiMNjQkwxmRJ4gl9LwoZrxrzaaAjGXY96lXqxuTjZfLfGcxwPMu0uN6PcX7r9BTUrm4nX_nEdgkFLss4gHnVWSE6-quqxOd7dlhJAn3o96Qh4WG-n_e0L1DbGs9-TvQbHNHQUFn5C4h9wpL_LW2VMPbPqyuS6mqDXIINl0yBARkUdq548eKRF37d4rMuk5p8yDnBqq-Fv-hbVfDj-MGOEYIzdzwiInv6uSjht-nqqwQ';
 
 export async function getVirtualLabDetail(id: string): Promise<VirtualLabAPIResponse> {
   const response = await fetch(`${virtualLabApi.url}/virtual-labs/${id}`, {

src/types/virtual-lab/lab.ts

@@ -8,6 +8,7 @@ export type VirtualLab = {
   reference_email: string;
   budget: number;
   plan_id: number;
+  users: VirtualLabMember[];
 };
 
 export enum VirtualLabPlanType {
@@ -17,8 +18,6 @@ export enum VirtualLabPlanType {
   advanced = 'advanced',
 }
 
-export type NewMember = Pick<VirtualLabMember, 'email' | 'role'>;
-
 export type MockBilling = {
   organization: string;
   firstname: string;

src/types/virtual-lab/members.ts

@@ -1,14 +1,20 @@
 export type MockRole = 'administrator' | 'member';
 
+export type Role = 'admin' | 'member';
+
 export type MockMember = {
   key: string;
   name: string;
   lastActive: string;
   role: MockRole;
 };
 export interface VirtualLabMember {
+  id: string;
+  username: string;
+  created_at: string;
+  first_name: string;
+  last_name: string;
+  invite_accepted: boolean;
+  role: Role;
   name: string;
-  email: string;
-  role: 'admin' | 'user';
-  lastActive?: number;
 }