Merge pull request #355 from openedx/sundas/INF-903

feat: binded show notification tray status with the backend api
refactor: fixed data updation in redux
2023-06-20 01:59:04 -07:00 · 2023-06-20 13:31:15 +05:00 · 2023-06-19 18:00:06 +05:00 · 2023-06-19 05:10:57 -07:00 · 2023-06-19 16:58:32 +05:00 · 2023-06-19 16:04:55 +05:00
72 changed files with 10440 additions and 31026 deletions
--- a/.env.development
+++ b/.env.development
@@ -1,4 +1,6 @@
 ACCESS_TOKEN_COOKIE_NAME=edx-jwt-cookie-header-payload
+ACCOUNT_PROFILE_URL=http://localhost:1995
+ACCOUNT_SETTINGS_URL=http://localhost:1997
 BASE_URL=localhost:8080
 CREDENTIALS_BASE_URL=http://localhost:18150
 CSRF_TOKEN_API_PATH=/csrf/api/v1/token
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 const { createConfig } = require('@edx/frontend-build');

-module.exports = createConfig('eslint');
+module.exports = createConfig('eslint');
--- a/.github/workflows/add-depr-ticket-to-depr-board.yml
+++ b/.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 }}
--- a/.github/workflows/add-remove-label-on-comment.yml
+++ b/.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
+
--- a/.github/workflows/ci.yml
+++ b/.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@v2
+      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
@@ -29,7 +28,9 @@ jobs:
      run: npm run lint
    - name: Test
      run: npm run test
+    - name: Build
+      run: npm run build
    - name: i18n_extract
      run: npm run i18n_extract
    - name: Coverage
-      uses: codecov/codecov-action@v2
+      uses: codecov/codecov-action@v3
--- a/.github/workflows/commitlint.yml
+++ b/.github/workflows/commitlint.yml
@@ -7,4 +7,4 @@ on:

 jobs:
  commitlint:
-    uses: edx/.github/.github/workflows/commitlint.yml@master
+    uses: openedx/.github/.github/workflows/commitlint.yml@master
--- a/.github/workflows/lockfileversion-check.yml
+++ b/.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
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -9,13 +9,15 @@ jobs:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
-      uses: actions/checkout@v2
+      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
@@ -27,11 +29,11 @@ jobs:
    - name: i18n_extract
      run: npm run i18n_extract
    - name: Coverage
-      uses: codecov/codecov-action@v2
+      uses: codecov/codecov-action@v3
    - 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:
--- a/.github/workflows/self-assign-issue.yml
+++ b/.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
--- a/.gitignore
+++ b/.gitignore
@@ -7,3 +7,5 @@ temp
 src/i18n/transifex_input.json
 module.config.js
 .idea/
+
+.vscode
--- a/.nvmrc
+++ b/.nvmrc
@@ -0,0 +1 @@
+18
--- a/14
+++ b/14
@@ -1,11 +1,9 @@
-transifex_resource = frontend-component-header
-transifex_langs = "ar,fr,fr_CA,es_419,zh_CN"
+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,15 +40,15 @@ 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:
-	tx pull -f --mode reviewed --languages=$(transifex_langs)
+	tx pull -t -f --mode reviewed --languages=$(transifex_langs)

 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:
--- a/README.rst
+++ b/README.rst
@@ -14,7 +14,7 @@ A generic header for Open edX micro-frontend applications.
 Requirements
 ************

-This component uses ``@edx/frontend-platform`` services such as i18n, analytics, configuration, and the ``AppContext`` React component, and expects that it has been loaded into a micro-frontend that has been properly initialized via ``@edx/frontend-platform``'s ``initialize`` function. `Please visit the frontend template application to see an example. <https://github.com/edx/frontend-template-application/blob/master/src/index.jsx>`_
+This component uses ``@edx/frontend-platform`` services such as i18n, analytics, configuration, and the ``AppContext`` React component, and expects that it has been loaded into a micro-frontend that has been properly initialized via ``@edx/frontend-platform``'s ``initialize`` function. `Please visit the frontend template application to see an example. <https://github.com/openedx/frontend-template-application/blob/master/src/index.jsx>`_

 Environment Variables
 =====================
@@ -26,6 +26,8 @@ Environment Variables
  Defaults to "localhost" in development.
 * ``LOGO_URL`` - The URL of the site's logo.  This logo is displayed in the header.
 * ``ORDER_HISTORY_URL`` - The URL of the order history page.
+* ``ACCOUNT_PROFILE_URL`` - The URL of the account profile page.
+* ``ACCOUNT_SETTINGS_URL`` - The URL of the account settings page.
 * ``AUTHN_MINIMAL_HEADER`` - A boolean flag which hides the main menu, user menu, and logged-out
  menu items when truthy.  This is intended to be used in micro-frontends like
  frontend-app-authentication in which these menus are considered distractions from the user's task.
@@ -53,8 +55,8 @@ This library has the following exports:
 Examples
 ========

-* `An example of component and messages usage. <https://github.com/edx/frontend-template-application/blob/3355bb3a96232390e9056f35b06ffa8f105ed7ca/src/index.jsx#L21>`_
-* `An example of SCSS file usage. <https://github.com/edx/frontend-template-application/blob/3cd5485bf387b8c479baf6b02bf59e3061dc3465/src/index.scss#L8>`_
+* `An example of component and messages usage. <https://github.com/openedx/frontend-template-application/blob/3355bb3a96232390e9056f35b06ffa8f105ed7ca/src/index.jsx#L21>`_
+* `An example of SCSS file usage. <https://github.com/openedx/frontend-template-application/blob/3cd5485bf387b8c479baf6b02bf59e3061dc3465/src/index.scss#L8>`_


 ***********
@@ -63,7 +65,7 @@ Development

 Install dependencies::

-  npm i
+  npm ci

 Start the development server::

--- a/example/index.js
+++ b/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';

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -24,53 +24,59 @@
  },
  "repository": {
    "type": "git",
-    "url": "git+https://github.com/edx/frontend-component-header.git"
+    "url": "git+https://github.com/openedx/frontend-component-header.git"
  },
  "author": "edX",
  "license": "AGPL-3.0",
  "bugs": {
-    "url": "https://github.com/edx/frontend-component-header/issues"
+    "url": "https://github.com/openedx/frontend-component-header/issues"
  },
-  "homepage": "https://github.com/edx/frontend-component-header#readme",
+  "homepage": "https://github.com/openedx/frontend-component-header#readme",
  "devDependencies": {
-    "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-build": "11.0.2",
-    "@edx/frontend-platform": "2.5.0",
-    "@edx/paragon": "19.25.3",
-    "codecov": "3.8.3",
+    "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
+    "@edx/browserslist-config": "^1.1.1",
+    "@edx/frontend-build": "12.8.54",
+    "@edx/frontend-platform": "4.5.1",
+    "@edx/reactifex": "^2.1.1",
+    "@testing-library/dom": "9.3.1",
+    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/react": "10.4.9",
    "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.6",
-    "husky": "7.0.4",
+    "enzyme-adapter-react-16": "1.15.7",
+    "husky": "8.0.3",
+    "jest": "29.5.0",
+    "jest-chain": "1.1.6",
    "prop-types": "15.8.1",
    "react": "16.14.0",
    "react-dom": "16.14.0",
-    "react-redux": "7.2.8",
-    "react-router-dom": "5.3.3",
+    "react-redux": "7.2.9",
    "react-test-renderer": "16.14.0",
-    "reactifex": "1.1.1",
-    "redux": "4.2.0",
-    "redux-saga": "1.1.3",
-    "@testing-library/dom": "8.16.0",
-    "@testing-library/jest-dom": "5.16.4",
-    "jest": "28.1.3",
-    "jest-chain": "1.1.5",
-    "@testing-library/react": "10.4.9"
+    "redux": "4.2.1",
+    "redux-saga": "1.2.3"
  },
  "dependencies": {
+    "@edx/paragon": "20.44.0",
+    "@fortawesome/fontawesome-svg-core": "6.3.0",
+    "@fortawesome/free-brands-svg-icons": "6.3.0",
+    "@fortawesome/free-regular-svg-icons": "6.3.0",
+    "@fortawesome/free-solid-svg-icons": "6.3.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@reduxjs/toolkit": "1.9.5",
+    "axios-mock-adapter": "1.21.4",
    "babel-polyfill": "6.26.0",
+    "classnames": "2.3.2",
+    "lodash": "4.17.21",
+    "react-redux": "7.2.9",
    "react-responsive": "8.2.0",
+    "react-router-dom": "5.3.4",
    "react-transition-group": "4.4.5",
-    "@fortawesome/fontawesome-svg-core": "1.2.36",
-    "@fortawesome/free-brands-svg-icons": "5.15.4",
-    "@fortawesome/free-regular-svg-icons": "5.15.4",
-    "@fortawesome/free-solid-svg-icons": "5.15.4",
-    "@fortawesome/react-fontawesome": "^0.2.0"
+    "rosie": "2.1.0",
+    "timeago.js": "4.0.2"
  },
  "peerDependencies": {
-    "@edx/frontend-platform": "^2.0.0",
-    "@edx/paragon": ">= 7.0.0 < 21.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"
  }
 }
--- a/renovate.json
+++ b/renovate.json
@@ -22,6 +22,11 @@
        "pin"
      ],
      "automerge": true
+    },
+    {
+      "matchPackagePatterns": ["@edx"],
+      "matchUpdateTypes": ["minor", "patch"],
+      "automerge": true
    }
  ],
  "timezone": "America/New_York"
--- a/src/Avatar.jsx
+++ b/src/Avatar.jsx
@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';

 import { AvatarIcon } from './Icons';

