richie-education 3.3.1-dev15 → 3.3.1-dev17

package/js/api/auth/keycloak.spec.ts

@@ -127,6 +127,7 @@ describe('Keycloak API', () => {
       expect(mockKeycloakUpdateToken).toHaveBeenCalledWith(30);
       expect(response).toEqual({
         username: 'John Doe',
+        full_name: 'John Doe',
         email: 'johndoe@example.com',
         access_token: mockIdToken,
       });

package/js/api/auth/keycloak.ts

@@ -59,8 +59,12 @@ const API = (APIConf: AuthenticationBackend): { user: APIAuthentication } => {
           .loadUserProfile()
           .then((userProfile) => {
             sessionStorage.setItem(RICHIE_USER_TOKEN, keycloak.idToken!);
+            const fullName = [userProfile.firstName, userProfile.lastName]
+              .filter(Boolean)
+              .join(' ');
             return {
-              username: `${userProfile.firstName} ${userProfile.lastName}`,
+              username: fullName,
+              full_name: fullName,
               email: userProfile.email,
               access_token: keycloak.idToken,
             };

package/js/api/lms/openedx-fonzie-keycloak.spec.ts

@@ -31,12 +31,36 @@ describe('Fonzie Keycloak API', () => {
     jest.clearAllMocks();
   });
 
-  it('uses its own route to get user information', async () => {
+  it('uses its own route to get user information and enriches with keycloak account', async () => {
     const user = {
-      username: faker.internet.username(),
+      username: 'test-richie-ncl',
+      full_name: 'n c',
+    };
+    const keycloakAccount = {
+      firstName: 'John',
+      lastName: 'Doe',
+      email: 'john.doe@example.com',
+    };
+
+    fetchMock.get('https://demo.endpoint.api/api/v1.0/user/me', user);
+    fetchMock.get('https://keycloak.test/auth/realms/richie-realm/account/', keycloakAccount);
+
+    const api = FonzieKeycloakAPIInterface(configuration);
+    await expect(api.user.me()).resolves.toEqual({
+      ...user,
+      full_name: 'John Doe',
+      email: 'john.doe@example.com',
+    });
+  });
+
+  it('falls back to fonzie data when keycloak account call fails', async () => {
+    const user = {
+      username: 'test-richie-ncl',
+      full_name: 'n c',
     };
 
     fetchMock.get('https://demo.endpoint.api/api/v1.0/user/me', user);
+    fetchMock.get('https://keycloak.test/auth/realms/richie-realm/account/', 500);
 
     const api = FonzieKeycloakAPIInterface(configuration);
     await expect(api.user.me()).resolves.toEqual(user);

package/js/api/lms/openedx-fonzie-keycloak.ts

@@ -43,6 +43,28 @@ const API = (APIConf: AuthenticationBackend): APILms => {
     ...ApiInterface,
     user: {
       ...ApiInterface.user,
+      me: async () => {
+        const user = await ApiInterface.user.me();
+        if (!user) return null;
+        try {
+          const keycloakAccount = await fetch(APIOptions.routes.user.account, {
+            credentials: 'include',
+            headers: { Accept: 'application/json' },
+          }).then((res) => {
+            if (!res.ok) throw new Error(`Keycloak account fetch failed: ${res.status}`);
+            return res.json();
+          });
+          return {
+            ...user,
+            full_name:
+              [keycloakAccount.firstName, keycloakAccount.lastName].filter(Boolean).join(' ') ||
+              user.full_name,
+            email: keycloakAccount.email || user.email,
+          };
+        } catch {
+          return user;
+        }
+      },
       login: () => {
         const next = encodeURIComponent(location.href);
         location.assign(`${APIOptions.routes.user.login}?next=${next}`);

package/js/components/SaleTunnel/SaleTunnelInformation/SaleTunnelInformationSingular.tsx

@@ -14,6 +14,7 @@ import { HttpError } from 'utils/errors/HttpError';
 import { APIBackend, KeycloakAccountApi } from 'types/api';
 import context from 'utils/context';
 import { AuthenticationApi } from 'api/authentication';
+import { UserHelper } from 'utils/UserHelper';
 
 const messages = defineMessages({
   title: {
@@ -242,7 +243,7 @@ const KeycloakAccountEdit = () => {
             <h4>
               <FormattedMessage {...messages.keycloakUsernameLabel} />
             </h4>
-            <div className="fw-bold">{user?.username}</div>
+            <div className="fw-bold">{user ? UserHelper.getName(user) : ''}</div>
           </div>
           <div className="sale-tunnel__username__description">
             <FormattedMessage {...messages.keycloakUsernameInfo} />

package/js/components/SaleTunnel/index.spec.tsx

@@ -940,6 +940,7 @@ describe('SaleTunnel with Keycloak backend', () => {
 
     richieUser = UserFactory({
       username: 'John Doe',
+      full_name: 'John Doe',
       email: 'johndoe@example.com',
     }).one();
 

package/js/pages/DashboardKeycloakProfile/index.spec.tsx

@@ -48,7 +48,7 @@ describe('pages.DashboardKeycloakProfile', () => {
     AuthenticationApi!.account = originalAccount;
   });
 
-  it('should render profile information', async () => {
+  it('should render profile information with full_name', async () => {
     render(<DashboardKeycloakProfile />, {
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
     });
@@ -56,7 +56,7 @@ describe('pages.DashboardKeycloakProfile', () => {
     expect(screen.getByText('Profile')).toBeInTheDocument();
     expect(screen.getByText('Account information')).toBeInTheDocument();
 
-    expect(await screen.findByDisplayValue(richieUser.username)).toBeInTheDocument();
+    expect(await screen.findByDisplayValue(richieUser.full_name!)).toBeInTheDocument();
     expect(screen.getByDisplayValue(richieUser.email!)).toBeInTheDocument();
 
     const editLink = screen.getByRole('link', { name: 'Edit your profile' });
@@ -64,14 +64,14 @@ describe('pages.DashboardKeycloakProfile', () => {
     expect(editLink).toHaveAttribute('href', mockAccountUpdateUrl);
   });
 
-  it('should render default values when user fields are empty', async () => {
-    const userWithoutEmail = UserFactory({ email: undefined }).one();
+  it('should fallback to username when full_name is empty', async () => {
+    const userWithoutFullName = UserFactory({ full_name: undefined, email: undefined }).one();
 
     render(<DashboardKeycloakProfile />, {
-      queryOptions: { client: createTestQueryClient({ user: userWithoutEmail }) },
+      queryOptions: { client: createTestQueryClient({ user: userWithoutFullName }) },
     });
 
-    expect(await screen.findByDisplayValue(userWithoutEmail.username)).toBeInTheDocument();
+    expect(await screen.findByDisplayValue(userWithoutFullName.username)).toBeInTheDocument();
     expect(screen.getByLabelText('Account email')).toHaveValue(DEFAULT_DISPLAYED_FORM_VALUE);
   });
 });

package/js/pages/DashboardKeycloakProfile/index.tsx

@@ -6,6 +6,7 @@ import { DashboardCard } from 'widgets/Dashboard/components/DashboardCard';
 import Form from 'components/Form';
 import { AuthenticationApi } from 'api/authentication';
 import { KeycloakAccountApi } from 'types/api';
+import { UserHelper } from 'utils/UserHelper';
 
 const messages = defineMessages({
   sectionHeader: {
@@ -63,7 +64,7 @@ const DashboardKeycloakProfile = () => {
               name="username"
               label={intl.formatMessage(messages.usernameInputLabel)}
               disabled={true}
-              value={user?.username || DEFAULT_DISPLAYED_FORM_VALUE}
+              value={user ? UserHelper.getName(user) : DEFAULT_DISPLAYED_FORM_VALUE}
               text={intl.formatMessage(messages.usernameInputDescription)}
             />
           </Form.Row>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "3.3.1-dev15",
+  "version": "3.3.1-dev17",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {