diff --git a/client/src/route/auth/AccountTabs.tsx b/client/src/route/auth/AccountTabs.tsx
index 753604027..92ce44cec 100644
--- a/client/src/route/auth/AccountTabs.tsx
+++ b/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 (
+
+
Profile
+
+
+ The username is {name}. See more details on the user on SSO OAuth Provider.
+
+ {groupsLength === 1 &&
{name} belongs to {groupsLength} group.
}
+ {groupsLength > 1 &&
{name} belongs to {groupsLength} groups.
}
+
+ );
+}
+
+function renderSettingsTab() {
+ const profileUrl=useAuth().user?.profile.profile;
+ return (
+
+ );
+}
function AccountTabs() {
+
+ const accountTab: TabData[] = [
+ {
+ label: 'Profile',
+ body: renderProfileTab(),
+ },
+ {
+ label: 'Settings',
+ body: renderSettingsTab(),
+ },
+ ];
+
+ const scope: TabData[][] = [];
+
return ;
}
export default AccountTabs;
+
diff --git a/client/test/unitTests/Routes/AccountTabs.test.tsx b/client/test/unitTests/Routes/AccountTabs.test.tsx
new file mode 100644
index 000000000..3922247d7
--- /dev/null
+++ b/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(
+
+ );
+
+ 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(
+
+ );
+
+ 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();
+ });
+
+});
\ No newline at end of file