Merge branch 'main' into fix/unicweb-147

Author: adipaul1981

Diff for: package-lock.json

@@ -30,6 +30,7 @@
     "axios": "^1.8.2",
     "classnames": "^2.5.1",
     "graphql": "^16.10.0",
+    "jwt-decode": "^4.0.0",
     "lodash": "^4.17.21",
     "next": "14.2.25",
     "next-auth": "^4.24.11",

Diff for: package.json

@@ -92,7 +92,7 @@ describe('useAuth hook', () => {
 
     renderHook(() => useAuth());
 
-    expect(mockDispatch).toHaveBeenCalledWith(fetchUser());
+    expect(mockDispatch).toHaveBeenCalledWith(fetchUser({}));
   });
 
   it('redirects to login if not authenticated and not on login page', () => {

Diff for: src/app/api/auth/useAuth.test.ts

@@ -47,18 +47,18 @@ export const useAuth = () => {
   /** logout if session error */
   useEffect(() => {
     if (sessionError) {
-      console.debug('useEffect handleLogout Session error', sessionError);
+      console.debug('[useAuth] handleLogout session error', sessionError);
       handleLogout();
     }
   }, [handleLogout, sessionError]);
 
   /** fetch user after authenticated */
   useEffect(() => {
     if (isAuthenticated) {
-      // @ts-expect-error type UnknownAction
-      dispatch(fetchUser());
+      // @ts-expect-error - UnknownAction
+      dispatch(fetchUser({ errCallback: handleLogout }));
     }
-  }, [isAuthenticated, dispatch]);
+  }, [isAuthenticated, dispatch, handleLogout]);
 
   const _user = {
     ...session?.user,

Diff for: src/app/api/auth/useAuth.ts

@@ -0,0 +1,22 @@
+.profileSettingsWrapper {
+  width: 100%;
+  padding: 16px 24px;
+}
+
+.cardsWrapper {
+  width: 100%;
+}
+
+.profileSettings {
+  max-width: 1000px;
+  margin: auto;
+  display: flex;
+  width: 100%;
+}
+
+.profileSettings .profileSettingsHeader {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}

Diff for: src/app/profile/settings/page.module.css

@@ -0,0 +1,43 @@
+import { render, screen, waitFor } from '@testing-library/react';
+
+import ProfileSettingsPage from '@/app/profile/settings/page';
+import { useAxios } from '@/lib/axios';
+
+jest.mock('@/components/ProfilePage/Cards/DeleteCard', () => jest.fn(() => <div>Delete Card</div>));
+jest.mock('@/components/ProfilePage/Cards/FunctionCard', () => jest.fn(() => <div>Function Card</div>));
+jest.mock('@/components/ProfilePage/Cards/IdentificationCard', () => jest.fn(() => <div>Identification Card</div>));
+jest.mock('@/components/ProfilePage/Cards/ResearchDomainCard', () => jest.fn(() => <div>Research Domain Card</div>));
+
+jest.mock('react-intl-universal', () => ({
+  get: jest.fn((key) => key),
+}));
+jest.mock('@/lib/axios', () => ({
+  useAxios: jest.fn(),
+}));
+jest.mock('@/store/global', () => ({
+  useLang: jest.fn(() => 'EN'),
+}));
+
+describe('ProfileSettingsPage', () => {
+  it('renders ProfileSettingsPage and child components correctly', async () => {
+    // Mock API response
+    (useAxios as jest.Mock).mockReturnValueOnce({
+      data: {
+        roleOptions: [{ value: 'admin', label: 'Admin' }],
+        researchDomainOptions: [{ value: 'AI', label: 'AI' }],
+      },
+    });
+
+    render(<ProfileSettingsPage />);
+
+    // Wait for API data to be processed
+    await waitFor(() => expect(useAxios).toHaveBeenCalledTimes(1));
+
+    // Check if ProfileSettings and mock child components render
+    expect(screen.getByText('screen.profileSettings.title')).toBeInTheDocument();
+    expect(screen.getByText('Identification Card')).toBeInTheDocument();
+    expect(screen.getByText('Function Card')).toBeInTheDocument();
+    expect(screen.getByText('Research Domain Card')).toBeInTheDocument();
+    expect(screen.getByText('Delete Card')).toBeInTheDocument();
+  });
+});

Diff for: src/app/profile/settings/page.test.tsx

@@ -0,0 +1,42 @@
+'use client';
+import { Space, Typography } from 'antd';
+import intl from 'react-intl-universal';
+
+import DeleteCard from '@/components/ProfilePage/Cards/DeleteCard';
+import FunctionCard from '@/components/ProfilePage/Cards/FunctionCard';
+import IdentificationCard from '@/components/ProfilePage/Cards/IdentificationCard';
+import ResearchDomainCard from '@/components/ProfilePage/Cards/ResearchDomainCard';
+import config from '@/config';
+import { useAxios } from '@/lib/axios';
+import { useLang } from '@/store/global';
+
+import styles from './page.module.css';
+const { Title } = Typography;
+
+const ProfileSettings = () => {
+  useLang();
+  const result = useAxios(`${config.USERS_API_URL}/userOptions`);
+  const { roleOptions = [], researchDomainOptions = [] } = result?.data || {};
+
+  return (
+    <div className={styles.profileSettingsWrapper}>
+      <Space size={16} direction='vertical' className={styles.profileSettings}>
+        <div className={styles.profileSettingsHeader}>
+          <Title level={4}>{intl.get('screen.profileSettings.title')}</Title>
+          {/*For community and member page*/}
+          {/*<Link href={`/member/${userInfo?.keycloak_id}`}>*/}
+          {/*  <Button type='primary'>{intl.get('screen.profileSettings.viewProfile')}</Button>*/}
+          {/*</Link>*/}
+        </div>
+        <Space size={24} direction='vertical' className={styles.cardsWrapper}>
+          <IdentificationCard />
+          <FunctionCard roleOptions={roleOptions} />
+          <ResearchDomainCard researchDomainOptions={researchDomainOptions} />
+          <DeleteCard />
+        </Space>
+      </Space>
+    </div>
+  );
+};
+
+export default ProfileSettings;

Diff for: src/app/profile/settings/page.tsx

@@ -24,6 +24,9 @@ jest.mock('@/store/user/thunks', () => ({
   updateUserConfig: jest.fn(),
 }));
 jest.mock('@/lib/hooks/useHash', () => jest.fn());
+jest.mock('@/store/user', () => ({
+  useUser: () => jest.fn(),
+}));
 jest.mock('query-string', () => ({
   parse: jest.fn(),
 }));

Diff for: src/components/CatalogTables/ResourcesTable/ResourcesTable.test.tsx

@@ -21,6 +21,9 @@ jest.mock('react-redux', () => ({
 jest.mock('@/store/user/thunks', () => ({
   updateUserConfig: jest.fn(),
 }));
+jest.mock('@/store/user', () => ({
+  useUser: () => jest.fn(),
+}));
 jest.mock('@/lib/hooks/useHash');
 jest.mock('query-string', () => ({
   parse: jest.fn(),

Diff for: src/components/CatalogTables/TablesTable/TablesTable.test.tsx

@@ -21,6 +21,9 @@ jest.mock('react-redux', () => ({
 jest.mock('@/store/user/thunks', () => ({
   updateUserConfig: jest.fn(),
 }));
+jest.mock('@/store/user', () => ({
+  useUser: () => jest.fn(),
+}));
 jest.mock('@/lib/hooks/useHash');
 jest.mock('query-string', () => ({
   parse: jest.fn(),

Diff for: src/components/CatalogTables/VariablesTable/VariablesTable.test.tsx

@@ -16,6 +16,7 @@ jest.mock('react-redux', () => ({
 jest.mock('@/store/global/thunks', () => ({
   fetchStats: jest.fn(),
 }));
+jest.mock('@/store/user', () => jest.fn());
 jest.mock('react-intl-universal', () => ({
   get: jest.fn((key) => key), // Mock translations to return key names
 }));

Diff for: src/components/DataRelease/DataRelease.test.tsx

@@ -1,4 +1,4 @@
-import { DownOutlined, LogoutOutlined, ReadOutlined } from '@ant-design/icons';
+import { DownOutlined, LogoutOutlined, ReadOutlined, UserOutlined } from '@ant-design/icons';
 import UserAvatar from '@ferlab/ui/core/components/UserAvatar';
 import { Button, Dropdown, MenuProps, PageHeader, Space } from 'antd';
 import Image from 'next/image';
@@ -55,6 +55,17 @@ const Header = () => {
       {
         type: 'divider',
       },
+      {
+        key: 'profile_settings',
+        label: (
+          <Link href={'/profile/settings'}>
+            <Space>
+              <UserOutlined />
+              {intl.get('layout.user.menu.settings')}
+            </Space>
+          </Link>
+        ),
+      },
       {
         key: 'logout',
         label: intl.get('layout.user.menu.logout'),

Diff for: src/components/Header/index.tsx

@@ -0,0 +1,34 @@
+import GridCard from '@ferlab/ui/core/view/v2/GridCard';
+import { Button, FormInstance, Space, Typography } from 'antd';
+import { PropsWithChildren } from 'react';
+import intl from 'react-intl-universal';
+
+interface OwnProps {
+  title: string;
+  form: FormInstance;
+  isValueChanged: boolean;
+  onDiscardChanges: () => void;
+}
+
+const { Title } = Typography;
+
+const BaseCard = ({ title, isValueChanged, form, onDiscardChanges, children }: PropsWithChildren<OwnProps>) => (
+  <GridCard
+    title={<Title level={4}>{title}</Title>}
+    footer={
+      <Space>
+        <Button type='primary' disabled={!isValueChanged} onClick={form.submit}>
+          {intl.get('screen.profileSettings.cards.saveChanges')}
+        </Button>
+        {isValueChanged && (
+          <Button type='text' onClick={onDiscardChanges}>
+            {intl.get('screen.profileSettings.cards.discardChanges')}
+          </Button>
+        )}
+      </Space>
+    }
+    content={children}
+  />
+);
+
+export default BaseCard;

Diff for: src/components/ProfilePage/Cards/BaseCard.tsx

@@ -0,0 +1,48 @@
+import { Form, FormInstance } from 'antd';
+import { Store } from 'antd/lib/form/interface';
+import { PropsWithChildren } from 'react';
+import intl from 'react-intl-universal';
+
+interface OwnProps<T> {
+  form: FormInstance;
+  initialValues: Store;
+  hasChangedInitialValue: Record<any, boolean>;
+  onHasChanged: (values: Record<any, boolean>) => void;
+  onFinish: (values: T) => void;
+}
+
+const BaseForm = <T,>({
+  form,
+  initialValues,
+  onHasChanged,
+  hasChangedInitialValue,
+  children,
+  onFinish,
+}: PropsWithChildren<OwnProps<T>>) => (
+  <Form
+    layout='vertical'
+    form={form}
+    initialValues={initialValues}
+    onFieldsChange={(changedFields) => {
+      const field = changedFields[0];
+      onHasChanged({
+        ...hasChangedInitialValue,
+        [field.name as any]:
+          initialValues.current &&
+          JSON.stringify(initialValues.current[field.name as any]) !== JSON.stringify(field.value),
+      });
+    }}
+    onFinish={onFinish}
+    validateMessages={{
+      required: intl.get('global.forms.errors.requiredField'),
+      types: {
+        email: intl.get('global.forms.errors.enterValidEmail'),
+        url: intl.get('global.forms.errors.enterValidUrl'),
+      },
+    }}
+  >
+    {children}
+  </Form>
+);
+
+export default BaseForm;