Add user panel

src/__mocks__/ucHandlers.ts

@@ -1,5 +1,5 @@
 import { http, HttpResponse } from 'msw';
-import { UC_API_PREFIX } from '../utils/constants';
+import { UC_API_PREFIX, UC_AUTH_API_PREFIX } from '../utils/constants';
 
 export const ucHandlers = [
   // Handler for catalogs
@@ -118,5 +118,38 @@ export const ucHandlers = [
           'Content-Type, Authorization, x-interceptors-internal-request-id'
       }
     });
-  })
-];
+  }),
+
+  // Handler for user
+  http.get(`http://localhost:8080${UC_AUTH_API_PREFIX}/scim2/Users/self`, ()  => {
+      return new HttpResponse(
+        JSON.stringify({
+          id: '1',
+          userName: 'testuser',
+          displayName: 'Test User',
+          emails: [{ value: 'testuser@example.com' }],
+          photos: [{ value: 'http://example.com/photo.jpg' }]
+        }),
+        {
+          status: 200,
+          headers: {
+            'Access-Control-Allow-Origin': 'http://localhost'
+          }
+        }
+      );
+  }),
+
+  // Handler for OPTIONS user requests
+  http.options(`http://localhost:8080${UC_AUTH_API_PREFIX}/scim2/Users/self`, () => {
+    return new HttpResponse(null, {
+      status: 204,
+      headers: {
+        'Access-Control-Allow-Origin': 'http://localhost',
+        'Access-Control-Allow-Methods':
+          'GET, POST, PUT, DELETE, OPTIONS, PATCH',
+        'Access-Control-Allow-Headers':
+          'Content-Type, Authorization, x-interceptors-internal-request-id'
+      }
+    });
+  }),
+];

src/__tests__/hooks/useGetCurrentUser.test.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { renderHook, waitFor } from '@testing-library/react';
+import { useGetCurrentUser } from '../../hooks/user';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ClientContext, getClient } from '../../context/client';
+
+
+const queryClient = new QueryClient();
+
+describe('useGetCurrentUser', () => {
+  it('fetches and returns the current user', async () => {
+    const user = {
+      id: '1',
+      userName: 'testuser',
+      displayName: 'Test User',
+      emails: [{ value: 'testuser@example.com' }],
+      photos: [{ value: 'http://example.com/photo.jpg' }]
+    };
+
+    const apiClient = getClient('http://localhost:8080', 'not-set');
+    const { result } = renderHook(() => useGetCurrentUser("valid-token"), {
+      wrapper: ({ children }) => (
+        <QueryClientProvider client={queryClient}>
+          <ClientContext.Provider value={apiClient}>
+            {children}
+          </ClientContext.Provider>
+        </QueryClientProvider>
+      )
+    });
+
+    await waitFor(() =>
+      expect(result.current.data).toEqual(
+{"displayName": "Test User", "emails": [{"value": "testuser@example.com"}], "id": "1", "photos": [{"value": "http://example.com/photo.jpg"}], "userName": "testuser"}
+      )
+    );
+  });
+});

src/components/userInformation.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+interface UserInformationProps {
+  onBack: () => void;
+}
+
+export const UserInformation: React.FC<UserInformationProps> = ({ onBack }) => {
+  return (
+    <div>
+      <button onClick={onBack}>Back</button>
+      <div>
+        <h2>User Information</h2>
+        {/* Render user information here */}
+      </div>
+    </div>
+  );
+};

src/hooks/user.ts

@@ -0,0 +1,28 @@
+import { useQuery } from '@tanstack/react-query';
+import { UC_AUTH_API_PREFIX } from '../utils/constants';
+import { ClientContext } from '../context/client';
+import { useContext } from 'react';
+
+export interface UserInterface {
+  id: string;
+  userName: string;
+  displayName: string;
+  emails: any;
+  photos: any;
+}
+
+export function useGetCurrentUser(access_token: string) {
+  const apiClient = useContext(ClientContext);
+  return useQuery<UserInterface>({
+    queryKey: ['getUser', access_token],
+    queryFn: async () => {
+      return apiClient
+        .get(`${UC_AUTH_API_PREFIX}/scim2/Users/self`, {
+        })
+        .then((response) => response.data)
+        .catch((e) => {
+          throw new Error(`Failed to fetch user. Error ${e}`);
+        });
+    },
+  });
+}

src/widgets/catalogTreeWidget.tsx

@@ -59,6 +59,15 @@ export const CatalogTreeWidgetComponent: React.FC<{
   updateToken: (token: string) => void;
 }> = ({ googleAuthEnabled, googleClientId, setAuthenticated, updateToken }) => {
   const loginWithToken = useLoginWithToken();
+  const [view, setView] = useState<'catalog' | 'user'>('catalog');
+
+  const handleUserButtonClick = () => {
+    setView('user');
+  };
+
+  const handleBackButtonClick = () => {
+    setView('catalog');
+  };
 
   React.useEffect(() => {
     const authCookie = Cookies.get('authenticated');