fix: updated frontend-build to resolve word-wrap ReDoS vulnerability (#368)

* feat: integrated notifications tray with backend apis

* test: updates test cases

* refactor: loader added and resolves minor nits

* test: fixes test cases related to pagination

* refactor: moved pagination to normalised data

.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

@@ -0,0 +1,20 @@
+# 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,18 +9,17 @@ 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@v2
+      uses: actions/setup-node@v3
       with:
-        node-version: ${{ matrix.node }}
+        node-version: ${{ env.NODE_VER }}
     - name: Install dependencies
       run: npm ci
     - name: Validate package-lock.json changes

.github/workflows/lockfileversion-check.yml

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

.github/workflows/release.yml

@@ -12,10 +12,12 @@ 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@v2
+      uses: actions/setup-node@v3
       with:
-        node-version: 16
+        node-version: ${{ env.NODE_VER }}
     - name: Install dependencies
       run: npm ci
     - name: Validate package-lock.json changes
@@ -31,7 +33,7 @@ jobs:
     - name: Build
       run: npm run build
     - name: Release
-      uses: cycjimmy/semantic-release-action@v2
+      uses: cycjimmy/semantic-release-action@v3
       with:
         semantic_version: 16
       env:

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

@@ -0,0 +1,12 @@
+# 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

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

Makefile

@@ -1,11 +1,9 @@
-transifex_resource = frontend-component-header
+export 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
@@ -42,11 +40,11 @@ push_translations:
 	# Pushing strings to Transifex...
 	tx push -s
 	# Fetching hashes from Transifex...
-	./node_modules/reactifex/bash_scripts/get_hashed_strings.sh $(tx_url1)
+	./node_modules/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
 	# Writing out comments to file...
-	$(transifex_utils) $(transifex_temp) --comments
+	$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
 	# Pushing comments to Transifex...
-	./node_modules/reactifex/bash_scripts/put_comments.sh $(tx_url2)
+	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
 
 # Pulls translations from Transifex.
 pull_translations:

README.rst

@@ -65,7 +65,7 @@ Development
 
 Install dependencies::
 
-  npm i
+  npm ci
 
 Start the development server::
 

example/index.js

@@ -4,7 +4,8 @@ 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 Header from '@edx/frontend-component-header';
+import { LearningHeader as Header } from '@edx/frontend-component-header';
 
 import './index.scss';
 

package.json

@@ -33,43 +33,51 @@
   },
   "homepage": "https://github.com/openedx/frontend-component-header#readme",
   "devDependencies": {
-    "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
+    "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-build": "12.4.16",
-    "@edx/frontend-platform": "^3.0.1",
-    "@testing-library/dom": "8.19.1",
+    "@edx/frontend-build": "12.8.61",
+    "@edx/frontend-platform": "4.6.0",
+    "@edx/reactifex": "^2.1.1",
+    "@testing-library/dom": "9.3.1",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "10.4.9",
+    "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
     "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.7",
-    "husky": "7.0.4",
-    "jest": "29.3.1",
+    "husky": "8.0.3",
+    "jest": "29.6.1",
     "jest-chain": "1.1.6",
     "prop-types": "15.8.1",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "react-redux": "7.2.9",
     "react-router-dom": "5.3.4",
-    "react-test-renderer": "16.14.0",
-    "reactifex": "1.1.1",
-    "redux": "4.2.0",
-    "redux-saga": "1.2.1"
+    "react-test-renderer": "17.0.2",
+    "redux": "4.2.1",
+    "redux-saga": "1.2.3"
   },
   "dependencies": {
-    "@edx/paragon": "20.27.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",
+    "@edx/paragon": "20.45.0",
+    "@fortawesome/fontawesome-svg-core": "6.4.0",
+    "@fortawesome/free-brands-svg-icons": "6.4.0",
+    "@fortawesome/free-regular-svg-icons": "6.4.0",
+    "@fortawesome/free-solid-svg-icons": "6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@reduxjs/toolkit": "1.9.5",
+    "axios-mock-adapter": "1.21.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"
+    "react-router-dom": "5.3.4",
+    "react-transition-group": "4.4.5",
+    "rosie": "2.1.0",
+    "timeago.js": "4.0.2"
   },
   "peerDependencies": {
-    "@edx/frontend-platform": "^2.0.0 || ^3.0.0",
+    "@edx/frontend-platform": "^4.0.0",
     "prop-types": "^15.5.10",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0"
+    "react": "^16.9.0 || ^17.0.0",
+    "react-dom": "^16.9.0 || ^17.0.0"
   }
 }

src/Header.test.jsx

@@ -2,24 +2,38 @@
 import React from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import TestRenderer from 'react-test-renderer';
-import { AppContext } from '@edx/frontend-platform/react';
+import { AppContext, AppProvider } 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={{}}>
-      <AppContext.Provider
-        value={contextValue}
-      >
-        <Header />
-      </AppContext.Provider>
+      <AppProvider store={store}>
+        <AppContext.Provider
+          value={contextValue}
+        >
+          <Header />
+        </AppContext.Provider>
+      </AppProvider>
     </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

@@ -0,0 +1,79 @@
+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}
+      data-testid={`notification-${id}`}
+    >
+      <Icon
+        src={iconComponent}
+        className={`${iconClass} mr-4 notification-icon`}
+        data-testid={`notification-icon-${id}`}
+      />
+      <div className="d-flex w-100" data-testid="notification-contents">
+        <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 }}
+              data-testid={`notification-content-${id}`}
+            />
+            <div className="py-0 d-flex">
+              <span className="font-size-12 text-gray-500 line-height-20">
+                <span data-testid={`notification-course-${id}`}>{courseName}
+                </span>
+                <span className="text-light-700 px-1.5">{intl.formatMessage(messages.fullStop)}</span>
+                <span data-testid={`notification-created-date-${id}`}> {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" data-testid={`unread-notification-${id}`} />
+            </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

@@ -0,0 +1,96 @@
+import React, { useCallback, useMemo } from 'react';
+import { Button, Spinner } 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, selectNotificationStatus,
+} from './data/selectors';
+import { splitNotificationsByTime } from './utils';
+import { updatePaginationRequest, RequestStatus } from './data/slice';
+
+const NotificationSections = () => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const selectedAppName = useSelector(selectSelectedAppName());
+  const notificationRequestStatus = useSelector(selectNotificationStatus());
+  const notifications = useSelector(selectNotificationsByIds(selectedAppName));
+  const { hasMorePages } = 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}
+              data-testid="mark-all-read"
+            >
+              {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" data-testid="notification-tray-section">
+      {renderNotificationSection('today', today)}
+      {renderNotificationSection('earlier', earlier)}
+      {hasMorePages && notificationRequestStatus === RequestStatus.IN_PROGRESS ? (
+        <div className="d-flex justify-content-center p-4">
+          <Spinner animation="border" variant="primary" size="lg" />
+        </div>
+      ) : (hasMorePages && notificationRequestStatus === RequestStatus.SUCCESSFUL
+        && (
+          <Button
+            variant="primary"
+            className="w-100 bg-primary-500"
+            onClick={updatePagination}
+            data-testid="load-more-notifications"
+          >
+            {intl.formatMessage(messages.loadMoreNotifications)}
+          </Button>
+        )
+      )}
+    </div>
+  );
+};
+
+export default React.memo(NotificationSections);

