ENH: adds project team in frontend with test

frontend/src/components/user/Profile.test.tsx

@@ -1,9 +1,4 @@
-import {
-  fireEvent,
-  render,
-  screen,
-  waitFor,
-} from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
 import Profile from "./Profile";
 
@@ -17,6 +12,7 @@ const mockUser = {
   eId: "E0001",
   role: "BQA",
   clientTeam: "abc",
+  projectTeam: "abc",
   Role: "Employee",
 };
 const prismaCourse1 = {
@@ -229,6 +225,11 @@ describe("Profile Component", () => {
       );
       expect(profileClientTeamLabel).toBeInTheDocument();
 
+      const profileprojectTeamLabel = screen.getByTestId(
+        "profileprojectTeamLabel"
+      );
+      expect(profileprojectTeamLabel).toBeInTheDocument();
+
       const profileRoleLabel = screen.getByTestId("profileRoleLabel");
       expect(profileRoleLabel).toBeInTheDocument();
 
@@ -260,6 +261,11 @@ describe("Profile Component", () => {
       );
       expect(profileClientTeamInput).toBeInTheDocument();
 
+      const profileprojectTeamInput = screen.getByTestId(
+        "profileprojectTeamInput"
+      );
+      expect(profileprojectTeamInput).toBeInTheDocument();
+
       const profileRoleInput = screen.getByTestId("profileRoleInput");
       expect(profileRoleInput).toBeInTheDocument();
 

frontend/src/components/user/Profile.tsx

@@ -1,14 +1,14 @@
 import { useEffect, useState } from "react";
+import Skeleton from "react-loading-skeleton";
+import "react-loading-skeleton/dist/skeleton.css";
 import { useNavigate } from "react-router-dom";
+import { ToastContainer, toast } from "react-toastify";
 import "../../css/user/profile.css";
 import { courseType } from "../courses/Courses";
 import Carousel from "../utilities/Carousel";
 import Navbar from "../utilities/Navbar";
 import { imageUpload } from "./ImageUpload";
 import { userType } from "./user";
-import { ToastContainer, toast } from "react-toastify";
-import Skeleton from "react-loading-skeleton";
-import "react-loading-skeleton/dist/skeleton.css";
 
 const Profile = () => {
   const [activeCourse, setActiveCourse] = useState<courseType[]>([]);
@@ -297,7 +297,36 @@ const Profile = () => {
                     <input
                       disabled
                       data-testid="profileClientTeamInput"
-                      value={user?.clientTeam}
+                      value={user?.clientTeam !== null ? user?.clientTeam : "-"}
+                      className="ProfileInput"
+                    ></input>
+                  </>
+                )}
+              </div>
+              <div className="ProfileGridContent">
+                <label
+                  data-testid="profileprojectTeamLabel"
+                  className="ProfileLabel"
+                >
+                  Project Team
+                </label>
+                {isLoading ? (
+                  <>
+                    <div className="block xsm:hidden sm:hidden md:block lg:block">
+                      <Skeleton height={40} width={176} />
+                    </div>
+                    <div className="hidden lg:hidden md:hidden sm:block xsm:block">
+                      <Skeleton height={40} width={144} />
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    <input
+                      disabled
+                      data-testid="profileprojectTeamInput"
+                      value={
+                        user?.projectTeam !== null ? user?.projectTeam : "-"
+                      }
                       className="ProfileInput"
                     ></input>
                   </>

frontend/src/components/user/user.tsx

@@ -3,6 +3,7 @@ export interface userType {
   eId: string;
   role: string;
   clientTeam: string;
+  projectTeam: string;
   email: string;
   profilePhoto: string;
   createdAt: string;