Display relevant OAuth information on accounts page

client/src/route/auth/AccountTabs.tsx

@@ -1,22 +1,55 @@
 import * as React from 'react';
 import TabComponent from 'components/tab/TabComponent';
+import { useAuth } from 'react-oidc-context';
 import { TabData } from 'components/tab/subcomponents/TabRender';
 
-const accountTab: TabData[] = [
-  {
-    label: 'Profile',
-    body: <>Profile - potentially visible to other users.</>,
-  },
-  {
-    label: 'Settings',
-    body: <>Account settings - private to a user.</>,
-  },
-];
+function renderProfileTab() {
+  const {user}=useAuth();
+  const name = user?.profile.preferred_username;
+  const pfp = user?.profile.picture;
+  const profileUrl = user?.profile.profile;
+  const groupsLength = ((user?.profile.groups_direct as string[] | undefined)?.length ?? 0);
 
-const scope: TabData[][] = [];
+  return (
+    <div>
+      <h2>Profile</h2>
+      <img src={pfp} data-testid="profile-picture" />
+      <p>
+        The username is <b>{name}</b>. See more details on the user on <b><a href={profileUrl}>SSO OAuth Provider.</a></b>
+      </p>
+      {groupsLength === 1 && <p>{name} belongs to {groupsLength} group.</p>}
+      {groupsLength > 1 && <p>{name} belongs to {groupsLength} groups.</p>}
+    </div>
+  );
+}
+
+function renderSettingsTab() {
+  const profileUrl=useAuth().user?.profile.profile;
+  return (
+    <div>
+      <h2>Settings</h2>
+      <p>Edit the profile on <b><a href={profileUrl}>SSO OAuth Provider.</a></b></p>
+    </div>
+  );
+}
 
 function AccountTabs() {
+
+  const accountTab: TabData[] = [
+    {
+      label: 'Profile',
+      body: renderProfileTab(),
+    },
+    {
+      label: 'Settings',
+      body: renderSettingsTab(),
+    },
+  ];
+
+  const scope: TabData[][] = [];
+
   return <TabComponent assetType={accountTab} scope={scope} />;
 }
 
 export default AccountTabs;
+

client/test/unitTests/Routes/AccountTabs.test.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import AccountTabs from 'route/auth/AccountTabs';
+import { useAuth } from 'react-oidc-context';
+
+jest.mock('react-oidc-context');
+
+describe('AccountTabs', () => {
+    const mockprofile={
+        preferred_username: "user1",
+        picture: "pfp.jpg",
+        profile: "test.com",
+        groups_direct:["group1", "group2"]
+    };
+
+    const mockuser={profile: mockprofile};
+
+  test('renders AccountTabs with correct profile information', () => {
+    (useAuth as jest.Mock).mockReturnValue({
+        user: mockuser,
+      });
+
+    render(
+      <AccountTabs />
+    );
+
+    const profilePicture = screen.getByTestId('profile-picture');
+    expect(profilePicture).toBeInTheDocument();
+    expect(profilePicture).toHaveAttribute('src', 'pfp.jpg');
+
+    const username = screen.getByText('user1');
+    expect(username).toBeInTheDocument();
+
+    const profileLink = screen.getByRole('link', { name: /SSO OAuth Provider/i });
+    expect(profileLink).toBeInTheDocument();
+    expect(profileLink).toHaveAttribute('href', 'test.com');
+
+    const groupInfo = screen.getByText('user1 belongs to 2 groups.');
+    expect(groupInfo).toBeInTheDocument();
+
+    jest.clearAllMocks();
+  });
+
+  test('renders AccountTabs with correct profile information when user is not part of a group', () => {
+    mockuser.profile.groups_direct=[];
+    (useAuth as jest.Mock).mockReturnValue({
+        user: mockuser,
+      });
+
+    render(
+      <AccountTabs />
+    );
+
+    const profilePicture = screen.getByTestId('profile-picture');
+    expect(profilePicture).toBeInTheDocument();
+    expect(profilePicture).toHaveAttribute('src', 'pfp.jpg');
+
+    const username = screen.getByText('user1');
+    expect(username).toBeInTheDocument();
+
+    const profileLink = screen.getByRole('link', { name: /SSO OAuth Provider/i });
+    expect(profileLink).toBeInTheDocument();
+    expect(profileLink).toHaveAttribute('href', 'test.com');
+
+
+    const groupInfo = screen.queryByText(/user1 belongs to \d+ groups?/i);
+    expect(groupInfo).not.toBeInTheDocument();
+
+    jest.clearAllMocks();
+  });
+
+});