src/Notifications/NotificationTabs.jsx

@@ -0,0 +1,53 @@
+/* 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 }));
+    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"
+      data-testid={`notification-tab-${appName}`}
+    >
+      {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/__factories__/index.js

@@ -0,0 +1 @@
+import './notifications.factory';

src/Notifications/data/__factories__/notifications.factory.js

@@ -0,0 +1,31 @@
+import { Factory } from 'rosie';
+
+Factory.define('notificationsCount')
+  .attr('count', 45)
+  .attr('countByAppName', {
+    reminders: 10,
+    discussion: 20,
+    grades: 10,
+    authoring: 5,
+  })
+  .attr('showNotificationsTray', true);
+
+Factory.define('notification')
+  .sequence('id')
+  .attr('type', 'post')
+  .sequence('content', ['id'], (idx, notificationId) => `<p><strong>User ${idx}</strong> posts <strong>Hello and welcome to SC0x
+  ${notificationId}!</strong></p>`)
+  .attr('course_name', 'Supply Chain Analytics')
+  .sequence('content_url', (idx) => `https://example.com/${idx}`)
+  .attr('last_read', null)
+  .attr('last_seen', null)
+  .sequence('created_at', ['createdDate'], (idx, date) => date);
+
+Factory.define('notificationsList')
+  .attr('next', null)
+  .attr('previous', null)
+  .attr('count', null, 2)
+  .attr('num_pages', null, 1)
+  .attr('current_page', null, 1)
+  .attr('start', null, 0)
+  .attr('results', ['results'], (results) => results || Factory.buildList('notification', 2, null, { createdDate: new Date().toISOString() }));

src/Notifications/data/api.js

@@ -0,0 +1,39 @@
+import { getConfig, snakeCaseObject } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+export const getNotificationsCountApiUrl = () => `${getConfig().LMS_BASE_URL}/api/notifications/count/`;
+export const getNotificationsListApiUrl = () => `${getConfig().LMS_BASE_URL}/api/notifications/`;
+export const markNotificationsSeenApiUrl = (appName) => `${getConfig().LMS_BASE_URL}/api/notifications/mark-seen/${appName}/`;
+export const markNotificationAsReadApiUrl = () => `${getConfig().LMS_BASE_URL}/api/notifications/read/`;
+
+export async function getNotificationsList(appName, page) {
+  const params = snakeCaseObject({ appName, page });
+  const { data } = await getAuthenticatedHttpClient().get(getNotificationsListApiUrl(), { params });
+  return data;
+}
+
+export async function getNotificationCounts() {
+  const { data } = await getAuthenticatedHttpClient().get(getNotificationsCountApiUrl());
+
+  return data;
+}
+
+export async function markNotificationSeen(appName) {
+  const { data } = await getAuthenticatedHttpClient().put(`${markNotificationsSeenApiUrl(appName)}`);
+
+  return data;
+}
+
+export async function markAllNotificationRead(appName) {
+  const params = snakeCaseObject({ appName });
+  const { data } = await getAuthenticatedHttpClient().patch(markNotificationAsReadApiUrl(), params);
+
+  return data;
+}
+
+export async function markNotificationRead(notificationId) {
+  const params = snakeCaseObject({ notificationId });
+  const { data } = await getAuthenticatedHttpClient().patch(markNotificationAsReadApiUrl(), params);
+
+  return { data, id: notificationId };
+}

src/Notifications/data/api.test.js

@@ -0,0 +1,147 @@
+import MockAdapter from 'axios-mock-adapter';
+import { Factory } from 'rosie';
+
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { initializeMockApp } from '@edx/frontend-platform/testing';
+
+import {
+  getNotificationsListApiUrl, getNotificationsCountApiUrl, markNotificationAsReadApiUrl, markNotificationsSeenApiUrl,
+  getNotificationCounts, getNotificationsList, markNotificationSeen, markAllNotificationRead, markNotificationRead,
+} from './api';
+
+import './__factories__';
+
+const notificationCountsApiUrl = getNotificationsCountApiUrl();
+const notificationsApiUrl = getNotificationsListApiUrl();
+const markedAllNotificationsAsSeenApiUrl = markNotificationsSeenApiUrl('discussion');
+const markedAllNotificationsAsReadApiUrl = markNotificationAsReadApiUrl();
+
+let axiosMock = null;
+
+describe('Notifications API', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: '123abc',
+        username: 'testuser',
+        administrator: false,
+        roles: [],
+      },
+    });
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    Factory.resetAll();
+  });
+
+  afterEach(() => {
+    axiosMock.reset();
+  });
+
+  it('Successfully get notification counts for different tabs.', async () => {
+    axiosMock.onGet(notificationCountsApiUrl).reply(200, (Factory.build('notificationsCount')));
+
+    const { count, countByAppName } = await getNotificationCounts();
+
+    expect(count).toEqual(45);
+    expect(countByAppName.reminders).toEqual(10);
+    expect(countByAppName.discussion).toEqual(20);
+    expect(countByAppName.grades).toEqual(10);
+    expect(countByAppName.authoring).toEqual(5);
+  });
+
+  it.each([
+    { statusCode: 404, message: 'Failed to get notification counts.' },
+    { statusCode: 403, message: 'Denied to get notification counts.' },
+  ])('%s for notification counts API.', async ({ statusCode, message }) => {
+    axiosMock.onGet(notificationCountsApiUrl).reply(statusCode, { message });
+    try {
+      await getNotificationCounts();
+    } catch (error) {
+      expect(error.response.status).toEqual(statusCode);
+      expect(error.response.data.message).toEqual(message);
+    }
+  });
+
+  it('Successfully get notifications.', async () => {
+    axiosMock.onGet(notificationsApiUrl).reply(200, (Factory.build('notificationsList')));
+
+    const notifications = await getNotificationsList('discussion', 1);
+
+    expect(notifications.results).toHaveLength(2);
+  });
+
+  it.each([
+    { statusCode: 404, message: 'Failed to get notifications.' },
+    { statusCode: 403, message: 'Denied to get notifications.' },
+  ])('%s for notification API.', async ({ statusCode, message }) => {
+    axiosMock.onGet(notificationsApiUrl).reply(statusCode, { message });
+    try {
+      await getNotificationsList('discussion', 1);
+    } catch (error) {
+      expect(error.response.status).toEqual(statusCode);
+      expect(error.response.data.message).toEqual(message);
+    }
+  });
+
+  it('Successfully marked all notifications as seen for selected app.', async () => {
+    axiosMock.onPut(markedAllNotificationsAsSeenApiUrl).reply(200, { message: 'Notifications marked seen.' });
+
+    const { message } = await markNotificationSeen('discussion');
+
+    expect(message).toEqual('Notifications marked seen.');
+  });
+
+  it.each([
+    { statusCode: 404, message: 'Failed to mark all notifications as seen for selected app.' },
+    { statusCode: 403, message: 'Denied to mark all notifications as seen for selected app.' },
+  ])('%s for notification mark as seen API.', async ({ statusCode, message }) => {
+    axiosMock.onPut(markedAllNotificationsAsSeenApiUrl).reply(statusCode, { message });
+    try {
+      await markNotificationSeen('discussion');
+    } catch (error) {
+      expect(error.response.status).toEqual(statusCode);
+      expect(error.response.data.message).toEqual(message);
+    }
+  });
+
+  it('Successfully marked all notifications as read for selected app.', async () => {
+    axiosMock.onPatch(markedAllNotificationsAsReadApiUrl).reply(200, { message: 'Notifications marked read.' });
+
+    const { message } = await markAllNotificationRead('discussion');
+
+    expect(message).toEqual('Notifications marked read.');
+  });
+
+  it.each([
+    { statusCode: 404, message: 'Failed to mark all notifications as read for selected app.' },
+    { statusCode: 403, message: 'Denied to mark all notifications as read for selected app.' },
+  ])('%s for notification mark all as read API.', async ({ statusCode, message }) => {
+    axiosMock.onPatch(markedAllNotificationsAsReadApiUrl).reply(statusCode, { message });
+    try {
+      await markAllNotificationRead('discussion');
+    } catch (error) {
+      expect(error.response.status).toEqual(statusCode);
+      expect(error.response.data.message).toEqual(message);
+    }
+  });
+
+  it('Successfully marked notification as read.', async () => {
+    axiosMock.onPatch(markedAllNotificationsAsReadApiUrl).reply(200, { message: 'Notification marked read.' });
+
+    const { data } = await markNotificationRead(1);
+
+    expect(data.message).toEqual('Notification marked read.');
+  });
+
+  it.each([
+    { statusCode: 404, message: 'Failed to mark notification as read.' },
+    { statusCode: 403, message: 'Denied to mark notification as read.' },
+  ])('%s for notification mark as read API.', async ({ statusCode, message }) => {
+    axiosMock.onPatch(markedAllNotificationsAsReadApiUrl).reply(statusCode, { message });
+    try {
+      await markAllNotificationRead(1);
+    } catch (error) {
+      expect(error.response.status).toEqual(statusCode);
+      expect(error.response.data.message).toEqual(message);
+    }
+  });
+});

src/Notifications/data/hook.js

@@ -0,0 +1,11 @@
+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

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

src/Notifications/data/notifications.json

@@ -0,0 +1,134 @@
+{
+  "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/redux.test.js

@@ -0,0 +1,155 @@
+import MockAdapter from 'axios-mock-adapter';
+import { Factory } from 'rosie';
+
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { initializeMockApp } from '@edx/frontend-platform/testing';
+
+import { initializeStore } from '../../store';
+import executeThunk from '../../test-utils';
+import mockNotificationsResponse from '../test-utils';
+import {
+  getNotificationsListApiUrl, getNotificationsCountApiUrl, markNotificationAsReadApiUrl, markNotificationsSeenApiUrl,
+} from './api';
+import {
+  fetchAppsNotificationCount, fetchNotificationList, markNotificationsAsRead, markAllNotificationsAsRead,
+  resetNotificationState, markNotificationsAsSeen,
+} from './thunks';
+
+import './__factories__';
+
+const notificationCountsApiUrl = getNotificationsCountApiUrl();
+const notificationsListApiUrl = getNotificationsListApiUrl();
+const markedAllNotificationsAsReadApiUrl = markNotificationAsReadApiUrl();
+const markedAllNotificationsAsSeenApiUrl = markNotificationsSeenApiUrl('discussion');
+
+let axiosMock;
+let store;
+
+describe('Notification Redux', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: '123abc',
+        username: 'testuser',
+        administrator: false,
+        roles: [],
+      },
+    });
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    Factory.resetAll();
+    store = initializeStore();
+
+    ({ store, axiosMock } = await mockNotificationsResponse());
+  });
+
+  afterEach(() => {
+    axiosMock.reset();
+  });
+
+  it('Successfully loaded initial notification states in the redux.', async () => {
+    executeThunk(resetNotificationState(), store.dispatch, store.getState);
+
+    const { notifications } = store.getState();
+
+    expect(notifications.notificationStatus).toEqual('idle');
+    expect(notifications.appName).toEqual('discussion');
+    expect(notifications.appsId).toHaveLength(0);
+    expect(notifications.apps).toEqual({});
+    expect(notifications.notifications).toEqual({});
+    expect(notifications.tabsCount).toEqual({});
+    expect(notifications.showNotificationsTray).toEqual(false);
+    expect(notifications.pagination).toEqual({});
+  });
+
+  it('Successfully loaded notifications list in the redux.', async () => {
+    const { notifications: { notifications } } = store.getState();
+    expect(Object.keys(notifications)).toHaveLength(10);
+  });
+
+  it.each([
+    { statusCode: 404, status: 'failed' },
+    { statusCode: 403, status: 'denied' },
+  ])('%s to load notifications list in the redux.', async ({ statusCode, status }) => {
+    axiosMock.onGet(notificationsListApiUrl).reply(statusCode);
+    await executeThunk(fetchNotificationList({ page: 1 }), store.dispatch, store.getState);
+
+    const { notifications: { notificationStatus } } = store.getState();
+
+    expect(notificationStatus).toEqual(status);
+  });
+
+  it('Successfully loaded notification counts in the redux.', async () => {
+    const { notifications: { tabsCount } } = store.getState();
+
+    expect(tabsCount.count).toEqual(25);
+    expect(tabsCount.reminders).toEqual(10);
+    expect(tabsCount.discussion).toEqual(0);
+    expect(tabsCount.grades).toEqual(10);
+    expect(tabsCount.authoring).toEqual(5);
+  });
+
+  it.each([
+    { statusCode: 404, status: 'failed' },
+    { statusCode: 403, status: 'denied' },
+  ])('%s to load notification counts in the redux.', async ({ statusCode, status }) => {
+    axiosMock.onGet(notificationCountsApiUrl).reply(statusCode);
+    await executeThunk(fetchAppsNotificationCount(), store.dispatch, store.getState);
+
+    const { notifications: { notificationStatus } } = store.getState();
+
+    expect(notificationStatus).toEqual(status);
+  });
+
+  it('Successfully marked all notifications as seen for selected app.', async () => {
+    axiosMock.onPut(markedAllNotificationsAsSeenApiUrl).reply(200);
+    await executeThunk(markNotificationsAsSeen('discussion'), store.dispatch, store.getState);
+
+    expect(store.getState().notifications.notificationStatus).toEqual('successful');
+  });
+
+  it.each([
+    { statusCode: 404, status: 'failed' },
+    { statusCode: 403, status: 'denied' },
+  ])('%s to mark all notifications as seen for selected app.', async ({ statusCode, status }) => {
+    axiosMock.onPut(markedAllNotificationsAsSeenApiUrl).reply(statusCode);
+    await executeThunk(markNotificationsAsSeen('discussion'), store.dispatch, store.getState);
+
+    const { notifications: { notificationStatus } } = store.getState();
+
+    expect(notificationStatus).toEqual(status);
+  });
+
+  it('Successfully marked all notifications as read for selected app in the redux.', async () => {
+    axiosMock.onPatch(markedAllNotificationsAsReadApiUrl).reply(200);
+    await executeThunk(markAllNotificationsAsRead('discussion'), store.dispatch, store.getState);
+
+    const { notifications: { notificationStatus, notifications } } = store.getState();
+    const firstNotification = Object.values(notifications)[0];
+
+    expect(notificationStatus).toEqual('successful');
+    expect(firstNotification.lastRead).not.toBeNull();
+  });
+
+  it('Successfully marked notification as read in the redux.', async () => {
+    axiosMock.onPatch(markedAllNotificationsAsReadApiUrl).reply(200);
+    await executeThunk(markNotificationsAsRead(1), store.dispatch, store.getState);
+
+    const { notifications: { notificationStatus, notifications } } = store.getState();
+    const firstNotification = Object.values(notifications)[0];
+
+    expect(notificationStatus).toEqual('successful');
+    expect(firstNotification.lastRead).not.toBeNull();
+  });
+
+  it.each([
+    { statusCode: 404, status: 'failed' },
+    { statusCode: 403, status: 'denied' },
+  ])('%s to marked notification as read in the redux.', async ({ statusCode, status }) => {
+    axiosMock.onPatch(markedAllNotificationsAsReadApiUrl).reply(statusCode);
+    await executeThunk(markNotificationsAsRead(1), store.dispatch, store.getState);
+
+    const { notifications: { notificationStatus } } = store.getState();
+
+    expect(notificationStatus).toEqual(status);
+  });
+});

src/Notifications/data/selector.test.jsx

@@ -0,0 +1,115 @@
+import MockAdapter from 'axios-mock-adapter';
+import { Factory } from 'rosie';
+
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { initializeMockApp } from '@edx/frontend-platform/testing';
+
+import { initializeStore } from '../../store';
+import mockNotificationsResponse from '../test-utils';
+import {
+  selectNotifications,
+  selectNotificationsByIds,
+  selectNotificationStatus,
+  selectNotificationTabs,
+  selectNotificationTabsCount,
+  selectPaginationData,
+  selectSelectedAppName,
+  selectSelectedAppNotificationIds,
+  selectShowNotificationTray,
+} from './selectors';
+
+import './__factories__';
+
+let axiosMock;
+let store;
+
+describe('Notification Selectors', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: '123abc',
+        username: 'testuser',
+        administrator: false,
+        roles: [],
+      },
+    });
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    Factory.resetAll();
+    store = initializeStore();
+
+    ({ store, axiosMock } = await mockNotificationsResponse());
+  });
+
+  afterEach(() => {
+    axiosMock.reset();
+  });
+
+  it('Should return notification status.', async () => {
+    const state = store.getState();
+    const status = selectNotificationStatus()(state);
+
+    expect(status).toEqual('successful');
+  });
+
+  it('Should return notification tabs count.', async () => {
+    const state = store.getState();
+    const tabsCount = selectNotificationTabsCount()(state);
+
+    expect(tabsCount.count).toEqual(25);
+    expect(tabsCount.reminders).toEqual(10);
+    expect(tabsCount.discussion).toEqual(0);
+    expect(tabsCount.grades).toEqual(10);
+    expect(tabsCount.authoring).toEqual(5);
+  });
+
+  it('Should return notification tabs.', async () => {
+    const state = store.getState();
+    const tabs = selectNotificationTabs()(state);
+
+    expect(tabs).toHaveLength(4);
+  });
+
+  it('Should return selected app notification ids.', async () => {
+    const state = store.getState();
+    const notificationIds = selectSelectedAppNotificationIds('discussion')(state);
+
+    expect(notificationIds).toHaveLength(10);
+  });
+
+  it('Should return show notification tray status.', async () => {
+    const state = store.getState();
+    const showNotificationTrayStatus = selectShowNotificationTray()(state);
+
+    expect(showNotificationTrayStatus).toEqual(true);
+  });
+
+  it('Should return notifications.', async () => {
+    const state = store.getState();
+    const notifications = selectNotifications()(state);
+
+    expect(Object.keys(notifications)).toHaveLength(10);
+  });
+
+  it('Should return notifications from Ids.', async () => {
+    const state = store.getState();
+    const notifications = selectNotificationsByIds('discussion')(state);
+
+    expect(notifications).toHaveLength(10);
+  });
+
+  it('Should return selected app name.', async () => {
+    const state = store.getState();
+    const appName = selectSelectedAppName()(state);
+
+    expect(appName).toEqual('discussion');
+  });
+
+  it('Should return pagination data.', async () => {
+    const state = store.getState();
+    const paginationData = selectPaginationData()(state);
+
+    expect(paginationData.currentPage).toEqual(1);
+    expect(paginationData.numPages).toEqual(2);
+    expect(paginationData.hasMorePages).toEqual(true);
+  });
+});

src/Notifications/data/selectors.js

@@ -0,0 +1,23 @@
+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.showNotificationsTray;
+
+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

@@ -0,0 +1,147 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit';
+
+export const RequestStatus = {
+  IDLE: 'idle',
+  IN_PROGRESS: 'in-progress',
+  SUCCESSFUL: 'successful',
+  FAILED: 'failed',
+  DENIED: 'denied',
+};
+
+const initialState = {
+  notificationStatus: RequestStatus.IDLE,
+  appName: 'discussion',
+  appsId: [],
+  apps: {},
+  notifications: {},
+  tabsCount: {},
+  showNotificationsTray: false,
+  pagination: {},
+};
+const slice = createSlice({
+  name: 'notifications',
+  initialState,
+  reducers: {
+    fetchNotificationDenied: (state) => {
+      state.notificationStatus = RequestStatus.DENIED;
+    },
+    fetchNotificationFailure: (state) => {
+      state.notificationStatus = RequestStatus.FAILED;
+    },
+    fetchNotificationRequest: (state) => {
+      state.notificationStatus = RequestStatus.IN_PROGRESS;
+    },
+    fetchNotificationSuccess: (state, { payload }) => {
+      const {
+        newNotificationIds, notificationsKeyValuePair, pagination,
+      } = 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.SUCCESSFUL;
+      state.pagination = pagination;
+    },
+    fetchNotificationsCountDenied: (state) => {
+      state.notificationStatus = RequestStatus.DENIED;
+    },
+    fetchNotificationsCountFailure: (state) => {
+      state.notificationStatus = RequestStatus.FAILED;
+    },
+    fetchNotificationsCountRequest: (state) => {
+      state.notificationStatus = RequestStatus.IN_PROGRESS;
+    },
+    fetchNotificationsCountSuccess: (state, { payload }) => {
+      const {
+        countByAppName, appIds, apps, count, showNotificationsTray,
+      } = payload;
+      state.tabsCount = { count, ...countByAppName };
+      state.appsId = appIds;
+      state.apps = apps;
+      state.showNotificationsTray = showNotificationsTray;
+      state.notificationStatus = RequestStatus.SUCCESSFUL;
+    },
+    markNotificationsAsSeenRequest: (state) => {
+      state.notificationStatus = RequestStatus.IN_PROGRESS;
+    },
+    markNotificationsAsSeenSuccess: (state) => {
+      state.notificationStatus = RequestStatus.SUCCESSFUL;
+    },
+    markNotificationsAsSeenDenied: (state) => {
+      state.notificationStatus = RequestStatus.DENIED;
+    },
+    markNotificationsAsSeenFailure: (state) => {
+      state.notificationStatus = RequestStatus.FAILED;
+    },
+    markAllNotificationsAsReadRequest: (state) => {
+      state.notificationStatus = RequestStatus.IN_PROGRESS;
+    },
+    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.SUCCESSFUL;
+    },
+    markAllNotificationsAsReadDenied: (state) => {
+      state.notificationStatus = RequestStatus.DENIED;
+    },
+    markAllNotificationsAsReadFailure: (state) => {
+      state.notificationStatus = RequestStatus.FAILED;
+    },
+    markNotificationsAsReadRequest: (state) => {
+      state.notificationStatus = RequestStatus.IN_PROGRESS;
+    },
+    markNotificationsAsReadSuccess: (state, { payload }) => {
+      const date = new Date().toISOString();
+      state.notifications[payload.id] = { ...state.notifications[payload.id], lastRead: date };
+      state.notificationStatus = RequestStatus.SUCCESSFUL;
+    },
+    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

@@ -0,0 +1,135 @@
+import { camelCaseObject } from '@edx/frontend-platform';
+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 {
+  getNotificationsList, getNotificationCounts, markNotificationSeen, markAllNotificationRead, markNotificationRead,
+} from './api';
+import { getHttpErrorStatus } from '../utils';
+
+const normalizeNotificationCounts = ({ countByAppName, count, showNotificationsTray }) => {
+  const appIds = Object.keys(countByAppName);
+  const apps = appIds.reduce((acc, appId) => { acc[appId] = []; return acc; }, {});
+  return {
+    countByAppName, appIds, apps, count, showNotificationsTray,
+  };
+};
+
+const normalizeNotifications = (data) => {
+  const newNotificationIds = data.results.map(notification => notification.id.toString());
+  const notificationsKeyValuePair = data.results.reduce((acc, obj) => { acc[obj.id] = obj; return acc; }, {});
+  const pagination = {
+    numPages: data.numPages,
+    currentPage: data.currentPage,
+    hasMorePages: !!data.next,
+  };
+  return {
+    newNotificationIds, notificationsKeyValuePair, pagination,
+  };
+};
+
+export const fetchNotificationList = ({ appName, page }) => (
+  async (dispatch) => {
+    try {
+      dispatch(fetchNotificationRequest({ appName }));
+      const data = await getNotificationsList(appName, page);
+      const normalisedData = normalizeNotifications((camelCaseObject(data)));
+      dispatch(fetchNotificationSuccess({ ...normalisedData }));
+    } 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((camelCaseObject(data)));
+      dispatch(fetchNotificationsCountSuccess({ ...normalisedData }));
+    } 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(camelCaseObject(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(camelCaseObject(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(camelCaseObject(data)));
+    } catch (error) {
+      if (getHttpErrorStatus(error) === 403) {
+        dispatch(markNotificationsAsSeenDenied());
+      } else {
+        dispatch(markNotificationsAsSeenFailure());
+      }
+    }
+  }
+);
+
+export const resetNotificationState = () => (
+  async (dispatch) => { dispatch(resetNotificationStateRequest()); }
+);

src/Notifications/index.jsx

@@ -0,0 +1,103 @@
+/* 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="notification-tray"
+          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" data-testid="setting-icon" />
+            </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"
+          data-testid="notification-bell-icon"
+        />
+        {notificationCounts?.count > 0 && (
+          <Badge
+            pill
+            variant="danger"
+            className="font-weight-normal px-1 notification-badge"
+            data-testid="notification-count"
+          >
+            {notificationCounts.count}
+          </Badge>
+        )}
+      </div>
+    </OverlayTrigger>
+  );
+};
+
+export default Notifications;

src/Notifications/index.test.jsx

@@ -0,0 +1,109 @@
+import React from 'react';
+
+import {
+  act, fireEvent, render, screen, waitFor,
+} from '@testing-library/react';
+import MockAdapter from 'axios-mock-adapter';
+import { Context as ResponsiveContext } from 'react-responsive';
+import { Factory } from 'rosie';
+
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppContext, AppProvider } from '@edx/frontend-platform/react';
+
+import AuthenticatedUserDropdown from '../learning-header/AuthenticatedUserDropdown';
+import { initializeStore } from '../store';
+import executeThunk from '../test-utils';
+import { getNotificationsCountApiUrl } from './data/api';
+import { fetchAppsNotificationCount } from './data/thunks';
+
+import './data/__factories__';
+
+const notificationCountsApiUrl = getNotificationsCountApiUrl();
+
+let axiosMock;
+let store;
+
+function renderComponent() {
+  render(
+    <ResponsiveContext.Provider>
+      <IntlProvider locale="en" messages={{}}>
+        <AppProvider store={store}>
+          <AppContext.Provider>
+            <AuthenticatedUserDropdown />
+          </AppContext.Provider>
+        </AppProvider>
+      </IntlProvider>
+    </ResponsiveContext.Provider>,
+  );
+}
+
+describe('Notification test cases.', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: '123abc',
+        username: 'testuser',
+        administrator: false,
+        roles: [],
+      },
+    });
+
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    Factory.resetAll();
+    store = initializeStore();
+  });
+
+  async function setupMockNotificationCountResponse(count = 45, showNotificationsTray = true) {
+    axiosMock.onGet(notificationCountsApiUrl)
+      .reply(200, (Factory.build('notificationsCount', { count, showNotificationsTray })));
+    await executeThunk(fetchAppsNotificationCount(), store.dispatch, store.getState);
+  }
+
+  it('Successfully showed bell icon and unseen count on it if unseen count is greater then 0.', async () => {
+    await setupMockNotificationCountResponse();
+    renderComponent();
+
+    const bellIcon = screen.queryByTestId('notification-bell-icon');
+    const notificationCount = screen.queryByTestId('notification-count');
+
+    expect(bellIcon).toBeInTheDocument();
+    expect(notificationCount).toBeInTheDocument();
+    expect(screen.queryByText(45)).toBeInTheDocument();
+  });
+
+  it('Successfully showed bell icon and hide unseen count tag when unseen count is zero.', async () => {
+    await setupMockNotificationCountResponse(0);
+    renderComponent();
+
+    const bellIcon = screen.queryByTestId('notification-bell-icon');
+    const notificationCount = screen.queryByTestId('notification-count');
+
+    expect(bellIcon).toBeInTheDocument();
+    expect(notificationCount).not.toBeInTheDocument();
+  });
+
+  it('Successfully hides bell icon when showNotificationsTray is false.', async () => {
+    await setupMockNotificationCountResponse(45, false);
+    renderComponent();
+
+    const bellIcon = screen.queryByTestId('notification-bell-icon');
+
+    expect(bellIcon).not.toBeInTheDocument();
+  });
+
+  it('Successfully viewed setting icon and show/hide notification tray by clicking on the bell icon .', async () => {
+    await setupMockNotificationCountResponse();
+    renderComponent();
+
+    const bellIcon = screen.queryByTestId('notification-bell-icon');
+
+    await act(async () => { fireEvent.click(bellIcon); });
+    expect(screen.queryByTestId('notification-tray')).toBeInTheDocument();
+    expect(screen.queryByTestId('setting-icon')).toBeInTheDocument();
+
+    await act(async () => { fireEvent.click(bellIcon); });
+    await waitFor(() => expect(screen.queryByTestId('notification-tray')).not.toBeInTheDocument());
+  });
+});

src/Notifications/messages.js

@@ -0,0 +1,36 @@
+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/notificationRowItem.test.jsx

@@ -0,0 +1,87 @@
+import React from 'react';
+
+import {
+  act, fireEvent, render, screen,
+} from '@testing-library/react';
+import MockAdapter from 'axios-mock-adapter';
+import { Context as ResponsiveContext } from 'react-responsive';
+import { Factory } from 'rosie';
+
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppContext, AppProvider } from '@edx/frontend-platform/react';
+
+import AuthenticatedUserDropdown from '../learning-header/AuthenticatedUserDropdown';
+import { initializeStore } from '../store';
+import { markNotificationAsReadApiUrl } from './data/api';
+import mockNotificationsResponse from './test-utils';
+
+import './data/__factories__';
+
+const markedNotificationAsReadApiUrl = markNotificationAsReadApiUrl();
+
+let axiosMock;
+let store;
+
+function renderComponent() {
+  render(
+    <ResponsiveContext.Provider>
+      <IntlProvider locale="en" messages={{}}>
+        <AppProvider store={store}>
+          <AppContext.Provider>
+            <AuthenticatedUserDropdown />
+          </AppContext.Provider>
+        </AppProvider>
+      </IntlProvider>
+    </ResponsiveContext.Provider>,
+  );
+}
+
+describe('Notification row item test cases.', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    Factory.resetAll();
+    store = initializeStore();
+
+    ({ store, axiosMock } = await mockNotificationsResponse());
+  });
+
+  it(
+    'Successfully viewed notification icon, notification context, unread , course name and notification time.',
+    async () => {
+      renderComponent();
+
+      const bellIcon = screen.queryByTestId('notification-bell-icon');
+      await act(async () => { fireEvent.click(bellIcon); });
+
+      expect(screen.queryByTestId('notification-icon-1')).toBeInTheDocument();
+      expect(screen.queryByTestId('notification-content-1')).toBeInTheDocument();
+      expect(screen.queryByTestId('notification-course-1')).toBeInTheDocument();
+      expect(screen.queryByTestId('notification-created-date-1')).toBeInTheDocument();
+      expect(screen.queryByTestId('unread-notification-1')).toBeInTheDocument();
+    },
+  );
+
+  it('Successfully marked notification as read.', async () => {
+    axiosMock.onPatch(markedNotificationAsReadApiUrl).reply(200, { message: 'Notification marked read.' });
+    renderComponent();
+
+    const bellIcon = screen.queryByTestId('notification-bell-icon');
+    await act(async () => { fireEvent.click(bellIcon); });
+
+    const notification = screen.queryByTestId('notification-1');
+    await act(async () => { fireEvent.click(notification); });
+
+    expect(screen.queryByTestId('unread-notification-1')).not.toBeInTheDocument();
+  });
+});

src/Notifications/notificationSections.test.jsx

@@ -0,0 +1,106 @@
+import React from 'react';
+
+import {
+  act, fireEvent, render, screen, within,
+} from '@testing-library/react';
+import MockAdapter from 'axios-mock-adapter';
+import { Context as ResponsiveContext } from 'react-responsive';
+import { Factory } from 'rosie';
+
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppContext, AppProvider } from '@edx/frontend-platform/react';
+
+import AuthenticatedUserDropdown from '../learning-header/AuthenticatedUserDropdown';
+import { initializeStore } from '../store';
+import { markNotificationAsReadApiUrl, markNotificationsSeenApiUrl, getNotificationsListApiUrl } from './data/api';
+import mockNotificationsResponse from './test-utils';
+import { markNotificationsAsSeen, fetchNotificationList } from './data/thunks';
+import executeThunk from '../test-utils';
+import './data/__factories__';
+
+const markedAllNotificationsAsReadApiUrl = markNotificationAsReadApiUrl();
+
+let axiosMock;
+let store;
+
+function renderComponent() {
+  render(
+    <ResponsiveContext.Provider>
+      <IntlProvider locale="en" messages={{}}>
+        <AppProvider store={store}>
+          <AppContext.Provider>
+            <AuthenticatedUserDropdown />
+          </AppContext.Provider>
+        </AppProvider>
+      </IntlProvider>
+    </ResponsiveContext.Provider>,
+  );
+}
+
+describe('Notification sections test cases.', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    Factory.resetAll();
+    store = initializeStore();
+
+    ({ store, axiosMock } = await mockNotificationsResponse());
+  });
+
+  it('Successfully viewed last 24 hours and earlier section along with mark all as read label.', async () => {
+    renderComponent();
+
+    const bellIcon = screen.queryByTestId('notification-bell-icon');
+    await act(async () => { fireEvent.click(bellIcon); });
+    const notificationTraySection = screen.queryByTestId('notification-tray-section');
+
+    expect(within(notificationTraySection).queryByText('Last 24 hours')).toBeInTheDocument();
+    expect(within(notificationTraySection).queryByText('Earlier')).toBeInTheDocument();
+    expect(within(notificationTraySection).queryByText('Mark all as read')).toBeInTheDocument();
+  });
+
+  it('Successfully marked all notifications as read, removing the unread status.', async () => {
+    axiosMock.onPatch(markedAllNotificationsAsReadApiUrl).reply(200, { message: 'Notifications marked read.' });
+    renderComponent();
+
+    const bellIcon = screen.queryByTestId('notification-bell-icon');
+    await act(async () => { fireEvent.click(bellIcon); });
+    const markAllReadButton = screen.queryByTestId('mark-all-read');
+
+    expect(screen.queryByTestId('unread-notification-1')).toBeInTheDocument();
+    await act(async () => { fireEvent.click(markAllReadButton); });
+
+    expect(screen.queryByTestId('unread-notification-1')).not.toBeInTheDocument();
+  });
+
+  it('Successfully load more notifications by clicking on load more notification button.', async () => {
+    axiosMock.onPut(markNotificationsSeenApiUrl('discussion')).reply(200);
+    await executeThunk(markNotificationsAsSeen('discussions'), store.dispatch, store.getState);
+    renderComponent();
+
+    const bellIcon = screen.queryByTestId('notification-bell-icon');
+    await act(async () => { fireEvent.click(bellIcon); });
+
+    expect(screen.queryAllByTestId('notification-contents')).toHaveLength(10);
+    const loadMoreButton = screen.queryByTestId('load-more-notifications');
+
+    axiosMock.onGet(getNotificationsListApiUrl()).reply(
+      200,
+      (Factory.build('notificationsList', { num_pages: 2, current_page: 2 })),
+    );
+    await executeThunk(fetchNotificationList({ appName: 'discussion', page: 2 }), store.dispatch, store.getState);
+
+    await act(async () => { fireEvent.click(loadMoreButton); });
+    expect(screen.queryAllByTestId('notification-contents')).toHaveLength(12);
+  });
+});

src/Notifications/notificationTabs.test.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+
+import {
+  act, fireEvent, render, screen, within,
+} from '@testing-library/react';
+import { Context as ResponsiveContext } from 'react-responsive';
+import { Factory } from 'rosie';
+
+import { initializeMockApp } from '@edx/frontend-platform';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppContext, AppProvider } from '@edx/frontend-platform/react';
+
+import AuthenticatedUserDropdown from '../learning-header/AuthenticatedUserDropdown';
+import { initializeStore } from '../store';
+import mockNotificationsResponse from './test-utils';
+
+import './data/__factories__';
+
+let store;
+
+function renderComponent() {
+  render(
+    <ResponsiveContext.Provider>
+      <IntlProvider locale="en" messages={{}}>
+        <AppProvider store={store}>
+          <AppContext.Provider>
+            <AuthenticatedUserDropdown />
+          </AppContext.Provider>
+        </AppProvider>
+      </IntlProvider>
+    </ResponsiveContext.Provider>,
+  );
+}
+
+describe('Notification Tabs test cases.', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: '123abc',
+        username: 'testuser',
+        administrator: false,
+        roles: [],
+      },
+    });
+
+    Factory.resetAll();
+    store = initializeStore();
+
+    ({ store } = await mockNotificationsResponse());
+  });
+
+  it('Notification tabs displayed with default discussion tab selected and no unseen counts.', async () => {
+    renderComponent();
+
+    const bellIcon = screen.queryByTestId('notification-bell-icon');
+    await act(async () => { fireEvent.click(bellIcon); });
+
+    const tabs = screen.queryAllByRole('tab');
+    const selectedTab = tabs.find(tab => tab.getAttribute('aria-selected') === 'true');
+
+    expect(tabs.length).toEqual(5);
+    expect(within(selectedTab).queryByText('discussion')).toBeInTheDocument();
+    expect(within(selectedTab).queryByRole('status')).not.toBeInTheDocument();
+  });
+
+  it('Successfully showed unseen counts for unselected tabs.', async () => {
+    renderComponent();
+    const bellIcon = screen.queryByTestId('notification-bell-icon');
+    await act(async () => { fireEvent.click(bellIcon); });
+
+    const tabs = screen.getAllByRole('tab');
+
+    expect(within(tabs[0]).queryByRole('status')).toBeInTheDocument();
+  });
+
+  it('Successfully selected reminder tab.', async () => {
+    renderComponent();
+
+    const bellIcon = screen.queryByTestId('notification-bell-icon');
+    await act(async () => { fireEvent.click(bellIcon); });
+    const notificationTab = screen.getAllByRole('tab');
+
+    await act(async () => { fireEvent.click(notificationTab[0], { dataset: { rbEventKey: 'reminders' } }); });
+
+    const tabs = screen.queryAllByRole('tab');
+    const selectedTab = tabs.find(tab => tab.getAttribute('aria-selected') === 'true');
+
+    expect(within(selectedTab).queryByText('reminders')).toBeInTheDocument();
+    expect(within(selectedTab).queryByRole('status')).not.toBeInTheDocument();
+  });
+});

src/Notifications/test-utils.js

@@ -0,0 +1,32 @@
+import MockAdapter from 'axios-mock-adapter';
+import { Factory } from 'rosie';
+
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { initializeStore } from '../store';
+import executeThunk from '../test-utils';
+import { getNotificationsListApiUrl, getNotificationsCountApiUrl } from './data/api';
+import { fetchAppsNotificationCount, fetchNotificationList } from './data/thunks';
+
+import './data/__factories__';
+
+const notificationCountsApiUrl = getNotificationsCountApiUrl();
+const notificationsApiUrl = getNotificationsListApiUrl();
+
+export default async function mockNotificationsResponse() {
+  const store = initializeStore();
+  const axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  const notifications = (Factory.buildList('notification', 8, null, { createdDate: new Date().toISOString() }).concat(
+    Factory.buildList('notification', 2, null, { createdDate: '2023-06-01T00:46:11.979531Z' }),
+  ));
+  axiosMock.onGet(notificationCountsApiUrl).reply(200, (Factory.build('notificationsCount')));
+  axiosMock.onGet(notificationsApiUrl).reply(200, (Factory.build('notificationsList', {
+    results: notifications,
+    num_pages: 2,
+    next: `${notificationsApiUrl}?app_name=discussion&page=2`,
+  })));
+
+  await executeThunk(fetchAppsNotificationCount(), store.dispatch, store.getState);
+  await executeThunk(fetchNotificationList({ appName: 'discussion', page: 1 }), store.dispatch, store.getState);
+  return { store, axiosMock };
+}

src/Notifications/utils.js

@@ -0,0 +1,52 @@
+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/common/time-locale.js

@@ -0,0 +1,18 @@
+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/ar.json

@@ -29,5 +29,11 @@
   "header.menu.account.label": "الحساب",
   "header.menu.orderHistory.label": "سجل الطلبيات",
   "header.navigation.skipNavLink": "التخطي إلى المحتوى الرئيسي",
-  "header.menu.signOut.label": "تسجيل الخروج"
+  "header.menu.signOut.label": "تسجيل الخروج",
+  "notification.title": "Notifications",
+  "notification.today.heading": "Last 24 hours",
+  "notification.earlier.heading": "Earlier",
+  "notification.mark.as.read": "Mark all as read",
+  "notification.fullStop": "•",
+  "notification.load.more.notifications": "Load more notifications"
 }

src/i18n/messages/de.json

@@ -29,5 +29,11 @@
   "header.menu.account.label": "Account",
   "header.menu.orderHistory.label": "Order History",
   "header.navigation.skipNavLink": "Skip to main content.",
-  "header.menu.signOut.label": "Sign Out"
+  "header.menu.signOut.label": "Sign Out",
+  "notification.title": "Notifications",
+  "notification.today.heading": "Last 24 hours",
+  "notification.earlier.heading": "Earlier",
+  "notification.mark.as.read": "Mark all as read",
+  "notification.fullStop": "•",
+  "notification.load.more.notifications": "Load more notifications"
 }

src/i18n/messages/es_419.json

@@ -29,5 +29,11 @@
   "header.menu.account.label": "Cuenta",
   "header.menu.orderHistory.label": "Historial de órdenes",
   "header.navigation.skipNavLink": "Dirígete al contenido principal.",
-  "header.menu.signOut.label": "Cerrar sesión"
+  "header.menu.signOut.label": "Cerrar sesión",
+  "notification.title": "Notificaciones",
+  "notification.today.heading": "Últimas 24 horas",
+  "notification.earlier.heading": "Más temprano",
+  "notification.mark.as.read": "Marcar todo como leído",
+  "notification.fullStop": "•",
+  "notification.load.more.notifications": "Cargar más notificaciones"
 }

src/i18n/messages/fr.json

@@ -29,5 +29,11 @@
   "header.menu.account.label": "Compte",
   "header.menu.orderHistory.label": "Historique des commandes",
   "header.navigation.skipNavLink": "Passer au contenu principal",
-  "header.menu.signOut.label": "Se déconnecter"
+  "header.menu.signOut.label": "Se déconnecter",
+  "notification.title": "Notifications",
+  "notification.today.heading": "Last 24 hours",
+  "notification.earlier.heading": "Earlier",
+  "notification.mark.as.read": "Mark all as read",
+  "notification.fullStop": "•",
+  "notification.load.more.notifications": "Load more notifications"
 }

src/i18n/messages/fr_CA.json

@@ -29,5 +29,11 @@
   "header.menu.account.label": "Compte",
   "header.menu.orderHistory.label": "Historique des commandes",
   "header.navigation.skipNavLink": "Passer au contenu principal.",
-  "header.menu.signOut.label": "Se déconnecter"
+  "header.menu.signOut.label": "Se déconnecter",
+  "notification.title": "Notifications",
+  "notification.today.heading": "Dernières 24 heures",
+  "notification.earlier.heading": "Plus tôt",
+  "notification.mark.as.read": "tout marquer comme lu",
+  "notification.fullStop": "•",
+  "notification.load.more.notifications": "Charger plus de notifications"
 }

src/i18n/messages/hi.json

@@ -29,5 +29,11 @@
   "header.menu.account.label": "Account",
   "header.menu.orderHistory.label": "Order History",
   "header.navigation.skipNavLink": "Skip to main content.",
-  "header.menu.signOut.label": "Sign Out"
+  "header.menu.signOut.label": "Sign Out",
+  "notification.title": "Notifications",
+  "notification.today.heading": "Last 24 hours",
+  "notification.earlier.heading": "Earlier",
+  "notification.mark.as.read": "Mark all as read",
+  "notification.fullStop": "•",
+  "notification.load.more.notifications": "Load more notifications"
 }

src/i18n/messages/it.json

@@ -29,5 +29,11 @@
   "header.menu.account.label": "Account",
   "header.menu.orderHistory.label": "Order History",
   "header.navigation.skipNavLink": "Skip to main content.",
-  "header.menu.signOut.label": "Sign Out"
+  "header.menu.signOut.label": "Sign Out",
+  "notification.title": "Notifications",
+  "notification.today.heading": "Last 24 hours",
+  "notification.earlier.heading": "Earlier",
+  "notification.mark.as.read": "Mark all as read",
+  "notification.fullStop": "•",
+  "notification.load.more.notifications": "Load more notifications"
 }

src/i18n/messages/pt.json

@@ -29,5 +29,11 @@
   "header.menu.account.label": "Account",
   "header.menu.orderHistory.label": "Order History",
   "header.navigation.skipNavLink": "Skip to main content.",
-  "header.menu.signOut.label": "Sign Out"
+  "header.menu.signOut.label": "Sign Out",
+  "notification.title": "Notifications",
+  "notification.today.heading": "Last 24 hours",
+  "notification.earlier.heading": "Earlier",
+  "notification.mark.as.read": "Mark all as read",
+  "notification.fullStop": "•",
+  "notification.load.more.notifications": "Load more notifications"
 }

src/i18n/messages/ru.json

@@ -29,5 +29,11 @@
   "header.menu.account.label": "Account",
   "header.menu.orderHistory.label": "Order History",
   "header.navigation.skipNavLink": "Skip to main content.",
-  "header.menu.signOut.label": "Sign Out"
+  "header.menu.signOut.label": "Sign Out",
+  "notification.title": "Notifications",
+  "notification.today.heading": "Last 24 hours",
+  "notification.earlier.heading": "Earlier",
+  "notification.mark.as.read": "Mark all as read",
+  "notification.fullStop": "•",
+  "notification.load.more.notifications": "Load more notifications"
 }

src/i18n/messages/uk.json

@@ -1,8 +1,8 @@
 {
   "general.register.sentenceCase": "Register",
-  "general.signIn.sentenceCase": "Sign in",
-  "header.links.courses": "Courses",
-  "header.links.programs": "Programs",
+  "general.signIn.sentenceCase": "Увійти",
+  "header.links.courses": "Курси",
+  "header.links.programs": "Програми",
   "header.links.content.search": "Discover New",
   "header.links.schools": "Schools & Partners",
   "header.user.menu.dashboard": "Dashboard",
@@ -15,19 +15,25 @@
   "header.user.menu.studio.home": "Studio Home",
   "header.user.menu.studio.maintenance": "Maintenance",
   "header.label.account.nav": "Account",
-  "header.label.account.menu": "Account Menu",
-  "header.label.account.menu.for": "Account menu for {username}",
+  "header.label.account.menu": "Меню облікового запису",
+  "header.label.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": "Skip to main content",
+  "header.label.skip.nav": "Перейти до головного змісту",
   "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": "Skip to main content.",
-  "header.menu.signOut.label": "Sign Out"
+  "header.navigation.skipNavLink": "Перейти до головного змісту.",
+  "header.menu.signOut.label": "Sign Out",
+  "notification.title": "Notifications",
+  "notification.today.heading": "Last 24 hours",
+  "notification.earlier.heading": "Earlier",
+  "notification.mark.as.read": "Mark all as read",
+  "notification.fullStop": "•",
+  "notification.load.more.notifications": "Load more notifications"
 }

src/i18n/messages/zh_CN.json

@@ -29,5 +29,11 @@
   "header.menu.account.label": "Account",
   "header.menu.orderHistory.label": "Order History",
   "header.navigation.skipNavLink": "Skip to main content.",
-  "header.menu.signOut.label": "Sign Out"
+  "header.menu.signOut.label": "Sign Out",
+  "notification.title": "Notifications",
+  "notification.today.heading": "Last 24 hours",
+  "notification.earlier.heading": "Earlier",
+  "notification.mark.as.read": "Mark all as read",
+  "notification.fullStop": "•",
+  "notification.load.more.notifications": "Load more notifications"
 }

src/index.scss

@@ -1,7 +1,10 @@
 $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 {
@@ -27,7 +30,7 @@ $white: #fff;
 
 .learning-header {
   min-width: 0;
-  
+
   .course-title-lockup {
     min-width: 0;
 
@@ -118,3 +121,135 @@ $white: #fff;
     border-radius: $rounded-pill;
   }
 }
+
+.content {
+  strong {
+    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,16 +1,31 @@
-import React from 'react';
+import React, { useEffect } 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 showNotificationsTray = useSelector(selectShowNotificationTray());
+  const notificationStatus = useSelector(selectNotificationStatus());
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (notificationStatus === RequestStatus.IDLE) {
+      dispatch(fetchAppsNotificationCount());
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const dashboardMenuItem = (
     <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/dashboard`}>
       {intl.formatMessage(messages.dashboard)}
@@ -19,8 +34,9 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
 
   return (
     <>
-      <a className="text-gray-700 mr-3" href={`${getConfig().SUPPORT_URL}`}>{intl.formatMessage(messages.help)}</a>
-      <Dropdown className="user-dropdown">
+      <a className="text-gray-700" href={`${getConfig().SUPPORT_URL}`}>{intl.formatMessage(messages.help)}</a>
+      {showNotificationsTray && <Notifications />}
+      <Dropdown className="user-dropdown ml-3">
         <Dropdown.Toggle variant="outline-primary">
           <FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />
           <span data-hj-suppress className="d-none d-md-inline">

src/learning-header/LearningHeader.jsx

@@ -2,11 +2,12 @@ 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 } from '@edx/frontend-platform/react';
+import { AppContext, AppProvider } from '@edx/frontend-platform/react';
 
 import AnonymousUserMenu from './AnonymousUserMenu';
 import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
 import messages from './messages';
+import store from '../store';
 
 const LinkedLogo = ({
   href,
@@ -40,24 +41,26 @@ const LearningHeader = ({
   );
 
   return (
-    <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>
+    <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 />
+          )}
         </div>
-        {showUserDropdown && authenticatedUser && (
-          <AuthenticatedUserDropdown
-            username={authenticatedUser.username}
-          />
-        )}
-        {showUserDropdown && !authenticatedUser && (
-          <AnonymousUserMenu />
-        )}
-      </div>
-    </header>
+      </header>
+    </AppProvider>
   );
 };
 

src/learning-header/LearningHeader.test.jsx

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

src/setupTest.js

@@ -3,7 +3,7 @@
 import Enzyme from 'enzyme';
 import React from 'react';
 import PropTypes from 'prop-types';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import '@testing-library/jest-dom';
 import '@testing-library/jest-dom/extend-expect';
 import 'babel-polyfill';

src/store.js

@@ -0,0 +1,16 @@
+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;

src/test-utils.js

@@ -0,0 +1,6 @@
+const executeThunk = async (thunk, dispatch, getState) => {
+  await thunk(dispatch, getState);
+  await new Promise(setImmediate);
+};
+
+export default executeThunk;