refactor: resolve the account settings link with frontend-base

package.json

@@ -83,7 +83,7 @@
     "turbo": "^2.8.20"
   },
   "peerDependencies": {
-    "@openedx/frontend-base": "^2.0.0-alpha.4 || 0.0.0-dev",
+    "@openedx/frontend-base": "^2.0.0-alpha.15 || 0.0.0-dev",
     "@openedx/paragon": "^23",
     "@tanstack/react-query": "^5",
     "react": "^18",

src/Notification/index.test.tsx

@@ -10,10 +10,13 @@ import { Factory } from 'rosie';
 
 import {
   IntlProvider,
+  SiteConfig,
   SiteContext,
   getAuthenticatedHttpClient,
   getSiteConfig,
   initializeMockApp,
+  mergeSiteConfig,
+  setSiteConfig,
 } from '@openedx/frontend-base';
 import { QueryClientProvider } from '@tanstack/react-query';
 
@@ -62,14 +65,18 @@ async function renderComponent(url = '/') {
 }
 
 describe('Notification test cases.', () => {
+  let originalSiteConfig: SiteConfig;
+
   beforeEach(async () => {
     initializeMockApp({ authenticatedUser });
+    originalSiteConfig = { ...getSiteConfig() };
 
     axiosMock = new MockAdapter(getAuthenticatedHttpClient());
     Factory.resetAll();
   });
 
   afterEach(() => {
+    setSiteConfig(originalSiteConfig);
     jest.clearAllMocks();
   });
 
@@ -168,6 +175,34 @@ describe('Notification test cases.', () => {
     });
   });
 
+  it('links the settings icon to the account route in the client when an app provides it', async () => {
+    mergeSiteConfig({
+      apps: [{
+        appId: 'org.openedx.frontend.app.notificationsTest',
+        routes: [{ path: 'account', handle: { roles: ['org.openedx.frontend.role.account'] } }],
+      }],
+    });
+    await setupMockNotificationCountResponse();
+    await renderComponent('/?showNotifications=true');
+
+    await waitFor(() => {
+      const link = screen.getByTestId('setting-icon').closest('a');
+      expect(link).toHaveAttribute('href', '/account/#notifications');
+      expect(link).not.toHaveAttribute('target', '_blank');
+    });
+  });
+
+  it('links the settings icon to an external account route in a new tab', async () => {
+    await setupMockNotificationCountResponse();
+    await renderComponent('/?showNotifications=true');
+
+    await waitFor(() => {
+      const link = screen.getByTestId('setting-icon').closest('a');
+      expect(link).toHaveAttribute('href', 'http://localhost/account/#notifications');
+      expect(link).toHaveAttribute('target', '_blank');
+    });
+  });
+
   it.each(['/', '/notification', '/my-post'])(
     'Successfully call getNotificationCounts on URL %s change',
     async (url) => {

src/Notification/index.tsx

@@ -5,7 +5,7 @@ import React, {
 import classNames from 'classnames';
 import { Link, useSearchParams } from 'react-router-dom';
 
-import { getUrlByRouteRole, useIntl } from '@openedx/frontend-base';
+import { resolveRouteByRole, useIntl } from '@openedx/frontend-base';
 import {
   Bubble, Hyperlink, Icon, IconButton, OverlayTrigger, Popover,
 } from '@openedx/paragon';
@@ -101,11 +101,11 @@ const Notifications: React.FC<NotificationsProps> = ({
     handleActiveTab,
   }), [appName, handleActiveTab]);
 
-  const accountSettingsUrl = getUrlByRouteRole('org.openedx.frontend.role.account');
-  const settingsDestination = accountSettingsUrl
-    ? `${accountSettingsUrl.replace(/\/$/, '')}/#notifications`
+  const accountRoute = resolveRouteByRole('org.openedx.frontend.role.account');
+  const settingsDestination = accountRoute
+    ? `${accountRoute.url.replace(/\/$/, '')}/#notifications`
     : '';
-  const isInternalRoute = !!accountSettingsUrl && !/^[a-z][a-z0-9+.-]*:/i.test(accountSettingsUrl);
+  const isInternalRoute = accountRoute?.isInternal ?? false;
   const settingsIcon = (
     <Icon
       src={Settings}