fix: removed derpeciated package codecov

.env.development

@@ -1,6 +1,4 @@
 ACCESS_TOKEN_COOKIE_NAME=edx-jwt-cookie-header-payload
-ACCOUNT_PROFILE_URL=http://localhost:1995
-ACCOUNT_SETTINGS_URL=http://localhost:1997
 BASE_URL=localhost:8080
 CREDENTIALS_BASE_URL=http://localhost:18150
 CSRF_TOKEN_API_PATH=/csrf/api/v1/token

.github/workflows/add-depr-ticket-to-depr-board.yml

@@ -16,4 +16,4 @@ jobs:
     secrets:
       GITHUB_APP_ID: ${{ secrets.GRAPHQL_AUTH_APP_ID }}
       GITHUB_APP_PRIVATE_KEY: ${{ secrets.GRAPHQL_AUTH_APP_PEM }}
-      SLACK_BOT_TOKEN: ${{ secrets.SLACK_ISSUE_BOT_TOKEN }}
+      SLACK_BOT_TOKEN: ${{ secrets.SLACK_ISSUE_BOT_TOKEN }}

.github/workflows/add-remove-label-on-comment.yml

@@ -1,20 +0,0 @@
-# This workflow runs when a comment is made on the ticket
-# If the comment starts with "label: " it tries to apply
-# the label indicated in rest of comment.
-# If the comment starts with "remove label: ", it tries
-# to remove the indicated label.
-# Note: Labels are allowed to have spaces and this script does
-# not parse spaces (as often a space is legitimate), so the command
-# "label: really long lots of words label" will apply the
-# label "really long lots of words label"
-
-name: Allows for the adding and removing of labels via comment
-
-on:
-  issue_comment:
-    types: [created]
-
-jobs:
-  add_remove_labels:
-    uses: openedx/.github/.github/workflows/add-remove-label-on-comment.yml@master
-

.github/workflows/ci.yml

@@ -9,17 +9,18 @@ on:
 jobs:
   tests:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: [16]
     steps:
     - name: Checkout
       uses: actions/checkout@v3
       with:
         fetch-depth: 0
-    - name: Setup Nodejs Env
-      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
     - name: Setup Nodejs
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v2
       with:
-        node-version: ${{ env.NODE_VER }}
+        node-version: ${{ matrix.node }}
     - name: Install dependencies
       run: npm ci
     - name: Validate package-lock.json changes

.github/workflows/lockfileversion-check.yml

@@ -10,4 +10,5 @@ on:
 
 jobs:
   version-check:
-    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master
+    uses: openedx/.github/.github/workflows/lockfileversion-check.yml@master
+    

.github/workflows/release.yml

@@ -12,12 +12,10 @@ jobs:
       uses: actions/checkout@v3
       with:
         fetch-depth: 0
-    - name: Setup Nodejs Env
-      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
     - name: Setup Node.js
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v2
       with:
-        node-version: ${{ env.NODE_VER }}
+        node-version: 16
     - name: Install dependencies
       run: npm ci
     - name: Validate package-lock.json changes
@@ -33,7 +31,7 @@ jobs:
     - name: Build
       run: npm run build
     - name: Release
-      uses: cycjimmy/semantic-release-action@v3
+      uses: cycjimmy/semantic-release-action@v2
       with:
         semantic_version: 16
       env:

.github/workflows/self-assign-issue.yml

@@ -1,12 +0,0 @@
-# This workflow runs when a comment is made on the ticket
-# If the comment starts with "assign me" it assigns the author to the
-# ticket (case insensitive)
-
-name: Assign comment author to ticket if they say "assign me"
-on:
-  issue_comment:
-    types: [created]
-
-jobs:
-  self_assign_by_comment:
-    uses: openedx/.github/.github/workflows/self-assign-issue.yml@master

.nvmrc

@@ -1 +0,0 @@
-18

Makefile

@@ -1,9 +1,11 @@
-export TRANSIFEX_RESOURCE = frontend-component-header
+transifex_resource = frontend-component-header
 transifex_langs = "ar,fr,es_419,zh_CN,pt,it,de,uk,ru,hi,fr_CA"
 
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
+tx_url1 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/translation/en/strings/
+tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/source/
 
 # This directory must match .babelrc .
 transifex_temp = ./temp/babel-plugin-react-intl
@@ -40,11 +42,11 @@ push_translations:
 	# Pushing strings to Transifex...
 	tx push -s
 	# Fetching hashes from Transifex...
-	./node_modules/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
+	./node_modules/reactifex/bash_scripts/get_hashed_strings.sh $(tx_url1)
 	# Writing out comments to file...
-	$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
+	$(transifex_utils) $(transifex_temp) --comments
 	# Pushing comments to Transifex...
-	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
+	./node_modules/reactifex/bash_scripts/put_comments.sh $(tx_url2)
 
 # Pulls translations from Transifex.
 pull_translations:

README.rst

@@ -26,8 +26,6 @@ Environment Variables
   Defaults to "localhost" in development.
 * ``LOGO_URL`` - The URL of the site's logo.  This logo is displayed in the header.
 * ``ORDER_HISTORY_URL`` - The URL of the order history page.
-* ``ACCOUNT_PROFILE_URL`` - The URL of the account profile page.
-* ``ACCOUNT_SETTINGS_URL`` - The URL of the account settings page.
 * ``AUTHN_MINIMAL_HEADER`` - A boolean flag which hides the main menu, user menu, and logged-out
   menu items when truthy.  This is intended to be used in micro-frontends like
   frontend-app-authentication in which these menus are considered distractions from the user's task.
@@ -65,7 +63,7 @@ Development
 
 Install dependencies::
 
-  npm ci
+  npm i
 
 Start the development server::
 

example/index.js

@@ -4,8 +4,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { initialize, getConfig, subscribe, APP_READY } from '@edx/frontend-platform';
 import { AppContext, AppProvider } from '@edx/frontend-platform/react';
-// import Header from '@edx/frontend-component-header';
-import { LearningHeader as Header } from '@edx/frontend-component-header';
+import Header from '@edx/frontend-component-header';
 
 import './index.scss';
 

package.json