-function Avatar({
+const Avatar = ({
  size,
  src,
  alt,
  className,
-}) {
+}) => {
  const avatar = src ? (
    <img className="d-block w-100 h-100" src={src} alt={alt} />
  ) : (
@@ -23,7 +23,7 @@ function Avatar({
      {avatar}
    </span>
  );
-}
+};

 Avatar.propTypes = {
  src: PropTypes.string,
--- a/src/Header.jsx
+++ b/src/Header.jsx
@@ -30,7 +30,7 @@ subscribe(APP_CONFIG_INITIALIZED, () => {
  }, 'Header additional config');
 });

-function Header({ intl }) {
+const Header = ({ intl }) => {
  const { authenticatedUser, config } = useContext(AppContext);

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

 Header.propTypes = {
  intl: intlShape.isRequired,
--- a/src/Header.test.jsx
+++ b/src/Header.test.jsx
@@ -1,33 +1,51 @@
+/* eslint-disable react/prop-types */
 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={{}}>
+      <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 component = (
-      <ResponsiveContext.Provider value={{ width: 1280 }}>
-        <IntlProvider locale="en" messages={{}}>
-          <AppContext.Provider
-            value={{
-              authenticatedUser: null,
-              config: {
-                LMS_BASE_URL: process.env.LMS_BASE_URL,
-                SITE_NAME: process.env.SITE_NAME,
-                LOGIN_URL: process.env.LOGIN_URL,
-                LOGOUT_URL: process.env.LOGOUT_URL,
-                LOGO_URL: process.env.LOGO_URL,
-              },
-            }}
-          >
-            <Header />
-          </AppContext.Provider>
-        </IntlProvider>
-      </ResponsiveContext.Provider>
-    );
+    const contextValue = {
+      authenticatedUser: null,
+      config: {
+        LMS_BASE_URL: process.env.LMS_BASE_URL,
+        SITE_NAME: process.env.SITE_NAME,
+        LOGIN_URL: process.env.LOGIN_URL,
+        LOGOUT_URL: process.env.LOGOUT_URL,
+        LOGO_URL: process.env.LOGO_URL,
+      },
+    };
+    const component = <HeaderComponent width={{ width: 1280 }} contextValue={contextValue} />;

    const wrapper = TestRenderer.create(component);

@@ -35,31 +53,22 @@ describe('<Header />', () => {
  });

  it('renders correctly for authenticated desktop', () => {
-    const component = (
-      <ResponsiveContext.Provider value={{ width: 1280 }}>
-        <IntlProvider locale="en" messages={{}}>
-          <AppContext.Provider
-            value={{
-              authenticatedUser: {
-                userId: 'abc123',
-                username: 'edX',
-                roles: [],
-                administrator: false,
-              },
-              config: {
-                LMS_BASE_URL: process.env.LMS_BASE_URL,
-                SITE_NAME: process.env.SITE_NAME,
-                LOGIN_URL: process.env.LOGIN_URL,
-                LOGOUT_URL: process.env.LOGOUT_URL,
-                LOGO_URL: process.env.LOGO_URL,
-              },
-            }}
-          >
-            <Header />
-          </AppContext.Provider>
-        </IntlProvider>
-      </ResponsiveContext.Provider>
-    );
+    const contextValue = {
+      authenticatedUser: {
+        userId: 'abc123',
+        username: 'edX',
+        roles: [],
+        administrator: false,
+      },
+      config: {
+        LMS_BASE_URL: process.env.LMS_BASE_URL,
+        SITE_NAME: process.env.SITE_NAME,
+        LOGIN_URL: process.env.LOGIN_URL,
+        LOGOUT_URL: process.env.LOGOUT_URL,
+        LOGO_URL: process.env.LOGO_URL,
+      },
+    };
+    const component = <HeaderComponent width={{ width: 1280 }} contextValue={contextValue} />;

    const wrapper = TestRenderer.create(component);

@@ -67,26 +76,17 @@ describe('<Header />', () => {
  });

  it('renders correctly for anonymous mobile', () => {
-    const component = (
-      <ResponsiveContext.Provider value={{ width: 500 }}>
-        <IntlProvider locale="en" messages={{}}>
-          <AppContext.Provider
-            value={{
-              authenticatedUser: null,
-              config: {
-                LMS_BASE_URL: process.env.LMS_BASE_URL,
-                SITE_NAME: process.env.SITE_NAME,
-                LOGIN_URL: process.env.LOGIN_URL,
-                LOGOUT_URL: process.env.LOGOUT_URL,
-                LOGO_URL: process.env.LOGO_URL,
-              },
-            }}
-          >
-            <Header />
-          </AppContext.Provider>
-        </IntlProvider>
-      </ResponsiveContext.Provider>
-    );
+    const contextValue = {
+      authenticatedUser: null,
+      config: {
+        LMS_BASE_URL: process.env.LMS_BASE_URL,
+        SITE_NAME: process.env.SITE_NAME,
+        LOGIN_URL: process.env.LOGIN_URL,
+        LOGOUT_URL: process.env.LOGOUT_URL,
+        LOGO_URL: process.env.LOGO_URL,
+      },
+    };
+    const component = <HeaderComponent width={{ width: 500 }} contextValue={contextValue} />;

    const wrapper = TestRenderer.create(component);

@@ -94,31 +94,22 @@ describe('<Header />', () => {
  });

  it('renders correctly for authenticated mobile', () => {
-    const component = (
-      <ResponsiveContext.Provider value={{ width: 500 }}>
-        <IntlProvider locale="en" messages={{}}>
-          <AppContext.Provider
-            value={{
-              authenticatedUser: {
-                userId: 'abc123',
-                username: 'edX',
-                roles: [],
-                administrator: false,
-              },
-              config: {
-                LMS_BASE_URL: process.env.LMS_BASE_URL,
-                SITE_NAME: process.env.SITE_NAME,
-                LOGIN_URL: process.env.LOGIN_URL,
-                LOGOUT_URL: process.env.LOGOUT_URL,
-                LOGO_URL: process.env.LOGO_URL,
-              },
-            }}
-          >
-            <Header />
-          </AppContext.Provider>
-        </IntlProvider>
-      </ResponsiveContext.Provider>
-    );
+    const contextValue = {
+      authenticatedUser: {
+        userId: 'abc123',
+        username: 'edX',
+        roles: [],
+        administrator: false,
+      },
+      config: {
+        LMS_BASE_URL: process.env.LMS_BASE_URL,
+        SITE_NAME: process.env.SITE_NAME,
+        LOGIN_URL: process.env.LOGIN_URL,
+        LOGOUT_URL: process.env.LOGOUT_URL,
+        LOGO_URL: process.env.LOGO_URL,
+      },
+    };
+    const component = <HeaderComponent width={{ width: 500 }} contextValue={contextValue} />;

    const wrapper = TestRenderer.create(component);

--- a/src/Icons.jsx
+++ b/src/Icons.jsx
@@ -1,6 +1,6 @@
 import React from 'react';

-export const MenuIcon = props => (
+export const MenuIcon = (props) => (
  <svg
    width="24px"
    height="24px"
@@ -14,7 +14,7 @@ export const MenuIcon = props => (
  </svg>
 );

-export const AvatarIcon = props => (
+export const AvatarIcon = (props) => (
  <svg
    width="24px"
    height="24px"
@@ -29,7 +29,7 @@ export const AvatarIcon = props => (
  </svg>
 );

-export const CaretIcon = props => (
+export const CaretIcon = (props) => (
  <svg
    width="16px"
    height="16px"
--- a/src/Logo.jsx
+++ b/src/Logo.jsx
@@ -1,29 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-function Logo({ src, alt, ...attributes }) {
-  return (
-    <img src={src} alt={alt} {...attributes} />
-  );
-}
+const Logo = ({ src, alt, ...attributes }) => (
+  <img src={src} alt={alt} {...attributes} />
+);

 Logo.propTypes = {
  src: PropTypes.string.isRequired,
  alt: PropTypes.string.isRequired,
 };

-function LinkedLogo({
+const LinkedLogo = ({
  href,
  src,
  alt,
  ...attributes
-}) {
-  return (
-    <a href={href} {...attributes}>
-      <img className="d-block" src={src} alt={alt} />
-    </a>
-  );
-}
+}) => (
+  <a href={href} {...attributes}>
+    <img className="d-block" src={src} alt={alt} />
+  </a>
+);

 LinkedLogo.propTypes = {
  href: PropTypes.string.isRequired,
--- a/src/Menu/Menu.jsx
+++ b/src/Menu/Menu.jsx
@@ -2,12 +2,10 @@ import React from 'react';
 import { CSSTransition } from 'react-transition-group';
 import PropTypes from 'prop-types';

-function MenuTrigger({ tag, className, ...attributes }) {
-  return React.createElement(tag, {
-    className: `menu-trigger ${className}`,
-    ...attributes,
-  });
-}
+const MenuTrigger = ({ tag, className, ...attributes }) => React.createElement(tag, {
+  className: `menu-trigger ${className}`,
+  ...attributes,
+});
 MenuTrigger.propTypes = {
  tag: PropTypes.string,
  className: PropTypes.string,
@@ -18,12 +16,10 @@ MenuTrigger.defaultProps = {
 };
 const MenuTriggerType = <MenuTrigger />.type;

-function MenuContent({ tag, className, ...attributes }) {
-  return React.createElement(tag, {
-    className: ['menu-content', className].join(' '),
-    ...attributes,
-  });
-}
+const MenuContent = ({ tag, className, ...attributes }) => React.createElement(tag, {
+  className: ['menu-content', className].join(' '),
+  ...attributes,
+});
 MenuContent.propTypes = {
  tag: PropTypes.string,
  className: PropTypes.string,
--- a/src/Notifications/NotificationRowItem.jsx
+++ b/src/Notifications/NotificationRowItem.jsx
@@ -0,0 +1,71 @@
+import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import PropTypes from 'prop-types';
+import { Icon } from '@edx/paragon';
+import { Link } from 'react-router-dom';
+import * as timeago from 'timeago.js';
+import { getIconByType } from './utils';
+import { markNotificationsAsRead } from './data/thunks';
+import messages from './messages';
+import timeLocale from '../common/time-locale';
+
+const NotificationRowItem = ({
+  id, type, contentUrl, content, courseName, createdAt, lastRead,
+}) => {
+  timeago.register('time-locale', timeLocale);
+  const intl = useIntl();
+  const dispatch = useDispatch();
+
+  const handleMarkAsRead = useCallback(() => {
+    dispatch(markNotificationsAsRead(id));
+  }, [dispatch, id]);
+
+  const { icon: iconComponent, class: iconClass } = getIconByType(type);
+
+  return (
+    <Link
+      target="_blank"
+      className="d-flex mb-2 align-items-center text-decoration-none"
+      to={contentUrl}
+      onClick={handleMarkAsRead}
+    >
+      <Icon src={iconComponent} className={`${iconClass} mr-4 notification-icon`} />
+      <div className="d-flex w-100">
+        <div className="d-flex align-items-center w-100">
+          <div className="py-10px w-100 px-0 cursor-pointer">
+            <span
+              className="line-height-24 text-gray-700 mb-2 notification-item-content overflow-hidden content"
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML={{ __html: content }}
+            />
+            <div className="py-0 d-flex">
+              <span className="font-size-12 text-gray-500 line-height-20">
+                <span>{courseName}</span>
+                <span className="text-light-700 px-1.5">{intl.formatMessage(messages.fullStop)}</span>
+                <span>{timeago.format(createdAt, 'time-locale')}</span>
+              </span>
+            </div>
+          </div>
+          {!lastRead && (
+            <div className="d-flex py-1.5 px-1.5 ml-2 cursor-pointer">
+              <span className="bg-brand-500 rounded unread" />
+            </div>
+          )}
+        </div>
+      </div>
+    </Link>
+  );
+};
+
+NotificationRowItem.propTypes = {
+  id: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  contentUrl: PropTypes.string.isRequired,
+  content: PropTypes.node.isRequired,
+  courseName: PropTypes.string.isRequired,
+  createdAt: PropTypes.string.isRequired,
+  lastRead: PropTypes.string.isRequired,
+};
+
+export default React.memo(NotificationRowItem);
--- a/src/Notifications/NotificationSections.jsx
+++ b/src/Notifications/NotificationSections.jsx
@@ -0,0 +1,81 @@
+import React, { useCallback, useMemo } from 'react';
+import { Button } from '@edx/paragon';
+import { useDispatch, useSelector } from 'react-redux';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import isEmpty from 'lodash/isEmpty';
+import messages from './messages';
+import NotificationRowItem from './NotificationRowItem';
+import { markAllNotificationsAsRead } from './data/thunks';
+import { selectNotificationsByIds, selectPaginationData, selectSelectedAppName } from './data/selectors';
+import { splitNotificationsByTime } from './utils';
+import { updatePaginationRequest } from './data/slice';
+
+const NotificationSections = () => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const selectedAppName = useSelector(selectSelectedAppName());
+  const notifications = useSelector(selectNotificationsByIds(selectedAppName));
+  const { currentPage, numPages } = useSelector(selectPaginationData());
+  const { today = [], earlier = [] } = useMemo(
+    () => splitNotificationsByTime(notifications),
+    [notifications],
+  );
+
+  const handleMarkAllAsRead = useCallback(() => {
+    dispatch(markAllNotificationsAsRead(selectedAppName));
+  }, [dispatch, selectedAppName]);
+
+  const updatePagination = useCallback(() => {
+    dispatch(updatePaginationRequest());
+  }, [dispatch]);
+
+  const renderNotificationSection = (section, items) => {
+    if (isEmpty(items)) { return null; }
+
+    return (
+      <div className="pb-2">
+        <div className="d-flex justify-content-between align-items-center py-10px mb-2">
+          <span className="text-gray-500 line-height-10">
+            {section === 'today' && intl.formatMessage(messages.notificationTodayHeading)}
+            {section === 'earlier' && intl.formatMessage(messages.notificationEarlierHeading)}
+          </span>
+          {notifications?.length > 0 && (section === 'earlier' ? today.length === 0 : true) && (
+            <Button
+              variant="link"
+              className="text-info-500 font-size-14 line-height-10 text-decoration-none p-0 border-0"
+              onClick={handleMarkAllAsRead}
+            >
+              {intl.formatMessage(messages.notificationMarkAsRead)}
+            </Button>
+          )}
+        </div>
+        {items.map((notification) => (
+          <NotificationRowItem
+            key={notification.id}
+            id={notification.id}
+            type={notification.type}
+            contentUrl={notification.contentUrl}
+            content={notification.content}
+            courseName={notification.courseName}
+            createdAt={notification.createdAt}
+            lastRead={notification.lastRead}
+          />
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <div className="mt-4 px-4">
+      {renderNotificationSection('today', today)}
+      {renderNotificationSection('earlier', earlier)}
+      {currentPage < numPages && (
+        <Button variant="primary" className="w-100 bg-primary-500" onClick={updatePagination}>
+          {intl.formatMessage(messages.loadMoreNotifications)}
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default React.memo(NotificationSections);
--- a/src/Notifications/NotificationTabs.jsx
+++ b/src/Notifications/NotificationTabs.jsx
@@ -0,0 +1,52 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Tab, Tabs } from '@edx/paragon';
+import NotificationSections from './NotificationSections';
+import { fetchNotificationList, markNotificationsAsSeen } from './data/thunks';
+import {
+  selectNotificationTabs, selectNotificationTabsCount, selectPaginationData, selectSelectedAppName,
+} from './data/selectors';
+import { updateAppNameRequest } from './data/slice';
+
+const NotificationTabs = () => {
+  const dispatch = useDispatch();
+  const selectedAppName = useSelector(selectSelectedAppName());
+  const notificationUnseenCounts = useSelector(selectNotificationTabsCount());
+  const notificationTabs = useSelector(selectNotificationTabs());
+  const { currentPage } = useSelector(selectPaginationData());
+
+  useEffect(() => {
+    dispatch(fetchNotificationList({ appName: selectedAppName, page: currentPage, pageSize: 10 }));
+    if (selectedAppName) { dispatch(markNotificationsAsSeen(selectedAppName)); }
+  }, [currentPage, selectedAppName]);
+
+  const handleActiveTab = useCallback((appName) => {
+    dispatch(updateAppNameRequest({ appName }));
+  }, []);
+
+  const tabArray = useMemo(() => notificationTabs?.map((appName) => (
+    <Tab
+      key={appName}
+      eventKey={appName}
+      title={appName}
+      notification={notificationUnseenCounts[appName]}
+      tabClassName="pt-0 pb-10px px-2.5 d-flex border-top-0 mb-0 align-items-center line-height-24 text-capitalize"
+    >
+      {appName === selectedAppName && (<NotificationSections />)}
+    </Tab>
+  )), [notificationUnseenCounts, selectedAppName, notificationTabs]);
+
+  return (
+    <Tabs
+      variant="tabs"
+      defaultActiveKey={selectedAppName}
+      onSelect={handleActiveTab}
+      className="px-2.5 text-primary-500"
+    >
+      {tabArray}
+    </Tabs>
+  );
+};
+
+export default React.memo(NotificationTabs);
--- a/src/Notifications/data/factories/index.js
+++ b/src/Notifications/data/factories/index.js
@@ -0,0 +1 @@
+import './notifications.factory';
--- a/src/Notifications/data/factories/notifications.factory.js
+++ b/src/Notifications/data/factories/notifications.factory.js
@@ -0,0 +1,22 @@
+import { Factory } from 'rosie';
+
+Factory.define('notificationsCount')
+  .attr('count', 45)
+  .attr('countByAppName', {
+    reminders: 10,
+    discussions: 20,
+    grades: 10,
+    authoring: 5,
+  })
+  .attr('showNotificationsTray', true);
+
+Factory.define('notification')
+  .sequence('id')
+  .attr('type', 'post')
+  .sequence('content', ['id'], (idx, notificationId) => `<p><b>User ${idx}</b> posts <b>Hello and welcome to SC0x
+  ${notificationId}!</b></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);
--- a/src/Notifications/data/api.js
+++ b/src/Notifications/data/api.js
@@ -0,0 +1,44 @@
+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 getNotificationsApiUrl = () => `${getConfig().LMS_BASE_URL}/api/notifications/`;
+export const markNotificationsSeenApiUrl = (appName) => `${getConfig().LMS_BASE_URL}/api/notifications/mark-notifications-unseen/${appName}/`;
+export const markNotificationAsReadApiUrl = () => `${getConfig().LMS_BASE_URL}/api/notifications/read/`;
+
+export async function getNotifications(appName, page, pageSize) {
+  const params = snakeCaseObject({ page, pageSize });
+  const { data } = await getAuthenticatedHttpClient().get(getNotificationsApiUrl(), { params });
+
+  const startIndex = (page - 1) * pageSize;
+  const endIndex = startIndex + pageSize;
+
+  const notifications = data.slice(startIndex, endIndex);
+  return { notifications, numPages: 2, currentPage: page };
+}
+
+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().put(markNotificationAsReadApiUrl(), { params });
+
+  return data;
+}
+
+export async function markNotificationRead(notificationId) {
+  const params = snakeCaseObject({ notificationId });
+  const { data } = await getAuthenticatedHttpClient().put(markNotificationAsReadApiUrl(), { params });
+
+  return { data, id: notificationId };
+}
--- a/src/Notifications/data/api.test.js
+++ b/src/Notifications/data/api.test.js
@@ -0,0 +1,150 @@
+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 {
+  getNotificationsApiUrl, getNotificationsCountApiUrl, markNotificationAsReadApiUrl, markNotificationsSeenApiUrl,
+  getNotificationCounts, getNotifications, markNotificationSeen, markAllNotificationRead, markNotificationRead,
+} from './api';
+
+import './__factories__';
+
+const notificationCountsApiUrl = getNotificationsCountApiUrl();
+const notificationsApiUrl = getNotificationsApiUrl();
+const markedAllNotificationsAsSeenApiUrl = markNotificationsSeenApiUrl('discussions');
+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.discussions).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.buildList('notification', 2, null, { createdDate: new Date().toISOString() })),
+    );
+
+    const { notifications } = await getNotifications('discussions', 1, 10);
+
+    expect(notifications).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 getNotifications({ page: 1, pageSize: 10 });
+    } 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('discussions');
+
+    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('discussions');
+    } 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.onPut(markedAllNotificationsAsReadApiUrl).reply(200, { message: 'Notifications marked read.' });
+
+    const { message } = await markAllNotificationRead('discussions');
+
+    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.onPut(markedAllNotificationsAsReadApiUrl).reply(statusCode, { message });
+    try {
+      await markAllNotificationRead('discussions');
+    } catch (error) {
+      expect(error.response.status).toEqual(statusCode);
+      expect(error.response.data.message).toEqual(message);
+    }
+  });
+
+  it('Successfully marked notification as read.', async () => {
+    axiosMock.onPut(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.onPut(markedAllNotificationsAsReadApiUrl).reply(statusCode, { message });
+    try {
+      await markAllNotificationRead(1);
+    } catch (error) {
+      expect(error.response.status).toEqual(statusCode);
+      expect(error.response.data.message).toEqual(message);
+    }
+  });
+});
--- a/src/Notifications/data/hook.js
+++ b/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;
+}
--- a/src/Notifications/data/index.js
+++ b/src/Notifications/data/index.js
@@ -0,0 +1 @@
+export * from './slice';
--- a/src/Notifications/data/notifications.json
+++ b/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"
+    }
+  ]
+}
--- a/src/Notifications/data/redux.test.js
+++ b/src/Notifications/data/redux.test.js
@@ -0,0 +1,164 @@
+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 {
+  getNotificationsApiUrl, getNotificationsCountApiUrl, markNotificationAsReadApiUrl, markNotificationsSeenApiUrl,
+} from './api';
+import {
+  fetchAppsNotificationCount, fetchNotificationList, markNotificationsAsRead, markAllNotificationsAsRead,
+  resetNotificationState, markNotificationsAsSeen,
+} from './thunks';
+
+import './__factories__';
+
+const notificationCountsApiUrl = getNotificationsCountApiUrl();
+const notificationsApiUrl = getNotificationsApiUrl();
+const markedAllNotificationsAsReadApiUrl = markNotificationAsReadApiUrl();
+const markedAllNotificationsAsSeenApiUrl = markNotificationsSeenApiUrl('discussions');
+
+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();
+
+    axiosMock.onGet(notificationCountsApiUrl).reply(200, (Factory.build('notificationsCount')));
+    axiosMock.onGet(notificationsApiUrl).reply(
+      200,
+      (Factory.buildList('notification', 2, null, { createdDate: new Date().toISOString() })),
+    );
+    await executeThunk(fetchAppsNotificationCount(), store.dispatch, store.getState);
+    await executeThunk(fetchNotificationList({ page: 1, pageSize: 10 }), store.dispatch, store.getState);
+  });
+
+  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('discussions');
+    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.count).toEqual(10);
+    expect(notifications.pagination.numPages).toEqual(1);
+    expect(notifications.pagination.currentPage).toEqual(1);
+    expect(notifications.pagination.nextPage).toBeNull();
+  });
+
+  it('Successfully loaded notifications list in the redux.', async () => {
+    const { notifications: { notifications } } = store.getState();
+
+    expect(Object.keys(notifications)).toHaveLength(2);
+  });
+
+  it.each([
+    { statusCode: 404, status: 'failed' },
+    { statusCode: 403, status: 'denied' },
+  ])('%s to load notifications list in the redux.', async ({ statusCode, status }) => {
+    axiosMock.onGet(notificationsApiUrl).reply(statusCode);
+    await executeThunk(fetchNotificationList({ page: 1, pageSize: 10 }), 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.discussions).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('discussions'), 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('discussions'), 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.onPut(markedAllNotificationsAsReadApiUrl).reply(200);
+    await executeThunk(markAllNotificationsAsRead('discussions'), 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.onPut(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.onPut(markedAllNotificationsAsReadApiUrl).reply(statusCode);
+    await executeThunk(markNotificationsAsRead(1), store.dispatch, store.getState);
+
+    const { notifications: { notificationStatus } } = store.getState();
+
+    expect(notificationStatus).toEqual(status);
+  });
+});
--- a/src/Notifications/data/selector.test.jsx
+++ b/src/Notifications/data/selector.test.jsx
@@ -0,0 +1,126 @@
+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 { getNotificationsApiUrl, getNotificationsCountApiUrl } from './api';
+import {
+  selectNotifications,
+  selectNotificationsByIds,
+  selectNotificationStatus,
+  selectNotificationTabs,
+  selectNotificationTabsCount,
+  selectPaginationData,
+  selectSelectedAppName,
+  selectSelectedAppNotificationIds,
+  selectShowNotificationTray,
+} from './selectors';
+import { fetchAppsNotificationCount, fetchNotificationList } from './thunks';
+
+import './__factories__';
+
+const notificationCountsApiUrl = getNotificationsCountApiUrl();
+const notificationsApiUrl = getNotificationsApiUrl();
+
+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();
+
+    axiosMock.onGet(notificationCountsApiUrl).reply(200, (Factory.build('notificationsCount')));
+    axiosMock.onGet(notificationsApiUrl).reply(
+      200,
+      (Factory.buildList('notification', 2, null, { createdDate: new Date().toISOString() })),
+    );
+    await executeThunk(fetchAppsNotificationCount(), store.dispatch, store.getState);
+    await executeThunk(fetchNotificationList({ page: 1, pageSize: 10 }), store.dispatch, store.getState);
+  });
+
+  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.discussions).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('discussions')(state);
+
+    expect(notificationIds).toHaveLength(2);
+  });
+
+  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(2);
+  });
+
+  it('Should return notifications from Ids.', async () => {
+    const state = store.getState();
+    const notifications = selectNotificationsByIds('discussions')(state);
+
+    expect(notifications).toHaveLength(2);
+  });
+
+  it('Should return selected app name.', async () => {
+    const state = store.getState();
+    const appName = selectSelectedAppName()(state);
+
+    expect(appName).toEqual('discussions');
+  });
+
+  it('Should return pagination data.', async () => {
+    const state = store.getState();
+    const paginationData = selectPaginationData()(state);
+
+    expect(paginationData.count).toEqual(10);
+    expect(paginationData.currentPage).toEqual(1);
+    expect(paginationData.numPages).toEqual(2);
+  });
+});
--- a/src/Notifications/data/selectors.js
+++ b/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;
--- a/src/Notifications/data/slice.js
+++ b/src/Notifications/data/slice.js
@@ -0,0 +1,154 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit';
+
+export const RequestStatus = {
+  IDLE: 'idle',
+  LOADING: 'in-progress',
+  LOADED: 'successful',
+  FAILED: 'failed',
+  DENIED: 'denied',
+};
+
+const initialState = {
+  notificationStatus: 'idle',
+  appName: 'discussions',
+  appsId: [],
+  apps: {},
+  notifications: {},
+  tabsCount: {},
+  showNotificationsTray: false,
+  pagination: {
+    count: 10,
+    numPages: 1,
+    currentPage: 1,
+    nextPage: null,
+  },
+};
+const slice = createSlice({
+  name: 'notifications',
+  initialState,
+  reducers: {
+    fetchNotificationDenied: (state) => {
+      state.notificationStatus = RequestStatus.DENIED;
+    },
+    fetchNotificationFailure: (state) => {
+      state.notificationStatus = RequestStatus.FAILED;
+    },
+    fetchNotificationRequest: (state) => {
+      state.notificationStatus = RequestStatus.LOADING;
+    },
+    fetchNotificationSuccess: (state, { payload }) => {
+      const {
+        newNotificationIds, notificationsKeyValuePair, numPages, currentPage,
+      } = payload;
+      const existingNotificationIds = state.apps[state.appName];
+
+      state.apps[state.appName] = Array.from(new Set([...existingNotificationIds, ...newNotificationIds]));
+      state.notifications = { ...state.notifications, ...notificationsKeyValuePair };
+      state.tabsCount.count -= state.tabsCount[state.appName];
+      state.tabsCount[state.appName] = 0;
+      state.notificationStatus = RequestStatus.LOADED;
+      state.pagination.numPages = numPages;
+      state.pagination.currentPage = currentPage;
+    },
+    fetchNotificationsCountDenied: (state) => {
+      state.notificationStatus = RequestStatus.DENIED;
+    },
+    fetchNotificationsCountFailure: (state) => {
+      state.notificationStatus = RequestStatus.FAILED;
+    },
+    fetchNotificationsCountRequest: (state) => {
+      state.notificationStatus = RequestStatus.LOADING;
+    },
+    fetchNotificationsCountSuccess: (state, { payload }) => {
+      const {
+        countByAppName, appIds, apps, count, showNotificationsTray,
+      } = payload;
+      state.tabsCount = { count, ...countByAppName };
+      state.appsId = appIds;
+      state.apps = apps;
+      state.showNotificationsTray = showNotificationsTray;
+      state.notificationStatus = RequestStatus.LOADED;
+    },
+    markNotificationsAsSeenRequest: (state) => {
+      state.notificationStatus = RequestStatus.LOADING;
+    },
+    markNotificationsAsSeenSuccess: (state) => {
+      state.notificationStatus = RequestStatus.LOADED;
+    },
+    markNotificationsAsSeenDenied: (state) => {
+      state.notificationStatus = RequestStatus.DENIED;
+    },
+    markNotificationsAsSeenFailure: (state) => {
+      state.notificationStatus = RequestStatus.FAILED;
+    },
+    markAllNotificationsAsReadRequest: (state) => {
+      state.notificationStatus = RequestStatus.LOADING;
+    },
+    markAllNotificationsAsReadSuccess: (state) => {
+      const updatedNotifications = Object.fromEntries(
+        Object.entries(state.notifications).map(([key, notification]) => [
+          key, { ...notification, lastRead: new Date().toISOString() },
+        ]),
+      );
+      state.notifications = updatedNotifications;
+      state.notificationStatus = RequestStatus.LOADED;
+    },
+    markAllNotificationsAsReadDenied: (state) => {
+      state.notificationStatus = RequestStatus.DENIED;
+    },
+    markAllNotificationsAsReadFailure: (state) => {
+      state.notificationStatus = RequestStatus.FAILED;
+    },
+    markNotificationsAsReadRequest: (state) => {
+      state.notificationStatus = RequestStatus.LOADING;
+    },
+    markNotificationsAsReadSuccess: (state, { payload }) => {
+      const date = new Date().toISOString();
+      state.notifications[payload.id] = { ...state.notifications[payload.id], lastRead: date };
+      state.notificationStatus = RequestStatus.LOADED;
+    },
+    markNotificationsAsReadDenied: (state) => {
+      state.notificationStatus = RequestStatus.DENIED;
+    },
+    markNotificationsAsReadFailure: (state) => {
+      state.notificationStatus = RequestStatus.FAILED;
+    },
+    resetNotificationStateRequest: () => initialState,
+    updateAppNameRequest: (state, { payload }) => {
+      state.appName = payload.appName;
+      state.pagination.currentPage = 1;
+    },
+    updatePaginationRequest: (state) => {
+      state.pagination.currentPage += 1;
+    },
+  },
+});
+
+export const {
+  fetchNotificationDenied,
+  fetchNotificationFailure,
+  fetchNotificationRequest,
+  fetchNotificationSuccess,
+  fetchNotificationsCountDenied,
+  fetchNotificationsCountFailure,
+  fetchNotificationsCountRequest,
+  fetchNotificationsCountSuccess,
+  markNotificationsAsSeenRequest,
+  markNotificationsAsSeenSuccess,
+  markNotificationsAsSeenFailure,
+  markNotificationsAsSeenDenied,
+  markAllNotificationsAsReadDenied,
+  markAllNotificationsAsReadRequest,
+  markAllNotificationsAsReadSuccess,
+  markAllNotificationsAsReadFailure,
+  markNotificationsAsReadDenied,
+  markNotificationsAsReadRequest,
+  markNotificationsAsReadSuccess,
+  markNotificationsAsReadFailure,
+  resetNotificationStateRequest,
+  updateAppNameRequest,
+  updatePaginationRequest,
+} = slice.actions;
+
+export const notificationsReducer = slice.reducer;
--- a/src/Notifications/data/thunks.js
+++ b/src/Notifications/data/thunks.js
@@ -0,0 +1,130 @@
+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 {
+  getNotifications, 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 = ({ notifications }) => {
+  const newNotificationIds = notifications.map(notification => notification.id.toString());
+  const notificationsKeyValuePair = notifications.reduce((acc, obj) => { acc[obj.id] = obj; return acc; }, {});
+  return {
+    newNotificationIds, notificationsKeyValuePair,
+  };
+};
+
+export const fetchNotificationList = ({ appName, page, pageSize }) => (
+  async (dispatch) => {
+    try {
+      dispatch(fetchNotificationRequest({ appName }));
+      const data = await getNotifications(appName, page, pageSize);
+      const normalisedData = normalizeNotifications((camelCaseObject(data)));
+      dispatch(fetchNotificationSuccess({ ...normalisedData, numPages: data.numPages, currentPage: data.currentPage }));
+    } catch (error) {
+      if (getHttpErrorStatus(error) === 403) {
+        dispatch(fetchNotificationDenied(appName));
+      } else {
+        dispatch(fetchNotificationFailure(appName));
+      }
+    }
+  }
+);
+
+export const fetchAppsNotificationCount = () => (
+  async (dispatch) => {
+    try {
+      dispatch(fetchNotificationsCountRequest());
+      const data = await getNotificationCounts();
+      const normalisedData = normalizeNotificationCounts((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()); }
+);
--- a/src/Notifications/index.jsx
+++ b/src/Notifications/index.jsx
@@ -0,0 +1,101 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, {
+  useCallback, useEffect, useRef, useState,
+} from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import classNames from 'classnames';
+import {
+  Badge, Icon, IconButton, OverlayTrigger, Popover,
+} from '@edx/paragon';
+import { NotificationsNone, Settings } from '@edx/paragon/icons';
+import { selectNotificationTabsCount } from './data/selectors';
+import { resetNotificationState } from './data/thunks';
+import { useIsOnLargeScreen, useIsOnMediumScreen } from './data/hook';
+import NotificationTabs from './NotificationTabs';
+import messages from './messages';
+
+const Notifications = () => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const popoverRef = useRef(null);
+  const buttonRef = useRef(null);
+  const [enableNotificationTray, setEnableNotificationTray] = useState(false);
+  const notificationCounts = useSelector(selectNotificationTabsCount());
+  const isOnMediumScreen = useIsOnMediumScreen();
+  const isOnLargeScreen = useIsOnLargeScreen();
+
+  const hideNotificationTray = useCallback(() => {
+    setEnableNotificationTray(prevState => !prevState);
+  }, []);
+
+  const handleClickOutsideNotificationTray = useCallback((event) => {
+    if (!popoverRef.current?.contains(event.target) && !buttonRef.current?.contains(event.target)) {
+      setEnableNotificationTray(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutsideNotificationTray);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutsideNotificationTray);
+      dispatch(resetNotificationState());
+    };
+  }, []);
+
+  return (
+    <OverlayTrigger
+      trigger="click"
+      key="bottom"
+      placement="bottom"
+      id="notificationTray"
+      show={enableNotificationTray}
+      overlay={(
+        <Popover
+          id="notificationTray"
+          data-testid="notificationTray"
+          className={classNames('overflow-auto rounded-0 border-0', {
+            'w-100': !isOnMediumScreen && !isOnLargeScreen,
+            'medium-screen': isOnMediumScreen,
+            'large-screen': isOnLargeScreen,
+          })}
+        >
+          <div ref={popoverRef}>
+            <Popover.Title as="h2" className="d-flex justify-content-between p-0 m-4 border-0 text-primary-500 font-size-18 line-height-24">
+              {intl.formatMessage(messages.notificationTitle)}
+              <Icon src={Settings} className="icon-size-20" />
+            </Popover.Title>
+            <Popover.Content className="notification-content p-0">
+              <NotificationTabs />
+            </Popover.Content>
+          </div>
+        </Popover>
+      )}
+    >
+      <div ref={buttonRef}>
+        <IconButton
+          isActive={enableNotificationTray}
+          alt="notification bell icon"
+          onClick={hideNotificationTray}
+          src={NotificationsNone}
+          iconAs={Icon}
+          variant="light"
+          iconClassNames="text-primary-500"
+          className="ml-4 mr-1 my-3 notification-button"
+        />
+        {notificationCounts?.count > 0 && (
+          <Badge
+            pill
+            variant="danger"
+            className="font-weight-normal px-1 notification-badge"
+          >
+            {notificationCounts.count}
+          </Badge>
+        )}
+      </div>
+    </OverlayTrigger>
+  );
+};
+
+export default Notifications;
--- a/src/Notifications/messages.js
+++ b/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;
--- a/src/Notifications/utils.js
+++ b/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' };
+};
--- a/src/StudioHeader.jsx
+++ b/src/StudioHeader.jsx
@@ -5,11 +5,17 @@ import { AppContext } from '@edx/frontend-platform/react';
 import {
  APP_CONFIG_INITIALIZED,
  ensureConfig,
+  getConfig,
  mergeConfig,
  subscribe,
 } from '@edx/frontend-platform';
+import { ActionRow } from '@edx/paragon';

-import DesktopHeader from './DesktopHeader';
+import { Menu, MenuTrigger, MenuContent } from './Menu';
+import Avatar from './Avatar';
+import { LinkedLogo, Logo } from './Logo';
+
+import { CaretIcon } from './Icons';

 import messages from './Header.messages';

@@ -28,7 +34,124 @@ subscribe(APP_CONFIG_INITIALIZED, () => {
  }, 'StudioHeader additional config');
 });

-function StudioHeader({ intl, mainMenu, appMenu }) {
+class StudioDesktopHeaderBase extends React.Component {
+  constructor(props) { // eslint-disable-line no-useless-constructor
+    super(props);
+  }
+
+  renderUserMenu() {
+    const {
+      userMenu,
+      avatar,
+      username,
+      intl,
+    } = this.props;
+
+    return (
+      <Menu transitionClassName="menu-dropdown" transitionTimeout={250}>
+        <MenuTrigger
+          tag="button"
+          aria-label={intl.formatMessage(messages['header.label.account.menu.for'], { username })}
+          className="btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
+        >
+          <Avatar size="1.5em" src={avatar} alt="" className="mr-2" />
+          {username} <CaretIcon role="img" aria-hidden focusable="false" />
+        </MenuTrigger>
+        <MenuContent className="mb-0 dropdown-menu show dropdown-menu-right pin-right shadow py-2">
+          {userMenu.map(({ type, href, content }) => (
+            <a className={`dropdown-${type}`} key={`${type}-${content}`} href={href}>{content}</a>
+          ))}
+        </MenuContent>
+      </Menu>
+    );
+  }
+
+  renderLoggedOutItems() {
+    const { loggedOutItems } = this.props;
+
+    return loggedOutItems.map((item, i, arr) => (
+      <a
+        key={`${item.type}-${item.content}`}
+        className={i < arr.length - 1 ? 'btn mr-2 btn-link' : 'btn mr-2 btn-outline-primary'}
+        href={item.href}
+      >
+        {item.content}
+      </a>
+    ));
+  }
+
+  render() {
+    const {
+      logo,
+      logoAltText,
+      logoDestination,
+      loggedIn,
+      intl,
+      actionRowContent,
+    } = this.props;
+    const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
+    const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'mw-100' : null;
+
+    return (
+      <header className="site-header-desktop">
+        <a className="nav-skip sr-only sr-only-focusable" href="#main">{intl.formatMessage(messages['header.label.skip.nav'])}</a>
+        <div className={`container-fluid ${logoClasses}`}>
+          <div className="nav-container position-relative d-flex align-items-center">
+            {logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} />}
+            <ActionRow>
+              {actionRowContent}
+              <nav
+                aria-label={intl.formatMessage(messages['header.label.secondary.nav'])}
+                className="nav secondary-menu-container align-items-center ml-auto"
+              >
+                {loggedIn ? this.renderUserMenu() : this.renderLoggedOutItems()}
+              </nav>
+            </ActionRow>
+          </div>
+        </div>
+      </header>
+    );
+  }
+}
+
+StudioDesktopHeaderBase.propTypes = {
+  userMenu: PropTypes.arrayOf(PropTypes.shape({
+    type: PropTypes.oneOf(['item', 'menu']),
+    href: PropTypes.string,
+    content: PropTypes.string,
+  })),
+  loggedOutItems: PropTypes.arrayOf(PropTypes.shape({
+    type: PropTypes.oneOf(['item', 'menu']),
+    href: PropTypes.string,
+    content: PropTypes.string,
+  })),
+  logo: PropTypes.string,
+  logoAltText: PropTypes.string,
+  logoDestination: PropTypes.string,
+  avatar: PropTypes.string,
+  username: PropTypes.string,
+  loggedIn: PropTypes.bool,
+  actionRowContent: PropTypes.element,
+
+  // i18n
+  intl: intlShape.isRequired,
+};
+
+StudioDesktopHeaderBase.defaultProps = {
+  userMenu: [],
+  loggedOutItems: [],
+  logo: null,
+  logoAltText: null,
+  logoDestination: null,
+  avatar: null,
+  username: null,
+  loggedIn: false,
+  actionRowContent: null,
+};
+
+const StudioDesktopHeader = injectIntl(StudioDesktopHeaderBase);
+
+const StudioHeader = ({ intl, actionRowContent }) => {
  const { authenticatedUser, config } = useContext(AppContext);

  const userMenu = authenticatedUser === null ? [] : [
@@ -56,44 +179,22 @@ function StudioHeader({ intl, mainMenu, appMenu }) {
    loggedIn: authenticatedUser !== null,
    username: authenticatedUser !== null ? authenticatedUser.username : null,
    avatar: authenticatedUser !== null ? authenticatedUser.avatar : null,
-    mainMenu,
+    actionRowContent,
    userMenu,
-    appMenu,
    loggedOutItems: [],
  };

-  return <DesktopHeader {...props} />;
-}
+  return <StudioDesktopHeader {...props} />;
+};

 StudioHeader.propTypes = {
  intl: intlShape.isRequired,
-  appMenu: PropTypes.shape(
-    {
-      content: PropTypes.string,
-      href: PropTypes.string,
-      menuItems: PropTypes.arrayOf(
-        PropTypes.shape({
-          type: PropTypes.string,
-          href: PropTypes.string,
-          content: PropTypes.string,
-        }),
-      ),
-    },
-  ),
-  mainMenu: PropTypes.arrayOf(
-    PropTypes.shape(
-      {
-        type: PropTypes.string,
-        href: PropTypes.string,
-        content: PropTypes.string,
-      },
-    ),
-  ),
+  actionRowContent: PropTypes.element,
 };

 StudioHeader.defaultProps = {
-  appMenu: null,
-  mainMenu: [],
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  actionRowContent: <></>,
 };

 export default injectIntl(StudioHeader);
--- a/src/StudioHeader.test.jsx
+++ b/src/StudioHeader.test.jsx
@@ -1,133 +1,106 @@
-import React from 'react';
+/* eslint-disable react/prop-types */
+import React, { useMemo } from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import TestRenderer from 'react-test-renderer';
+import { Link } from 'react-router-dom';
 import { AppContext } from '@edx/frontend-platform/react';
+import {
+  ActionRow,
+  Button,
+  Dropdown,
+} from '@edx/paragon';

 import { StudioHeader } from './index';

+const StudioHeaderComponent = ({ contextValue, appMenu = null, mainMenu = [] }) => (
+  <IntlProvider locale="en" messages={{}}>
+    <AppContext.Provider
+      value={contextValue}
+    >
+      <StudioHeader appMenu={appMenu} mainMenu={mainMenu} />
+    </AppContext.Provider>
+  </IntlProvider>
+);
+
+const StudioHeaderContext = ({ actionRowContent = null }) => {
+  const headerContextValue = useMemo(() => ({
+    authenticatedUser: {
+      userId: 'abc123',
+      username: 'edX',
+      roles: [],
+      administrator: false,
+    },
+    config: {
+      STUDIO_BASE_URL: process.env.STUDIO_BASE_URL,
+      SITE_NAME: process.env.SITE_NAME,
+      LOGIN_URL: process.env.LOGIN_URL,
+      LOGOUT_URL: process.env.LOGOUT_URL,
+      LOGO_URL: process.env.LOGO_URL,
+    },
+  }), []);
+  return (
+    <IntlProvider locale="en" messages={{}}>
+      <AppContext.Provider
+        value={headerContextValue}
+      >
+        <StudioHeader actionRowContent={actionRowContent} />
+      </AppContext.Provider>
+    </IntlProvider>
+  );
+};
+
 describe('<StudioHeader />', () => {
  it('renders correctly', () => {
-    const component = (
-      <IntlProvider locale="en" messages={{}}>
-        <AppContext.Provider
-          value={{
-            authenticatedUser: {
-              userId: 'abc123',
-              username: 'edX',
-              roles: [],
-              administrator: false,
-            },
-            config: {
-              STUDIO_BASE_URL: process.env.STUDIO_BASE_URL,
-              SITE_NAME: process.env.SITE_NAME,
-              LOGIN_URL: process.env.LOGIN_URL,
-              LOGOUT_URL: process.env.LOGOUT_URL,
-              LOGO_URL: process.env.LOGO_URL,
-            },
-          }}
-        >
-          <StudioHeader />
-        </AppContext.Provider>
-      </IntlProvider>
-    );
-
-    const wrapper = TestRenderer.create(component);
-
-    expect(wrapper.toJSON()).toMatchSnapshot();
-  });
-
-  it('renders correctly with the optional app menu', () => {
-    const appMenu = {
-      content: 'App Menu',
-      menuItems: [
-        {
-          type: 'dropdown',
-          href: 'https://menu-href-url.org',
-          content: 'Content 1',
-        },
-        {
-          type: 'dropdown',
-          href: 'https://menu-href-url.org',
-          content: 'Content 2',
-        },
-        {
-          type: 'dropdown',
-          href: 'https://menu-href-url.org',
-          content: 'Content 3',
-        },
-      ],
+    const contextValue = {
+      authenticatedUser: {
+        userId: 'abc123',
+        username: 'edX',
+        roles: [],
+        administrator: false,
+      },
+      config: {
+        STUDIO_BASE_URL: process.env.STUDIO_BASE_URL,
+        SITE_NAME: process.env.SITE_NAME,
+        LOGIN_URL: process.env.LOGIN_URL,
+        LOGOUT_URL: process.env.LOGOUT_URL,
+        LOGO_URL: process.env.LOGO_URL,
+      },
    };
-    const component = (
-      <IntlProvider locale="en" messages={{}}>
-        <AppContext.Provider
-          value={{
-            authenticatedUser: {
-              userId: 'abc123',
-              username: 'edX',
-              roles: [],
-              administrator: false,
-            },
-            config: {
-              STUDIO_BASE_URL: process.env.STUDIO_BASE_URL,
-              SITE_NAME: process.env.SITE_NAME,
-              LOGIN_URL: process.env.LOGIN_URL,
-              LOGOUT_URL: process.env.LOGOUT_URL,
-              LOGO_URL: process.env.LOGO_URL,
-            },
-          }}
-        >
-          <StudioHeader appMenu={appMenu} />
-        </AppContext.Provider>
-      </IntlProvider>
-    );
+
+    const component = <StudioHeaderComponent contextValue={contextValue} />;

    const wrapper = TestRenderer.create(component);

    expect(wrapper.toJSON()).toMatchSnapshot();
  });

-  it('renders correctly with the optional main menu', () => {
-    const mainMenu = [
-      {
-        type: 'dropdown',
-        href: 'https://menu-href-url.org',
-        content: 'Content 1',
-      },
-      {
-        type: 'dropdown',
-        href: 'https://menu-href-url.org',
-        content: 'Content 2',
-      },
-      {
-        type: 'dropdown',
-        href: 'https://menu-href-url.org',
-        content: 'Content 3',
-      },
-    ];
-    const component = (
-      <IntlProvider locale="en" messages={{}}>
-        <AppContext.Provider
-          value={{
-            authenticatedUser: {
-              userId: 'abc123',
-              username: 'edX',
-              roles: [],
-              administrator: false,
-            },
-            config: {
-              STUDIO_BASE_URL: process.env.STUDIO_BASE_URL,
-              SITE_NAME: process.env.SITE_NAME,
-              LOGIN_URL: process.env.LOGIN_URL,
-              LOGOUT_URL: process.env.LOGOUT_URL,
-              LOGO_URL: process.env.LOGO_URL,
-            },
-          }}
-        >
-          <StudioHeader mainMenu={mainMenu} />
-        </AppContext.Provider>
-      </IntlProvider>
+  it('renders correctly with optional action row content', () => {
+    const actionRowContent = (
+      <>
+        <Dropdown>
+          <Dropdown.Toggle variant="outline-primary" id="library-header-menu-dropdown">
+            Settings
+          </Dropdown.Toggle>
+          <Dropdown.Menu>
+            <Dropdown.Item as={Link} to="#">Dropdown Item 1</Dropdown.Item>
+            <Dropdown.Item as={Link} to="#">Dropdown Item 2</Dropdown.Item>
+            <Dropdown.Item as={Link} to="#">Dropdown Item 3</Dropdown.Item>
+          </Dropdown.Menu>
+        </Dropdown>
+        <ActionRow.Spacer />
+        <Button
+          variant="tertiary"
+          href="#"
+          rel="noopener noreferrer"
+          target="_blank"
+          title="Help Button"
+        >Help
+        </Button>
+      </>
    );

+    const component = <StudioHeaderContext actionRowContent={actionRowContent} />;
+
    const wrapper = TestRenderer.create(component);

    expect(wrapper.toJSON()).toMatchSnapshot();
--- a/src/snapshots/StudioHeader.test.jsx.snap
+++ b/src/snapshots/StudioHeader.test.jsx.snap
@@ -21,83 +21,83 @@ exports[`<StudioHeader /> renders correctly 1`] = `
        className="logo"
        src="https://edx-cdn.org/v3/default/logo.svg"
      />
-      <nav
-        aria-label="Main"
-        className="nav main-nav"
-      />
-      <nav
-        aria-label="Secondary"
-        className="nav secondary-menu-container align-items-center ml-auto"
+      <div
+        className="pgn__action-row"
      >
-        <div
-          className="menu null"
-          onKeyDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
+        <nav
+          aria-label="Secondary"
+          className="nav secondary-menu-container align-items-center ml-auto"
        >
-          <button
-            aria-expanded={false}
-            aria-haspopup="menu"
-            aria-label="Account menu for edX"
-            className="menu-trigger btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
-            onClick={[Function]}
+          <div
+            className="menu null"
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
          >
-            <span
-              className="avatar overflow-hidden d-inline-flex rounded-circle mr-2"
-              style={
-                Object {
-                  "height": "1.5em",
-                  "width": "1.5em",
-                }
-              }
+            <button
+              aria-expanded={false}
+              aria-haspopup="menu"
+              aria-label="Account menu for edX"
+              className="menu-trigger btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
+              onClick={[Function]}
            >
-              <svg
-                aria-hidden={true}
-                focusable="false"
-                height="24px"
-                role="img"
+              <span
+                className="avatar overflow-hidden d-inline-flex rounded-circle mr-2"
                style={
                  Object {
                    "height": "1.5em",
                    "width": "1.5em",
                  }
                }
+              >
+                <svg
+                  aria-hidden={true}
+                  focusable="false"
+                  height="24px"
+                  role="img"
+                  style={
+                    Object {
+                      "height": "1.5em",
+                      "width": "1.5em",
+                    }
+                  }
+                  version="1.1"
+                  viewBox="0 0 24 24"
+                  width="24px"
+                >
+                  <path
+                    d="M4.10255106,18.1351061 C4.7170266,16.0581859 8.01891846,14.4720277 12,14.4720277 C15.9810815,14.4720277 19.2829734,16.0581859 19.8974489,18.1351061 C21.215206,16.4412566 22,14.3122775 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,14.3122775 2.78479405,16.4412566 4.10255106,18.1351061 Z M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z M12,13 C9.790861,13 8,11.209139 8,9 C8,6.790861 9.790861,5 12,5 C14.209139,5 16,6.790861 16,9 C16,11.209139 14.209139,13 12,13 Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+              edX
+               
+              <svg
+                aria-hidden={true}
+                focusable="false"
+                height="16px"
+                role="img"
                version="1.1"
-                viewBox="0 0 24 24"
-                width="24px"
+                viewBox="0 0 16 16"
+                width="16px"
              >
                <path
-                  d="M4.10255106,18.1351061 C4.7170266,16.0581859 8.01891846,14.4720277 12,14.4720277 C15.9810815,14.4720277 19.2829734,16.0581859 19.8974489,18.1351061 C21.215206,16.4412566 22,14.3122775 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,14.3122775 2.78479405,16.4412566 4.10255106,18.1351061 Z M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z M12,13 C9.790861,13 8,11.209139 8,9 C8,6.790861 9.790861,5 12,5 C14.209139,5 16,6.790861 16,9 C16,11.209139 14.209139,13 12,13 Z"
+                  d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
                  fill="currentColor"
+                  transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
                />
              </svg>
-            </span>
-            edX
-             
-            <svg
-              aria-hidden={true}
-              focusable="false"
-              height="16px"
-              role="img"
-              version="1.1"
-              viewBox="0 0 16 16"
-              width="16px"
-            >
-              <path
-                d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
-                fill="currentColor"
-                transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
-              />
-            </svg>
-          </button>
-        </div>
-      </nav>
+            </button>
+          </div>
+        </nav>
+      </div>
    </div>
  </div>
 </header>
 `;

-exports[`<StudioHeader /> renders correctly with the optional app menu 1`] = `
+exports[`<StudioHeader /> renders correctly with optional action row content 1`] = `
 <header
  className="site-header-desktop"
 >
@@ -118,307 +118,108 @@ exports[`<StudioHeader /> renders correctly with the optional app menu 1`] = `
        className="logo"
        src="https://edx-cdn.org/v3/default/logo.svg"
      />
-      <nav
-        aria-label="Main"
-        className="nav main-nav"
-      />
-      <nav
-        aria-label="App"
-        className="nav app-nav"
+      <div
+        className="pgn__action-row"
      >
        <div
-          className="menu null"
-          onKeyDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <a
-            aria-expanded={false}
-            aria-haspopup="menu"
-            className="menu-trigger nav-link d-inline-flex align-items-center"
-            onClick={[Function]}
-          >
-            App Menu
-             
-            <svg
-              aria-hidden={true}
-              focusable="false"
-              height="16px"
-              role="img"
-              version="1.1"
-              viewBox="0 0 16 16"
-              width="16px"
-            >
-              <path
-                d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
-                fill="currentColor"
-                transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
-              />
-            </svg>
-          </a>
-        </div>
-      </nav>
-      <nav
-        aria-label="Secondary"
-        className="nav secondary-menu-container align-items-center ml-auto"
-      >
-        <div
-          className="menu null"
-          onKeyDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
+          className="pgn__dropdown pgn__dropdown-light dropdown"
+          data-testid="dropdown"
        >
          <button
            aria-expanded={false}
-            aria-haspopup="menu"
-            aria-label="Account menu for edX"
-            className="menu-trigger btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
+            aria-haspopup={true}
+            className="dropdown-toggle btn btn-outline-primary"
+            disabled={false}
+            id="library-header-menu-dropdown"
            onClick={[Function]}
+            type="button"
          >
-            <span
-              className="avatar overflow-hidden d-inline-flex rounded-circle mr-2"
-              style={
-                Object {
-                  "height": "1.5em",
-                  "width": "1.5em",
-                }
-              }
+            Settings
+          </button>
+        </div>
+        <span
+          className="pgn__action-row-spacer"
+        />
+        <a
+          className="btn btn-tertiary"
+          href="#"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          rel="noopener noreferrer"
+          role="button"
+          target="_blank"
+          title="Help Button"
+        >
+          Help
+        </a>
+        <nav
+          aria-label="Secondary"
+          className="nav secondary-menu-container align-items-center ml-auto"
+        >
+          <div
+            className="menu null"
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+          >
+            <button
+              aria-expanded={false}
+              aria-haspopup="menu"
+              aria-label="Account menu for edX"
+              className="menu-trigger btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
+              onClick={[Function]}
            >
-              <svg
-                aria-hidden={true}
-                focusable="false"
-                height="24px"
-                role="img"
+              <span
+                className="avatar overflow-hidden d-inline-flex rounded-circle mr-2"
                style={
                  Object {
                    "height": "1.5em",
                    "width": "1.5em",
                  }
                }
-                version="1.1"
-                viewBox="0 0 24 24"
-                width="24px"
              >
-                <path
-                  d="M4.10255106,18.1351061 C4.7170266,16.0581859 8.01891846,14.4720277 12,14.4720277 C15.9810815,14.4720277 19.2829734,16.0581859 19.8974489,18.1351061 C21.215206,16.4412566 22,14.3122775 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,14.3122775 2.78479405,16.4412566 4.10255106,18.1351061 Z M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z M12,13 C9.790861,13 8,11.209139 8,9 C8,6.790861 9.790861,5 12,5 C14.209139,5 16,6.790861 16,9 C16,11.209139 14.209139,13 12,13 Z"
-                  fill="currentColor"
-                />
-              </svg>
-            </span>
-            edX
-             
-            <svg
-              aria-hidden={true}
-              focusable="false"
-              height="16px"
-              role="img"
-              version="1.1"
-              viewBox="0 0 16 16"
-              width="16px"
-            >
-              <path
-                d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
-                fill="currentColor"
-                transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
-              />
-            </svg>
-          </button>
-        </div>
-      </nav>
-    </div>
-  </div>
-</header>
-`;
-
-exports[`<StudioHeader /> renders correctly with the optional main menu 1`] = `
-<header
-  className="site-header-desktop"
->
-  <a
-    className="nav-skip sr-only sr-only-focusable"
-    href="#main"
-  >
-    Skip to main content
-  </a>
-  <div
-    className="container-fluid null"
-  >
-    <div
-      className="nav-container position-relative d-flex align-items-center"
-    >
-      <img
-        alt="edX"
-        className="logo"
-        src="https://edx-cdn.org/v3/default/logo.svg"
-      />
-      <nav
-        aria-label="Main"
-        className="nav main-nav"
-      >
-        <div
-          className="menu nav-item"
-          onKeyDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <a
-            aria-expanded={false}
-            aria-haspopup="menu"
-            className="menu-trigger nav-link d-inline-flex align-items-center"
-            href="https://menu-href-url.org"
-            onClick={[Function]}
-          >
-            Content 1
-             
-            <svg
-              aria-hidden={true}
-              focusable="false"
-              height="16px"
-              role="img"
-              version="1.1"
-              viewBox="0 0 16 16"
-              width="16px"
-            >
-              <path
-                d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
-                fill="currentColor"
-                transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
-              />
-            </svg>
-          </a>
-        </div>
-        <div
-          className="menu nav-item"
-          onKeyDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <a
-            aria-expanded={false}
-            aria-haspopup="menu"
-            className="menu-trigger nav-link d-inline-flex align-items-center"
-            href="https://menu-href-url.org"
-            onClick={[Function]}
-          >
-            Content 2
-             
-            <svg
-              aria-hidden={true}
-              focusable="false"
-              height="16px"
-              role="img"
-              version="1.1"
-              viewBox="0 0 16 16"
-              width="16px"
-            >
-              <path
-                d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
-                fill="currentColor"
-                transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
-              />
-            </svg>
-          </a>
-        </div>
-        <div
-          className="menu nav-item"
-          onKeyDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <a
-            aria-expanded={false}
-            aria-haspopup="menu"
-            className="menu-trigger nav-link d-inline-flex align-items-center"
-            href="https://menu-href-url.org"
-            onClick={[Function]}
-          >
-            Content 3
-             
-            <svg
-              aria-hidden={true}
-              focusable="false"
-              height="16px"
-              role="img"
-              version="1.1"
-              viewBox="0 0 16 16"
-              width="16px"
-            >
-              <path
-                d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
-                fill="currentColor"
-                transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
-              />
-            </svg>
-          </a>
-        </div>
-      </nav>
-      <nav
-        aria-label="Secondary"
-        className="nav secondary-menu-container align-items-center ml-auto"
-      >
-        <div
-          className="menu null"
-          onKeyDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <button
-            aria-expanded={false}
-            aria-haspopup="menu"
-            aria-label="Account menu for edX"
-            className="menu-trigger btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
-            onClick={[Function]}
-          >
-            <span
-              className="avatar overflow-hidden d-inline-flex rounded-circle mr-2"
-              style={
-                Object {
-                  "height": "1.5em",
-                  "width": "1.5em",
-                }
-              }
-            >
+                <svg
+                  aria-hidden={true}
+                  focusable="false"
+                  height="24px"
+                  role="img"
+                  style={
+                    Object {
+                      "height": "1.5em",
+                      "width": "1.5em",
+                    }
+                  }
+                  version="1.1"
+                  viewBox="0 0 24 24"
+                  width="24px"
+                >
+                  <path
+                    d="M4.10255106,18.1351061 C4.7170266,16.0581859 8.01891846,14.4720277 12,14.4720277 C15.9810815,14.4720277 19.2829734,16.0581859 19.8974489,18.1351061 C21.215206,16.4412566 22,14.3122775 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,14.3122775 2.78479405,16.4412566 4.10255106,18.1351061 Z M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z M12,13 C9.790861,13 8,11.209139 8,9 C8,6.790861 9.790861,5 12,5 C14.209139,5 16,6.790861 16,9 C16,11.209139 14.209139,13 12,13 Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+              edX
+               
              <svg
                aria-hidden={true}
                focusable="false"
-                height="24px"
+                height="16px"
                role="img"
-                style={
-                  Object {
-                    "height": "1.5em",
-                    "width": "1.5em",
-                  }
-                }
                version="1.1"
-                viewBox="0 0 24 24"
-                width="24px"
+                viewBox="0 0 16 16"
+                width="16px"
              >
                <path
-                  d="M4.10255106,18.1351061 C4.7170266,16.0581859 8.01891846,14.4720277 12,14.4720277 C15.9810815,14.4720277 19.2829734,16.0581859 19.8974489,18.1351061 C21.215206,16.4412566 22,14.3122775 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,14.3122775 2.78479405,16.4412566 4.10255106,18.1351061 Z M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z M12,13 C9.790861,13 8,11.209139 8,9 C8,6.790861 9.790861,5 12,5 C14.209139,5 16,6.790861 16,9 C16,11.209139 14.209139,13 12,13 Z"
+                  d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
                  fill="currentColor"
+                  transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
                />
              </svg>
-            </span>
-            edX
-             
-            <svg
-              aria-hidden={true}
-              focusable="false"
-              height="16px"
-              role="img"
-              version="1.1"
-              viewBox="0 0 16 16"
-              width="16px"
-            >
-              <path
-                d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
-                fill="currentColor"
-                transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
-              />
-            </svg>
-          </button>
-        </div>
-      </nav>
+            </button>
+          </div>
+        </nav>
+      </div>
    </div>
  </div>
 </header>
--- a/src/common/time-locale.js
+++ b/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];
+}
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -1,34 +1,28 @@
 import arMessages from './messages/ar.json';
-
-import caMessages from './messages/ca.json';
-import heMessages from './messages/he.json';
-import idMessages from './messages/id.json';
-import plMessages from './messages/pl.json';
-import ruMessages from './messages/ru.json';
-import thMessages from './messages/th.json';
-import ukMessages from './messages/uk.json';
-
-// no need to import en messages-- they are in the defaultMessage field
-import es419Messages from './messages/es_419.json';
 import frMessages from './messages/fr.json';
-import kokrMessages from './messages/ko_KR.json';
-import ptbrMessages from './messages/pt_BR.json';
+import es419Messages from './messages/es_419.json';
 import zhcnMessages from './messages/zh_CN.json';
+import ptMessages from './messages/pt.json';
+import itMessages from './messages/it.json';
+import ukMessages from './messages/uk.json';
+import deMessages from './messages/de.json';
+import ruMessages from './messages/ru.json';
+import hiMessages from './messages/hi.json';
+import frCAMessages from './messages/fr_CA.json';
+// no need to import en messages-- they are in the defaultMessage field

 const messages = {
  ar: arMessages,
-  ca: caMessages,
-  he: heMessages,
-  id: idMessages,
-  pl: plMessages,
-  ru: ruMessages,
-  th: thMessages,
-  uk: ukMessages,
  'es-419': es419Messages,
  fr: frMessages,
  'zh-cn': zhcnMessages,
-  'ko-kr': kokrMessages,
-  'pt-br': ptbrMessages,
+  pt: ptMessages,
+  it: itMessages,
+  de: deMessages,
+  hi: hiMessages,
+  'fr-ca': frCAMessages,
+  ru: ruMessages,
+  uk: ukMessages,
 };

 export default messages;
--- a/src/i18n/messages/ar.json
+++ b/src/i18n/messages/ar.json
@@ -1,33 +1,39 @@
 {
  "general.register.sentenceCase": "التسجيل",
  "general.signIn.sentenceCase": "تسجيل الدخول",
-  "header.links.courses": "مساقات",
-  "header.links.programs": "برامج",
-  "header.links.content.search": "استكشف الجديد",
-  "header.links.schools": "المدارس والشركاء",
+  "header.links.courses": "المساقات",
+  "header.links.programs": "البرامج",
+  "header.links.content.search": "اكتشف الجديد",
+  "header.links.schools": "المدارس و الشركاء",
  "header.user.menu.dashboard": "لوحة المعلومات",
  "header.user.menu.profile": "الملف الشخصي",
-  "header.user.menu.account.settings": "حساب",
-  "header.user.menu.order.history": "سجل الطلبات",
+  "header.user.menu.account.settings": "الحساب",
+  "header.user.menu.order.history": "سجل الطلبيات",
  "header.user.menu.logout": "تسجيل الخروج",
  "header.user.menu.login": "تسجيل الدخول",
-  "header.user.menu.register": "تسجيل ",
-  "header.user.menu.studio.home": "Studio Home",
-  "header.user.menu.studio.maintenance": "Maintenance",
-  "header.label.account.nav": "حساب",
+  "header.user.menu.register": "التسجيل",
+  "header.user.menu.studio.home": "صفحة الاستوديو الرئيسية",
+  "header.user.menu.studio.maintenance": "الصيانة",
+  "header.label.account.nav": "الحساب",
  "header.label.account.menu": "قائمة الحساب",
-  "header.label.account.menu.for": "قائمة الحساب للمستخدم {username}",
-  "header.label.main.nav": "الرئيسية",
+  "header.label.account.menu.for": "قائمة حساب المستخدم {username}",
+  "header.label.main.nav": "القا|مة الرئيسية",
  "header.label.main.menu": "القائمة الرئيسية",
  "header.label.main.header": "الرئيسية",
-  "header.label.secondary.nav": "فرعي",
+  "header.label.secondary.nav": "القائمة الثانوية",
  "header.label.skip.nav": "التخطي إلى المحتوى الرئيسي",
-  "header.label.app.nav": "App",
+  "header.label.app.nav": "تطبيق",
  "header.menu.dashboard.label": "لوحة المعلومات",
-  "header.help.label": "مساعدة",
+  "header.help.label": "المساعدة",
  "header.menu.profile.label": "الملف الشخصي",
-  "header.menu.account.label": "حساب",
-  "header.menu.orderHistory.label": "سجل الطلبات",
+  "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"
 }
--- a/src/i18n/messages/ca.json
+++ b/src/i18n/messages/ca.json
@@ -1 +0,0 @@
-{}
--- a/src/i18n/messages/de.json
+++ b/src/i18n/messages/de.json
@@ -0,0 +1,39 @@
+{
+  "general.register.sentenceCase": "Register",
+  "general.signIn.sentenceCase": "Sign in",
+  "header.links.courses": "Courses",
+  "header.links.programs": "Programs",
+  "header.links.content.search": "Discover New",
+  "header.links.schools": "Schools & Partners",
+  "header.user.menu.dashboard": "Dashboard",
+  "header.user.menu.profile": "Profile",
+  "header.user.menu.account.settings": "Account",
+  "header.user.menu.order.history": "Order History",
+  "header.user.menu.logout": "Logout",
+  "header.user.menu.login": "Login",
+  "header.user.menu.register": "Sign Up",
+  "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.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.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",
+  "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"
+}
--- a/src/i18n/messages/es_419.json
+++ b/src/i18n/messages/es_419.json
@@ -12,8 +12,8 @@
  "header.user.menu.logout": "Cerrar sesión",
  "header.user.menu.login": "Login",
  "header.user.menu.register": "Registrarse",
-  "header.user.menu.studio.home": "Studio Home",
-  "header.user.menu.studio.maintenance": "Maintenance",
+  "header.user.menu.studio.home": "Inicio Studio",
+  "header.user.menu.studio.maintenance": "Mantenimiento",
  "header.label.account.nav": "Cuenta",
  "header.label.account.menu": "Menú de la cuenta",
  "header.label.account.menu.for": "Menú de la cuenta para {username}",
@@ -22,12 +22,18 @@
  "header.label.main.header": "Principal",
  "header.label.secondary.nav": "Secondary",
  "header.label.skip.nav": "Ir al contenido principal",
-  "header.label.app.nav": "App",
+  "header.label.app.nav": "Aplicación",
  "header.menu.dashboard.label": "Panel de Control",
  "header.help.label": "Ayuda",
  "header.menu.profile.label": "Perfil",
  "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": "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"
 }
--- a/src/i18n/messages/fr.json
+++ b/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"
 }
--- a/src/i18n/messages/fr_CA.json
+++ b/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"
 }
--- a/src/i18n/messages/he.json
+++ b/src/i18n/messages/he.json
@@ -1 +0,0 @@
-{}
--- a/src/i18n/messages/hi.json
+++ b/src/i18n/messages/hi.json
@@ -0,0 +1,39 @@
+{
+  "general.register.sentenceCase": "Register",
+  "general.signIn.sentenceCase": "Sign in",
+  "header.links.courses": "Courses",
+  "header.links.programs": "Programs",
+  "header.links.content.search": "Discover New",
+  "header.links.schools": "Schools & Partners",
+  "header.user.menu.dashboard": "Dashboard",
+  "header.user.menu.profile": "Profile",
+  "header.user.menu.account.settings": "Account",
+  "header.user.menu.order.history": "Order History",
+  "header.user.menu.logout": "Logout",
+  "header.user.menu.login": "Login",
+  "header.user.menu.register": "Sign Up",
+  "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.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.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",
+  "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"
+}
--- a/src/i18n/messages/id.json
+++ b/src/i18n/messages/id.json
@@ -1 +0,0 @@
-{}
--- a/src/i18n/messages/it.json
+++ b/src/i18n/messages/it.json
@@ -0,0 +1,39 @@
+{
+  "general.register.sentenceCase": "Register",
+  "general.signIn.sentenceCase": "Sign in",
+  "header.links.courses": "Courses",
+  "header.links.programs": "Programs",
+  "header.links.content.search": "Discover New",
+  "header.links.schools": "Schools & Partners",
+  "header.user.menu.dashboard": "Dashboard",
+  "header.user.menu.profile": "Profile",
+  "header.user.menu.account.settings": "Account",
+  "header.user.menu.order.history": "Order History",
+  "header.user.menu.logout": "Logout",
+  "header.user.menu.login": "Login",
+  "header.user.menu.register": "Sign Up",
+  "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.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.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",
+  "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"
+}
--- a/src/i18n/messages/ko_KR.json
+++ b/src/i18n/messages/ko_KR.json
@@ -1,2 +0,0 @@
-{
-}
--- a/src/i18n/messages/pl.json
+++ b/src/i18n/messages/pl.json
@@ -1 +0,0 @@
-{}
--- a/src/i18n/messages/pt.json
+++ b/src/i18n/messages/pt.json
@@ -0,0 +1,39 @@
+{
+  "general.register.sentenceCase": "Register",
+  "general.signIn.sentenceCase": "Sign in",
+  "header.links.courses": "Courses",
+  "header.links.programs": "Programs",
+  "header.links.content.search": "Discover New",
+  "header.links.schools": "Schools & Partners",
+  "header.user.menu.dashboard": "Dashboard",
+  "header.user.menu.profile": "Profile",
+  "header.user.menu.account.settings": "Account",
+  "header.user.menu.order.history": "Order History",
+  "header.user.menu.logout": "Logout",
+  "header.user.menu.login": "Login",
+  "header.user.menu.register": "Sign Up",
+  "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.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.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",
+  "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"
+}
--- a/src/i18n/messages/pt_BR.json
+++ b/src/i18n/messages/pt_BR.json
@@ -1,2 +0,0 @@
-{
-}
--- a/src/i18n/messages/ru.json
+++ b/src/i18n/messages/ru.json
@@ -1 +1,39 @@
-{}
+{
+  "general.register.sentenceCase": "Register",
+  "general.signIn.sentenceCase": "Sign in",
+  "header.links.courses": "Courses",
+  "header.links.programs": "Programs",
+  "header.links.content.search": "Discover New",
+  "header.links.schools": "Schools & Partners",
+  "header.user.menu.dashboard": "Dashboard",
+  "header.user.menu.profile": "Profile",
+  "header.user.menu.account.settings": "Account",
+  "header.user.menu.order.history": "Order History",
+  "header.user.menu.logout": "Logout",
+  "header.user.menu.login": "Login",
+  "header.user.menu.register": "Sign Up",
+  "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.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.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",
+  "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"
+}
--- a/src/i18n/messages/th.json
+++ b/src/i18n/messages/th.json
@@ -1 +0,0 @@
-{}
--- a/src/i18n/messages/uk.json
+++ b/src/i18n/messages/uk.json
@@ -1 +1,39 @@
-{}
+{
+  "general.register.sentenceCase": "Register",
+  "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",
+  "header.user.menu.profile": "Profile",
+  "header.user.menu.account.settings": "Account",
+  "header.user.menu.order.history": "Order History",
+  "header.user.menu.logout": "Logout",
+  "header.user.menu.login": "Login",
+  "header.user.menu.register": "Sign Up",
+  "header.user.menu.studio.home": "Studio Home",
+  "header.user.menu.studio.maintenance": "Maintenance",
+  "header.label.account.nav": "Account",
+  "header.label.account.menu": "Меню облікового запису",
+  "header.label.account.menu.for": "Меню облікового запису для {username}",
+  "header.label.main.nav": "Main",
+  "header.label.main.menu": "Main Menu",
+  "header.label.main.header": "Main",
+  "header.label.secondary.nav": "Secondary",
+  "header.label.skip.nav": "Перейти до головного змісту",
+  "header.label.app.nav": "App",
+  "header.menu.dashboard.label": "Dashboard",
+  "header.help.label": "Help",
+  "header.menu.profile.label": "Profile",
+  "header.menu.account.label": "Account",
+  "header.menu.orderHistory.label": "Order History",
+  "header.navigation.skipNavLink": "Перейти до головного змісту.",
+  "header.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"
+}
--- a/src/i18n/messages/zh_CN.json
+++ b/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"
 }
--- a/src/index.scss
+++ b/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 {
+  b {
+    color: #00262B !important;
+    font-weight: 500 !important;
+  }
+}
+
+.font-size-18 {
+  font-size: 18px !important;
+}
+
+.font-size-12 {
+  font-size: 12px;
+}
+
+.font-size-14 {
+  font-size: 14px;
+}
+
+.py-10px {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.pb-10px {
+  padding-bottom: 10px;
+}
+
+.line-height-24 {
+  line-height: 24px;
+}
+
+.line-height-20 {
+  line-height: 20px;
+}
+
+.line-height-10 {
+  line-height: 10px !important;
+}
+
+.icon-size-20 {
+  width: 20px !important;
+  height: 20px !important;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.notification-button {
+  width: 36px;
+  height: 36px;
+}
+
+.notification-icon{
+  height: 23.33px !important;
+  width: 23.33px !important;
+}
+
+.notification-badge {
+  position: absolute;
+  margin-top: 18px;
+  margin-left: -21px;
+  border: 2px solid #FFFFFF;
+  font-size: 9px !important;
+}
+
+.popover {
+  max-height: calc(100% - 68px);
+  min-height: 1220px;
+  filter: none;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15), 0px 2px 8px rgba(0, 0, 0, 0.15);
+
+  &.medium-screen {
+    min-width: 24.313rem;
+  }
+
+  &.large-screen {
+    min-width: 34.313rem;
+  }
+
+  .dropdown-toggle::after {
+    display: none;
+  }
+
+  .expandable {
+    position: relative !important;
+    margin-left: 4px;
+    padding: 2px 5px;
+    border-radius: 10rem;
+    font-size: 9px;
+  }
+
+  .dropdown-toggle {
+    font-size: 14px;
+    padding-top: 0px !important;
+    padding-bottom: 12px !important;
+
+    div {
+      min-height: 6px !important;
+      min-width: 6px !important;
+    }
+  }
+
+  .dropdown-item {
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  .notification-content {
+    .notification-item-content {
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      text-overflow: ellipsis;
+
+      p {
+        margin-bottom: 0px;
+      }
+
+      b {
+        color: #00262B;
+      }
+    }
+
+    .unread {
+      height: 10px;
+      width: 10px;
+    }
+  }
+}
--- a/src/learning-header/AnonymousUserMenu.jsx
+++ b/src/learning-header/AnonymousUserMenu.jsx
@@ -7,25 +7,23 @@ import { Button } from '@edx/paragon';

 import genericMessages from '../generic/messages';

-function AnonymousUserMenu({ intl }) {
-  return (
-    <div>
-      <Button
-        className="mr-3"
-        variant="outline-primary"
-        href={`${getConfig().LMS_BASE_URL}/register?next=${encodeURIComponent(global.location.href)}`}
-      >
-        {intl.formatMessage(genericMessages.registerSentenceCase)}
-      </Button>
-      <Button
-        variant="primary"
-        href={`${getLoginRedirectUrl(global.location.href)}`}
-      >
-        {intl.formatMessage(genericMessages.signInSentenceCase)}
-      </Button>
-    </div>
-  );
-}
+const AnonymousUserMenu = ({ intl }) => (
+  <div>
+    <Button
+      className="mr-3"
+      variant="outline-primary"
+      href={`${getConfig().LMS_BASE_URL}/register?next=${encodeURIComponent(global.location.href)}`}
+    >
+      {intl.formatMessage(genericMessages.registerSentenceCase)}
+    </Button>
+    <Button
+      variant="primary"
+      href={`${getLoginRedirectUrl(global.location.href)}`}
+    >
+      {intl.formatMessage(genericMessages.signInSentenceCase)}
+    </Button>
+  </div>
+);

 AnonymousUserMenu.propTypes = {
  intl: intlShape.isRequired,
--- a/src/learning-header/AuthenticatedUserDropdown.jsx
+++ b/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';

-function AuthenticatedUserDropdown({ intl, username }) {
+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
+  }, [notificationStatus]);
+
  const dashboardMenuItem = (
    <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/dashboard`}>
      {intl.formatMessage(messages.dashboard)}
@@ -19,8 +34,9 @@ function 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">
@@ -29,10 +45,10 @@ function AuthenticatedUserDropdown({ intl, username }) {
        </Dropdown.Toggle>
        <Dropdown.Menu className="dropdown-menu-right">
          {dashboardMenuItem}
-          <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/u/${username}`}>
+          <Dropdown.Item href={`${getConfig().ACCOUNT_PROFILE_URL}/u/${username}`}>
            {intl.formatMessage(messages.profile)}
          </Dropdown.Item>
-          <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/account/settings`}>
+          <Dropdown.Item href={getConfig().ACCOUNT_SETTINGS_URL}>
            {intl.formatMessage(messages.account)}
          </Dropdown.Item>
          { getConfig().ORDER_HISTORY_URL && (
@@ -47,7 +63,7 @@ function AuthenticatedUserDropdown({ intl, username }) {
      </Dropdown>
    </>
  );
-}
+};

 AuthenticatedUserDropdown.propTypes = {
  intl: intlShape.isRequired,
--- a/src/learning-header/LearningHeader.jsx
+++ b/src/learning-header/LearningHeader.jsx
@@ -2,24 +2,23 @@ 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';

-function LinkedLogo({
+const LinkedLogo = ({
  href,
  src,
  alt,
  ...attributes
-}) {
-  return (
-    <a href={href} {...attributes}>
-      <img className="d-block" src={src} alt={alt} />
-    </a>
-  );
-}
+}) => (
+  <a href={href} {...attributes}>
+    <img className="d-block" src={src} alt={alt} />
+  </a>
+);

 LinkedLogo.propTypes = {
  href: PropTypes.string.isRequired,
@@ -27,9 +26,9 @@ LinkedLogo.propTypes = {
  alt: PropTypes.string.isRequired,
 };

-function LearningHeader({
+const LearningHeader = ({
  courseOrg, courseNumber, courseTitle, intl, showUserDropdown,
-}) {
+}) => {
  const { authenticatedUser } = useContext(AppContext);

  const headerLogo = (
@@ -42,26 +41,28 @@ function 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>
  );
-}
+};

 LearningHeader.propTypes = {
  courseOrg: PropTypes.string,
--- a/src/learning-header/LearningHeader.test.jsx
+++ b/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', () => {
--- a/src/setupTest.js
+++ b/src/setupTest.js
@@ -22,6 +22,8 @@ Enzyme.configure({ adapter: new Adapter() });
 // These configuration values are usually set in webpack's EnvironmentPlugin however
 // Jest does not use webpack so we need to set these so for testing
 process.env.ACCESS_TOKEN_COOKIE_NAME = 'edx-jwt-cookie-header-payload';
+process.env.ACCOUNT_PROFILE_URL = 'http://localhost:1995';
+process.env.ACCOUNT_SETTINGS_URL = 'http://localhost:1997';
 process.env.BASE_URL = 'localhost:1995';
 process.env.CREDENTIALS_BASE_URL = 'http://localhost:18150';
 process.env.CSRF_TOKEN_API_PATH = '/csrf/api/v1/token';
@@ -102,16 +104,14 @@ function render(
    ...renderOptions
  } = {},
 ) {
-  function Wrapper({ children }) {
-    return (
+  const Wrapper = ({ children }) => (
    // eslint-disable-next-line react/jsx-filename-extension
-      <IntlProvider locale="en">
-        <AppProvider store={store}>
-          {children}
-        </AppProvider>
-      </IntlProvider>
-    );
-  }
+    <IntlProvider locale="en">
+      <AppProvider store={store}>
+        {children}
+      </AppProvider>
+    </IntlProvider>
+  );

  Wrapper.propTypes = {
    children: PropTypes.node.isRequired,
--- a/src/store.js
+++ b/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;
--- a/src/test-utils.js
+++ b/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;
Author	SHA1	Message	Date
sundasnoreen12	022515d1d2	Merge pull request #355 from openedx/sundas/INF-903 feat: binded show notification tray status with the backend api	2023-06-20 01:59:04 -07:00
ayeshoali	2d737aae7f	refactor: fixed data updation in redux	2023-06-20 13:31:15 +05:00
SundasNoreen	4c4db14eac	feat: binded show notification tray status with the backend api	2023-06-19 18:00:06 +05:00
sundasnoreen12	911cea6a0e	Merge pull request #350 from openedx/sundas/INF-878 test: added redux, selector and api cases	2023-06-19 05:10:57 -07:00
SundasNoreen	a52ddfd9bd	refactor: changed api url	2023-06-19 16:58:32 +05:00
SundasNoreen	8175ba897a	test: added failed and denied test cases of redux	2023-06-19 16:04:55 +05:00
renovate[bot]	cfda72b2e2	chore(deps): update dependency @testing-library/dom to v9.3.1	2023-06-19 10:46:30 +00:00
SundasNoreen	4483a734bc	refactor: fixed issues of review	2023-06-19 15:33:47 +05:00
renovate[bot]	db1903cdce	chore(deps): update dependency @edx/frontend-build to v12.8.54	2023-06-19 08:12:52 +00:00
Jenkins	71851b13a6	chore(i18n): update translations	2023-06-18 16:30:53 -04:00
SundasNoreen	6efa31092d	test: added redux, selector and api cases	2023-06-15 17:27:11 +05:00
SundasNoreen	c3541a3d79	test: added notification redux test cases	2023-06-15 13:30:38 +05:00
sundasnoreen12	dad01fcd78	Merge pull request #340 from openedx/sundas/INF-820 feat: added notification UI	2023-06-15 01:12:31 -07:00
ayeshoali	30e6eed60d	refactor: fixes extra spaces in index.scss	2023-06-15 12:39:23 +05:00
renovate[bot]	de69ed3dd9	fix(deps): update dependency @edx/paragon to v20.44.0	2023-06-12 14:13:06 +00:00
renovate[bot]	1d55df323f	chore(deps): update dependency @edx/frontend-build to v12.8.51	2023-06-12 11:46:29 +00:00
SundasNoreen	4e718f85de	refactor: fixed all review points	2023-06-12 12:56:15 +05:00
SundasNoreen	a211547a1d	refactor: removed backend api calls	2023-06-08 21:08:54 +05:00
Awais Ansari	784e9afccf	fix: add appName param in getNotifications function	2023-06-06 15:16:06 +05:00
SundasNoreen	4b23d8c4e4	fix: lint issue	2023-06-06 13:15:12 +05:00
ayeshoali	6d02e63d08	fix: fixes lint errors	2023-06-06 13:04:20 +05:00
ayeshoali	b1feed2443	fix: fixes UI according to figma	2023-06-06 12:48:10 +05:00
SundasNoreen	cabf4e3f27	refactor: fixed code refactor and added new slices and selector	2023-06-05 19:55:46 +05:00
Awais Ansari	78a40d47c1	refactor: code and style modifications	2023-06-05 17:52:52 +05:00
renovate[bot]	c7178afe6b	chore(deps): update dependency @edx/frontend-build to v12.8.40	2023-06-05 10:10:38 +00:00
Awais Ansari	18a6840037	fix: Ui modifications	2023-06-05 14:51:30 +05:00
renovate[bot]	583a487c38	chore(deps): update dependency @edx/frontend-platform to v4.5.1	2023-06-05 08:50:33 +00:00
SundasNoreen	3276496523	feat: added redux store implementation	2023-06-05 12:15:41 +05:00
Awais Ansari	7ab55175b5	fix: redux structure updates	2023-06-01 19:57:45 +05:00
SundasNoreen	72e82005c0	feat: added notification APIs	2023-06-01 13:07:53 +05:00
SundasNoreen	c4df727178	refactor: refactor components	2023-05-31 09:28:45 +05:00
renovate[bot]	1f6766175d	chore(deps): update dependency @edx/frontend-platform to v4.5.0	2023-05-29 09:37:10 +00:00
renovate[bot]	2ac8988a9b	chore(deps): update dependency @edx/frontend-build to v12.8.38	2023-05-29 07:50:58 +00:00
Awais Ansari	642be093c7	fix: bell icon design change	2023-05-26 20:52:18 +05:00
SundasNoreen	86939a2559	refactor: added notification icon in learning header	2023-05-26 17:07:05 +05:00
SundasNoreen	8ed18f3d69	refactor: UI refactor based on figma	2023-05-25 22:41:32 +05:00
SundasNoreen	061746da9f	refactor: used paragon icons and updated css	2023-05-24 15:14:41 +05:00
SundasNoreen	de77aa5f0c	feat: notification tray closes when clicked outside	2023-05-23 12:16:22 +05:00
SundasNoreen	7034d10536	refactor: fixed snapshot and store structure in header test file	2023-05-23 10:40:43 +05:00
SundasNoreen	4ce7311809	refactor: removed unused states	2023-05-22 15:17:04 +05:00
SundasNoreen	e76f5b6937	feat: added add more notification button functionality	2023-05-22 15:05:26 +05:00
SundasNoreen	f8fc794458	feat: added notification tray	2023-05-22 14:59:24 +05:00
sundasnoreen12	a5069edd94	feat: added notification UI	2023-05-15 16:36:41 +05:00
renovate[bot]	2543926c95	fix(deps): update dependency @edx/paragon to v20.36.0	2023-05-15 07:37:37 +00:00
renovate[bot]	c5eb43a2a5	chore(deps): update dependency @testing-library/dom to v9.3.0	2023-05-15 07:33:45 +00:00
renovate[bot]	256fa5c9d8	fix(deps): update dependency @edx/paragon to v20.34.0	2023-05-08 10:40:34 +00:00
renovate[bot]	267cce9f89	chore(deps): update dependency @edx/frontend-build to v12.8.27	2023-05-08 10:37:16 +00:00
renovate[bot]	4f59c80a12	fix(deps): update dependency @edx/paragon to v20.32.3	2023-05-01 07:58:51 +00:00
renovate[bot]	59afd596ab	chore(deps): update dependency @edx/frontend-build to v12.8.16	2023-05-01 07:55:36 +00:00
Jenkins	0c83268163	chore(i18n): update translations	2023-04-23 16:30:51 -04:00
Bilal Qamar	c5f5fa9281	feat!: upgraded to node v18, added .nvmrc and updated workflows (#332 ) BREAKING CHANGE: Ending support of @edx/frontend-platform v2 and v3 and now only support v4	2023-04-20 19:10:05 +05:00
Muhammad Abdullah Waheed	e247aee372	fix: updated readme for installing dependencies (#331 )	2023-04-20 17:36:10 +05:00
Bilal Qamar	f6ae5a4bdd	refactor: reverted in favor of major release due to updated platform peer dependencies (#330 )	2023-04-20 16:52:44 +05:00
Brian Smith	057d16d3c1	fix: release frontend-platform version update	2023-04-19 13:04:58 -04:00
Omar Al-Ithawi	93bb38d0bd	chore(deps): update frontend-platform version (#329 ) gets the intl-imports.js script for FC-0012 OEP-58.	2023-04-13 16:56:46 -04:00
renovate[bot]	01405eaff9	fix(deps): update dependency @edx/paragon to v20.30.1	2023-04-10 14:48:47 +00:00
renovate[bot]	59fa6e2a35	chore(deps): update dependency @edx/frontend-build to v12.8.6	2023-04-10 11:18:27 +00:00
Mashal Malik	9fc3a0e835	refactor: update peer dependency for react and react-dom (#326 ) * refactor: remove react16 from peer dependency * build: update lock file * fix: fix lint issue * refactor: add 17 support of react in peerDep	2023-04-05 16:47:15 +05:00
renovate[bot]	22e157adf6	fix(deps): update dependency @edx/paragon to v20.29.0	2023-04-03 12:46:02 +00:00
renovate[bot]	6b81f69eba	chore(deps): update dependency @testing-library/dom to v9.2.0	2023-04-03 10:35:08 +00:00
Bilal Qamar	cefa84006c	fix: reverted semantic release to v16 (#321 )	2023-03-30 11:04:45 +05:00
Muhammad Abdullah Waheed	a54309dd63	fix: updated version of semantic-release-action (#322 )	2023-03-29 23:33:58 +05:00
Bilal Qamar	aeb0fd2be7	feat: upgraded to node v18, added .nvmrc and updated workflows (#314 ) * feat: upgraded to node v18, added .nvmrc and updated workflows * refactor: upgraded frontend-build & frontend-platform, updated workflows * refactor: moved platform from devDependencies	2023-03-29 16:44:29 +05:00
renovate[bot]	26eb2bb4c7	chore(deps): update dependency @edx/frontend-platform to v3.6.0	2023-03-27 10:18:25 +00:00
renovate[bot]	8083079954	chore(deps): update dependency @edx/frontend-build to v12.7.0	2023-03-27 10:15:17 +00:00
renovate[bot]	d4fc8489ea	fix(deps): update dependency @edx/paragon to v20.28.5	2023-03-20 11:56:19 +00:00
renovate[bot]	4020a81bd4	chore(deps): update dependency redux-saga to v1.2.3	2023-03-20 11:53:34 +00:00
renovate[bot]	acf1adba80	chore(deps): update dependency jest to v29.5.0	2023-03-13 09:54:48 +00:00
renovate[bot]	a204ff8c03	chore(deps): update dependency @testing-library/dom to v9.0.1	2023-03-13 09:47:40 +00:00
Mashal Malik	e8ccc4b707	chore: Update transifex api from v2 to v3 (#310 ) * chore: Update transifex api from v2 to v3 * refactor: remove duplicate line	2023-03-06 17:58:12 +05:00
renovate[bot]	4d86780c73	chore(deps): update dependency @testing-library/dom to v9	2023-02-27 11:44:52 +00:00
renovate[bot]	fdbb83f51e	fix(deps): update font awesome to v6.3.0	2023-02-27 11:38:21 +00:00
Feanil Patel	f6e4664d37	Merge pull request #304 from openedx/repo_checks/ensure_workflows Update standard workflow files.	2023-02-24 11:45:23 -05:00
Feanil Patel	65177fcdcc	build: Updating a missing workflow file `add-depr-ticket-to-depr-board.yml`. The .github/workflows/add-depr-ticket-to-depr-board.yml workflow is missing or needs an update to stay in sync with the current standard for this workflow as defined in the `.github` repo of the `openedx` GitHub org.	2023-02-23 13:57:40 -05:00
Feanil Patel	7601249fb6	build: Creating a missing workflow file `add-remove-label-on-comment.yml`. The .github/workflows/add-remove-label-on-comment.yml workflow is missing or needs an update to stay in sync with the current standard for this workflow as defined in the `.github` repo of the `openedx` GitHub org.	2023-02-23 13:57:40 -05:00
Feanil Patel	c8ef3dad93	build: Creating a missing workflow file `self-assign-issue.yml`. The .github/workflows/self-assign-issue.yml workflow is missing or needs an update to stay in sync with the current standard for this workflow as defined in the `.github` repo of the `openedx` GitHub org.	2023-02-23 13:57:39 -05:00
renovate[bot]	b02fe00c71	fix(deps): update dependency @edx/paragon to v20.28.4	2023-02-20 11:19:51 +00:00
renovate[bot]	4404aede33	chore(deps): update dependency jest to v29.4.3	2023-02-20 11:12:57 +00:00
renovate[bot]	1b0edb10c4	chore(deps): update dependency @testing-library/dom to v8.20.0	2023-02-13 12:12:41 +00:00
renovate[bot]	546adff45e	chore(deps): update dependency @edx/brand to v1.2.0	2023-02-13 12:05:28 +00:00
renovate[bot]	94b14fd618	chore(deps): update dependency redux-saga to v1.2.2	2023-02-06 13:51:48 +00:00
renovate[bot]	5b8a9a587b	chore(deps): update dependency redux to v4.2.1	2023-02-06 13:44:55 +00:00
renovate[bot]	2650cb59b3	chore(deps): update actions/setup-node action to v3 (#212 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2023-02-06 15:11:28 +05:00
renovate[bot]	bc2b13175a	chore(deps): update dependency husky to v8 (#235 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2023-02-06 14:30:50 +05:00
renovate[bot]	85e8094833	fix(deps): update font awesome to v6 (#281 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2023-02-06 14:17:48 +05:00
dependabot[bot]	aff8dda3ee	chore(deps): bump decode-uri-component from 0.2.0 to 0.2.2 (#287 ) Bumps [decode-uri-component](https://github.com/SamVerschueren/decode-uri-component) from 0.2.0 to 0.2.2. - [Release notes](https://github.com/SamVerschueren/decode-uri-component/releases) - [Commits](https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.2) --- updated-dependencies: - dependency-name: decode-uri-component dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2023-02-01 17:15:00 +05:00
dependabot[bot]	51b505552d	chore(deps): bump cookiejar from 2.1.3 to 2.1.4 (#296 ) Bumps [cookiejar](https://github.com/bmeck/node-cookiejar) from 2.1.3 to 2.1.4. - [Release notes](https://github.com/bmeck/node-cookiejar/releases) - [Commits](https://github.com/bmeck/node-cookiejar/commits) --- updated-dependencies: - dependency-name: cookiejar dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2023-02-01 17:14:36 +05:00
dependabot[bot]	3648f1b6be	build(deps): bump json5 from 1.0.1 to 1.0.2 Bumps [json5](https://github.com/json5/json5) from 1.0.1 to 1.0.2. - [Release notes](https://github.com/json5/json5/releases) - [Changelog](https://github.com/json5/json5/blob/main/CHANGELOG.md) - [Commits](https://github.com/json5/json5/compare/v1.0.1...v1.0.2) --- updated-dependencies: - dependency-name: json5 dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2023-01-30 14:12:31 +00:00
Bilal Qamar	c78b6964b9	chore: updated frontend-build version to v12.4.19 (#297 )	2023-01-25 18:51:25 +05:00
renovate[bot]	664d05134b	fix(deps): update dependency @edx/paragon to v20.27.0	2023-01-23 10:38:54 +00:00
renovate[bot]	b969522cd0	chore(deps): update dependency @edx/frontend-build to v12.4.16	2023-01-23 10:34:46 +00:00
renovate[bot]	0cd8210ea7	chore(deps): update dependency @testing-library/dom to v8.19.1	2023-01-16 10:17:13 +00:00
renovate[bot]	1c763c2102	chore(deps): update dependency @edx/frontend-build to v12.4.15	2023-01-09 09:27:54 +00:00
Mashal Malik	073003284a	Moving code coverage from codecov package to CI (#289 ) * fix: removed derpeciated package codecov * fix: install edx/paragon 20.20.0 fixed version * fix: specified paragron 20.20.0 version Co-authored-by: Shahroz Ahmad <shahroz.ahmad@arbisoft.com>	2022-12-29 12:25:49 +05:00
Bilal Qamar	92fdf85c9a	feat: paragon updated to v20 & frontend-build version updated * feat: paragon updated to v20 & frontend-build version updated * refactor: moved paragon from devDependencies to satisfy eslint rule * refactor: updated snapshots	2022-12-09 15:57:09 +05:00
Sagirov Eugeniy	5ee8a8c75c	feat: Account pages. Updated menu items urls.	2022-12-02 12:28:15 +00:00
Abdullah Waheed	536d67404f	refactor: updated renovate config to auto update minor and patch versions of edx dependencies	2022-11-30 13:17:21 +00:00
Bilal Qamar	9d99bfcec6	refactor: updated snapshots	2022-11-25 16:53:50 +05:00
Bilal Qamar	3180c9d973	refactor: moved paragon from devDependencies to satisfy eslint rule	2022-11-25 16:48:29 +05:00
Bilal Qamar	1645274d9f	feat: paragon updated to v20 & frontend-build version updated	2022-11-25 16:36:06 +05:00
Bilal Qamar	84e43cb038	refactor: bumped loader-utils	2022-11-25 16:26:11 +05:00
julianajlk	994b21c0c1	fix: Change frontend-platform peer dependency to v2 or v3 range	2022-11-14 20:19:37 +00:00
renovate[bot]	940b45ba7e	chore(deps): update dependency jest to v29	2022-11-14 07:52:30 +00:00
dependabot[bot]	4efa0a07ae	build(deps): bump loader-utils from 1.4.0 to 1.4.1 (#278 ) Bumps [loader-utils](https://github.com/webpack/loader-utils) from 1.4.0 to 1.4.1. - [Release notes](https://github.com/webpack/loader-utils/releases) - [Changelog](https://github.com/webpack/loader-utils/blob/v1.4.1/CHANGELOG.md) - [Commits](https://github.com/webpack/loader-utils/compare/v1.4.0...v1.4.1) --- updated-dependencies: - dependency-name: loader-utils dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-11-10 17:34:00 +05:00
renovate[bot]	2bd6879bda	chore(deps): update actions/checkout action to v3 (#211 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2022-11-10 17:18:45 +05:00
Muhammad Abdullah Waheed	b479f0b376	Merge pull request #205 from openedx/dependabot/npm_and_yarn/async-2.6.4 build(deps): bump async from 2.6.3 to 2.6.4	2022-11-08 18:40:15 +05:00
Leangseu Kim	dfdcbc0a8d	feat: upgrade frontend platform to version 3	2022-11-07 12:45:43 +00:00
renovate[bot]	c3b02a2946	chore(deps): update dependency enzyme-adapter-react-16 to v1.15.7	2022-11-07 09:36:45 +00:00
renovate[bot]	f6c1a8bcc1	chore(deps): update dependency redux-saga to v1.2.1	2022-10-31 07:42:11 +00:00
Bilal Qamar	6c02962e0d	refactor: updated frontend-build & resolved eslint issues	2022-10-26 10:37:57 -03:00
renovate[bot]	acaf98f0b1	chore(deps): update dependency @testing-library/dom to v8.19.0	2022-10-24 08:15:34 +00:00
Adolfo R. Brandes	90351083aa	Merge pull request #256 from openedx/abdullahwaheed/transifex-languages-list-update Supported Transifex languages in Makefile	2022-10-20 16:15:57 -03:00
Adolfo R. Brandes	6f75684ad9	Merge pull request #271 from brian-smith-tcril/studio-header-component refactor: make studio header more flexible	2022-10-20 14:24:44 -03:00
Brian Smith	a54f099d68	refactor: make studio header more flexible	2022-10-19 10:20:10 -04:00
Diana Huang	02d081dd26	Merge pull request #270 from openedx/diana/transifex-call fix: Add transifex flag.	2022-10-17 16:28:12 -04:00
Diana Huang	468acc80f0	fix: Add transifex flag. The Transifex cli started requiring the -t or --translations flag in the pull command in order to fetch translations. https://github.com/edx/edx-arch-experiments/issues/77	2022-10-17 16:05:53 -04:00
renovate[bot]	90fdd13fbc	chore(deps): update dependency react-router-dom to v5.3.4	2022-10-17 08:57:14 +00:00
renovate[bot]	faf1b8522a	chore(deps): update dependency react-redux to v7.2.9	2022-10-10 09:15:51 +00:00
Jenkins	e8a28b09bc	chore(i18n): update translations	2022-10-09 16:30:19 -04:00
renovate[bot]	c611df3f69	chore(deps): update dependency jest-chain to v1.1.6	2022-10-03 08:05:06 +00:00
Jenkins	ab371f1c3a	chore(i18n): update translations	2022-10-02 16:30:36 -04:00
renovate[bot]	fb2002a004	chore(deps): update dependency @testing-library/dom to v8.18.1	2022-09-26 10:35:10 +00:00
renovate[bot]	f955ec4434	chore(deps): update dependency @testing-library/dom to v8.18.0	2022-09-19 09:59:12 +00:00
Sarina Canelake	d529e00d7b	Merge pull request #257 from openedx/tcril/fix-gh-org-url Fix github url strings (org edx -> openedx)	2022-09-13 22:21:04 -04:00
renovate[bot]	e0cbbf7da1	chore(deps): update dependency @testing-library/dom to v8.17.1	2022-09-12 11:50:01 +00:00
Sarina Canelake	ba209fd050	fix: update path to .github workflows to read from openedx org	2022-09-10 18:07:21 -04:00
Sarina Canelake	ae7004e95d	fix: fix github url strings (org edx -> openedx)	2022-09-07 09:02:25 -04:00
Abdullah Waheed	de9eb63b07	feat: added new translations in Makefile and updated all the translations	2022-09-06 20:05:09 +05:00
renovate[bot]	bf64a829cc	chore(deps): update dependency @edx/frontend-platform to v2.6.2	2022-09-05 13:45:11 +00:00
renovate[bot]	1e1b06dfa5	chore(deps): update dependency @edx/frontend-platform to v2.6.1	2022-08-29 12:34:32 +00:00
renovate[bot]	469a93bd9c	chore(deps): update dependency @testing-library/jest-dom to v5.16.5	2022-08-22 11:06:32 +00:00
Muhammad Abdullah Waheed	0645761f05	Merge pull request #250 from openedx/abdullahwaheed/run-build-in-ci `npm run build` script in Github CI	2022-08-16 11:20:25 +05:00
renovate[bot]	20e9881546	chore(deps): update dependency @edx/frontend-platform to v2.5.2	2022-08-15 10:43:52 +00:00
Abdullah Waheed	42b347058f	feat: added build script in github CI	2022-08-15 10:30:48 +05:00
renovate[bot]	b097535580	chore(deps): update dependency @edx/frontend-platform to v2.5.1	2022-08-08 12:39:35 +00:00
edx-semantic-release	d06929ca2b	chore(i18n): update translations	2022-08-07 16:29:27 -04:00
dependabot[bot]	64f55150b6	build(deps): bump async from 2.6.3 to 2.6.4 Bumps [async](https://github.com/caolan/async) from 2.6.3 to 2.6.4. - [Release notes](https://github.com/caolan/async/releases) - [Changelog](https://github.com/caolan/async/blob/v2.6.4/CHANGELOG.md) - [Commits](https://github.com/caolan/async/compare/v2.6.3...v2.6.4) --- updated-dependencies: - dependency-name: async dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2022-04-18 11:56:29 +00:00