richie-education 2.24.0 → 2.25.0-b2.dev101

package/js/widgets/SyllabusCourseRunsList/index.spec.tsx

@@ -16,7 +16,6 @@ import fetchMock from 'fetch-mock';
 import userEvent from '@testing-library/user-event';
 import { faker } from '@faker-js/faker';
 import {
-  CourseLightFactory,
   CourseRunFactoryFromPriority,
   RichieContextFactory as mockRichieContextFactory,
   UserFactory,
@@ -25,8 +24,8 @@ import SyllabusCourseRunsList from 'widgets/SyllabusCourseRunsList/index';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { CourseRun, Priority } from 'types';
 import JoanieApiProvider from 'contexts/JoanieApiContext';
-import { Product } from 'types/Joanie';
-import { ProductFactory } from 'utils/test/factories/joanie';
+import { CourseProductRelation } from 'types/Joanie';
+import { CourseLightFactory, CourseProductRelationFactory } from 'utils/test/factories/joanie';
 import { DEFAULT_DATE_FORMAT } from 'hooks/useDateFormat';
 import { StringHelper } from 'utils/StringHelper';
 import { computeStates } from 'utils/CourseRuns';
@@ -40,7 +39,7 @@ jest.mock('utils/context', () => {
   mock.lms_backends = [
     {
       backend: 'joanie',
-      course_regexp: '^.*/api/v1.0/(course-runs|products)/([^/]*)/?$',
+      course_regexp: '^.*/api/v1.0((?:/(?:courses|course-runs|products)/[^/]+)+)/?$',
       endpoint: 'https://joanie.test',
     },
     {
@@ -143,9 +142,9 @@ describe('<SyllabusCourseRunsList/>', () => {
     });
   };
 
-  const expectProduct = async (container: HTMLElement, product: Product) => {
+  const expectCourseProduct = async (container: HTMLElement, relation: CourseProductRelation) => {
     const heading = await findByRole(container, 'heading', {
-      name: product.title,
+      name: relation.product.title,
     });
     expect(Array.from(heading.classList)).toContain('product-widget__title');
   };
@@ -232,6 +231,48 @@ describe('<SyllabusCourseRunsList/>', () => {
     courseRuns.slice(1).forEach((run) => expectCourseRunInList(portalContainer, run));
   });
 
+  it('has one forever open course run', async () => {
+    const course = CourseLightFactory().one();
+    const startDate = faker.date.past();
+    const enrollmentStartDate = faker.date.past();
+    const courseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      start: startDate.toISOString(),
+      end: undefined,
+      enrollment_start: enrollmentStartDate.toISOString(),
+      enrollment_end: undefined,
+      resource_link: 'https://openedx.endpoint/course-v1:edX+DemoX+Session1/info/',
+    }).one();
+
+    render(
+      <SyllabusCourseRunsList
+        courseRuns={[courseRun]}
+        course={course}
+        maxArchivedCourseRuns={MAX_ARCHIVED_COURSE_RUNS}
+      />,
+      {
+        wrapper: Wrapper,
+      },
+    );
+
+    expect(getHeaderContainer().querySelectorAll('.course-detail__run-descriptions').length).toBe(
+      1,
+    );
+    getByRole(getHeaderContainer(), 'heading', {
+      name: courseRun.title,
+    });
+    // Make sure that CourseRunEnrollment is well rendered.
+    getByRole(getHeaderContainer(), 'button', { name: 'Log in to enroll' });
+
+    const intl = createIntl({ locale: 'en' });
+    getByText(
+      getHeaderContainer(),
+      'From ' + intl.formatDate(enrollmentStartDate, DEFAULT_DATE_FORMAT) + ' to ...',
+    );
+    getByText(
+      getHeaderContainer(),
+      'From ' + intl.formatDate(startDate, DEFAULT_DATE_FORMAT) + ' to ...',
+    );
+  });
   it('has multiple opened course run', async () => {
     const course = CourseLightFactory().one();
     const courseRuns = [
@@ -273,14 +314,13 @@ describe('<SyllabusCourseRunsList/>', () => {
 
   it('has one opened product', async () => {
     const course = CourseLightFactory().one();
-    const product: Product = ProductFactory().one();
-    fetchMock.get(
-      `https://joanie.test/api/v1.0/products/${product.id}/?course=${course.code}`,
-      product,
-    );
+    const relation = CourseProductRelationFactory().one();
+    const resourceLink = `https://joanie.test/api/v1.0/courses/${course.code}/products/${relation.product.id}/`;
+    fetchMock.get(resourceLink, relation);
 
-    const courseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)().one();
-    courseRun.resource_link = 'https://joanie.test/api/v1.0/products/' + product.id + '/';
+    const courseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      resource_link: resourceLink,
+    }).one();
 
     render(
       <SyllabusCourseRunsList
@@ -297,7 +337,7 @@ describe('<SyllabusCourseRunsList/>', () => {
     expect(getHeaderContainer().querySelectorAll('.course-detail__run-descriptions').length).toBe(
       1,
     );
-    await expectProduct(getHeaderContainer(), product);
+    await expectCourseProduct(getHeaderContainer(), relation);
 
     // Portal.
     expectEmptyPortalContainer();

package/js/widgets/SyllabusCourseRunsList/index.tsx

@@ -1,14 +1,15 @@
 import React, { useEffect, useMemo } from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
 import { createPortal } from 'react-dom';
+import { Button } from '@openfun/cunningham-react';
 import { CourseRun, Priority } from 'types';
-import { Course } from 'types/Course';
 import { computeStates } from 'utils/CourseRuns';
 import { SyllabusAsideList } from 'widgets/SyllabusCourseRunsList/components/SyllabusAsideList';
 import { SyllabusCourseRun } from 'widgets/SyllabusCourseRunsList/components/SyllabusCourseRun';
 import { DjangoCMSPluginsInit } from 'components/DjangoCMSTemplate';
 import { isJoanieEnabled } from 'api/joanie';
 import context from 'utils/context';
+import { CourseLight } from 'types/Joanie';
 import CourseWishButton from './components/CourseWishButton';
 
 const OPENED_COURSES_ELEMENT_ID = 'courseDetailsRunsOpen';
@@ -40,7 +41,7 @@ const SyllabusCourseRunsList = ({
   maxArchivedCourseRuns,
 }: {
   courseRuns: CourseRun[];
-  course: Course;
+  course: CourseLight;
   maxArchivedCourseRuns: number;
 }) => {
   useEffect(() => {
@@ -93,13 +94,9 @@ const SyllabusCourseRunsList = ({
               values={{ count: openedRuns.length }}
             />
           </p>
-          <a
-            className="button button--primary"
-            href={'#' + OPENED_COURSES_ELEMENT_ID}
-            onClick={choose}
-          >
+          <Button href={'#' + OPENED_COURSES_ELEMENT_ID} onClick={choose} fullWidth={true}>
             <FormattedMessage {...messages.multipleOpenedCourseRunsButton} />
-          </a>
+          </Button>
         </div>
       )}
       {createPortal(

package/js/widgets/UserLogin/components/UserMenu/DesktopUserMenu.tsx

@@ -2,6 +2,7 @@ import { FC } from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
 import { useSelect } from 'downshift';
 import { location } from 'utils/indirection/window';
+import { UserHelper } from 'utils/UserHelper';
 import { UserMenuProps } from '.';
 
 const messages = defineMessages({
@@ -41,7 +42,7 @@ export const DesktopUserMenu: FC<UserMenuProps> = ({ user }) => {
         <FormattedMessage {...messages.menuPurpose} />
       </label>
       <button {...getToggleButtonProps()} className="selector__button">
-        {user.username}
+        {UserHelper.getName(user)}
         <svg role="img" className="selector__button__icon" aria-hidden="true">
           <use xlinkHref="#icon-chevron-down" />
         </svg>

package/js/widgets/UserLogin/components/UserMenu/MobileUserMenu.tsx

@@ -1,12 +1,13 @@
 import { FC } from 'react';
 import { Icon, IconTypeEnum } from 'components/Icon';
+import { UserHelper } from 'utils/UserHelper';
 import { UserMenuProps } from '.';
 
 export const MobileUserMenu: FC<UserMenuProps> = ({ user }) => (
   <div className="user-menu user-menu--mobile">
     <h6 className="user-menu__username">
       <Icon name={IconTypeEnum.LOGIN} />
-      {user.username}
+      {UserHelper.getName(user)}
     </h6>
     <ul className="user-menu__list">
       {user.urls.map(({ key, label, action }) => (

package/js/widgets/UserLogin/components/UserMenu/index.tsx

@@ -4,13 +4,14 @@ import useMatchMedia from 'hooks/useMatchMedia';
 import { DesktopUserMenu } from './DesktopUserMenu';
 import { MobileUserMenu } from './MobileUserMenu';
 
+export interface UserMenuItem {
+  key: string;
+  label: string;
+  action: string | (() => void);
+}
 export interface UserMenuProps {
   user: User & {
-    urls: {
-      key: string;
-      label: string;
-      action: string | (() => void);
-    }[];
+    urls: UserMenuItem[];
   };
 }
 

package/js/widgets/UserLogin/index.not.isJoanieEnabled.spec.tsx

@@ -0,0 +1,120 @@
+import { QueryClientProvider } from '@tanstack/react-query';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import fetchMock from 'fetch-mock';
+import { IntlProvider } from 'react-intl';
+import { act } from 'react-dom/test-utils';
+import { PropsWithChildren } from 'react';
+import {
+  RichieContextFactory as mockRichieContextFactory,
+  UserFactory,
+} from 'utils/test/factories/richie';
+import { Deferred } from 'utils/test/deferred';
+import context from 'utils/context';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { User } from 'types/User';
+import { HttpStatusCode } from 'utils/errors/HttpError';
+import { Nullable } from 'types/utils';
+import BaseSessionProvider from 'contexts/SessionContext/BaseSessionProvider';
+import UserLogin from '.';
+
+jest.mock('utils/errors/handle', () => ({
+  handle: jest.fn(),
+}));
+
+jest.mock('utils/indirection/window', () => ({
+  matchMedia: () => ({
+    matches: true,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+  }),
+}));
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: {
+      backend: 'fonzie',
+      endpoint: 'https://auth.local.test',
+    },
+  }).one(),
+}));
+
+describe('<UserLogin />', () => {
+  const Wrapper = ({
+    children,
+    user = false,
+  }: PropsWithChildren & { user?: Nullable<User | boolean> }) => (
+    <QueryClientProvider client={createTestQueryClient({ user })}>
+      <IntlProvider locale="en">
+        <BaseSessionProvider>{children}</BaseSessionProvider>
+      </IntlProvider>
+    </QueryClientProvider>
+  );
+
+  it('gets and renders the user name and a dropdown containing a logout link', async () => {
+    const user: User = UserFactory({ full_name: undefined }).one();
+
+    render(
+      <Wrapper user={user}>
+        <UserLogin context={context} />
+      </Wrapper>,
+    );
+
+    const button = await screen.findByLabelText(`Access to your profile settings`, {
+      selector: 'button',
+    });
+
+    await userEvent.click(button);
+
+    screen.getByText(user.username);
+    screen.getByText('Log out');
+    expect(screen.queryByText('Loading login status...')).toBeNull();
+  });
+
+  it('renders signup/login buttons when the user is not logged in', async () => {
+    const loginDeferred = new Deferred();
+    fetchMock.get('https://auth.test/api/user/v1/me', loginDeferred.promise);
+
+    render(
+      <Wrapper user={null}>
+        <UserLogin context={context} />
+      </Wrapper>,
+    );
+
+    await act(async () => {
+      loginDeferred.resolve(HttpStatusCode.UNAUTHORIZED);
+    });
+
+    expect(await screen.findByRole('button', { name: 'Log in' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Sign up' })).toBeInTheDocument();
+
+    expect(screen.queryByText('Loading login status...')).not.toBeInTheDocument();
+  });
+
+  it('should renders profile urls and bind user info if needed', async () => {
+    const user: User = UserFactory().one();
+    const profileUrls = {
+      settings: { label: 'Settings', action: 'https://auth.local.test/settings' },
+      account: { label: 'Account', action: 'https://auth.local.test/u/(username)' },
+    };
+
+    render(
+      <Wrapper user={user}>
+        <UserLogin context={context} profileUrls={profileUrls} />
+      </Wrapper>,
+    );
+
+    const button = await screen.findByLabelText(`Access to your profile settings`, {
+      selector: 'button',
+    });
+
+    await userEvent.click(button);
+
+    screen.getByText(user.full_name!);
+    const settingsLink = screen.getByRole('link', { name: 'Settings' });
+    const accountLink = screen.getByRole('link', { name: 'Account' });
+    expect(settingsLink.getAttribute('href')).toEqual('https://auth.local.test/settings');
+    expect(accountLink.getAttribute('href')).toEqual(`https://auth.local.test/u/${user.username}`);
+  });
+});

package/js/widgets/UserLogin/index.spec.tsx

@@ -4,15 +4,19 @@ import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
 import { IntlProvider } from 'react-intl';
 import { act } from 'react-dom/test-utils';
+import { PropsWithChildren } from 'react';
 import {
   RichieContextFactory as mockRichieContextFactory,
   UserFactory,
 } from 'utils/test/factories/richie';
 import { Deferred } from 'utils/test/deferred';
 import context from 'utils/context';
-import { SessionProvider } from 'contexts/SessionContext';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
-import { User } from 'types/User';
+import { JoanieUserApiAbilityActions, User } from 'types/User';
+import { HttpStatusCode } from 'utils/errors/HttpError';
+import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
+import { JoanieUserProfileFactory } from 'utils/test/factories/joanie';
+import { Nullable } from 'types/utils';
 import UserLogin from '.';
 
 jest.mock('utils/errors/handle', () => ({
@@ -29,10 +33,34 @@ jest.mock('utils/indirection/window', () => ({
 
 jest.mock('utils/context', () => ({
   __esModule: true,
-  default: mockRichieContextFactory().one(),
+  default: mockRichieContextFactory({
+    authentication: {
+      backend: 'fonzie',
+      endpoint: 'https://auth.local.test',
+    },
+    joanie_backend: {
+      endpoint: 'https://endpoint.test',
+    },
+  }).one(),
 }));
 
 describe('<UserLogin />', () => {
+  const Wrapper = ({
+    children,
+    user = false,
+  }: PropsWithChildren & { user?: Nullable<User | boolean> }) => (
+    <QueryClientProvider client={createTestQueryClient({ user })}>
+      <IntlProvider locale="en">
+        <JoanieSessionProvider>{children}</JoanieSessionProvider>
+      </IntlProvider>
+    </QueryClientProvider>
+  );
+  beforeEach(() => {
+    fetchMock
+      .get('https://endpoint.test/api/v1.0/orders/', [])
+      .get('https://endpoint.test/api/v1.0/addresses/', [])
+      .get('https://endpoint.test/api/v1.0/credit-cards/', []);
+  });
   afterEach(() => {
     fetchMock.restore();
   });
@@ -40,81 +68,118 @@ describe('<UserLogin />', () => {
   it('gets and renders the user name and a dropdown containing a logout link', async () => {
     const user: User = UserFactory().one();
 
-    await act(async () => {
-      render(
-        <QueryClientProvider client={createTestQueryClient({ user })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <UserLogin context={context} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
-      );
-    });
+    fetchMock.get('https://endpoint.test/api/v1.0/users/me/', JoanieUserProfileFactory().one());
+    render(
+      <Wrapper user={user}>
+        <UserLogin context={context} />
+      </Wrapper>,
+    );
 
-    const button = screen.getByLabelText(`Access to your profile settings`, {
+    const button = await screen.findByLabelText(`Access to your profile settings`, {
       selector: 'button',
     });
 
     await userEvent.click(button);
 
-    screen.getByText(user.username);
+    screen.getByText(user.full_name!);
     screen.getByText('Log out');
     expect(screen.queryByText('Loading login status...')).toBeNull();
   });
 
   it('renders signup/login buttons when the user is not logged in', async () => {
     const loginDeferred = new Deferred();
-    fetchMock.get('https://endpoint.test/api/user/v1/me', loginDeferred.promise);
-
-    const { queryByText, findByText } = render(
-      <QueryClientProvider client={createTestQueryClient()}>
-        <IntlProvider locale="en">
-          <SessionProvider>
-            <UserLogin context={context} />
-          </SessionProvider>
-        </IntlProvider>
-      </QueryClientProvider>,
+    fetchMock.get('https://auth.test/api/user/v1/me', loginDeferred.promise);
+
+    fetchMock.get('https://endpoint.test/api/v1.0/users/me/', JoanieUserProfileFactory().one());
+    render(
+      <Wrapper user={null}>
+        <UserLogin context={context} />
+      </Wrapper>,
     );
 
     await act(async () => {
-      loginDeferred.resolve(401);
+      loginDeferred.resolve(HttpStatusCode.UNAUTHORIZED);
     });
 
-    await findByText('Log in');
-    await findByText('Sign up');
-    expect(queryByText('Loading login status...')).toBeNull();
+    expect(await screen.findByRole('button', { name: 'Log in' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Sign up' })).toBeInTheDocument();
+
+    expect(screen.queryByText('Loading login status...')).not.toBeInTheDocument();
   });
 
-  it('should renders profile urls and bind user info if needed', async () => {
+  it('should renders profile urls and bind user info if needed, for user without abilities', async () => {
     const user: User = UserFactory().one();
     const profileUrls = {
       settings: { label: 'Settings', action: 'https://auth.local.test/settings' },
       account: { label: 'Account', action: 'https://auth.local.test/u/(username)' },
+      dashboard_teacher: { label: 'Teacher dashboard', action: 'https://dashboard.teacher.url' },
     };
 
-    await act(async () => {
-      render(
-        <QueryClientProvider client={createTestQueryClient({ user })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <UserLogin context={context} profileUrls={profileUrls} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
-      );
+    fetchMock.get(
+      'https://endpoint.test/api/v1.0/users/me/',
+      JoanieUserProfileFactory({
+        abilities: {
+          [JoanieUserApiAbilityActions.HAS_ORGANIZATION_ACCESS]: false,
+          [JoanieUserApiAbilityActions.HAS_COURSE_ACCESS]: false,
+        },
+      }).one(),
+    );
+    render(
+      <Wrapper user={user}>
+        <UserLogin context={context} profileUrls={profileUrls} />
+      </Wrapper>,
+    );
+
+    const button = await screen.findByLabelText(`Access to your profile settings`, {
+      selector: 'button',
     });
 
-    const button = screen.getByLabelText(`Access to your profile settings`, {
+    await userEvent.click(button);
+
+    screen.getByText(user.full_name!);
+    const settingsLink = screen.getByRole('link', { name: 'Settings' });
+    const accountLink = screen.getByRole('link', { name: 'Account' });
+    expect(settingsLink.getAttribute('href')).toEqual('https://auth.local.test/settings');
+    expect(accountLink.getAttribute('href')).toEqual(`https://auth.local.test/u/${user.username}`);
+    expect(screen.queryByRole('link', { name: 'Teacher dashboard' })).not.toBeInTheDocument();
+  });
+
+  it('should renders teacher dashboard menu item for user with organization access', async () => {
+    const user: User = UserFactory().one();
+    const profileUrls = {
+      settings: { label: 'Settings', action: 'https://auth.local.test/settings' },
+      account: { label: 'Account', action: 'https://auth.local.test/u/(username)' },
+      dashboard_teacher: { label: 'Teacher dashboard', action: 'https://dashboard.teacher.url' },
+    };
+
+    fetchMock.get(
+      'https://endpoint.test/api/v1.0/users/me/',
+      JoanieUserProfileFactory({
+        abilities: {
+          [JoanieUserApiAbilityActions.HAS_ORGANIZATION_ACCESS]: true,
+        },
+      }).one(),
+    );
+    render(
+      <Wrapper user={user}>
+        <UserLogin context={context} profileUrls={profileUrls} />
+      </Wrapper>,
+    );
+
+    const button = await screen.findByLabelText(`Access to your profile settings`, {
       selector: 'button',
     });
 
     await userEvent.click(button);
 
-    screen.getByText(user.username);
+    screen.getByText(user.full_name!);
     const settingsLink = screen.getByRole('link', { name: 'Settings' });
     const accountLink = screen.getByRole('link', { name: 'Account' });
     expect(settingsLink.getAttribute('href')).toEqual('https://auth.local.test/settings');
     expect(accountLink.getAttribute('href')).toEqual(`https://auth.local.test/u/${user.username}`);
+
+    const teacherDashboardLink = screen.getByRole('link', { name: 'Teacher dashboard' });
+    expect(teacherDashboardLink).toBeInTheDocument();
+    expect(teacherDashboardLink.getAttribute('href')).toEqual('https://dashboard.teacher.url');
   });
 });

package/js/widgets/UserLogin/index.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { StorybookHelper } from 'utils/StorybookHelper';
+import { RichieContextFactory } from 'utils/test/factories/richie';
+import UserLogin from '.';
+
+export default {
+  component: UserLogin,
+  parameters: {
+    docs: {
+      source: {
+        code: 'Disabled for this story, see https://github.com/storybookjs/storybook/issues/11554',
+      },
+    },
+  },
+  args: {
+    context: RichieContextFactory().one(),
+    profileUrls: {
+      first_entry: { action: () => {}, label: 'First entry' },
+      second_entry: { action: () => {}, label: 'Second entry' },
+    },
+  },
+  render: (args) => {
+    return StorybookHelper.wrapInApp(<UserLogin {...args} />);
+  },
+} as Meta<typeof UserLogin>;
+
+type Story = StoryObj<typeof UserLogin>;
+
+export const Default: Story = {};

package/js/widgets/UserLogin/index.tsx

@@ -1,12 +1,14 @@
 /* eslint-disable no-nested-ternary */
-import { Fragment } from 'react';
+import { Fragment, useMemo } from 'react';
 import { defineMessages, FormattedMessage, MessageDescriptor, useIntl } from 'react-intl';
 
 import { Spinner } from 'components/Spinner';
 import { Icon, IconTypeEnum } from 'components/Icon';
 import { useSession } from 'contexts/SessionContext';
 import { CommonDataProps } from 'types/commonDataProps';
-import { UserMenu } from './components/UserMenu';
+import { abilityActions } from 'utils/AbilitiesHelper';
+import { useJoanieUserAbilities } from 'hooks/useJoanieUserAbilities';
+import { UserMenu, UserMenuItem } from './components/UserMenu';
 
 const messages: { [key: string]: MessageDescriptor } = defineMessages({
   logIn: {
@@ -73,6 +75,34 @@ const UserLogin = ({ profileUrls = {} }: UserLoginProps) => {
    */
   const { user, destroy, login, register } = useSession();
   const intl = useIntl();
+  const joanieUserAbilities = useJoanieUserAbilities();
+
+  const unauthorizedUrlFilter = (urlItem: UserMenuItem) => {
+    if (urlItem.key === 'dashboard_teacher') {
+      return !!joanieUserAbilities?.can(abilityActions.ACCESS_TEACHER_DASHBOARD);
+    }
+    return true;
+  };
+
+  const userMenuItems = useMemo(() => {
+    if (user) {
+      return [
+        ...Object.entries(profileUrls)
+          .map(([key, { label, action }]) => ({
+            key,
+            label,
+            action: typeof action === 'string' ? bindUserDataToUrl(action, user) : action,
+          }))
+          .filter(unauthorizedUrlFilter),
+        {
+          key: 'logout',
+          label: intl.formatMessage(messages.logOut),
+          action: destroy,
+        },
+      ];
+    }
+    return [];
+  }, [user, joanieUserAbilities]);
 
   return (
     <div className="user-login">
@@ -92,21 +122,9 @@ const UserLogin = ({ profileUrls = {} }: UserLoginProps) => {
         </Fragment>
       ) : (
         <UserMenu
-          // If user's fullname is empty, we use its username as a fallback
           user={{
             ...user,
-            urls: [
-              ...Object.entries(profileUrls).map(([key, { label, action }]) => ({
-                key,
-                label,
-                action: typeof action === 'string' ? bindUserDataToUrl(action, user) : action,
-              })),
-              {
-                key: 'logout',
-                label: intl.formatMessage(messages.logOut),
-                action: destroy,
-              },
-            ],
+            urls: userMenuItems,
           }}
         />
       )}