@@ -33,48 +33,43 @@
   },
   "homepage": "https://github.com/openedx/frontend-component-header#readme",
   "devDependencies": {
-    "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
-    "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-build": "12.8.51",
-    "@edx/frontend-platform": "4.5.1",
-    "@edx/reactifex": "^2.1.1",
-    "@testing-library/dom": "9.3.0",
+    "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
+    "@edx/frontend-build": "12.3.0",
+    "@edx/frontend-platform": "^3.0.1",
+    "@edx/paragon": "19.25.3",
+    "@testing-library/dom": "8.19.0",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "10.4.9",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.7",
-    "husky": "8.0.3",
-    "jest": "29.5.0",
+    "husky": "7.0.4",
+    "jest": "29.3.1",
     "jest-chain": "1.1.6",
     "prop-types": "15.8.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "react-redux": "7.2.9",
+    "react-router-dom": "5.3.4",
     "react-test-renderer": "16.14.0",
-    "redux": "4.2.1",
-    "redux-saga": "1.2.3"
+    "reactifex": "1.1.1",
+    "redux": "4.2.0",
+    "redux-saga": "1.2.1"
   },
   "dependencies": {
-    "@edx/paragon": "20.44.0",
-    "@fortawesome/fontawesome-svg-core": "6.3.0",
-    "@fortawesome/free-brands-svg-icons": "6.3.0",
-    "@fortawesome/free-regular-svg-icons": "6.3.0",
-    "@fortawesome/free-solid-svg-icons": "6.3.0",
+    "@fortawesome/fontawesome-svg-core": "1.2.36",
+    "@fortawesome/free-brands-svg-icons": "5.15.4",
+    "@fortawesome/free-regular-svg-icons": "5.15.4",
+    "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@reduxjs/toolkit": "1.9.5",
     "babel-polyfill": "6.26.0",
-    "classnames": "2.3.2",
-    "lodash": "4.17.21",
-    "react-redux": "7.2.9",
     "react-responsive": "8.2.0",
-    "react-transition-group": "4.4.5",
-    "timeago.js": "4.0.2",
-    "react-router-dom": "5.3.4"
+    "react-transition-group": "4.4.5"
   },
   "peerDependencies": {
-    "@edx/frontend-platform": "^4.0.0",
+    "@edx/frontend-platform": "^2.0.0 || ^3.0.0",
+    "@edx/paragon": ">= 7.0.0 < 21.0.0",
     "prop-types": "^15.5.10",
-    "react": "^16.9.0 || ^17.0.0",
-    "react-dom": "^16.9.0 || ^17.0.0"
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
   }
 }

renovate.json

@@ -22,11 +22,6 @@
         "pin"
       ],
       "automerge": true
-    },
-    {
-      "matchPackagePatterns": ["@edx"],
-      "matchUpdateTypes": ["minor", "patch"],
-      "automerge": true
     }
   ],
   "timezone": "America/New_York"

src/Header.jsx

@@ -55,12 +55,12 @@ const Header = ({ intl }) => {
     },
     {
       type: 'item',
-      href: `${config.ACCOUNT_PROFILE_URL}/u/${authenticatedUser.username}`,
+      href: `${config.LMS_BASE_URL}/u/${authenticatedUser.username}`,
       content: intl.formatMessage(messages['header.user.menu.profile']),
     },
     {
       type: 'item',
-      href: config.ACCOUNT_SETTINGS_URL,
+      href: `${config.LMS_BASE_URL}/account/settings`,
       content: intl.formatMessage(messages['header.user.menu.account.settings']),
     },
     {

src/Header.test.jsx

@@ -2,38 +2,24 @@
 import React from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import TestRenderer from 'react-test-renderer';
-import { AppContext, AppProvider } from '@edx/frontend-platform/react';
+import { AppContext } from '@edx/frontend-platform/react';
 import { Context as ResponsiveContext } from 'react-responsive';
-import { initializeMockApp } from '@edx/frontend-platform';
-import store from './store';
 
 import Header from './index';
 
 const HeaderComponent = ({ width, contextValue }) => (
   <ResponsiveContext.Provider value={width}>
     <IntlProvider locale="en" messages={{}}>
-      <AppProvider store={store}>
-        <AppContext.Provider
-          value={contextValue}
-        >
-          <Header />
-        </AppContext.Provider>
-      </AppProvider>
+      <AppContext.Provider
+        value={contextValue}
+      >
+        <Header />
+      </AppContext.Provider>
     </IntlProvider>
   </ResponsiveContext.Provider>
 );
 
 describe('<Header />', () => {
-  beforeEach(async () => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: '123abc',
-        username: 'testuser',
-        administrator: false,
-        roles: [],
-      },
-    });
-  });
   it('renders correctly for anonymous desktop', () => {
     const contextValue = {
       authenticatedUser: null,

src/Notifications/NotificationRowItem.jsx

@@ -1,71 +0,0 @@
-import React, { useCallback } from 'react';
-import { useDispatch } from 'react-redux';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import PropTypes from 'prop-types';
-import { Icon } from '@edx/paragon';
-import { Link } from 'react-router-dom';
-import * as timeago from 'timeago.js';
-import { getIconByType } from './utils';
-import { markNotificationsAsRead } from './data/thunks';
-import messages from './messages';
-import timeLocale from '../common/time-locale';
-
-const NotificationRowItem = ({
-  id, type, contentUrl, content, courseName, createdAt, lastRead,
-}) => {
-  timeago.register('time-locale', timeLocale);
-  const intl = useIntl();
-  const dispatch = useDispatch();
-
-  const handleMarkAsRead = useCallback(() => {
-    dispatch(markNotificationsAsRead(id));
-  }, [dispatch, id]);
-
-  const { icon: iconComponent, class: iconClass } = getIconByType(type);
-
-  return (
-    <Link
-      target="_blank"
-      className="d-flex mb-2 align-items-center text-decoration-none"
-      to={contentUrl}
-      onClick={handleMarkAsRead}
-    >
-      <Icon src={iconComponent} className={`${iconClass} mr-4 notification-icon`} />
-      <div className="d-flex w-100">
-        <div className="d-flex align-items-center w-100">
-          <div className="py-10px w-100 px-0 cursor-pointer">
-            <span
-              className="line-height-24 text-gray-700 mb-2 notification-item-content overflow-hidden content"
-              // eslint-disable-next-line react/no-danger
-              dangerouslySetInnerHTML={{ __html: content }}
-            />
-            <div className="py-0 d-flex">
-              <span className="font-size-12 text-gray-500 line-height-20">
-                <span>{courseName}</span>
-                <span className="text-light-700 px-1.5">{intl.formatMessage(messages.fullStop)}</span>
-                <span>{timeago.format(createdAt, 'time-locale')}</span>
-              </span>
-            </div>
-          </div>
-          {!lastRead && (
-            <div className="d-flex py-1.5 px-1.5 ml-2 cursor-pointer">
-              <span className="bg-brand-500 rounded unread" />
-            </div>
-          )}
-        </div>
-      </div>
-    </Link>
-  );
-};
-
-NotificationRowItem.propTypes = {
-  id: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
-  contentUrl: PropTypes.string.isRequired,
-  content: PropTypes.node.isRequired,
-  courseName: PropTypes.string.isRequired,
-  createdAt: PropTypes.string.isRequired,
-  lastRead: PropTypes.string.isRequired,
-};
-
-export default React.memo(NotificationRowItem);

src/Notifications/NotificationSections.jsx

@@ -1,81 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import { Button } from '@edx/paragon';
-import { useDispatch, useSelector } from 'react-redux';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import isEmpty from 'lodash/isEmpty';
-import messages from './messages';
-import NotificationRowItem from './NotificationRowItem';
-import { markAllNotificationsAsRead } from './data/thunks';
-import { selectNotificationsByIds, selectPaginationData, selectSelectedAppName } from './data/selectors';
-import { splitNotificationsByTime } from './utils';
-import { updatePaginationRequest } from './data/slice';
-
-const NotificationSections = () => {
-  const intl = useIntl();
-  const dispatch = useDispatch();
-  const selectedAppName = useSelector(selectSelectedAppName());
-  const notifications = useSelector(selectNotificationsByIds(selectedAppName));
-  const { currentPage, numPages } = useSelector(selectPaginationData());
-  const { today = [], earlier = [] } = useMemo(
-    () => splitNotificationsByTime(notifications),
-    [notifications],
-  );
-
-  const handleMarkAllAsRead = useCallback(() => {
-    dispatch(markAllNotificationsAsRead(selectedAppName));
-  }, [dispatch, selectedAppName]);
-
-  const updatePagination = useCallback(() => {
-    dispatch(updatePaginationRequest());
-  }, [dispatch]);
-
-  const renderNotificationSection = (section, items) => {
-    if (isEmpty(items)) { return null; }
-
-    return (
-      <div className="pb-2">
-        <div className="d-flex justify-content-between align-items-center py-10px mb-2">
-          <span className="text-gray-500 line-height-10">
-            {section === 'today' && intl.formatMessage(messages.notificationTodayHeading)}
-            {section === 'earlier' && intl.formatMessage(messages.notificationEarlierHeading)}
-          </span>
-          {notifications?.length > 0 && (section === 'earlier' ? today.length === 0 : true) && (
-            <Button
-              variant="link"
-              className="text-info-500 font-size-14 line-height-10 text-decoration-none p-0 border-0"
-              onClick={handleMarkAllAsRead}
-            >
-              {intl.formatMessage(messages.notificationMarkAsRead)}
-            </Button>
-          )}
-        </div>
-        {items.map((notification) => (
-          <NotificationRowItem
-            key={notification.id}
-            id={notification.id}
-            type={notification.type}
-            contentUrl={notification.contentUrl}
-            content={notification.content}
-            courseName={notification.courseName}
-            createdAt={notification.createdAt}
-            lastRead={notification.lastRead}
-          />
-        ))}
-      </div>
-    );
-  };
-
-  return (
-    <div className="mt-4 px-4">
-      {renderNotificationSection('today', today)}
-      {renderNotificationSection('earlier', earlier)}
-      {currentPage < numPages && (
-        <Button variant="primary" className="w-100 bg-primary-500" onClick={updatePagination}>
-          {intl.formatMessage(messages.loadMoreNotifications)}
-        </Button>
-      )}
-    </div>
-  );
-};
-
-export default React.memo(NotificationSections);

src/Notifications/NotificationTabs.jsx

@@ -1,52 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import React, { useCallback, useEffect, useMemo } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { Tab, Tabs } from '@edx/paragon';
-import NotificationSections from './NotificationSections';
-import { fetchNotificationList, markNotificationsAsSeen } from './data/thunks';
-import {
-  selectNotificationTabs, selectNotificationTabsCount, selectPaginationData, selectSelectedAppName,
-} from './data/selectors';
-import { updateAppNameRequest } from './data/slice';
-
-const NotificationTabs = () => {
-  const dispatch = useDispatch();
-  const selectedAppName = useSelector(selectSelectedAppName());
-  const notificationUnseenCounts = useSelector(selectNotificationTabsCount());
-  const notificationTabs = useSelector(selectNotificationTabs());
-  const { currentPage } = useSelector(selectPaginationData());
-
-  useEffect(() => {
-    dispatch(fetchNotificationList({ appName: selectedAppName, page: currentPage, pageSize: 10 }));
-    if (selectedAppName) { dispatch(markNotificationsAsSeen(selectedAppName)); }
-  }, [currentPage, selectedAppName]);
-
-  const handleActiveTab = useCallback((appName) => {
-    dispatch(updateAppNameRequest({ appName }));
-  }, []);
-
-  const tabArray = useMemo(() => notificationTabs?.map((appName) => (
-    <Tab
-      key={appName}
-      eventKey={appName}
-      title={appName}
-      notification={notificationUnseenCounts[appName]}
-      tabClassName="pt-0 pb-10px px-2.5 d-flex border-top-0 mb-0 align-items-center line-height-24 text-capitalize"
-    >
-      {appName === selectedAppName && (<NotificationSections />)}
-    </Tab>
-  )), [notificationUnseenCounts, selectedAppName, notificationTabs]);
-
-  return (
-    <Tabs
-      variant="tabs"
-      defaultActiveKey={selectedAppName}
-      onSelect={handleActiveTab}
-      className="px-2.5 text-primary-500"
-    >
-      {tabArray}
-    </Tabs>
-  );
-};
-
-export default React.memo(NotificationTabs);

src/Notifications/data/api.js

@@ -1,40 +0,0 @@
-import { camelCaseObject } from '@edx/frontend-platform';
-import notificationsList from './notifications.json';
-
-export async function getNotifications(appName, page, pageSize) {
-  const { data } = notificationsList;
-  const startIndex = (page - 1) * pageSize;
-  const endIndex = startIndex + pageSize;
-
-  const notifications = data.slice(startIndex, endIndex);
-  return { notifications: camelCaseObject(notifications), numPages: 2, currentPage: page };
-}
-
-export async function getNotificationCounts() {
-  const data = {
-    count: 45,
-    count_by_app_name: {
-      reminders: 10,
-      discussions: 20,
-      grades: 10,
-      authoring: 5,
-    },
-    show_notification_tray: false,
-  };
-  return camelCaseObject(data);
-}
-
-export async function markNotificationSeen() {
-  const data = [];
-  return camelCaseObject(data);
-}
-
-export async function markAllNotificationRead() {
-  const { data } = camelCaseObject(notificationsList);
-  return data;
-}
-
-export async function markNotificationRead(notificationId) {
-  const { data } = camelCaseObject(notificationsList);
-  return { data, id: notificationId };
-}

src/Notifications/data/hook.js

@@ -1,11 +0,0 @@
-import { breakpoints, useWindowSize } from '@edx/paragon';
-
-export function useIsOnMediumScreen() {
-  const windowSize = useWindowSize();
-  return breakpoints.large.maxWidth > windowSize.width && windowSize.width >= breakpoints.medium.minWidth;
-}
-
-export function useIsOnLargeScreen() {
-  const windowSize = useWindowSize();
-  return windowSize.width >= breakpoints.extraLarge.minWidth;
-}

src/Notifications/data/index.js

@@ -1 +0,0 @@
-export * from './slice';

src/Notifications/data/notifications.json

@@ -1,134 +0,0 @@
-{
-  "data": [
-    {
-      "id": 1,
-      "type": "post",
-      "content": "<p><b>SCM_Lead</b> posts <b>Hello and welcome to SC0x!</b></p>",
-      "course_name": "Supply Chain Analytics",
-      "content_url": "",
-      "last_read": null,
-      "last_seen": null,
-      "created_at": "2023-06-01T00:46:11.979531Z"
-    },
-    {
-      "id": 2,
-      "type": "help",
-      "content": "<p><b>MITx_Learner</b> asked <b>What grade does a student need to get in order to pass the course and earn a certificate?</b></p>",
-      "course_name": "Supply Chain Analytics",
-      "content_url": "",
-      "last_read": null,
-      "last_seen": null,
-      "created_at": "2023-06-01T00:36:11.979531Z"
-    },
-    {
-      "id": 3,
-      "type": "post",
-      "content": "<p><b>SCM_Lead</b> posts <b>Hello and welcome to SC0x!</b></p>",
-      "course_name": "Supply Chain Analytics",
-      "content_url": "",
-      "last_read": null,
-      "last_seen": null,
-      "created_at": "2023-06-01T00:46:11.979531Z"
-    },
-    {
-      "id": 4,
-      "type": "respond",
-      "content": "<p><b>MITx_Learner</b> responded <b>Can't find linear regression in section 3 review</b></p>",
-      "course_name": "Supply Chain Analytics",
-      "content_url": "",
-      "last_read": null,
-      "last_seen": null,
-      "created_at": "2023-06-01T00:36:11.979531Z"
-    },
-    {
-      "id": 5,
-      "type": "comment",
-      "content": "<p><b>MITx_Learner</b> commented on <b>MITx_Expert's</b> response on a post your following <b>Can't find linear regression in section 3 review</b></p>",
-      "course_name": "Supply Chain Analytics",
-      "content_url": "",
-      "last_read": null,
-      "last_seen": null,
-      "created_at": "2023-06-01T00:36:11.979531Z"
-    },
-    {
-      "id": 6,
-      "type": "question",
-      "content": "<p><b>MITx_Learner</b> commented <b>Examples of quadratic equations in supply chains</b></p>",
-      "course_name": "Supply Chain Analytics",
-      "content_url": "",
-      "last_read": null,
-      "last_seen": null,
-      "created_at": "2023-06-01T00:36:11.979531Z"
-    },
-    {
-      "id": 7,
-      "type": "answer",
-      "content": "<p><b>MITx_Expert</b> answered <b>Examples of quadratic equations in supply chains</b></p>",
-      "course_name": "Supply Chain Analytics",
-      "content_url": "",
-      "last_read": null,
-      "last_seen": null,
-      "created_at": "2023-06-05T00:36:11.979531Z"
-    },
-    {
-      "id": 8,
-      "type": "comment",
-      "content": "<p><b>MITx_Learner</b> commented <b>Examples of quadratic equations in supply chains</b></p>",
-      "course_name": "Supply Chain Analytics",
-      "content_url": "",
-      "last_read": null,
-      "last_seen": null,
-      "created_at": "2023-06-01T00:36:11.979531Z"
-    },
-    {
-      "id": 9,
-      "type": "comment",
-      "content": "<p><b>MITx_Learner</b> commented on <b>MITx_Expert's</b>what grade does a student need to get in order to pass the course and earn a certificate?</b></p>",
-      "course_name": "Supply Chain Analytics",
-      "content_url": "",
-      "last_read": null,
-      "last_seen": null,
-      "created_at": "2023-06-01T00:36:11.979531Z"
-    },
-    {
-      "id": 10,
-      "type": "comment",
-      "content": "<p><b>MITx_Learner</b> commented on your response in <b>Convexity of f(x)=1/x , x>1</b></p>",
-      "course_name": "Supply Chain Analytics",
-      "content_url": "",
-      "last_read": null,
-      "last_seen": null,
-      "created_at": "2023-06-01T00:36:11.979531Z"
-    },
-    {
-      "id": 11,
-      "type": "answer",
-      "content": "<p><b>SCM_Lead’s</b> response has been marked as answer in your post <b>Quiz in section 3 - Please explain the F-Significance value</b></p>",
-      "course_name": "Supply Chain Analytics",
-      "content_url": "",
-      "last_read": null,
-      "last_seen": null,
-      "created_at": "2023-06-01T00:36:11.979531Z"
-    },
-    {
-      "id": 12,
-      "type": "endorsed",
-      "content": "<p>Your response has been endorsed in <b>Quiz in section 3 - Please explain the F-Significance value</b></p>",
-      "course_name": "Supply Chain Analytics",
-      "content_url": "",
-      "last_read": null,
-      "last_seen": null,
-      "created_at": "2023-06-01T00:36:11.979531Z"
-    },
-    {
-      "id": 13,
-      "type": "reported",
-      "content": "<p><b>MITx Learner’s</b> post has been reported <b>“Here are the exam answers. Question 1 - CSA stands for Compliance Safety Ac...”</b></p>",
-      "course_name": "Supply Chain Analytics",
-      "content_url": "",
-      "last_read": null,
-      "last_seen": null,
-      "created_at": "2023-06-01T00:36:11.979531Z"
-    }
-  ]
-}

src/Notifications/data/selectors.js

@@ -1,23 +0,0 @@
-import { createSelector } from '@reduxjs/toolkit';
-
-export const selectNotificationStatus = () => state => state.notifications.notificationStatus;
-
-export const selectNotificationTabsCount = () => state => state.notifications.tabsCount;
-
-export const selectNotificationTabs = () => state => state.notifications.appsId;
-
-export const selectSelectedAppNotificationIds = (appName) => state => state.notifications.apps[appName] ?? [];
-
-export const selectShowNotificationTray = () => state => state.notifications.showNotificationTray;
-
-export const selectNotifications = () => state => state.notifications.notifications;
-
-export const selectNotificationsByIds = (appName) => createSelector(
-  selectNotifications(),
-  selectSelectedAppNotificationIds(appName),
-  (notifications, notificationIds) => notificationIds.map((notificationId) => notifications[notificationId]) || [],
-);
-
-export const selectSelectedAppName = () => state => state.notifications.appName;
-
-export const selectPaginationData = () => state => state.notifications.pagination;

src/Notifications/data/slice.js

@@ -1,154 +0,0 @@
-/* eslint-disable no-param-reassign */
-import { createSlice } from '@reduxjs/toolkit';
-
-export const RequestStatus = {
-  IDLE: 'idle',
-  LOADING: 'in-progress',
-  LOADED: 'successful',
-  FAILED: 'failed',
-  DENIED: 'denied',
-};
-
-const initialState = {
-  notificationStatus: 'idle',
-  appName: 'discussions',
-  appsId: [],
-  apps: {},
-  notifications: {},
-  tabsCount: {},
-  showNotificationTray: false,
-  pagination: {
-    count: 10,
-    numPages: 1,
-    currentPage: 1,
-    nextPage: null,
-  },
-};
-const slice = createSlice({
-  name: 'notifications',
-  initialState,
-  reducers: {
-    fetchNotificationDenied: (state) => {
-      state.notificationStatus = RequestStatus.DENIED;
-    },
-    fetchNotificationFailure: (state) => {
-      state.notificationStatus = RequestStatus.FAILED;
-    },
-    fetchNotificationRequest: (state) => {
-      state.notificationStatus = RequestStatus.LOADING;
-    },
-    fetchNotificationSuccess: (state, { payload }) => {
-      const {
-        newNotificationIds, notificationsKeyValuePair, numPages, currentPage,
-      } = payload;
-      const existingNotificationIds = state.apps[state.appName];
-
-      state.apps[state.appName] = Array.from(new Set([...existingNotificationIds, ...newNotificationIds]));
-      state.notifications = { ...state.notifications, ...notificationsKeyValuePair };
-      state.tabsCount.count -= state.tabsCount[state.appName];
-      state.tabsCount[state.appName] = 0;
-      state.notificationStatus = RequestStatus.LOADED;
-      state.pagination.numPages = numPages;
-      state.pagination.currentPage = currentPage;
-    },
-    fetchNotificationsCountDenied: (state) => {
-      state.notificationStatus = RequestStatus.DENIED;
-    },
-    fetchNotificationsCountFailure: (state) => {
-      state.notificationStatus = RequestStatus.FAILED;
-    },
-    fetchNotificationsCountRequest: (state) => {
-      state.notificationStatus = RequestStatus.LOADING;
-    },
-    fetchNotificationsCountSuccess: (state, { payload }) => {
-      const {
-        countByAppName, appIds, apps, count, showNotificationTray,
-      } = payload;
-      state.tabsCount = { count, ...countByAppName };
-      state.appsId = appIds;
-      state.apps = apps;
-      state.showNotificationTray = showNotificationTray;
-      state.notificationStatus = RequestStatus.LOADED;
-    },
-    markNotificationsAsSeenRequest: (state) => {
-      state.notificationStatus = RequestStatus.LOADING;
-    },
-    markNotificationsAsSeenSuccess: (state) => {
-      state.notificationStatus = RequestStatus.LOADED;
-    },
-    markNotificationsAsSeenDenied: (state) => {
-      state.notificationStatus = RequestStatus.DENIED;
-    },
-    markNotificationsAsSeenFailure: (state) => {
-      state.notificationStatus = RequestStatus.FAILED;
-    },
-    markAllNotificationsAsReadRequest: (state) => {
-      state.notificationStatus = RequestStatus.LOADING;
-    },
-    markAllNotificationsAsReadSuccess: (state) => {
-      const updatedNotifications = Object.fromEntries(
-        Object.entries(state.notifications).map(([key, notification]) => [
-          key, { ...notification, lastRead: new Date().toISOString() },
-        ]),
-      );
-      state.notifications = updatedNotifications;
-      state.notificationStatus = RequestStatus.LOADED;
-    },
-    markAllNotificationsAsReadDenied: (state) => {
-      state.notificationStatus = RequestStatus.DENIED;
-    },
-    markAllNotificationsAsReadFailure: (state) => {
-      state.notificationStatus = RequestStatus.FAILED;
-    },
-    markNotificationsAsReadRequest: (state) => {
-      state.notificationStatus = RequestStatus.LOADING;
-    },
-    markNotificationsAsReadSuccess: (state, { payload }) => {
-      const date = new Date().toISOString();
-      state.notifications[payload.id] = { ...state.notifications[payload.id], lastRead: date };
-      state.notificationStatus = RequestStatus.LOADED;
-    },
-    markNotificationsAsReadDenied: (state) => {
-      state.notificationStatus = RequestStatus.DENIED;
-    },
-    markNotificationsAsReadFailure: (state) => {
-      state.notificationStatus = RequestStatus.FAILED;
-    },
-    resetNotificationStateRequest: () => initialState,
-    updateAppNameRequest: (state, { payload }) => {
-      state.appName = payload.appName;
-      state.pagination.currentPage = 1;
-    },
-    updatePaginationRequest: (state) => {
-      state.pagination.currentPage += 1;
-    },
-  },
-});
-
-export const {
-  fetchNotificationDenied,
-  fetchNotificationFailure,
-  fetchNotificationRequest,
-  fetchNotificationSuccess,
-  fetchNotificationsCountDenied,
-  fetchNotificationsCountFailure,
-  fetchNotificationsCountRequest,
-  fetchNotificationsCountSuccess,
-  markNotificationsAsSeenRequest,
-  markNotificationsAsSeenSuccess,
-  markNotificationsAsSeenFailure,
-  markNotificationsAsSeenDenied,
-  markAllNotificationsAsReadDenied,
-  markAllNotificationsAsReadRequest,
-  markAllNotificationsAsReadSuccess,
-  markAllNotificationsAsReadFailure,
-  markNotificationsAsReadDenied,
-  markNotificationsAsReadRequest,
-  markNotificationsAsReadSuccess,
-  markNotificationsAsReadFailure,
-  resetNotificationStateRequest,
-  updateAppNameRequest,
-  updatePaginationRequest,
-} = slice.actions;
-
-export const notificationsReducer = slice.reducer;

src/Notifications/data/thunks.js

@@ -1,134 +0,0 @@
-import {
-  fetchNotificationSuccess,
-  fetchNotificationRequest,
-  fetchNotificationFailure,
-  fetchNotificationDenied,
-  fetchNotificationsCountFailure,
-  fetchNotificationsCountRequest,
-  fetchNotificationsCountSuccess,
-  fetchNotificationsCountDenied,
-  markNotificationsAsSeenRequest,
-  markNotificationsAsSeenSuccess,
-  markNotificationsAsSeenFailure,
-  markNotificationsAsSeenDenied,
-  markNotificationsAsReadDenied,
-  resetNotificationStateRequest,
-  markAllNotificationsAsReadRequest,
-  markAllNotificationsAsReadSuccess,
-  markAllNotificationsAsReadFailure,
-  markAllNotificationsAsReadDenied,
-  markNotificationsAsReadRequest,
-  markNotificationsAsReadSuccess,
-  markNotificationsAsReadFailure,
-} from './slice';
-import {
-  getNotifications, getNotificationCounts, markNotificationSeen, markAllNotificationRead, markNotificationRead,
-} from './api';
-import { getHttpErrorStatus } from '../utils';
-
-const normalizeNotificationCounts = ({ countByAppName, count, showNotificationTray }) => {
-  const appIds = Object.keys(countByAppName);
-  const apps = appIds.reduce((acc, appId) => { acc[appId] = []; return acc; }, {});
-  return {
-    countByAppName, appIds, apps, count, showNotificationTray,
-  };
-};
-
-const normalizeNotifications = ({ notifications }) => {
-  const newNotificationIds = notifications.map(notification => notification.id.toString());
-  const notificationsKeyValuePair = notifications.reduce((acc, obj) => { acc[obj.id] = obj; return acc; }, {});
-  return {
-    newNotificationIds, notificationsKeyValuePair,
-  };
-};
-
-export const fetchNotificationList = ({ appName, page, pageSize }) => (
-  async (dispatch) => {
-    try {
-      dispatch(fetchNotificationRequest({ appName }));
-      const data = await getNotifications(appName, page, pageSize);
-      const normalisedData = normalizeNotifications((data));
-      dispatch(fetchNotificationSuccess({ ...normalisedData, numPages: data.numPages, currentPage: data.currentPage }));
-    } catch (error) {
-      if (getHttpErrorStatus(error) === 403) {
-        dispatch(fetchNotificationDenied(appName));
-      } else {
-        dispatch(fetchNotificationFailure(appName));
-      }
-    }
-  }
-);
-
-export const fetchAppsNotificationCount = () => (
-  async (dispatch) => {
-    try {
-      dispatch(fetchNotificationsCountRequest());
-      const data = await getNotificationCounts();
-      const normalisedData = normalizeNotificationCounts((data));
-      dispatch(fetchNotificationsCountSuccess({
-        ...normalisedData,
-        countByAppName: data.countByAppName,
-        count: data.count,
-        showNotificationTray: data.showNotificationTray,
-      }));
-    } catch (error) {
-      if (getHttpErrorStatus(error) === 403) {
-        dispatch(fetchNotificationsCountDenied());
-      } else {
-        dispatch(fetchNotificationsCountFailure());
-      }
-    }
-  }
-);
-
-export const markAllNotificationsAsRead = (appName) => (
-  async (dispatch) => {
-    try {
-      dispatch(markAllNotificationsAsReadRequest({ appName }));
-      const data = await markAllNotificationRead(appName);
-      dispatch(markAllNotificationsAsReadSuccess(data));
-    } catch (error) {
-      if (getHttpErrorStatus(error) === 403) {
-        dispatch(markAllNotificationsAsReadDenied());
-      } else {
-        dispatch(markAllNotificationsAsReadFailure());
-      }
-    }
-  }
-);
-
-export const markNotificationsAsRead = (notificationId) => (
-  async (dispatch) => {
-    try {
-      dispatch(markNotificationsAsReadRequest({ notificationId }));
-      const data = await markNotificationRead(notificationId);
-      dispatch(markNotificationsAsReadSuccess(data));
-    } catch (error) {
-      if (getHttpErrorStatus(error) === 403) {
-        dispatch(markNotificationsAsReadDenied());
-      } else {
-        dispatch(markNotificationsAsReadFailure());
-      }
-    }
-  }
-);
-
-export const markNotificationsAsSeen = (appName) => (
-  async (dispatch) => {
-    try {
-      dispatch(markNotificationsAsSeenRequest({ appName }));
-      const data = await markNotificationSeen(appName);
-      dispatch(markNotificationsAsSeenSuccess(data));
-    } catch (error) {
-      if (getHttpErrorStatus(error) === 403) {
-        dispatch(markNotificationsAsSeenDenied());
-      } else {
-        dispatch(markNotificationsAsSeenFailure());
-      }
-    }
-  }
-);
-
-export const resetNotificationState = () => (
-  async (dispatch) => { dispatch(resetNotificationStateRequest()); }
-);

src/Notifications/index.jsx

@@ -1,101 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import React, {
-  useCallback, useEffect, useRef, useState,
-} from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import classNames from 'classnames';
-import {
-  Badge, Icon, IconButton, OverlayTrigger, Popover,
-} from '@edx/paragon';
-import { NotificationsNone, Settings } from '@edx/paragon/icons';
-import { selectNotificationTabsCount } from './data/selectors';
-import { resetNotificationState } from './data/thunks';
-import { useIsOnLargeScreen, useIsOnMediumScreen } from './data/hook';
-import NotificationTabs from './NotificationTabs';
-import messages from './messages';
-
-const Notifications = () => {
-  const intl = useIntl();
-  const dispatch = useDispatch();
-  const popoverRef = useRef(null);
-  const buttonRef = useRef(null);
-  const [enableNotificationTray, setEnableNotificationTray] = useState(false);
-  const notificationCounts = useSelector(selectNotificationTabsCount());
-  const isOnMediumScreen = useIsOnMediumScreen();
-  const isOnLargeScreen = useIsOnLargeScreen();
-
-  const hideNotificationTray = useCallback(() => {
-    setEnableNotificationTray(prevState => !prevState);
-  }, []);
-
-  const handleClickOutsideNotificationTray = useCallback((event) => {
-    if (!popoverRef.current?.contains(event.target) && !buttonRef.current?.contains(event.target)) {
-      setEnableNotificationTray(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    document.addEventListener('mousedown', handleClickOutsideNotificationTray);
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutsideNotificationTray);
-      dispatch(resetNotificationState());
-    };
-  }, []);
-
-  return (
-    <OverlayTrigger
-      trigger="click"
-      key="bottom"
-      placement="bottom"
-      id="notificationTray"
-      show={enableNotificationTray}
-      overlay={(
-        <Popover
-          id="notificationTray"
-          data-testid="notificationTray"
-          className={classNames('overflow-auto rounded-0 border-0', {
-            'w-100': !isOnMediumScreen && !isOnLargeScreen,
-            'medium-screen': isOnMediumScreen,
-            'large-screen': isOnLargeScreen,
-          })}
-        >
-          <div ref={popoverRef}>
-            <Popover.Title as="h2" className="d-flex justify-content-between p-0 m-4 border-0 text-primary-500 font-size-18 line-height-24">
-              {intl.formatMessage(messages.notificationTitle)}
-              <Icon src={Settings} className="icon-size-20" />
-            </Popover.Title>
-            <Popover.Content className="notification-content p-0">
-              <NotificationTabs />
-            </Popover.Content>
-          </div>
-        </Popover>
-      )}
-    >
-      <div ref={buttonRef}>
-        <IconButton
-          isActive={enableNotificationTray}
-          alt="notification bell icon"
-          onClick={hideNotificationTray}
-          src={NotificationsNone}
-          iconAs={Icon}
-          variant="light"
-          iconClassNames="text-primary-500"
-          className="ml-4 mr-1 my-3 notification-button"
-        />
-        {notificationCounts?.count > 0 && (
-          <Badge
-            pill
-            variant="danger"
-            className="font-weight-normal px-1 notification-badge"
-          >
-            {notificationCounts.count}
-          </Badge>
-        )}
-      </div>
-    </OverlayTrigger>
-  );
-};
-
-export default Notifications;

src/Notifications/messages.js

@@ -1,36 +0,0 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
-
-const messages = defineMessages({
-  notificationTitle: {
-    id: 'notification.title',
-    defaultMessage: 'Notifications',
-    description: 'Notifications',
-  },
-  notificationTodayHeading: {
-    id: 'notification.today.heading',
-    defaultMessage: 'Last 24 hours',
-    description: 'Today Notifications',
-  },
-  notificationEarlierHeading: {
-    id: 'notification.earlier.heading',
-    defaultMessage: 'Earlier',
-    description: 'Earlier Notifications',
-  },
-  notificationMarkAsRead: {
-    id: 'notification.mark.as.read',
-    defaultMessage: 'Mark all as read',
-    description: 'Mark all Notifications as read',
-  },
-  fullStop: {
-    id: 'notification.fullStop',
-    defaultMessage: '•',
-    description: 'Fullstop shown to users to indicate who edited a post.',
-  },
-  loadMoreNotifications: {
-    id: 'notification.load.more.notifications',
-    defaultMessage: 'Load more notifications',
-    description: 'Load more button to load more notifications',
-  },
-});
-
-export default messages;

src/Notifications/utils.js

@@ -1,52 +0,0 @@
-import {
-  CheckCircle, HelpOutline, QuestionAnswerOutline, Verified, Report, EditOutline, ThumbUpOutline, PostOutline,
-} from '@edx/paragon/icons';
-
-/**
- * Get HTTP Error status from generic error.
- * @param error Generic caught error.
- * @returns {number|null}
- */
-export const getHttpErrorStatus = error => error?.customAttributes?.httpErrorStatus ?? error?.response?.status;
-
-export const splitNotificationsByTime = (notificationList) => {
-  let splittedData = [];
-  if (notificationList.length > 0) {
-    const currentTime = Date.now();
-    const twentyFourHoursAgo = currentTime - (24 * 60 * 60 * 1000);
-
-    splittedData = notificationList.reduce(
-      (result, notification) => {
-        if (notification) {
-          const objectTime = new Date(notification.createdAt).getTime();
-          if (objectTime >= twentyFourHoursAgo && objectTime <= currentTime) {
-            result.today.push(notification);
-          } else {
-            result.earlier.push(notification);
-          }
-        }
-        return result;
-      },
-      { today: [], earlier: [] },
-    );
-  }
-  const { today, earlier } = splittedData;
-  return { today, earlier };
-};
-
-export const getIconByType = (type) => {
-  const iconMap = {
-    post: { icon: PostOutline, class: 'text-primary-500' },
-    help: { icon: HelpOutline, class: 'text-primary-500' },
-    respond: { icon: QuestionAnswerOutline, class: 'text-primary-500' },
-    comment: { icon: QuestionAnswerOutline, class: 'text-primary-500' },
-    question: { icon: QuestionAnswerOutline, class: 'text-primary-500' },
-    answer: { icon: CheckCircle, class: 'text-success' },
-    endorsed: { icon: Verified, class: 'text-primary-500' },
-    reported: { icon: Report, class: 'text-danger-500' },
-    postLiked: { icon: ThumbUpOutline, class: 'text-primary-500' },
-    commentLiked: { icon: ThumbUpOutline, class: 'text-primary-500' },
-    edited: { icon: EditOutline, class: 'text-primary-500' },
-  };
-  return iconMap[type] || { icon: PostOutline, class: 'text-primary-500' };
-};

src/__snapshots__/StudioHeader.test.jsx.snap

@@ -122,7 +122,7 @@ exports[`<StudioHeader /> renders correctly with optional action row content 1`]
         className="pgn__action-row"
       >
         <div
-          className="pgn__dropdown pgn__dropdown-light dropdown"
+          className="dropdown"
           data-testid="dropdown"
         >
           <button

src/common/time-locale.js

@@ -1,18 +0,0 @@
-export default function timeLocale(number, index) {
-  return [
-    ['just now', 'right now'],
-    ['%ss', 'in %s seconds'],
-    ['1m', 'in 1 minute'],
-    ['%sm', 'in %s minutes'],
-    ['1h', 'in 1 hour'],
-    ['%sh', 'in %s hours'],
-    ['1d', 'in 1 day'],
-    ['%sd', 'in %s days'],
-    ['1w', 'in 1 week'],
-    ['%sw', 'in %s weeks'],
-    ['4w', 'in 1 month'],
-    [`${number * 4}w`, 'in %s months'],
-    ['1y', 'in 1 year'],
-    ['%sy', 'in %s years'],
-  ][index];
-}

src/i18n/messages/uk.json

@@ -1,8 +1,8 @@
 {
   "general.register.sentenceCase": "Register",
-  "general.signIn.sentenceCase": "Увійти",
-  "header.links.courses": "Курси",
-  "header.links.programs": "Програми",
+  "general.signIn.sentenceCase": "Sign in",
+  "header.links.courses": "Courses",
+  "header.links.programs": "Programs",
   "header.links.content.search": "Discover New",
   "header.links.schools": "Schools & Partners",
   "header.user.menu.dashboard": "Dashboard",
@@ -15,19 +15,19 @@
   "header.user.menu.studio.home": "Studio Home",
   "header.user.menu.studio.maintenance": "Maintenance",
   "header.label.account.nav": "Account",
-  "header.label.account.menu": "Меню облікового запису",
-  "header.label.account.menu.for": "Меню облікового запису для {username}",
+  "header.label.account.menu": "Account Menu",
+  "header.label.account.menu.for": "Account menu for {username}",
   "header.label.main.nav": "Main",
   "header.label.main.menu": "Main Menu",
   "header.label.main.header": "Main",
   "header.label.secondary.nav": "Secondary",
-  "header.label.skip.nav": "Перейти до головного змісту",
+  "header.label.skip.nav": "Skip to main content",
   "header.label.app.nav": "App",
   "header.menu.dashboard.label": "Dashboard",
   "header.help.label": "Help",
   "header.menu.profile.label": "Profile",
   "header.menu.account.label": "Account",
   "header.menu.orderHistory.label": "Order History",
-  "header.navigation.skipNavLink": "Перейти до головного змісту.",
+  "header.navigation.skipNavLink": "Skip to main content.",
   "header.menu.signOut.label": "Sign Out"
 }

src/index.scss

@@ -1,10 +1,7 @@
 $spacer: 1rem;
 $blue: #007db8;
 $white: #fff;
-@import "@edx/brand/paragon/fonts.scss";
-@import "@edx/brand/paragon/variables.scss";
-@import "@edx/paragon/scss/core/core.scss";
-@import "@edx/brand/paragon/overrides.scss";
+
 @import './Menu/menu.scss';
 
 .dropdown-item a {
@@ -30,7 +27,7 @@ $white: #fff;
 
 .learning-header {
   min-width: 0;
-
+  
   .course-title-lockup {
     min-width: 0;
 
@@ -121,135 +118,3 @@ $white: #fff;
     border-radius: $rounded-pill;
   }
 }
-
-.content {
-  b {
-    color: #00262B !important;
-    font-weight: 500 !important;
-  }
-}
-
-.font-size-18 {
-  font-size: 18px !important;
-}
-
-.font-size-12 {
-  font-size: 12px;
-}
-
-.font-size-14 {
-  font-size: 14px;
-}
-
-.py-10px {
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-
-.pb-10px {
-  padding-bottom: 10px;
-}
-
-.line-height-24 {
-  line-height: 24px;
-}
-
-.line-height-20 {
-  line-height: 20px;
-}
-
-.line-height-10 {
-  line-height: 10px !important;
-}
-
-.icon-size-20 {
-  width: 20px !important;
-  height: 20px !important;
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.notification-button {
-  width: 36px;
-  height: 36px;
-}
-
-.notification-icon{
-  height: 23.33px !important;
-  width: 23.33px !important;
-}
-
-.notification-badge {
-  position: absolute;
-  margin-top: 18px;
-  margin-left: -21px;
-  border: 2px solid #FFFFFF;
-  font-size: 9px !important;
-}
-
-.popover {
-  max-height: calc(100% - 68px);
-  min-height: 1220px;
-  filter: none;
-  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15), 0px 2px 8px rgba(0, 0, 0, 0.15);
-
-  &.medium-screen {
-    min-width: 24.313rem;
-  }
-
-  &.large-screen {
-    min-width: 34.313rem;
-  }
-
-  .dropdown-toggle::after {
-    display: none;
-  }
-
-  .expandable {
-    position: relative !important;
-    margin-left: 4px;
-    padding: 2px 5px;
-    border-radius: 10rem;
-    font-size: 9px;
-  }
-
-  .dropdown-toggle {
-    font-size: 14px;
-    padding-top: 0px !important;
-    padding-bottom: 12px !important;
-
-    div {
-      min-height: 6px !important;
-      min-width: 6px !important;
-    }
-  }
-
-  .dropdown-item {
-    font-size: 14px;
-    font-weight: 500;
-  }
-
-  .notification-content {
-    .notification-item-content {
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      text-overflow: ellipsis;
-
-      p {
-        margin-bottom: 0px;
-      }
-
-      b {
-        color: #00262B;
-      }
-    }
-
-    .unread {
-      height: 10px;
-      width: 10px;
-    }
-  }
-}

src/learning-header/AuthenticatedUserDropdown.jsx

@@ -1,31 +1,16 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUserCircle } from '@fortawesome/free-solid-svg-icons';
+
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Dropdown } from '@edx/paragon';
-import { useSelector, useDispatch } from 'react-redux';
-import Notifications from '../Notifications';
-import { selectShowNotificationTray, selectNotificationStatus } from '../Notifications/data/selectors';
-import { fetchAppsNotificationCount } from '../Notifications/data/thunks';
-import { RequestStatus } from '../Notifications/data/slice';
 
 import messages from './messages';
 
 const AuthenticatedUserDropdown = ({ intl, username }) => {
-  const showNotificationTray = useSelector(selectShowNotificationTray());
-  const notificationStatus = useSelector(selectNotificationStatus());
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    if (notificationStatus === RequestStatus.IDLE) {
-      dispatch(fetchAppsNotificationCount());
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [notificationStatus]);
-
   const dashboardMenuItem = (
     <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/dashboard`}>
       {intl.formatMessage(messages.dashboard)}
@@ -34,9 +19,8 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
 
   return (
     <>
-      <a className="text-gray-700" href={`${getConfig().SUPPORT_URL}`}>{intl.formatMessage(messages.help)}</a>
-      {showNotificationTray && <Notifications />}
-      <Dropdown className="user-dropdown ml-3">
+      <a className="text-gray-700 mr-3" href={`${getConfig().SUPPORT_URL}`}>{intl.formatMessage(messages.help)}</a>
+      <Dropdown className="user-dropdown">
         <Dropdown.Toggle variant="outline-primary">
           <FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />
           <span data-hj-suppress className="d-none d-md-inline">
@@ -45,10 +29,10 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
         </Dropdown.Toggle>
         <Dropdown.Menu className="dropdown-menu-right">
           {dashboardMenuItem}
-          <Dropdown.Item href={`${getConfig().ACCOUNT_PROFILE_URL}/u/${username}`}>
+          <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/u/${username}`}>
             {intl.formatMessage(messages.profile)}
           </Dropdown.Item>
-          <Dropdown.Item href={getConfig().ACCOUNT_SETTINGS_URL}>
+          <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/account/settings`}>
             {intl.formatMessage(messages.account)}
           </Dropdown.Item>
           { getConfig().ORDER_HISTORY_URL && (

src/learning-header/LearningHeader.jsx

@@ -2,12 +2,11 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { AppContext, AppProvider } from '@edx/frontend-platform/react';
+import { AppContext } from '@edx/frontend-platform/react';
 
 import AnonymousUserMenu from './AnonymousUserMenu';
 import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
 import messages from './messages';
-import store from '../store';
 
 const LinkedLogo = ({
   href,
@@ -41,26 +40,24 @@ const LearningHeader = ({
   );
 
   return (
-    <AppProvider store={store}>
-      <header className="learning-header">
-        <a className="sr-only sr-only-focusable" href="#main-content">{intl.formatMessage(messages.skipNavLink)}</a>
-        <div className="container-xl py-2 d-flex align-items-center">
-          {headerLogo}
-          <div className="flex-grow-1 course-title-lockup" style={{ lineHeight: 1 }}>
-            <span className="d-block small m-0">{courseOrg} {courseNumber}</span>
-            <span className="d-block m-0 font-weight-bold course-title">{courseTitle}</span>
-          </div>
-          {showUserDropdown && authenticatedUser && (
-            <AuthenticatedUserDropdown
-              username={authenticatedUser.username}
-            />
-          )}
-          {showUserDropdown && !authenticatedUser && (
-            <AnonymousUserMenu />
-          )}
+    <header className="learning-header">
+      <a className="sr-only sr-only-focusable" href="#main-content">{intl.formatMessage(messages.skipNavLink)}</a>
+      <div className="container-xl py-2 d-flex align-items-center">
+        {headerLogo}
+        <div className="flex-grow-1 course-title-lockup" style={{ lineHeight: 1 }}>
+          <span className="d-block small m-0">{courseOrg} {courseNumber}</span>
+          <span className="d-block m-0 font-weight-bold course-title">{courseTitle}</span>
         </div>
-      </header>
-    </AppProvider>
+        {showUserDropdown && authenticatedUser && (
+          <AuthenticatedUserDropdown
+            username={authenticatedUser.username}
+          />
+        )}
+        {showUserDropdown && !authenticatedUser && (
+          <AnonymousUserMenu />
+        )}
+      </div>
+    </header>
   );
 };
 

src/learning-header/LearningHeader.test.jsx

@@ -12,7 +12,7 @@ describe('Header', () => {
 
   it('displays user button', () => {
     render(<Header />);
-    expect(screen.getByText(authenticatedUser.username)).toBeInTheDocument();
+    expect(screen.getByRole('button')).toHaveTextContent(authenticatedUser.username);
   });
 
   it('displays course data', () => {

src/setupTest.js

@@ -22,8 +22,6 @@ Enzyme.configure({ adapter: new Adapter() });
 // These configuration values are usually set in webpack's EnvironmentPlugin however
 // Jest does not use webpack so we need to set these so for testing
 process.env.ACCESS_TOKEN_COOKIE_NAME = 'edx-jwt-cookie-header-payload';
-process.env.ACCOUNT_PROFILE_URL = 'http://localhost:1995';
-process.env.ACCOUNT_SETTINGS_URL = 'http://localhost:1997';
 process.env.BASE_URL = 'localhost:1995';
 process.env.CREDENTIALS_BASE_URL = 'http://localhost:18150';
 process.env.CSRF_TOKEN_API_PATH = '/csrf/api/v1/token';

src/store.js

@@ -1,16 +0,0 @@
-import { configureStore } from '@reduxjs/toolkit';
-
-import { notificationsReducer } from './Notifications/data';
-
-export function initializeStore(preloadedState = undefined) {
-  return configureStore({
-    reducer: {
-      notifications: notificationsReducer,
-    },
-    preloadedState,
-  });
-}
-
-const store = initializeStore();
-
-export default store;