feat: added browser logging

refactor: added datadog logging
fix: modal iframe height to 100% (#1341 )
2024-04-18 17:44:37 +05:00 · 2024-04-04 14:58:13 +05:00 · 2024-04-02 13:14:05 -04:00 · 2024-03-29 16:12:23 -04:00 · 2024-03-27 20:57:21 +00:00 · 2024-03-27 17:48:28 +00:00
227 changed files with 7277 additions and 12158 deletions
--- a/.env
+++ b/.env
@@ -4,6 +4,7 @@
 NODE_ENV='production'

 ACCESS_TOKEN_COOKIE_NAME=''
+AI_TRANSLATIONS_URL=''
 BASE_URL=''
 CONTACT_URL=''
 CREDENTIALS_BASE_URL=''
--- a/.env.development
+++ b/.env.development
@@ -4,6 +4,7 @@
 NODE_ENV='development'

 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
+AI_TRANSLATIONS_URL='http://localhost:18760'
 BASE_URL='http://localhost:2000'
 CONTACT_URL='http://localhost:18000/contact'
 CREDENTIALS_BASE_URL='http://localhost:18150'
--- a/.env.test
+++ b/.env.test
@@ -4,6 +4,7 @@
 NODE_ENV='test'

 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
+AI_TRANSLATIONS_URL='http://localhost:18760'
 BASE_URL='http://localhost:2000'
 CONTACT_URL='http://localhost:18000/contact'
 CREDENTIALS_BASE_URL='http://localhost:18150'
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,5 +1,5 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');

 const config = createConfig('eslint', {
  rules: {
@@ -12,6 +12,13 @@ const config = createConfig('eslint', {
    'react/no-unknown-property': 'off',
    'func-names': 'off',
  },
+  settings: {
+    'import/resolver': {
+      webpack: {
+        config: 'webpack.prod.config.js',
+      },
+    },
+  },
 });

 module.exports = config;
--- a/.github/workflows/lockfileversion-check.yml
+++ b/.github/workflows/lockfileversion-check.yml
@@ -10,4 +10,4 @@ on:

 jobs:
  version-check:
-    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master
+    uses: openedx/.github/.github/workflows/lockfile-check.yml@master
--- a/.gitignore
+++ b/.gitignore
@@ -6,6 +6,7 @@
 node_modules
 npm-debug.log
 coverage
+env.config.*

 dist/
 src/i18n/transifex_input.json
@@ -25,3 +26,7 @@ module.config.js

 # Local environment overrides
 .env.private
+
+src/i18n/messages/
+
+env.config.jsx
--- a/.tx/config
+++ b/.tx/config
@@ -1,9 +0,0 @@
-[main]
-host = https://www.transifex.com
-
-[o:open-edx:p:edx-platform:r:frontend-app-learning]
-file_filter = src/i18n/messages/<lang>.json
-source_file = src/i18n/transifex_input.json
-source_lang = en
-type        = KEYVALUEJSON
-
--- a/39
+++ b/39
@@ -1,20 +1,17 @@
-export TRANSIFEX_RESOURCE=frontend-app-learning
-transifex_langs = "ar,fr,es_419,zh_CN,pt,it,de,uk,ru,hi,fa_IR,fr_CA,it_IT,pt_PT,de_DE"
-
 intl_imports = ./node_modules/.bin/intl-imports.js
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json

 # This directory must match .babelrc .
-transifex_temp = ./temp/babel-plugin-react-intl
+transifex_temp = ./temp/babel-plugin-formatjs

 precommit:
 	npm run lint
 	npm audit

 requirements:
-	npm install
+	npm ci

 i18n.extract:
 	# Pulling display strings from .jsx files into .json files...
@@ -32,37 +29,21 @@ detect_changed_source_translations:
 	# Checking for changed translations...
 	git diff --exit-code $(i18n)

-# Pushes translations to Transifex.  You must run make extract_translations first.
-push_translations:
-	# Pushing strings to Transifex...
-	tx push -s
-	# Fetching hashes from Transifex...
-	./node_modules/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
-	# Writing out comments to file...
-	$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
-	# Pushing comments to Transifex...
-	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh

-ifeq ($(OPENEDX_ATLAS_PULL),)
-# Pulls translations from Transifex.
-pull_translations:
-	tx pull -f --mode reviewed --languages=$(transifex_langs)
-else
-# Experimental: OEP-58 Pulls translations using atlas
 pull_translations:
 	rm -rf src/i18n/messages
 	mkdir src/i18n/messages
 	cd src/i18n/messages \
-      && atlas pull $(ATLAS_OPTIONS) \
-               translations/frontend-platform/src/i18n/messages:frontend-platform \
-               translations/paragon/src/i18n/messages:paragon \
-               translations/frontend-component-header/src/i18n/messages:frontend-component-header \
-               translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
-               translations/frontend-lib-special-exams/src/i18n/messages:frontend-lib-special-exams \
-               translations/frontend-app-learning/src/i18n/messages:frontend-app-learning
+	  && atlas pull $(ATLAS_OPTIONS) \
+	           translations/frontend-platform/src/i18n/messages:frontend-platform \
+	           translations/paragon/src/i18n/messages:paragon \
+	           translations/frontend-component-header/src/i18n/messages:frontend-component-header \
+	           translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
+	           translations/frontend-lib-special-exams/src/i18n/messages:frontend-lib-special-exams \
+	           translations/frontend-app-learning/src/i18n/messages:frontend-app-learning

 	$(intl_imports) frontend-platform paragon frontend-component-header frontend-component-footer frontend-lib-special-exams frontend-app-learning
-endif
+

 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:
--- a/README.rst
+++ b/README.rst
@@ -1,6 +1,6 @@
 #####################
 frontend-app-learning
-######################
+#####################

 |codecov| |license|

@@ -84,10 +84,10 @@ file (which is git-ignored) that defines where to find your local modules, for i
       may want to use "src" if the module installs React as a peer/dev dependency.
     */
     localModules: [
-        { moduleName: '@edx/paragon/scss', dir: '../paragon', dist: 'scss' },
-        { moduleName: '@edx/paragon', dir: '../paragon', dist: 'dist' },
-        { moduleName: '@edx/frontend-enterprise', dir: '../frontend-enterprise', dist: 'src' },
-        { moduleName: '@edx/frontend-platform', dir: '../frontend-platform', dist: 'dist' },
+        { moduleName: '@openedx/paragon/scss', dir: '../paragon', dist: 'scss' },
+        { moduleName: '@openedx/paragon', dir: '../paragon', dist: 'dist' },
+        { moduleName: '@openedx/frontend-enterprise', dir: '../frontend-enterprise', dist: 'src' },
+        { moduleName: '@openedx/frontend-platform', dir: '../frontend-platform', dist: 'dist' },
     ],
   };

--- a/catalog-info.yaml
+++ b/catalog-info.yaml
@@ -0,0 +1,18 @@
+# This file records information about this repo. Its use is described in OEP-55:
+# https://open-edx-proposals.readthedocs.io/en/latest/processes/oep-0055-proc-project-maintainers.html
+
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: 'frontend-app-learning'
+  description: "This is the Learning MFE, which renders all learner-facing course pages."
+  links:
+    - url: "https://github.com/openedx/frontend-app-learning"
+      title: "Learning MFE"
+      icon: "Web"
+  annotations:
+    openedx.org/arch-interest-groups: ""
+spec:
+  owner: group:2u-aurora
+  type: 'website'
+  lifecycle: 'production'
--- a/example.env.config.jsx
+++ b/example.env.config.jsx
@@ -0,0 +1,24 @@
+import UnitTranslationPlugin from '@plugins/UnitTranslationPlugin';
+import { PLUGIN_OPERATIONS, DIRECT_PLUGIN } from '@openedx/frontend-plugin-framework';
+
+// Load environment variables from .env file
+const config = {
+  ...process.env,
+  pluginSlots: {
+    unit_title_plugin: {
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'unit_title_plugin',
+            type: DIRECT_PLUGIN,
+            priority: 1,
+            RenderWidget: UnitTranslationPlugin,
+          },
+        },
+      ],
+    },
+  },
+};
+
+export default config;
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,6 +1,6 @@
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');

-module.exports = createConfig('jest', {
+const config = createConfig('jest', {
  setupFilesAfterEnv: [
    '<rootDir>/src/setupTest.js',
  ],
@@ -14,8 +14,31 @@ module.exports = createConfig('jest', {
    "^axios$": "axios/dist/axios.js",
    // See https://stackoverflow.com/questions/72382316/jest-encountered-an-unexpected-token-react-markdown
    'react-markdown': '<rootDir>/node_modules/react-markdown/react-markdown.min.js',
+    '@src/(.*)': '<rootDir>/src/$1',
+    '@plugins/(.*)': '<rootDir>/plugins/$1',
  },
  testTimeout: 30000,
+  globalSetup: "./global-setup.js",
+  verbose: true,
  testEnvironment: 'jsdom',
-  globalSetup: "./global-setup.js"
 });
+
+// delete config.testURL;
+
+config.reporters = [...(config.reporters || []), ["jest-console-group-reporter", {
+  // change this setting if need to see less details for each test
+  // reportType: "summary" | "details", 
+  // enable: true | false,
+  afterEachTest: {
+    enable: true,
+    filePaths: false,
+    reportType: "details",
+  },
+  afterAllTests: {
+    reportType: "summary",
+    enable: true,
+    filePaths: true,
+  },
+}]];
+
+module.exports = config;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
  ],
  "scripts": {
    "build": "fedx-scripts webpack",
-    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
+    "i18n_extract": "fedx-scripts formatjs extract",
    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
    "prepare": "husky install",
@@ -29,20 +29,23 @@
    "url": "https://github.com/openedx/frontend-app-learning/issues"
  },
  "dependencies": {
+    "@datadog/browser-logs": "^5.14.0",
+    "@datadog/browser-rum": "^5.14.0",
    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-footer": "12.2.1",
-    "@edx/frontend-component-header": "4.6.0",
-    "@edx/frontend-lib-special-exams": "2.27.0",
-    "@edx/frontend-lib-learning-assistant": "^1.20.1",
-    "@edx/frontend-platform": "5.5.2",
+    "@edx/frontend-component-footer": "^13.0.4",
+    "@edx/frontend-component-header": "^5.0.2",
+    "@edx/frontend-lib-learning-assistant": "^2.0.0",
+    "@edx/frontend-lib-special-exams": "^3.0.0",
+    "@edx/frontend-platform": "^7.1.2",
    "@edx/openedx-atlas": "^0.6.0",
-    "@edx/paragon": "20.46.0",
-    "@edx/react-unit-test-utils": "npm:@edx/react-unit-test-utils@1.7.0",
+    "@edx/react-unit-test-utils": "^2.0.0",
    "@fortawesome/fontawesome-svg-core": "1.3.0",
    "@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.1.4",
+    "@openedx/frontend-plugin-framework": "^1.0.2",
+    "@openedx/paragon": "^22.1.1",
    "@popperjs/core": "2.11.8",
    "@reduxjs/toolkit": "1.8.1",
    "classnames": "2.3.2",
@@ -68,8 +71,8 @@
  },
  "devDependencies": {
    "@edx/browserslist-config": "1.2.0",
-    "@edx/frontend-build": "^12.9.10",
    "@edx/reactifex": "2.2.0",
+    "@openedx/frontend-build": "13.0.30",
    "@pact-foundation/pact": "^11.0.2",
    "@testing-library/jest-dom": "5.16.5",
    "@testing-library/react": "12.1.5",
@@ -78,8 +81,16 @@
    "axios-mock-adapter": "1.20.0",
    "copy-webpack-plugin": "^11.0.0",
    "es-check": "6.2.1",
+    "eslint-import-resolver-webpack": "^0.13.8",
    "husky": "7.0.4",
-    "jest": "29.5.0",
-    "rosie": "2.1.1"
+    "jest": "^26.6.3",
+    "jest-console-group-reporter": "^1.0.1",
+    "jest-when": "^3.6.0",
+    "postcss-loader": "^8.1.1",
+    "rosie": "2.1.1",
+    "sass": "^1.72.0",
+    "sass-loader": "^14.1.1",
+    "source-map-loader": "^5.0.0",
+    "style-loader": "^3.3.4"
  }
 }
--- a/plugins/README.md
+++ b/plugins/README.md
@@ -0,0 +1,17 @@
+## How to develop plugin
+
+You can define plugin in `env.config.jsx` see `example.env.config.jsx` as example.
+
+## Current caveat
+
+- The way for how I deal with override method is still wonky
+  - The redux still require middleware to ignore the plugin's action from serializing
+  - I am not sure how it behave with useCallback, useMemo, ...etc
+  - There are still open question on how to write it properly
+
+## Current work that should consider core part and extendable for the future plugin framework
+
+- `usePluingsCallback` is the callback supose to be some level of equality to be using `React.useCallback`. It would try to execute the function, then any plugin that try `registerOverrideMethod`. The order of the it being run isn't the determined. There are a couple things I want to add:
+  - I might consider testing it with `zustand` library to make sure it is portable and not rely on `redux`. I tried to do this with provider, but it seems to run into infinite loop of trigger changed.
+
+- `registerOverrideMethod` is working like a way to register callback that behave like a middleware. It ran the default one, then pass the result of the default one to the plugin. Any plugin that register the override can update the value. Alternatively, we can override the function completely instead applying each affect. Or we can support both. But it requires a bit more thought out architecture.
--- a/plugins/UnitTranslationPlugin/snapshots/index.test.jsx.snap
+++ b/plugins/UnitTranslationPlugin/snapshots/index.test.jsx.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<UnitTranslationPlugin /> render TranslationSelection when translation is enabled and language is available 1`] = `
+<TranslationSelection
+  availableLanguages={
+    Array [
+      "en",
+    ]
+  }
+  courseId="courseId"
+  id="id"
+  language="en"
+  unitId="unitId"
+/>
+`;
--- a/plugins/UnitTranslationPlugin/data/api.js
+++ b/plugins/UnitTranslationPlugin/data/api.js
@@ -0,0 +1,90 @@
+import { getConfig, camelCaseObject } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { logError } from '@edx/frontend-platform/logging';
+import { stringify } from 'query-string';
+
+export const fetchTranslationConfig = async (courseId) => {
+  const url = `${
+    getConfig().LMS_BASE_URL
+  }/api/translatable_xblocks/config/?course_id=${encodeURIComponent(courseId)}`;
+  try {
+    const { data } = await getAuthenticatedHttpClient().get(url);
+    return {
+      enabled: data.feature_enabled,
+      availableLanguages: data.available_translation_languages || [
+        {
+          code: 'en',
+          label: 'English',
+        },
+        {
+          code: 'es',
+          label: 'Spanish',
+        },
+      ],
+    };
+  } catch (error) {
+    logError(`Translation plugin fail to fetch from ${url}`, error);
+    return {
+      enabled: false,
+      availableLanguages: [],
+    };
+  }
+};
+
+export async function getTranslationFeedback({
+  courseId,
+  translationLanguage,
+  unitId,
+  userId,
+}) {
+  const params = stringify({
+    translation_language: translationLanguage,
+    course_id: encodeURIComponent(courseId),
+    unit_id: encodeURIComponent(unitId),
+    user_id: userId,
+  });
+  const fetchFeedbackUrl = `${
+    getConfig().AI_TRANSLATIONS_URL
+  }/api/v1/whole-course-translation-feedback?${params}`;
+  try {
+    const { data } = await getAuthenticatedHttpClient().get(fetchFeedbackUrl);
+    return camelCaseObject(data);
+  } catch (error) {
+    logError(
+      `Translation plugin fail to fetch from ${fetchFeedbackUrl}`,
+      error,
+    );
+    return {};
+  }
+}
+
+export async function createTranslationFeedback({
+  courseId,
+  feedbackValue,
+  translationLanguage,
+  unitId,
+  userId,
+}) {
+  const createFeedbackUrl = `${
+    getConfig().AI_TRANSLATIONS_URL
+  }/api/v1/whole-course-translation-feedback/`;
+  try {
+    const { data } = await getAuthenticatedHttpClient().post(
+      createFeedbackUrl,
+      {
+        course_id: courseId,
+        feedback_value: feedbackValue,
+        translation_language: translationLanguage,
+        unit_id: unitId,
+        user_id: userId,
+      },
+    );
+    return camelCaseObject(data);
+  } catch (error) {
+    logError(
+      `Translation plugin fail to create feedback from ${createFeedbackUrl}`,
+      error,
+    );
+    return {};
+  }
+}
--- a/plugins/UnitTranslationPlugin/data/api.test.js
+++ b/plugins/UnitTranslationPlugin/data/api.test.js
@@ -0,0 +1,125 @@
+import { camelCaseObject } from '@edx/frontend-platform';
+import { logError } from '@edx/frontend-platform/logging';
+import { stringify } from 'query-string';
+
+import {
+  fetchTranslationConfig,
+  getTranslationFeedback,
+  createTranslationFeedback,
+} from './api';
+
+const mockGetMethod = jest.fn();
+const mockPostMethod = jest.fn();
+jest.mock('@edx/frontend-platform/auth', () => ({
+  getAuthenticatedHttpClient: () => ({
+    get: mockGetMethod,
+    post: mockPostMethod,
+  }),
+}));
+jest.mock('@edx/frontend-platform/logging', () => ({
+  logError: jest.fn(),
+}));
+
+describe('UnitTranslation api', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('fetchTranslationConfig', () => {
+    const courseId = 'course-v1:edX+DemoX+Demo_Course';
+    const expectedResponse = {
+      feature_enabled: true,
+      available_translation_languages: [
+        {
+          code: 'en',
+          label: 'English',
+        },
+        {
+          code: 'es',
+          label: 'Spanish',
+        },
+      ],
+    };
+    it('should fetch translation config', async () => {
+      const expectedUrl = `http://localhost:18000/api/translatable_xblocks/config/?course_id=${encodeURIComponent(
+        courseId,
+      )}`;
+      mockGetMethod.mockResolvedValueOnce({ data: expectedResponse });
+      const result = await fetchTranslationConfig(courseId);
+      expect(result).toEqual({
+        enabled: true,
+        availableLanguages: expectedResponse.available_translation_languages,
+      });
+      expect(mockGetMethod).toHaveBeenCalledWith(expectedUrl);
+    });
+
+    it('should return disabled and unavailable languages on error', async () => {
+      mockGetMethod.mockRejectedValueOnce(new Error('error'));
+      const result = await fetchTranslationConfig(courseId);
+      expect(result).toEqual({
+        enabled: false,
+        availableLanguages: [],
+      });
+      expect(logError).toHaveBeenCalled();
+    });
+  });
+
+  describe('getTranslationFeedback', () => {
+    const props = {
+      courseId: 'course-v1:edX+DemoX+Demo_Course',
+      translationLanguage: 'es',
+      unitId: 'unit-v1:edX+DemoX+Demo_Course+type@video+block@video',
+      userId: 'test_user',
+    };
+    const expectedResponse = {
+      feedback: 'good',
+    };
+    it('should fetch translation feedback', async () => {
+      const params = stringify({
+        translation_language: props.translationLanguage,
+        course_id: encodeURIComponent(props.courseId),
+        unit_id: encodeURIComponent(props.unitId),
+        user_id: props.userId,
+      });
+      const expectedUrl = `http://localhost:18760/api/v1/whole-course-translation-feedback?${params}`;
+      mockGetMethod.mockResolvedValueOnce({ data: expectedResponse });
+      const result = await getTranslationFeedback(props);
+      expect(result).toEqual(camelCaseObject(expectedResponse));
+      expect(mockGetMethod).toHaveBeenCalledWith(expectedUrl);
+    });
+
+    it('should return empty object on error', async () => {
+      mockGetMethod.mockRejectedValueOnce(new Error('error'));
+      const result = await getTranslationFeedback(props);
+      expect(result).toEqual({});
+      expect(logError).toHaveBeenCalled();
+    });
+  });
+
+  describe('createTranslationFeedback', () => {
+    const props = {
+      courseId: 'course-v1:edX+DemoX+Demo_Course',
+      feedbackValue: 'good',
+      translationLanguage: 'es',
+      unitId: 'unit-v1:edX+DemoX+Demo_Course+type@video+block@video',
+      userId: 'test_user',
+    };
+    it('should create translation feedback', async () => {
+      const expectedUrl = 'http://localhost:18760/api/v1/whole-course-translation-feedback/';
+      mockPostMethod.mockResolvedValueOnce({});
+      await createTranslationFeedback(props);
+      expect(mockPostMethod).toHaveBeenCalledWith(expectedUrl, {
+        course_id: props.courseId,
+        feedback_value: props.feedbackValue,
+        translation_language: props.translationLanguage,
+        unit_id: props.unitId,
+        user_id: props.userId,
+      });
+    });
+
+    it('should log error on failure', async () => {
+      mockPostMethod.mockRejectedValueOnce(new Error('error'));
+      await createTranslationFeedback(props);
+      expect(logError).toHaveBeenCalled();
+    });
+  });
+});
--- a/plugins/UnitTranslationPlugin/feedback-widget/snapshots/index.test.jsx.snap
+++ b/plugins/UnitTranslationPlugin/feedback-widget/snapshots/index.test.jsx.snap
@@ -0,0 +1,204 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<FeedbackWidget /> render feedback widget 1`] = `
+<div
+  className="d-none"
+>
+  <div
+    className="sequence w-100"
+  >
+    <div
+      className="ml-4 mr-2"
+    >
+      <ActionRow>
+        Rate this page translation
+        <Spacer />
+        <div>
+          <IconButton
+            alt="positive-feedback"
+            className="m-1"
+            iconAs="Icon"
+            id="positive-feedback-button"
+            onClick={[MockFunction onThumbsUpClick]}
+            src="ThumbUpOutline"
+            variant="secondary"
+          />
+          <IconButton
+            alt="negative-feedback"
+            className="mr-2"
+            iconAs="Icon"
+            id="negative-feedback-button"
+            onClick={[MockFunction onThumbsDownClick]}
+            src="ThumbDownOffAlt"
+            variant="secondary"
+          />
+        </div>
+        <div
+          className="mb-1 text-light action-row-divider"
+        >
+          |
+        </div>
+        <div>
+          <IconButton
+            alt="close-feedback"
+            className="ml-1 mr-2 float-right"
+            iconAs="Icon"
+            id="close-feedback-button"
+            onClick={[MockFunction closeFeedbackWidget]}
+            src="Close"
+            variant="secondary"
+          />
+        </div>
+      </ActionRow>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<FeedbackWidget /> render gratitude text 1`] = `
+<div
+  className="d-none"
+>
+  <div
+    className="sequence w-100"
+  >
+    <div
+      className="ml-4 mr-4"
+    >
+      <ActionRow
+        className="m-2 justify-content-center"
+      >
+        Thank you! Your feedback matters.
+      </ActionRow>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<FeedbackWidget /> renders hidden by default 1`] = `
+<div
+  className="d-none"
+>
+  <div
+    className="sequence w-100"
+  >
+    <div
+      className="ml-4 mr-2"
+    >
+      <ActionRow>
+        Rate this page translation
+        <Spacer />
+        <div>
+          <IconButton
+            alt="positive-feedback"
+            className="m-1"
+            iconAs="Icon"
+            id="positive-feedback-button"
+            onClick={[MockFunction onThumbsUpClick]}
+            src="ThumbUpOutline"
+            variant="secondary"
+          />
+          <IconButton
+            alt="negative-feedback"
+            className="mr-2"
+            iconAs="Icon"
+            id="negative-feedback-button"
+            onClick={[MockFunction onThumbsDownClick]}
+            src="ThumbDownOffAlt"
+            variant="secondary"
+          />
+        </div>
+        <div
+          className="mb-1 text-light action-row-divider"
+        >
+          |
+        </div>
+        <div>
+          <IconButton
+            alt="close-feedback"
+            className="ml-1 mr-2 float-right"
+            iconAs="Icon"
+            id="close-feedback-button"
+            onClick={[MockFunction closeFeedbackWidget]}
+            src="Close"
+            variant="secondary"
+          />
+        </div>
+      </ActionRow>
+    </div>
+    <div
+      className="ml-4 mr-4"
+    >
+      <ActionRow
+        className="m-2 justify-content-center"
+      >
+        Thank you! Your feedback matters.
+      </ActionRow>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<FeedbackWidget /> renders show when elemReady is true 1`] = `
+<div
+  className="sequence-container d-inline-flex flex-row w-100"
+>
+  <div
+    className="sequence w-100"
+  >
+    <div
+      className="ml-4 mr-2"
+    >
+      <ActionRow>
+        Rate this page translation
+        <Spacer />
+        <div>
+          <IconButton
+            alt="positive-feedback"
+            className="m-1"
+            iconAs="Icon"
+            id="positive-feedback-button"
+            onClick={[MockFunction onThumbsUpClick]}
+            src="ThumbUpOutline"
+            variant="secondary"
+          />
+          <IconButton
+            alt="negative-feedback"
+            className="mr-2"
+            iconAs="Icon"
+            id="negative-feedback-button"
+            onClick={[MockFunction onThumbsDownClick]}
+            src="ThumbDownOffAlt"
+            variant="secondary"
+          />
+        </div>
+        <div
+          className="mb-1 text-light action-row-divider"
+        >
+          |
+        </div>
+        <div>
+          <IconButton
+            alt="close-feedback"
+            className="ml-1 mr-2 float-right"
+            iconAs="Icon"
+            id="close-feedback-button"
+            onClick={[MockFunction closeFeedbackWidget]}
+            src="Close"
+            variant="secondary"
+          />
+        </div>
+      </ActionRow>
+    </div>
+    <div
+      className="ml-4 mr-4"
+    >
+      <ActionRow
+        className="m-2 justify-content-center"
+      >
+        Thank you! Your feedback matters.
+      </ActionRow>
+    </div>
+  </div>
+</div>
+`;
--- a/plugins/UnitTranslationPlugin/feedback-widget/index.jsx
+++ b/plugins/UnitTranslationPlugin/feedback-widget/index.jsx
@@ -0,0 +1,116 @@
+import React, {
+  useEffect, useRef, useState,
+} from 'react';
+import PropTypes from 'prop-types';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { ActionRow, IconButton, Icon } from '@openedx/paragon';
+import { Close, ThumbUpOutline, ThumbDownOffAlt } from '@openedx/paragon/icons';
+
+import './index.scss';
+import messages from './messages';
+import useFeedbackWidget from './useFeedbackWidget';
+
+const FeedbackWidget = ({
+  courseId,
+  translationLanguage,
+  unitId,
+  userId,
+}) => {
+  const { formatMessage } = useIntl();
+  const ref = useRef(null);
+  const [elemReady, setElemReady] = useState(false);
+  const {
+    closeFeedbackWidget,
+    showFeedbackWidget,
+    showGratitudeText,
+    onThumbsUpClick,
+    onThumbsDownClick,
+  } = useFeedbackWidget({
+    courseId,
+    translationLanguage,
+    unitId,
+    userId,
+  });
+
+  useEffect(() => {
+    if (ref.current) {
+      const domNode = document.getElementById('whole-course-translation-feedback-widget');
+      domNode.appendChild(ref.current);
+      setElemReady(true);
+    }
+  }, [ref.current]);
+
+  return (
+    <div ref={ref} className={(elemReady) ? 'sequence-container d-inline-flex flex-row w-100' : 'd-none'}>
+      {(showFeedbackWidget || showGratitudeText) ? (
+        <div className="sequence w-100">
+          {
+            showFeedbackWidget && (
+              <div className="ml-4 mr-2">
+                <ActionRow>
+                  {formatMessage(messages.rateTranslationText)}
+                  <ActionRow.Spacer />
+                  <div>
+                    <IconButton
+                      src={ThumbUpOutline}
+                      iconAs={Icon}
+                      alt="positive-feedback"
+                      onClick={onThumbsUpClick}
+                      variant="secondary"
+                      className="m-1"
+                      id="positive-feedback-button"
+                    />
+                    <IconButton
+                      src={ThumbDownOffAlt}
+                      iconAs={Icon}
+                      alt="negative-feedback"
+                      onClick={onThumbsDownClick}
+                      variant="secondary"
+                      className="mr-2"
+                      id="negative-feedback-button"
+                    />
+                  </div>
+                  <div className="mb-1 text-light action-row-divider">
+                    |
+                  </div>
+                  <div>
+                    <IconButton
+                      src={Close}
+                      iconAs={Icon}
+                      alt="close-feedback"
+                      onClick={closeFeedbackWidget}
+                      variant="secondary"
+                      className="ml-1 mr-2 float-right"
+                      id="close-feedback-button"
+                    />
+                  </div>
+                </ActionRow>
+              </div>
+            )
+          }
+          {
+            showGratitudeText && (
+              <div className="ml-4 mr-4">
+                <ActionRow className="m-2 justify-content-center">
+                  {formatMessage(messages.gratitudeText)}
+                </ActionRow>
+              </div>
+            )
+          }
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+FeedbackWidget.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  translationLanguage: PropTypes.string.isRequired,
+  userId: PropTypes.string.isRequired,
+  unitId: PropTypes.string.isRequired,
+};
+
+FeedbackWidget.defaultProps = {};
+
+export default FeedbackWidget;
--- a/plugins/UnitTranslationPlugin/feedback-widget/index.scss
+++ b/plugins/UnitTranslationPlugin/feedback-widget/index.scss
@@ -0,0 +1,4 @@
+.action-row-divider {
+    font-size: 31px;
+    font-weight: 100;
+}
--- a/plugins/UnitTranslationPlugin/feedback-widget/index.test.jsx
+++ b/plugins/UnitTranslationPlugin/feedback-widget/index.test.jsx
@@ -0,0 +1,107 @@
+import { useState } from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import FeedbackWidget from './index';
+import useFeedbackWidget from './useFeedbackWidget';
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useState: jest.fn((value) => [value, jest.fn()]),
+}));
+jest.mock('@openedx/paragon', () => jest.requireActual('@edx/react-unit-test-utils').mockComponents({
+  ActionRow: {
+    Spacer: 'Spacer',
+  },
+  IconButton: 'IconButton',
+  Icon: 'Icon',
+}));
+jest.mock('@openedx/paragon/icons', () => ({
+  Close: 'Close',
+  ThumbUpOutline: 'ThumbUpOutline',
+  ThumbDownOffAlt: 'ThumbDownOffAlt',
+}));
+jest.mock('./useFeedbackWidget');
+jest.mock('@edx/frontend-platform/i18n', () => {
+  const i18n = jest.requireActual('@edx/frontend-platform/i18n');
+  const { formatMessage } = jest.requireActual('@edx/react-unit-test-utils');
+  return {
+    ...i18n,
+    useIntl: jest.fn(() => ({
+      formatMessage,
+    })),
+  };
+});
+
+describe('<FeedbackWidget />', () => {
+  const props = {
+    courseId: 'course-v1:edX+DemoX+Demo_Course',
+    translationLanguage: 'es',
+    unitId:
+      'block-v1:edX+DemoX+Demo_Course+type@vertical+block@37b72b3915204b70acb00c55b604b563',
+    userId: '123',
+  };
+
+  const mockUseFeedbackWidget = ({ showFeedbackWidget, showGratitudeText }) => {
+    useFeedbackWidget.mockReturnValueOnce({
+      closeFeedbackWidget: jest.fn().mockName('closeFeedbackWidget'),
+      sendFeedback: jest.fn().mockName('sendFeedback'),
+      onThumbsUpClick: jest.fn().mockName('onThumbsUpClick'),
+      onThumbsDownClick: jest.fn().mockName('onThumbsDownClick'),
+      showFeedbackWidget,
+      showGratitudeText,
+    });
+  };
+
+  it('renders hidden by default', () => {
+    mockUseFeedbackWidget({
+      showFeedbackWidget: true,
+      showGratitudeText: true,
+    });
+    const wrapper = shallow(<FeedbackWidget {...props} />);
+    expect(wrapper.snapshot).toMatchSnapshot();
+    expect(wrapper.instance.findByType('div')[0].props.className).toContain(
+      'd-none',
+    );
+  });
+
+  it('renders show when elemReady is true', () => {
+    mockUseFeedbackWidget({
+      showFeedbackWidget: true,
+      showGratitudeText: true,
+    });
+    useState.mockReturnValueOnce([true, jest.fn()]);
+    const wrapper = shallow(<FeedbackWidget {...props} />);
+    expect(wrapper.snapshot).toMatchSnapshot();
+    expect(wrapper.instance.findByType('div')[0].props.className).not.toContain(
+      'd-none',
+    );
+  });
+
+  it('render empty when showFeedbackWidget and showGratitudeText are false', () => {
+    mockUseFeedbackWidget({
+      showFeedbackWidget: false,
+      showGratitudeText: false,
+    });
+    useState.mockReturnValueOnce([true, jest.fn()]);
+    const wrapper = shallow(<FeedbackWidget {...props} />);
+    expect(wrapper.instance.findByType('div')[0].children.length).toBe(0);
+  });
+
+  it('render feedback widget', () => {
+    mockUseFeedbackWidget({
+      showFeedbackWidget: true,
+      showGratitudeText: false,
+    });
+    const wrapper = shallow(<FeedbackWidget {...props} />);
+    expect(wrapper.snapshot).toMatchSnapshot();
+  });
+
+  it('render gratitude text', () => {
+    mockUseFeedbackWidget({
+      showFeedbackWidget: false,
+      showGratitudeText: true,
+    });
+    const wrapper = shallow(<FeedbackWidget {...props} />);
+    expect(wrapper.snapshot).toMatchSnapshot();
+  });
+});
--- a/plugins/UnitTranslationPlugin/feedback-widget/messages.js
+++ b/plugins/UnitTranslationPlugin/feedback-widget/messages.js
@@ -0,0 +1,16 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  rateTranslationText: {
+    id: 'feedbackWidget.rateTranslationText',
+    defaultMessage: 'Rate this page translation',
+    description: 'Title for the feedback widget action row.',
+  },
+  gratitudeText: {
+    id: 'feedbackWidget.gratitudeText',
+    defaultMessage: 'Thank you! Your feedback matters.',
+    description: 'Title for secondary action row.',
+  },
+});
+
+export default messages;
--- a/plugins/UnitTranslationPlugin/feedback-widget/useFeedbackWidget.js
+++ b/plugins/UnitTranslationPlugin/feedback-widget/useFeedbackWidget.js
@@ -0,0 +1,82 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { createTranslationFeedback, getTranslationFeedback } from '../data/api';
+
+const useFeedbackWidget = ({
+  courseId,
+  translationLanguage,
+  unitId,
+  userId,
+}) => {
+  const [showFeedbackWidget, setShowFeedbackWidget] = useState(false);
+  const [showGratitudeText, setShowGratitudeText] = useState(false);
+
+  const closeFeedbackWidget = useCallback(() => {
+    setShowFeedbackWidget(false);
+  }, [setShowFeedbackWidget]);
+
+  const openFeedbackWidget = useCallback(() => {
+    setShowFeedbackWidget(true);
+  }, [setShowFeedbackWidget]);
+
+  useEffect(async () => {
+    const translationFeedback = await getTranslationFeedback({
+      courseId,
+      translationLanguage,
+      unitId,
+      userId,
+    });
+    setShowFeedbackWidget(!translationFeedback);
+  }, [
+    courseId,
+    translationLanguage,
+    unitId,
+    userId,
+  ]);
+
+  const openGratitudeText = useCallback(() => {
+    setShowGratitudeText(true);
+    setTimeout(() => {
+      setShowGratitudeText(false);
+    }, 3000);
+  }, [setShowGratitudeText]);
+
+  const sendFeedback = useCallback(async (feedbackValue) => {
+    await createTranslationFeedback({
+      courseId,
+      feedbackValue,
+      translationLanguage,
+      unitId,
+      userId,
+    });
+    closeFeedbackWidget();
+    openGratitudeText();
+  }, [
+    courseId,
+    translationLanguage,
+    unitId,
+    userId,
+    closeFeedbackWidget,
+    openGratitudeText,
+  ]);
+
+  const onThumbsUpClick = useCallback(() => {
+    sendFeedback(true);
+  }, [sendFeedback]);
+  const onThumbsDownClick = useCallback(() => {
+    sendFeedback(false);
+  }, [sendFeedback]);
+
+  return {
+    closeFeedbackWidget,
+    openFeedbackWidget,
+    openGratitudeText,
+    sendFeedback,
+    showFeedbackWidget,
+    showGratitudeText,
+    onThumbsUpClick,
+    onThumbsDownClick,
+  };
+};
+
+export default useFeedbackWidget;
--- a/plugins/UnitTranslationPlugin/feedback-widget/useFeedbackWidget.test.js
+++ b/plugins/UnitTranslationPlugin/feedback-widget/useFeedbackWidget.test.js
@@ -0,0 +1,163 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+
+import useFeedbackWidget from './useFeedbackWidget';
+import { createTranslationFeedback, getTranslationFeedback } from '../data/api';
+
+jest.mock('../data/api', () => ({
+  createTranslationFeedback: jest.fn(),
+  getTranslationFeedback: jest.fn(),
+}));
+
+const initialProps = {
+  courseId: 'course-v1:edX+DemoX+Demo_Course',
+  translationLanguage: 'es',
+  unitId: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc',
+  userId: 3,
+};
+
+const newProps = {
+  courseId: 'course-v1:edX+DemoX+Demo_Course',
+  translationLanguage: 'fr',
+  unitId: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc',
+  userId: 3,
+};
+
+describe('useFeedbackWidget', () => {
+  beforeEach(async () => {
+    getTranslationFeedback.mockReturnValue('');
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  test('closeFeedbackWidget behavior', () => {
+    const { result, waitFor } = renderHook(() => useFeedbackWidget(initialProps));
+    waitFor(() => expect(result.current.showFeedbackWidget.toBe(true)));
+    act(() => {
+      result.current.closeFeedbackWidget();
+    });
+    expect(result.current.showFeedbackWidget).toBe(false);
+  });
+
+  test('openFeedbackWidget behavior', () => {
+    const { result } = renderHook(() => useFeedbackWidget(initialProps));
+    act(() => {
+      result.current.closeFeedbackWidget();
+    });
+    expect(result.current.showFeedbackWidget).toBe(false);
+    act(() => {
+      result.current.openFeedbackWidget();
+    });
+    expect(result.current.showFeedbackWidget).toBe(true);
+  });
+
+  test('openGratitudeText behavior', async () => {
+    const { result, waitFor } = renderHook(() => useFeedbackWidget(initialProps));
+
+    expect(result.current.showGratitudeText).toBe(false);
+    act(() => {
+      result.current.openGratitudeText();
+    });
+    expect(result.current.showGratitudeText).toBe(true);
+    // Wait for 3 seconds to hide the gratitude text
+    waitFor(() => {
+      expect(result.current.showGratitudeText).toBe(false);
+    }, { timeout: 3000 });
+  });
+
+  test('sendFeedback behavior', () => {
+    const { result, waitFor } = renderHook(() => useFeedbackWidget(initialProps));
+    const feedbackValue = true;
+
+    waitFor(() => expect(result.current.showFeedbackWidget.toBe(true)));
+
+    expect(result.current.showGratitudeText).toBe(false);
+    act(() => {
+      result.current.sendFeedback(feedbackValue);
+    });
+
+    waitFor(() => {
+      expect(result.current.showFeedbackWidget).toBe(false);
+      expect(result.current.showGratitudeText).toBe(true);
+    });
+
+    expect(createTranslationFeedback).toHaveBeenCalledWith({
+      courseId: initialProps.courseId,
+      feedbackValue,
+      translationLanguage: initialProps.translationLanguage,
+      unitId: initialProps.unitId,
+      userId: initialProps.userId,
+    });
+
+    // Wait for 3 seconds to hide the gratitude text
+    waitFor(() => {
+      expect(result.current.showGratitudeText).toBe(false);
+    }, { timeout: 3000 });
+  });
+
+  test('onThumbsUpClick behavior', () => {
+    const { result } = renderHook(() => useFeedbackWidget(initialProps));
+
+    act(() => {
+      result.current.onThumbsUpClick();
+    });
+
+    expect(createTranslationFeedback).toHaveBeenCalledWith({
+      courseId: initialProps.courseId,
+      feedbackValue: true,
+      translationLanguage: initialProps.translationLanguage,
+      unitId: initialProps.unitId,
+      userId: initialProps.userId,
+    });
+  });
+
+  test('onThumbsDownClick behavior', () => {
+    const { result } = renderHook(() => useFeedbackWidget(initialProps));
+
+    act(() => {
+      result.current.onThumbsDownClick();
+    });
+
+    expect(createTranslationFeedback).toHaveBeenCalledWith({
+      courseId: initialProps.courseId,
+      feedbackValue: false,
+      translationLanguage: initialProps.translationLanguage,
+      unitId: initialProps.unitId,
+      userId: initialProps.userId,
+    });
+  });
+
+  test('fetch feedback on initialization', () => {
+    const { waitFor } = renderHook(() => useFeedbackWidget(initialProps));
+    waitFor(() => {
+      expect(getTranslationFeedback).toHaveBeenCalledWith({
+        courseId: initialProps.courseId,
+        translationLanguage: initialProps.translationLanguage,
+        unitId: initialProps.unitId,
+        userId: initialProps.userId,
+      });
+    });
+  });
+
+  test('fetch feedback on props update', () => {
+    const { rerender, waitFor } = renderHook(() => useFeedbackWidget(initialProps));
+    waitFor(() => {
+      expect(getTranslationFeedback).toHaveBeenCalledWith({
+        courseId: initialProps.courseId,
+        translationLanguage: initialProps.translationLanguage,
+        unitId: initialProps.unitId,
+        userId: initialProps.userId,
+      });
+    });
+    rerender(newProps);
+    waitFor(() => {
+      expect(getTranslationFeedback).toHaveBeenCalledWith({
+        courseId: newProps.courseId,
+        translationLanguage: newProps.translationLanguage,
+        unitId: newProps.unitId,
+        userId: newProps.userId,
+      });
+    });
+  });
+});
--- a/plugins/UnitTranslationPlugin/index.jsx
+++ b/plugins/UnitTranslationPlugin/index.jsx
@@ -0,0 +1,43 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { useModel } from '@src/generic/model-store';
+
+import TranslationSelection from './translation-selection';
+import { fetchTranslationConfig } from './data/api';
+
+const UnitTranslationPlugin = ({ id, courseId, unitId }) => {
+  const { language } = useModel('coursewareMeta', courseId);
+  const [translationConfig, setTranslationConfig] = useState({
+    enabled: false,
+    availableLanguages: [],
+  });
+
+  useEffect(() => {
+    fetchTranslationConfig(courseId).then(setTranslationConfig);
+  }, []);
+
+  const { enabled, availableLanguages } = translationConfig;
+
+  if (!enabled || !language || !availableLanguages.length) {
+    return null;
+  }
+
+  return (
+    <TranslationSelection
+      id={id}
+      courseId={courseId}
+      language={language}
+      availableLanguages={availableLanguages}
+      unitId={unitId}
+    />
+  );
+};
+
+UnitTranslationPlugin.propTypes = {
+  id: PropTypes.string.isRequired,
+  courseId: PropTypes.string.isRequired,
+  unitId: PropTypes.string.isRequired,
+};
+
+export default UnitTranslationPlugin;
--- a/plugins/UnitTranslationPlugin/index.test.jsx
+++ b/plugins/UnitTranslationPlugin/index.test.jsx
@@ -0,0 +1,62 @@
+import { shallow } from '@edx/react-unit-test-utils';
+import { useState } from 'react';
+import { useModel } from '@src/generic/model-store';
+
+import UnitTranslationPlugin from './index';
+
+jest.mock('@src/generic/model-store');
+jest.mock('./data/api', () => ({
+  fetchTranslationConfig: jest.fn(),
+}));
+jest.mock('./translation-selection', () => 'TranslationSelection');
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useState: jest.fn(),
+}));
+
+describe('<UnitTranslationPlugin />', () => {
+  const props = {
+    id: 'id',
+    courseId: 'courseId',
+    unitId: 'unitId',
+  };
+  const mockInitialState = ({ enabled = true, availableLanguages = ['en'] }) => {
+    useState.mockReturnValue([{ enabled, availableLanguages }, jest.fn()]);
+  };
+  it('render empty when translation is not enabled', () => {
+    useModel.mockReturnValue({ language: 'en' });
+    mockInitialState({ enabled: false });
+
+    const wrapper = shallow(<UnitTranslationPlugin {...props} />);
+
+    expect(wrapper.isEmptyRender()).toBe(true);
+  });
+  it('render empty when available languages is empty', () => {
+    useModel.mockReturnValue({ language: 'fr' });
+    mockInitialState({
+      availableLanguages: [],
+    });
+
+    const wrapper = shallow(<UnitTranslationPlugin {...props} />);
+
+    expect(wrapper.isEmptyRender()).toBe(true);
+  });
+
+  it('render empty when course language has not been set', () => {
+    useModel.mockReturnValue({ language: undefined });
+    mockInitialState({});
+
+    const wrapper = shallow(<UnitTranslationPlugin {...props} />);
+
+    expect(wrapper.isEmptyRender()).toBe(true);
+  });
+
+  it('render TranslationSelection when translation is enabled and language is available', () => {
+    useModel.mockReturnValue({ language: 'en' });
+    mockInitialState({});
+
+    const wrapper = shallow(<UnitTranslationPlugin {...props} />);
+
+    expect(wrapper.snapshot).toMatchSnapshot();
+  });
+});
--- a/plugins/UnitTranslationPlugin/translation-selection/TranslationModal.jsx
+++ b/plugins/UnitTranslationPlugin/translation-selection/TranslationModal.jsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  StandardModal,
+  ActionRow,
+  Button,
+  Icon,
+  ListBox,
+  ListBoxOption,
+} from '@openedx/paragon';
+import { Check } from '@openedx/paragon/icons';
+
+import useTranslationModal from './useTranslationModal';
+import messages from './messages';
+
+import './TranslationModal.scss';
+
+const TranslationModal = ({
+  isOpen,
+  close,
+  selectedLanguage,
+  setSelectedLanguage,
+  availableLanguages,
+}) => {
+  const { formatMessage } = useIntl();
+  const { selectedIndex, setSelectedIndex, onSubmit } = useTranslationModal({
+    selectedLanguage,
+    setSelectedLanguage,
+    close,
+    availableLanguages,
+  });
+
+  return (
+    <StandardModal
+      title={formatMessage(messages.languageSelectionModalTitle)}
+      isOpen={isOpen}
+      onClose={close}
+      footerNode={(
+        <ActionRow>
+          <ActionRow.Spacer />
+          <Button variant="tertiary" onClick={close}>
+            {formatMessage(messages.cancelButtonText)}
+          </Button>
+          <Button onClick={onSubmit}>
+            {formatMessage(messages.submitButtonText)}
+          </Button>
+        </ActionRow>
+      )}
+    >
+      <ListBox className="listbox-container">
+        {availableLanguages.map(({ code, label }, index) => (
+          <ListBoxOption
+            className="d-flex justify-content-between"
+            key={code}
+            selectedOptionIndex={selectedIndex}
+            onSelect={() => setSelectedIndex(index)}
+          >
+            {label}
+            {selectedIndex === index && <Icon src={Check} />}
+          </ListBoxOption>
+        ))}
+      </ListBox>
+    </StandardModal>
+  );
+};
+
+TranslationModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  close: PropTypes.func.isRequired,
+  selectedLanguage: PropTypes.string.isRequired,
+  setSelectedLanguage: PropTypes.func.isRequired,
+  availableLanguages: PropTypes.arrayOf(
+    PropTypes.shape({
+      code: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+    }),
+  ).isRequired,
+};
+
+export default TranslationModal;
--- a/plugins/UnitTranslationPlugin/translation-selection/TranslationModal.scss
+++ b/plugins/UnitTranslationPlugin/translation-selection/TranslationModal.scss
@@ -0,0 +1,7 @@
+.listbox-container {
+  max-height: 400px;
+
+  :last-child {
+    margin-bottom: 5px;
+  }
+}
--- a/plugins/UnitTranslationPlugin/translation-selection/TranslationModal.test.jsx
+++ b/plugins/UnitTranslationPlugin/translation-selection/TranslationModal.test.jsx
@@ -0,0 +1,59 @@
+import { shallow } from '@edx/react-unit-test-utils';
+
+import TranslationModal from './TranslationModal';
+
+jest.mock('./useTranslationModal', () => ({
+  __esModule: true,
+  default: () => ({
+    selectedIndex: 0,
+    setSelectedIndex: jest.fn(),
+    onSubmit: jest.fn().mockName('onSubmit'),
+  }),
+}));
+jest.mock('@openedx/paragon', () => jest.requireActual('@edx/react-unit-test-utils').mockComponents({
+  StandardModal: 'StandardModal',
+  ActionRow: {
+    Spacer: 'Spacer',
+  },
+  Button: 'Button',
+  Icon: 'Icon',
+  ListBox: 'ListBox',
+  ListBoxOption: 'ListBoxOption',
+}));
+jest.mock('@openedx/paragon/icons', () => ({
+  Check: jest.fn().mockName('icons.Check'),
+}));
+jest.mock('@edx/frontend-platform/i18n', () => {
+  const i18n = jest.requireActual('@edx/frontend-platform/i18n');
+  const { formatMessage } = jest.requireActual('@edx/react-unit-test-utils');
+  return {
+    ...i18n,
+    useIntl: jest.fn(() => ({
+      formatMessage,
+    })),
+  };
+});
+
+describe('TranslationModal', () => {
+  const props = {
+    isOpen: true,
+    close: jest.fn().mockName('close'),
+    selectedLanguage: 'en',
+    setSelectedLanguage: jest.fn().mockName('setSelectedLanguage'),
+    availableLanguages: [
+      {
+        code: 'en',
+        label: 'English',
+      },
+      {
+        code: 'es',
+        label: 'Spanish',
+      },
+    ],
+  };
+  it('renders correctly', () => {
+    const wrapper = shallow(<TranslationModal {...props} />);
+    expect(wrapper.snapshot).toMatchSnapshot();
+    expect(wrapper.instance.findByType('ListBoxOption')).toHaveLength(2);
+  });
+});
--- a/plugins/UnitTranslationPlugin/translation-selection/snapshots/TranslationModal.test.jsx.snap
+++ b/plugins/UnitTranslationPlugin/translation-selection/snapshots/TranslationModal.test.jsx.snap
@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TranslationModal renders correctly 1`] = `
+<StandardModal
+  footerNode={
+    <ActionRow>
+      <Spacer />
+      <Button
+        onClick={[MockFunction close]}
+        variant="tertiary"
+      >
+        Cancel
+      </Button>
+      <Button
+        onClick={[MockFunction onSubmit]}
+      >
+        Submit
+      </Button>
+    </ActionRow>
+  }
+  isOpen={true}
+  onClose={[MockFunction close]}
+  title="Translate this course"
+>
+  <ListBox
+    className="listbox-container"
+  >
+    <ListBoxOption
+      className="d-flex justify-content-between"
+      key="en"
+      onSelect={[Function]}
+      selectedOptionIndex={0}
+    >
+      English
+      <Icon
+        src={[MockFunction icons.Check]}
+      />
+    </ListBoxOption>
+    <ListBoxOption
+      className="d-flex justify-content-between"
+      key="es"
+      onSelect={[Function]}
+      selectedOptionIndex={0}
+    >
+      Spanish
+    </ListBoxOption>
+  </ListBox>
+</StandardModal>
+`;
--- a/plugins/UnitTranslationPlugin/translation-selection/snapshots/index.test.jsx.snap
+++ b/plugins/UnitTranslationPlugin/translation-selection/snapshots/index.test.jsx.snap
@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<TranslationSelection /> renders 1`] = `
+<Fragment>
+  <ProductTour
+    tours={
+      Array [
+        Object {
+          "abitrarily": "defined",
+        },
+      ]
+    }
+  />
+  <IconButton
+    alt="change-language"
+    className="mr-2 mb-2 float-right"
+    iconAs="Icon"
+    id="translation-selection-button"
+    onClick={[MockFunction open]}
+    src="Language"
+    variant="primary"
+  />
+  <TranslationModal
+    availableLanguages={
+      Array [
+        Object {
+          "code": "en",
+          "label": "English",
+        },
+        Object {
+          "code": "es",
+          "label": "Spanish",
+        },
+      ]
+    }
+    close={[MockFunction close]}
+    courseId="course-v1:edX+DemoX+Demo_Course"
+    id="plugin-test-id"
+    isOpen={false}
+    selectedLanguage="en"
+    setSelectedLanguage={[MockFunction setSelectedLanguage]}
+  />
+  <FeedbackWidget
+    courseId="course-v1:edX+DemoX+Demo_Course"
+    translationLanguage="en"
+    unitId="unit-test-id"
+    userId="123"
+  />
+</Fragment>
+`;
--- a/plugins/UnitTranslationPlugin/translation-selection/index.jsx
+++ b/plugins/UnitTranslationPlugin/translation-selection/index.jsx
@@ -0,0 +1,100 @@
+import React, { useContext, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+import { AppContext } from '@edx/frontend-platform/react';
+import { IconButton, Icon, ProductTour } from '@openedx/paragon';
+import { Language } from '@openedx/paragon/icons';
+import { useDispatch } from 'react-redux';
+import { stringifyUrl } from 'query-string';
+
+import { registerOverrideMethod } from '@src/generic/plugin-store';
+
+import TranslationModal from './TranslationModal';
+import useTranslationTour from './useTranslationTour';
+import useSelectLanguage from './useSelectLanguage';
+import FeedbackWidget from '../feedback-widget';
+
+const TranslationSelection = ({
+  id, courseId, language, availableLanguages, unitId,
+}) => {
+  const {
+    authenticatedUser: { userId },
+  } = useContext(AppContext);
+  const dispatch = useDispatch();
+  const {
+    translationTour, isOpen, open, close,
+  } = useTranslationTour();
+
+  const { selectedLanguage, setSelectedLanguage } = useSelectLanguage({
+    courseId,
+    language,
+  });
+
+  useEffect(() => {
+    dispatch(
+      registerOverrideMethod({
+        pluginName: id,
+        methodName: 'getIFrameUrl',
+        method: (iframeUrl) => {
+          const finalUrl = stringifyUrl({
+            url: iframeUrl,
+            query: {
+              ...(language
+                && selectedLanguage
+                && language !== selectedLanguage && {
+                src_lang: language,
+                dest_lang: selectedLanguage,
+              }),
+            },
+          });
+          return finalUrl;
+        },
+      }),
+    );
+  }, [language, selectedLanguage]);
+
+  return (
+    <>
+      <ProductTour tours={[translationTour]} />
+      <IconButton
+        src={Language}
+        iconAs={Icon}
+        alt="change-language"
+        onClick={open}
+        variant="primary"
+        className="mr-2 mb-2 float-right"
+        id="translation-selection-button"
+      />
+      <TranslationModal
+        isOpen={isOpen}
+        close={close}
+        courseId={courseId}
+        selectedLanguage={selectedLanguage}
+        setSelectedLanguage={setSelectedLanguage}
+        availableLanguages={availableLanguages}
+        id={id}
+      />
+      <FeedbackWidget
+        courseId={courseId}
+        translationLanguage={selectedLanguage}
+        unitId={unitId}
+        userId={userId}
+      />
+    </>
+  );
+};
+
+TranslationSelection.propTypes = {
+  id: PropTypes.string.isRequired,
+  courseId: PropTypes.string.isRequired,
+  unitId: PropTypes.string.isRequired,
+  language: PropTypes.string.isRequired,
+  availableLanguages: PropTypes.arrayOf(PropTypes.shape({
+    code: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+  })).isRequired,
+};
+
+TranslationSelection.defaultProps = {};
+
+export default TranslationSelection;
--- a/plugins/UnitTranslationPlugin/translation-selection/index.test.jsx
+++ b/plugins/UnitTranslationPlugin/translation-selection/index.test.jsx
@@ -0,0 +1,63 @@
+import { shallow } from '@edx/react-unit-test-utils';
+
+import TranslationSelection from './index';
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useContext: jest.fn().mockName('useContext').mockReturnValue({
+    authenticatedUser: {
+      userId: '123',
+    },
+  }),
+}));
+jest.mock('@openedx/paragon', () => ({
+  IconButton: 'IconButton',
+  Icon: 'Icon',
+  ProductTour: 'ProductTour',
+}));
+jest.mock('@openedx/paragon/icons', () => ({
+  Language: 'Language',
+}));
+jest.mock('./useTranslationTour', () => () => ({
+  translationTour: {
+    abitrarily: 'defined',
+  },
+  isOpen: false,
+  open: jest.fn().mockName('open'),
+  close: jest.fn().mockName('close'),
+}));
+jest.mock('react-redux', () => ({
+  useDispatch: jest.fn().mockName('useDispatch'),
+}));
+jest.mock('@src/generic/plugin-store', () => ({
+  registerOverrideMethod: jest.fn().mockName('registerOverrideMethod'),
+}));
+jest.mock('./TranslationModal', () => 'TranslationModal');
+jest.mock('./useSelectLanguage', () => () => ({
+  selectedLanguage: 'en',
+  setSelectedLanguage: jest.fn().mockName('setSelectedLanguage'),
+}));
+jest.mock('../feedback-widget', () => 'FeedbackWidget');
+
+describe('<TranslationSelection />', () => {
+  const props = {
+    id: 'plugin-test-id',
+    courseId: 'course-v1:edX+DemoX+Demo_Course',
+    language: 'en',
+    availableLanguages: [
+      {
+        code: 'en',
+        label: 'English',
+      },
+      {
+        code: 'es',
+        label: 'Spanish',
+      },
+    ],
+    unitId: 'unit-test-id',
+  };
+  it('renders', () => {
+    const wrapper = shallow(<TranslationSelection {...props} />);
+    expect(wrapper.snapshot).toMatchSnapshot();
+  });
+});
--- a/plugins/UnitTranslationPlugin/translation-selection/messages.js
+++ b/plugins/UnitTranslationPlugin/translation-selection/messages.js
@@ -0,0 +1,41 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  translationTourModalTitle: {
+    id: 'translationSelection.translationTourModalTitle',
+    defaultMessage: 'This is a standard modal dialog',
+    description: 'Title for the translation modal.',
+  },
+  translationTourModalBody: {
+    id: 'translationSelection.translationTourModalBody',
+    defaultMessage: 'Now you can easily translate course content.',
+    description: 'Body for the translation modal.',
+  },
+  tryItButtonText: {
+    id: 'translationSelection.tryItButtonText',
+    defaultMessage: 'Try it',
+    description: 'Button text for the translation modal.',
+  },
+  dismissButtonText: {
+    id: 'translationSelection.dismissButtonText',
+    defaultMessage: 'Dismiss',
+    description: 'Button text for the translation modal.',
+  },
+  languageSelectionModalTitle: {
+    id: 'translationSelection.languageSelectionModalTitle',
+    defaultMessage: 'Translate this course',
+    description: 'Title for the translation modal.',
+  },
+  cancelButtonText: {
+    id: 'translationSelection.cancelButtonText',
+    defaultMessage: 'Cancel',
+    description: 'Button text for the translation modal.',
+  },
+  submitButtonText: {
+    id: 'translationSelection.submitButtonText',
+    defaultMessage: 'Submit',
+    description: 'Button text for the translation modal.',
+  },
+});
+
+export default messages;
--- a/plugins/UnitTranslationPlugin/translation-selection/useSelectLanguage.js
+++ b/plugins/UnitTranslationPlugin/translation-selection/useSelectLanguage.js
@@ -0,0 +1,35 @@
+import { useCallback } from 'react';
+import { StrictDict, useKeyedState } from '@edx/react-unit-test-utils';
+import {
+  getLocalStorage,
+  setLocalStorage,
+} from '@src/data/localStorage';
+
+export const selectedLanguageKey = 'selectedLanguages';
+
+export const stateKeys = StrictDict({
+  selectedLanguage: 'selectedLanguage',
+});
+
+const useSelectLanguage = ({ courseId, language }) => {
+  const selectedLanguageItem = getLocalStorage(selectedLanguageKey) || {};
+  const [selectedLanguage, updateSelectedLanguage] = useKeyedState(
+    stateKeys.selectedLanguage,
+    selectedLanguageItem[courseId] || language,
+  );
+
+  const setSelectedLanguage = useCallback((newSelectedLanguage) => {
+    setLocalStorage(selectedLanguageKey, {
+      ...selectedLanguageItem,
+      [courseId]: newSelectedLanguage,
+    });
+    updateSelectedLanguage(newSelectedLanguage);
+  });
+
+  return {
+    selectedLanguage,
+    setSelectedLanguage,
+  };
+};
+
+export default useSelectLanguage;
--- a/plugins/UnitTranslationPlugin/translation-selection/useSelectLanguage.test.js
+++ b/plugins/UnitTranslationPlugin/translation-selection/useSelectLanguage.test.js
@@ -0,0 +1,63 @@
+import { mockUseKeyedState } from '@edx/react-unit-test-utils';
+import {
+  getLocalStorage,
+  setLocalStorage,
+} from '@src/data/localStorage';
+
+import useSelectLanguage, {
+  stateKeys,
+  selectedLanguageKey,
+} from './useSelectLanguage';
+
+const state = mockUseKeyedState(stateKeys);
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useCallback: jest.fn((cb, prereqs) => (...args) => [
+    cb(...args),
+    { cb, prereqs },
+  ]),
+}));
+jest.mock('@src/data/localStorage', () => ({
+  getLocalStorage: jest.fn(),
+  setLocalStorage: jest.fn(),
+}));
+
+describe('useSelectLanguage', () => {
+  const props = {
+    courseId: 'test-course-id',
+    language: 'en',
+  };
+  const languages = [
+    { code: 'en', label: 'English' },
+    { code: 'es', label: 'Spanish' },
+  ];
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    state.mock();
+  });
+  afterEach(() => {
+    state.resetVals();
+  });
+
+  languages.forEach(({ code, label }) => {
+    it(`initializes selectedLanguage to the selected language (${label})`, () => {
+      getLocalStorage.mockReturnValueOnce({ [props.courseId]: code });
+      const { selectedLanguage } = useSelectLanguage(props);
+
+      state.expectInitializedWith(stateKeys.selectedLanguage, code);
+      expect(selectedLanguage).toBe(code);
+    });
+  });
+
+  test('setSelectedLanguage behavior', () => {
+    const { setSelectedLanguage } = useSelectLanguage(props);
+
+    setSelectedLanguage('es');
+    state.expectSetStateCalledWith(stateKeys.selectedLanguage, 'es');
+    expect(setLocalStorage).toHaveBeenCalledWith(selectedLanguageKey, {
+      [props.courseId]: 'es',
+    });
+  });
+});
--- a/plugins/UnitTranslationPlugin/translation-selection/useTranslationModal.js
+++ b/plugins/UnitTranslationPlugin/translation-selection/useTranslationModal.js
@@ -0,0 +1,29 @@
+import { useCallback } from 'react';
+import { StrictDict, useKeyedState } from '@edx/react-unit-test-utils';
+
+export const stateKeys = StrictDict({
+  selectedIndex: 'selectedIndex',
+});
+
+const useTranslationModal = ({
+  selectedLanguage, setSelectedLanguage, close, availableLanguages,
+}) => {
+  const [selectedIndex, setSelectedIndex] = useKeyedState(
+    stateKeys.selectedIndex,
+    availableLanguages.findIndex((lang) => lang.code === selectedLanguage),
+  );
+
+  const onSubmit = useCallback(() => {
+    const newSelectedLanguage = availableLanguages[selectedIndex].code;
+    setSelectedLanguage(newSelectedLanguage);
+    close();
+  }, [selectedIndex]);
+
+  return {
+    selectedIndex,
+    setSelectedIndex,
+    onSubmit,
+  };
+};
+
+export default useTranslationModal;
--- a/plugins/UnitTranslationPlugin/translation-selection/useTranslationModal.test.js
+++ b/plugins/UnitTranslationPlugin/translation-selection/useTranslationModal.test.js
@@ -0,0 +1,49 @@
+import { mockUseKeyedState } from '@edx/react-unit-test-utils';
+
+import useTranslationModal, { stateKeys } from './useTranslationModal';
+
+const state = mockUseKeyedState(stateKeys);
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useCallback: jest.fn((cb, prereqs) => (...args) => ([
+    cb(...args), { cb, prereqs },
+  ])),
+}));
+
+describe('useTranslationModal', () => {
+  const props = {
+    selectedLanguage: 'en',
+    setSelectedLanguage: jest.fn(),
+    close: jest.fn(),
+    availableLanguages: [
+      { code: 'en', label: 'English' },
+      { code: 'es', label: 'Spanish' },
+    ],
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    state.mock();
+  });
+  afterEach(() => {
+    state.resetVals();
+  });
+
+  it('initializes selectedIndex to the index of the selected language', () => {
+    const { selectedIndex } = useTranslationModal(props);
+
+    state.expectInitializedWith(stateKeys.selectedIndex, 0);
+    expect(selectedIndex).toBe(0);
+  });
+
+  it('onSubmit updates the selected language and closes the modal', () => {
+    const { onSubmit } = useTranslationModal({
+      ...props,
+      selectedLanguage: 'es',
+    });
+    onSubmit();
+    expect(props.setSelectedLanguage).toHaveBeenCalledWith('es');
+    expect(props.close).toHaveBeenCalled();
+  });
+});
--- a/plugins/UnitTranslationPlugin/translation-selection/useTranslationTour.js
+++ b/plugins/UnitTranslationPlugin/translation-selection/useTranslationTour.js
@@ -0,0 +1,62 @@
+import { useCallback } from 'react';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { useToggle } from '@openedx/paragon';
+import { StrictDict, useKeyedState } from '@edx/react-unit-test-utils';
+
+import messages from './messages';
+
+const hasSeenTranslationTourKey = 'hasSeenTranslationTour';
+
+export const stateKeys = StrictDict({
+  showTranslationTour: 'showTranslationTour',
+});
+
+const useTranslationTour = () => {
+  const { formatMessage } = useIntl();
+
+  const [isTourEnabled, setIsTourEnabled] = useKeyedState(
+    stateKeys.showTranslationTour,
+    global.localStorage.getItem(hasSeenTranslationTourKey) !== 'true',
+  );
+  const [isOpen, open, close] = useToggle(false);
+
+  const endTour = useCallback(() => {
+    global.localStorage.setItem(hasSeenTranslationTourKey, 'true');
+    setIsTourEnabled(false);
+  }, [isTourEnabled, setIsTourEnabled]);
+
+  const tryIt = useCallback(() => {
+    endTour();
+    open();
+  }, [endTour, open]);
+
+  const translationTour = isTourEnabled
+    ? {
+      tourId: 'translation',
+      enabled: isTourEnabled,
+      onDismiss: endTour,
+      onEnd: tryIt,
+      checkpoints: [
+        {
+          title: formatMessage(messages.translationTourModalTitle),
+          body: formatMessage(messages.translationTourModalBody),
+          placement: 'bottom',
+          target: '#translation-selection-button',
+          showDismissButton: true,
+          endButtonText: formatMessage(messages.tryItButtonText),
+          dismissButtonText: formatMessage(messages.dismissButtonText),
+        },
+      ],
+    }
+    : {};
+
+  return {
+    translationTour,
+    isOpen,
+    open,
+    close,
+  };
+};
+
+export default useTranslationTour;
--- a/plugins/UnitTranslationPlugin/translation-selection/useTranslationTour.test.js
+++ b/plugins/UnitTranslationPlugin/translation-selection/useTranslationTour.test.js
@@ -0,0 +1,95 @@
+import { mockUseKeyedState } from '@edx/react-unit-test-utils';
+import { useToggle } from '@openedx/paragon';
+
+import useTranslationTour, { stateKeys } from './useTranslationTour';
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useCallback: jest.fn((cb, prereqs) => () => {
+    cb();
+    return { useCallback: { cb, prereqs } };
+  }),
+}));
+jest.mock('@openedx/paragon', () => ({
+  useToggle: jest.fn(),
+}));
+jest.mock('@edx/frontend-platform/i18n', () => {
+  const i18n = jest.requireActual('@edx/frontend-platform/i18n');
+  const { formatMessage } = jest.requireActual('@edx/react-unit-test-utils');
+  // this provide consistent for the test on different platform/timezone
+  const formatDate = jest.fn(date => new Date(date).toISOString()).mockName('useIntl.formatDate');
+  return {
+    ...i18n,
+    useIntl: jest.fn(() => ({
+      formatMessage,
+      formatDate,
+    })),
+    defineMessages: m => m,
+    FormattedMessage: () => 'FormattedMessage',
+  };
+});
+jest.mock('@src/data/localStorage', () => ({
+  getLocalStorage: jest.fn(),
+  setLocalStorage: jest.fn(),
+}));
+
+const state = mockUseKeyedState(stateKeys);
+
+describe('useTranslationSelection', () => {
+  const mockLocalStroage = {
+    getItem: jest.fn(),
+    setItem: jest.fn(),
+  };
+
+  const toggleOpen = jest.fn();
+  const toggleClose = jest.fn();
+
+  useToggle.mockReturnValue([false, toggleOpen, toggleClose]);
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    state.mock();
+    window.localStorage = mockLocalStroage;
+  });
+  afterEach(() => {
+    state.resetVals();
+    delete window.localStorage;
+  });
+
+  it('do not have translation tour if user already seen it', () => {
+    mockLocalStroage.getItem.mockReturnValueOnce('not seen');
+    const { translationTour } = useTranslationTour();
+
+    expect(translationTour.enabled).toBe(true);
+  });
+
+  it('show translation tour if user has not seen it', () => {
+    mockLocalStroage.getItem.mockReturnValueOnce('true');
+    const { translationTour } = useTranslationTour();
+
+    expect(translationTour).toMatchObject({});
+  });
+  test('open and close as pass from useToggle', () => {
+    const { isOpen, open, close } = useTranslationTour();
+    expect(isOpen).toBe(false);
+    expect(toggleOpen).toBe(open);
+    expect(toggleClose).toBe(close);
+  });
+  test('end tour on dismiss button click', () => {
+    mockLocalStroage.getItem.mockReturnValueOnce('not seen');
+    const { translationTour } = useTranslationTour();
+    translationTour.onDismiss();
+    expect(mockLocalStroage.setItem).toHaveBeenCalledWith(
+      'hasSeenTranslationTour',
+      'true',
+    );
+    state.expectSetStateCalledWith(stateKeys.showTranslationTour, false);
+  });
+  test('end tour and open modal on try it button click', () => {
+    mockLocalStroage.getItem.mockReturnValueOnce('not seen');
+    const { translationTour } = useTranslationTour();
+    translationTour.onEnd();
+    state.expectSetStateCalledWith(stateKeys.showTranslationTour, false);
+    expect(toggleOpen).toHaveBeenCalled();
+  });
+});
--- a/src/alerts/access-expiration-alert/AccessExpirationAlert.jsx
+++ b/src/alerts/access-expiration-alert/AccessExpirationAlert.jsx
@@ -3,8 +3,8 @@ import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import {
  FormattedMessage, FormattedDate, injectIntl, intlShape,
 } from '@edx/frontend-platform/i18n';
-import { Alert, Hyperlink } from '@edx/paragon';
-import { Info } from '@edx/paragon/icons';
+import { Alert, Hyperlink } from '@openedx/paragon';
+import { Info } from '@openedx/paragon/icons';

 import messages from './messages';

--- a/src/alerts/access-expiration-alert/AccessExpirationMasqueradeBanner.jsx
+++ b/src/alerts/access-expiration-alert/AccessExpirationMasqueradeBanner.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, FormattedDate } from '@edx/frontend-platform/i18n';
-import { PageBanner } from '@edx/paragon';
+import { PageBanner } from '@openedx/paragon';

 const AccessExpirationMasqueradeBanner = ({ payload }) => {
  const {
--- a/src/alerts/active-enteprise-alert/ActiveEnterpriseAlert.jsx
+++ b/src/alerts/active-enteprise-alert/ActiveEnterpriseAlert.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
-import { Alert, Hyperlink } from '@edx/paragon';
-import { WarningFilled } from '@edx/paragon/icons';
+import { Alert, Hyperlink } from '@openedx/paragon';
+import { WarningFilled } from '@openedx/paragon/icons';

 import { getConfig } from '@edx/frontend-platform';
 import genericMessages from './messages';
--- a/src/alerts/course-start-alert/CourseStartAlert.jsx
+++ b/src/alerts/course-start-alert/CourseStartAlert.jsx
@@ -6,8 +6,8 @@ import {
  FormattedRelativeTime,
  FormattedTime,
 } from '@edx/frontend-platform/i18n';
-import { Alert } from '@edx/paragon';
-import { Info } from '@edx/paragon/icons';
+import { Alert } from '@openedx/paragon';
+import { Info } from '@openedx/paragon/icons';

 import { useModel } from '../../generic/model-store';

--- a/src/alerts/course-start-alert/CourseStartMasqueradeBanner.jsx
+++ b/src/alerts/course-start-alert/CourseStartMasqueradeBanner.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, FormattedDate } from '@edx/frontend-platform/i18n';
-import { PageBanner } from '@edx/paragon';
+import { PageBanner } from '@openedx/paragon';

 import { useModel } from '../../generic/model-store';

--- a/src/alerts/enrollment-alert/EnrollmentAlert.jsx
+++ b/src/alerts/enrollment-alert/EnrollmentAlert.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
-import { Alert, Button } from '@edx/paragon';
-import { Info, WarningFilled } from '@edx/paragon/icons';
+import { Alert, Button } from '@openedx/paragon';
+import { Info, WarningFilled } from '@openedx/paragon/icons';

 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSpinner } from '@fortawesome/free-solid-svg-icons';
--- a/src/alerts/logistration-alert/AccountActivationAlert.jsx
+++ b/src/alerts/logistration-alert/AccountActivationAlert.jsx
@@ -7,8 +7,8 @@ import {
  Button,
  Spinner,
  Icon,
-} from '@edx/paragon';
-import { Check, ArrowForward } from '@edx/paragon/icons';
+} from '@openedx/paragon';
+import { Check, ArrowForward } from '@openedx/paragon/icons';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { sendActivationEmail } from '../../courseware/data';
 import messages from './messages';
--- a/src/alerts/logistration-alert/LogistrationAlert.jsx
+++ b/src/alerts/logistration-alert/LogistrationAlert.jsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { getLoginRedirectUrl } from '@edx/frontend-platform/auth';
-import { Alert, Hyperlink } from '@edx/paragon';
-import { WarningFilled } from '@edx/paragon/icons';
+import { Alert, Hyperlink } from '@openedx/paragon';
+import { WarningFilled } from '@openedx/paragon/icons';

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

--- a/src/course-home/courseware-search/CoursewareResultsFilter.jsx
+++ b/src/course-home/courseware-search/CoursewareResultsFilter.jsx
@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Tabs, Tab } from '@edx/paragon';
+import { Tabs, Tab } from '@openedx/paragon';

 import { useParams } from 'react-router';
 import CoursewareSearchResults from './CoursewareSearchResults';
@@ -8,15 +8,10 @@ import messages from './messages';
 import { useCoursewareSearchParams } from './hooks';
 import { useModel } from '../../generic/model-store';

-const allFilterKey = 'all';
-const otherFilterKey = 'other';
-const allowedFilterKeys = {
-  [allFilterKey]: true,
-  text: true,
-  video: true,
-  sequence: true,
-  [otherFilterKey]: true,
-};
+const filterAll = 'all';
+const filterTypes = ['text', 'video', 'sequence'];
+const filterOther = 'other';
+const validFilters = [filterAll, ...filterTypes, filterOther];

 export const CoursewareSearchResultsFilter = ({ intl }) => {
  const { courseId } = useParams();
@@ -27,23 +22,38 @@ export const CoursewareSearchResultsFilter = ({ intl }) => {

  const { results: data = [] } = lastSearch;

-  const results = useMemo(() => data.reduce((acc, { type, ...rest }) => {
-    acc[allFilterKey] = [...(acc[allFilterKey] || []), { type: allFilterKey, ...rest }];
-    if (type === allFilterKey) { return acc; }
+  // If there's no data, we show an empty result.
+  if (!data.length) { return <CoursewareSearchResults />; }

-    let targetKey = otherFilterKey;
-    if (allowedFilterKeys[type]) { targetKey = type; }
-    acc[targetKey] = [...(acc[targetKey] || []), { type: targetKey, ...rest }];
-    return acc;
-  }, {}), [data]);
+  const results = useMemo(() => {
+    // This reducer distributes the data into different groups to make it easy to
+    // use on the filters.
+    // All results are added to the "all" key and then to its proper group key as well.
+    const grouped = data.reduce((acc, { type, ...rest }) => {
+      const resultType = filterTypes.includes(type) ? type : filterOther;
+      acc[filterAll].push({ type: resultType, ...rest });
+      acc[resultType] = [...(acc[resultType] || []), { type: resultType, ...rest }];
+      return acc;
+    }, { [filterAll]: [] });

-  const filters = useMemo(() => Object.keys(allowedFilterKeys).map((key) => ({
+    // This is just to format the output object with the expected tab order.
+    const output = {};
+    validFilters.forEach(key => { if (grouped[key]) { output[key] = grouped[key]; } });
+
+    return output;
+  }, [lastSearch]);
+
+  const tabKeys = Object.keys(results);
+  // Filter has no use if it has only 2 tabs (The "all" tab and another one with the same items).
+  if (tabKeys.length < 3) { return <CoursewareSearchResults results={results[filterAll]} />; }
+
+  const filters = useMemo(() => tabKeys.map((key) => ({
    key,
    label: intl.formatMessage(messages[`filter:${key}`]),
-    count: results[key]?.length || 0,
+    count: results[key].length,
  })), [results]);

-  const activeKey = allowedFilterKeys[filterKeyword] ? filterKeyword : allFilterKey;
+  const activeKey = validFilters.includes(filterKeyword) ? filterKeyword : filterAll;

  return (
    <Tabs
@@ -54,7 +64,7 @@ export const CoursewareSearchResultsFilter = ({ intl }) => {
      activeKey={activeKey}
      onSelect={setFilter}
    >
-      {filters.map(({ key, label }) => (
+      {filters.filter(({ count }) => (count > 0)).map(({ key, label }) => (
        <Tab key={key} eventKey={key} title={label} data-testid={`courseware-search-results-tabs-${key}`}>
          <CoursewareSearchResults results={results[key]} />
        </Tab>
--- a/src/course-home/courseware-search/CoursewareResultsFilter.test.jsx
+++ b/src/course-home/courseware-search/CoursewareResultsFilter.test.jsx
@@ -19,6 +19,12 @@ jest.mock('../../generic/model-store', () => ({
  useModel: jest.fn(),
 }));

+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));
+
 const decodedCourseId = 'course-v1:edX+DemoX+Demo_Course';
 const decodedSequenceId = 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@edx_introduction';
 const decodedUnitId = 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc';
@@ -52,49 +58,75 @@ function renderComponent(props = {}) {
 describe('CoursewareSearchResultsFilter', () => {
  beforeAll(initializeMockApp);

-  describe('</CoursewareSearchResultsFilter />', () => {
-    beforeEach(() => {
-      useCoursewareSearchParams.mockReturnValue(coursewareSearch);
-    });
+  beforeEach(() => {
+    useCoursewareSearchParams.mockReturnValue(coursewareSearch);
+  });

-    afterEach(() => {
-      jest.clearAllMocks();
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('when returning full results', () => {
+    beforeEach(() => {
+      useModel.mockReturnValue(searchResultsFactory());
+      renderComponent();
    });

    it('should render without errors', async () => {
-      useModel.mockReturnValue(searchResultsFactory());
-
-      await renderComponent();
-
      await waitFor(() => {
-        expect(screen.queryByTestId('courseware-search-results-tabs-all')).toBeInTheDocument();
-        expect(screen.queryByTestId('courseware-search-results-tabs-text')).toBeInTheDocument();
-        expect(screen.queryByTestId('courseware-search-results-tabs-video')).toBeInTheDocument();
-        expect(screen.queryByTestId('courseware-search-results-tabs-sequence')).toBeInTheDocument();
-        expect(screen.queryByTestId('courseware-search-results-tabs-other')).toBeInTheDocument();
+        expect(useCoursewareSearchParams).toBeCalled();
      });
+
+      expect(screen.queryByTestId('courseware-search-results-tabs')).toBeInTheDocument();
+      expect(screen.queryByTestId('courseware-search-results-tabs-all')).toBeInTheDocument();
+      expect(screen.queryByTestId('courseware-search-results-tabs-text')).toBeInTheDocument();
+      expect(screen.queryByTestId('courseware-search-results-tabs-video')).toBeInTheDocument();
+      expect(screen.queryByTestId('courseware-search-results-tabs-sequence')).toBeInTheDocument();
+      expect(screen.queryByTestId('courseware-search-results-tabs-other')).toBeInTheDocument();
+    });
+  });
+
+  describe('when returning only one result type', () => {
+    beforeEach(async () => {
+      // Get results for only videos
+      const data = searchResultsFactory();
+      const onlyVideos = data.results.filter(({ type }) => type === 'video');
+      const filteredResults = {
+        ...data,
+        results: onlyVideos,
+      };
+
+      useModel.mockReturnValue(filteredResults);
+      await renderComponent();
    });

-    describe('when there are not results', () => {
-      it('should render without errors', async () => {
-        useModel.mockReturnValue(searchResultsFactory('blah', {
-          results: [],
-          filters: [],
-          total: 0,
-          maxScore: null,
-          ms: 5,
-        }));
-
-        await renderComponent();
-
-        await waitFor(() => {
-          expect(screen.queryByTestId('courseware-search-results-tabs-all')).toBeInTheDocument();
-          expect(screen.queryByTestId('courseware-search-results-tabs-text')).toBeInTheDocument();
-          expect(screen.queryByTestId('courseware-search-results-tabs-video')).toBeInTheDocument();
-          expect(screen.queryByTestId('courseware-search-results-tabs-sequence')).toBeInTheDocument();
-          expect(screen.queryByTestId('courseware-search-results-tabs-other')).toBeInTheDocument();
-        });
+    it('should not render', async () => {
+      await waitFor(() => {
+        expect(useCoursewareSearchParams).toBeCalled();
      });
+
+      expect(screen.queryByTestId('courseware-search-results-tabs')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('when there are not results', () => {
+    beforeEach(async () => {
+      useModel.mockReturnValue(searchResultsFactory('blah', {
+        results: [],
+        filters: [],
+        total: 0,
+        maxScore: null,
+        ms: 5,
+      }));
+      await renderComponent();
+    });
+
+    it('should not render', async () => {
+      await waitFor(() => {
+        expect(useCoursewareSearchParams).toBeCalled();
+      });
+
+      expect(screen.queryByTestId('courseware-search-results-tabs')).not.toBeInTheDocument();
    });
  });
 });
--- a/src/course-home/courseware-search/CoursewareSearch.jsx
+++ b/src/course-home/courseware-search/CoursewareSearch.jsx
@@ -5,10 +5,10 @@ import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
  Alert, Button, Icon, Spinner,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import {
  Close,
-} from '@edx/paragon/icons';
+} from '@openedx/paragon/icons';
 import { setShowSearch } from '../data/slice';
 import { useCoursewareSearchParams, useElementBoundingBox, useLockScroll } from './hooks';
 import messages from './messages';
@@ -103,7 +103,7 @@ const CoursewareSearch = ({ intl, ...sectionProps }) => {
      </div>
      <div className="courseware-search__outer-content">
        <div className="courseware-search__content">
-          <h1 class="h2">{intl.formatMessage(messages.searchModuleTitle)}</h1>
+          <h1 className="h2">{intl.formatMessage(messages.searchModuleTitle)}</h1>
          <CoursewareSearchForm
            searchTerm={searchKeyword}
            onSubmit={handleSubmit}
@@ -122,16 +122,16 @@ const CoursewareSearch = ({ intl, ...sectionProps }) => {
          )}
          {status === 'results' ? (
            <>
-              <div
-                className="courseware-search__results-summary"
-                aria-live="polite"
-                aria-relevant="all"
-                aria-atomic="true"
-                data-testid="courseware-search-summary"
-              >{total > 0
-                ? intl.formatMessage(messages.searchResultsLabel, { total, keyword: lastSearchKeyword })
-                : intl.formatMessage(messages.searchResultsNone)}
-              </div>
+              {total > 0 ? (
+                <div
+                  className="courseware-search__results-summary"
+                  aria-live="polite"
+                  aria-relevant="all"
+                  aria-atomic="true"
+                  data-testid="courseware-search-summary"
+                >{intl.formatMessage(messages.searchResultsLabel, { total, keyword: lastSearchKeyword })}
+                </div>
+              ) : null}
              <CoursewareSearchResultsFilterContainer />
            </>
          ) : null}
--- a/src/course-home/courseware-search/CoursewareSearch.test.jsx
+++ b/src/course-home/courseware-search/CoursewareSearch.test.jsx
@@ -236,14 +236,14 @@ describe('CoursewareSearch', () => {
      expect(screen.queryByTestId('courseware-search-error')).toBeInTheDocument();
    });

-    it('should show "No results found." if results is empty', () => {
+    it('should not show a summary if there are no results', () => {
      mockModels({
        searchKeyword: 'test',
        total: 0,
      });
      renderComponent();

-      expect(screen.queryByTestId('courseware-search-summary').textContent).toBe('No results found.');
+      expect(screen.queryByTestId('courseware-search-summary')).not.toBeInTheDocument();
    });

    it('should show a summary for the results', () => {
--- a/src/course-home/courseware-search/CoursewareSearchForm.jsx
+++ b/src/course-home/courseware-search/CoursewareSearchForm.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { SearchField } from '@edx/paragon';
+import { SearchField } from '@openedx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import messages from './messages';

--- a/src/course-home/courseware-search/CoursewareSearchResults.jsx
+++ b/src/course-home/courseware-search/CoursewareSearchResults.jsx
@@ -1,16 +1,17 @@
 import React from 'react';
 import {
  Folder, TextFields, VideoCamera, Article,
-} from '@edx/paragon/icons';
+} from '@openedx/paragon/icons';
 import { getConfig } from '@edx/frontend-platform';
-import { Icon } from '@edx/paragon';
+import { Icon } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 import CoursewareSearchEmpty from './CoursewareSearchEmpty';

 const iconTypeMapping = {
-  document: Folder,
  text: TextFields,
  video: VideoCamera,
+  sequence: Folder,
+  other: Article,
 };

 const defaultIcon = Article;
@@ -34,9 +35,7 @@ const CoursewareSearchResults = ({ results = [] }) => {
      }) => {
        const key = type.toLowerCase();
        const icon = iconTypeMapping[key] || defaultIcon;
-
        const isExternal = !url.startsWith('/');
-
        const linkProps = isExternal ? {
          href: url,
          target: '_blank',
--- a/src/course-home/courseware-search/CoursewareSearchToggle.jsx
+++ b/src/course-home/courseware-search/CoursewareSearchToggle.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Button, Icon } from '@edx/paragon';
-import { Search } from '@edx/paragon/icons';
+import { Button, Icon } from '@openedx/paragon';
+import { Search } from '@openedx/paragon/icons';
 import { useDispatch } from 'react-redux';
 import messages from './messages';
 import { useCoursewareSearchFeatureFlag, useCoursewareSearchParams } from './hooks';
--- a/src/course-home/courseware-search/snapshots/CoursewareSearchResults.test.jsx.snap
+++ b/src/course-home/courseware-search/snapshots/CoursewareSearchResults.test.jsx.snap
@@ -26,7 +26,7 @@ exports[`CoursewareSearchResults when list of results is provided should match t
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
-            d="M3 3v18h18V3H3Zm11 14H7v-2h7v2Zm3-4H7v-2h10v2Zm0-4H7V7h10v2Z"
+            d="M10 4H2v16h20V6H12l-2-2z"
            fill="currentColor"
          />
        </svg>
@@ -140,7 +140,7 @@ exports[`CoursewareSearchResults when list of results is provided should match t
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
-            d="M3 3v18h18V3H3Zm11 14H7v-2h7v2Zm3-4H7v-2h10v2Zm0-4H7V7h10v2Z"
+            d="M10 4H2v16h20V6H12l-2-2z"
            fill="currentColor"
          />
        </svg>
--- a/src/course-home/courseware-search/courseware-search.scss
+++ b/src/course-home/courseware-search/courseware-search.scss
@@ -6,7 +6,7 @@
  right: 0;
  bottom: 0;
  border-top: 1px solid $light-300;
-  z-index: 200;
+  z-index: $zindex-modal; // Bootstrap's z-index layer for Modals.

  &__close {
    position: absolute !important; // For some reason it gets overridden
@@ -51,6 +51,8 @@

  &__empty {
    color: $gray-500;
+    padding: 6rem 0;
+    text-align: center;
  }

  &__item {
--- a/src/course-home/courseware-search/hooks.js
+++ b/src/course-home/courseware-search/hooks.js
@@ -70,12 +70,13 @@ export function useLockScroll() {
  }, []);
 }

+const initSearchParams = { q: '', f: '' };
 export function useCoursewareSearchParams() {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const clearSearchParams = () => setSearchParams({ q: '', f: '' });
+  const [searchParams, setSearchParams] = useSearchParams(initSearchParams);
+  const clearSearchParams = () => setSearchParams(initSearchParams);

  const query = searchParams.get('q');
-  const filter = searchParams.get('f');
+  const filter = searchParams.get('f')?.toLowerCase();

  const setQuery = (q) => setSearchParams((params) => ({ q, f: params.get('f') }));
  const setFilter = (f) => setSearchParams((params) => ({ q: params.get('q'), f }));
--- a/src/course-home/courseware-search/hooks.test.jsx
+++ b/src/course-home/courseware-search/hooks.test.jsx
@@ -1,9 +1,13 @@
 import { renderHook, act } from '@testing-library/react-hooks';
-import { useParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import { fetchCoursewareSearchSettings } from '../data/thunks';
 import {
-  useCoursewareSearchFeatureFlag, useCoursewareSearchState, useElementBoundingBox, useLockScroll,
+  useCoursewareSearchFeatureFlag,
+  useCoursewareSearchParams,
+  useCoursewareSearchState,
+  useElementBoundingBox,
+  useLockScroll,
 } from './hooks';

 jest.mock('react-redux');
@@ -184,4 +188,45 @@ describe('CoursewareSearch Hooks', () => {
      expect(removeBodyClassSpy).toHaveBeenCalledWith('_search-no-scroll');
    });
  });
+
+  describe('useSearchParams', () => {
+    const initSearch = { q: '', f: '' };
+    const q = { value: '' };
+    const f = { value: '' };
+    const mockedQuery = { q, f };
+    const searchParams = { get: (prop) => mockedQuery[prop].value };
+    const setSearchParams = jest.fn();
+
+    beforeEach(() => {
+      useSearchParams.mockImplementation(() => [searchParams, setSearchParams]);
+    });
+
+    it('should init the search params properly', () => {
+      const {
+        query, filter, setQuery, setFilter, clearSearchParams,
+      } = useCoursewareSearchParams();
+
+      expect(useSearchParams).toBeCalledWith(initSearch);
+      expect(query).toBe('');
+      expect(filter).toBe('');
+
+      setQuery('setQuery');
+      expect(setSearchParams).toBeCalledWith(expect.any(Function));
+
+      setFilter('setFilter');
+      expect(setSearchParams).toBeCalledWith(expect.any(Function));
+
+      clearSearchParams();
+      expect(setSearchParams).toBeCalledWith(initSearch);
+    });
+
+    it('should return the query and lowercase filter if any', () => {
+      q.value = '42';
+      f.value = 'LOWERCASE';
+      const { query, filter } = useCoursewareSearchParams();
+
+      expect(query).toBe('42');
+      expect(filter).toBe('lowercase');
+    });
+  });
 });
--- a/src/course-home/data/snapshots/redux.test.js.snap
+++ b/src/course-home/data/snapshots/redux.test.js.snap
@@ -309,9 +309,74 @@ Object {
      },
    },
  },
+  "plugins": Object {},
  "recommendations": Object {
    "recommendationsStatus": "loading",
  },
+  "specialExams": Object {
+    "activeAttempt": null,
+    "allowProctoringOptOut": false,
+    "apiErrorMsg": "",
+    "exam": Object {
+      "attempt": Object {
+        "attempt_code": "",
+        "attempt_id": null,
+        "attempt_status": "",
+        "course_id": "",
+        "desktop_application_js_url": "",
+        "exam_display_name": "",
+        "exam_started_poll_url": "",
+        "exam_type": "",
+        "exam_url_path": "",
+        "external_id": "",
+        "in_timed_exam": true,
+        "ping_interval": null,
+        "taking_as_proctored": true,
+        "time_remaining_seconds": null,
+        "use_legacy_attempt_api": true,
+      },
+      "backend": "",
+      "content_id": "",
+      "course_id": "",
+      "due_date": null,
+      "exam_name": "",
+      "external_id": "",
+      "hide_after_due": false,
+      "id": null,
+      "is_active": true,
+      "is_practice_exam": false,
+      "is_proctored": false,
+      "prerequisite_status": Object {
+        "are_prerequisites_satisifed": true,
+        "declined_prerequisites": Array [],
+        "failed_prerequisites": Array [],
+        "pending_prerequisites": Array [],
+        "satisfied_prerequisites": Array [],
+      },
+      "time_limit_mins": null,
+      "type": "",
+    },
+    "examAccessToken": Object {
+      "exam_access_token": "",
+      "exam_access_token_expiration": "",
+    },
+    "isLoading": true,
+    "proctoringSettings": Object {
+      "exam_proctoring_backend": Object {
+        "download_url": "",
+        "instructions": Array [],
+        "name": "",
+        "rules": Object {},
+      },
+      "integration_specific_email": "",
+      "learner_notification_from_email": "",
+      "provider_name": "",
+      "provider_tech_support_email": "",
+      "provider_tech_support_phone": "",
+      "provider_tech_support_url": "",
+    },
+    "timeIsOver": false,
+  },
  "tours": Object {
    "showCoursewareTour": false,
    "showExistingUserCourseHomeTour": false,
@@ -435,6 +500,7 @@ Object {
            "block-v1:edX+DemoX+Demo_Course+type@chapter+block@bcdabcdabcdabcdabcdabcdabcdabcd2": Object {
              "complete": false,
              "courseId": "course-v1:edX+DemoX+Demo_Course",
+              "hideFromTOC": undefined,
              "id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@bcdabcdabcdabcdabcdabcdabcdabcd2",
              "resumeBlock": false,
              "sequenceIds": Array [
@@ -450,8 +516,10 @@ Object {
              "due": null,
              "effortActivities": 2,
              "effortTime": 15,
+              "hideFromTOC": undefined,
              "icon": null,
              "id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@bcdabcdabcdabcdabcdabcdabcdabcd1",
+              "navigationDisabled": undefined,
              "sectionId": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@bcdabcdabcdabcdabcdabcdabcdabcd2",
              "showLink": true,
              "title": "Title of Sequence",
@@ -509,9 +577,74 @@ Object {
      },
    },
  },
+  "plugins": Object {},
  "recommendations": Object {
    "recommendationsStatus": "loading",
  },
+  "specialExams": Object {
+    "activeAttempt": null,
+    "allowProctoringOptOut": false,
+    "apiErrorMsg": "",
+    "exam": Object {
+      "attempt": Object {
+        "attempt_code": "",
+        "attempt_id": null,
+        "attempt_status": "",
+        "course_id": "",
+        "desktop_application_js_url": "",
+        "exam_display_name": "",
+        "exam_started_poll_url": "",
+        "exam_type": "",
+        "exam_url_path": "",
+        "external_id": "",
+        "in_timed_exam": true,
+        "ping_interval": null,
+        "taking_as_proctored": true,
+        "time_remaining_seconds": null,
+        "use_legacy_attempt_api": true,
+      },
+      "backend": "",
+      "content_id": "",
+      "course_id": "",
+      "due_date": null,
+      "exam_name": "",
+      "external_id": "",
+      "hide_after_due": false,
+      "id": null,
+      "is_active": true,
+      "is_practice_exam": false,
+      "is_proctored": false,
+      "prerequisite_status": Object {
+        "are_prerequisites_satisifed": true,
+        "declined_prerequisites": Array [],
+        "failed_prerequisites": Array [],
+        "pending_prerequisites": Array [],
+        "satisfied_prerequisites": Array [],
+      },
+      "time_limit_mins": null,
+      "type": "",
+    },
+    "examAccessToken": Object {
+      "exam_access_token": "",
+      "exam_access_token_expiration": "",
+    },
+    "isLoading": true,
+    "proctoringSettings": Object {
+      "exam_proctoring_backend": Object {
+        "download_url": "",
+        "instructions": Array [],
+        "name": "",
+        "rules": Object {},
+      },
+      "integration_specific_email": "",
+      "learner_notification_from_email": "",
+      "provider_name": "",
+      "provider_tech_support_email": "",
+      "provider_tech_support_phone": "",
+      "provider_tech_support_url": "",
+    },
+    "timeIsOver": false,
+  },
  "tours": Object {
    "showCoursewareTour": false,
    "showExistingUserCourseHomeTour": false,
@@ -715,9 +848,74 @@ Object {
      },
    },
  },
+  "plugins": Object {},
  "recommendations": Object {
    "recommendationsStatus": "loading",
  },
+  "specialExams": Object {
+    "activeAttempt": null,
+    "allowProctoringOptOut": false,
+    "apiErrorMsg": "",
+    "exam": Object {
+      "attempt": Object {
+        "attempt_code": "",
+        "attempt_id": null,
+        "attempt_status": "",
+        "course_id": "",
+        "desktop_application_js_url": "",
+        "exam_display_name": "",
+        "exam_started_poll_url": "",
+        "exam_type": "",
+        "exam_url_path": "",
+        "external_id": "",
+        "in_timed_exam": true,
+        "ping_interval": null,
+        "taking_as_proctored": true,
+        "time_remaining_seconds": null,
+        "use_legacy_attempt_api": true,
+      },
+      "backend": "",
+      "content_id": "",
+      "course_id": "",
+      "due_date": null,
+      "exam_name": "",
+      "external_id": "",
+      "hide_after_due": false,
+      "id": null,
+      "is_active": true,
+      "is_practice_exam": false,
+      "is_proctored": false,
+      "prerequisite_status": Object {
+        "are_prerequisites_satisifed": true,
+        "declined_prerequisites": Array [],
+        "failed_prerequisites": Array [],
+        "pending_prerequisites": Array [],
+        "satisfied_prerequisites": Array [],
+      },
+      "time_limit_mins": null,
+      "type": "",
+    },
+    "examAccessToken": Object {
+      "exam_access_token": "",
+      "exam_access_token_expiration": "",
+    },
+    "isLoading": true,
+    "proctoringSettings": Object {
+      "exam_proctoring_backend": Object {
+        "download_url": "",
+        "instructions": Array [],
+        "name": "",
+        "rules": Object {},
+      },
+      "integration_specific_email": "",
+      "learner_notification_from_email": "",
+      "provider_name": "",
+      "provider_tech_support_email": "",
+      "provider_tech_support_phone": "",
+      "provider_tech_support_url": "",
+    },
+    "timeIsOver": false,
+  },
  "tours": Object {
    "showCoursewareTour": false,
    "showExistingUserCourseHomeTour": false,
--- a/src/course-home/data/api.js
+++ b/src/course-home/data/api.js
@@ -136,6 +136,7 @@ export function normalizeOutlineBlocks(courseId, blocks) {
          title: block.display_name,
          resumeBlock: block.resume_block,
          sequenceIds: block.children || [],
+          hideFromTOC: block.hide_from_toc,
        };
        break;

@@ -152,6 +153,8 @@ export function normalizeOutlineBlocks(courseId, blocks) {
          // link in the outline (even though we ignore the given url and use an internal <Link> to ourselves).
          showLink: !!block.lms_web_url,
          title: block.display_name,
+          hideFromTOC: block.hide_from_toc,
+          navigationDisabled: block.navigation_disabled,
        };
        break;

--- a/src/course-home/dates-tab/timeline/Day.jsx
+++ b/src/course-home/dates-tab/timeline/Day.jsx
@@ -8,7 +8,7 @@ import {
  injectIntl,
  intlShape,
 } from '@edx/frontend-platform/i18n';
-import { Tooltip, OverlayTrigger } from '@edx/paragon';
+import { Tooltip, OverlayTrigger } from '@openedx/paragon';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

--- a/src/course-home/dates-tab/timeline/badgelist.jsx
+++ b/src/course-home/dates-tab/timeline/badgelist.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faLock } from '@fortawesome/free-solid-svg-icons';
-import { Badge } from '@edx/paragon';
+import { Badge } from '@openedx/paragon';

 import messages from '../messages';
 import { daycmp, isLearnerAssignment } from '../utils';
@@ -38,21 +38,21 @@ function getBadgeListAndColor(date, intl, item, items) {
      message: messages.today,
      shownForDay: isToday,
      bg: 'bg-warning-300',
-      className: 'text-black',
+      className: 'text-dark',
    },
    {
      message: messages.completed,
      shownForDay: assignments.length && assignments.every(isComplete),
      shownForItem: x => isLearnerAssignment(x) && isComplete(x),
      bg: 'bg-light-500',
-      className: 'text-black',
+      className: 'text-dark',
    },
    {
      message: messages.pastDue,
      shownForDay: assignments.length && assignments.every(isPastDue),
      shownForItem: x => isLearnerAssignment(x) && isPastDue(x),
      bg: 'bg-dark-200',
-      className: 'text-white',
+      className: 'text-dark',
    },
    {
      message: messages.dueNext,
--- a/src/course-home/goal-unsubscribe/ResultPage.jsx
+++ b/src/course-home/goal-unsubscribe/ResultPage.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Button, Hyperlink } from '@edx/paragon';
+import { Button, Hyperlink } from '@openedx/paragon';

 import messages from './messages';
 import { ReactComponent as UnsubscribeIcon } from './unsubscribe.svg';
--- a/src/course-home/outline-tab/LmsHtmlFragment.jsx
+++ b/src/course-home/outline-tab/LmsHtmlFragment.jsx
@@ -9,8 +9,9 @@ const LmsHtmlFragment = ({
  title,
  ...rest
 }) => {
+  const direction = document.documentElement?.getAttribute('dir') || 'ltr';
  const wholePage = `
-    <html>
+    <html dir="${direction}">
      <head>
        <base href="${getConfig().LMS_BASE_URL}" target="_parent">
        <link rel="stylesheet" href="/static/${getConfig().LEGACY_THEME_NAME ? `${getConfig().LEGACY_THEME_NAME}/` : ''}css/bootstrap/lms-main.css">
@@ -29,7 +30,7 @@ const LmsHtmlFragment = ({
  const iframe = useRef(null);
  function resetIframeHeight() {
    if (iframe?.current?.contentWindow?.document?.body) {
-      iframe.current.height = iframe.current.contentWindow.document.body.scrollHeight;
+      iframe.current.height = iframe.current.contentWindow.document.body.parentNode.scrollHeight;
    }
  }

--- a/src/course-home/outline-tab/OutlineTab.jsx
+++ b/src/course-home/outline-tab/OutlineTab.jsx
@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 import { AlertList } from '../../generic/user-messages';

 import CourseDates from './widgets/CourseDates';
--- a/src/course-home/outline-tab/OutlineTab.test.jsx
+++ b/src/course-home/outline-tab/OutlineTab.test.jsx
@@ -282,6 +282,22 @@ describe('Outline Tab', () => {
      });
    });

+    it('ignores comments and misformatted HTML', async () => {
+      setTabData({
+        welcome_message_html: '<p class="additional-spaces-in-tag"   >'
+      + '<!-- Even if the welcome_message_html length is above the limit because of comments, we hope it will not be shortened. -->'
+      + '<!-- Even if the welcome_message_html length is above the limit because of comments, we hope it will not be shortened. -->'
+      + 'Test welcome message that happens to be longer than one hundred words because of comments but displayed content is less.'
+      + 'It should not be shortened.'
+      + '<!-- Even if the welcome_message_html length is above the limit because of comments, we hope it will not be shortened. -->'
+      + '<!-- Even if the welcome_message_html length is above the limit because of comments, we hope it will not be shortened. -->'
+      + '</p>',
+      });
+      await fetchAndRender();
+      const showMoreButton = screen.queryByRole('button', { name: 'Show More' });
+      expect(showMoreButton).not.toBeInTheDocument();
+    });
+
    it('does not display if no update available', async () => {
      setTabData({ welcome_message_html: null });
      await fetchAndRender();
@@ -1269,5 +1285,97 @@ describe('Outline Tab', () => {
      await waitFor(() => expect(axiosMock.history.post).toHaveLength(1));
      expect(axiosMock.history.post[0].url).toEqual(resendEmailUrl);
    });
+
+    it('section should show hidden from toc message when hide_from_toc is true', async () => {
+      const { courseBlocks } = await buildMinimalCourseBlocks(courseId, 'Title', { resumeBlock: true });
+      const courseBlocksIds = Object.keys(courseBlocks.blocks);
+      const newCourseBlocks = courseBlocksIds.reduce((blocks, blockId) => ({
+        ...blocks,
+        [blockId]: {
+          ...courseBlocks.blocks[blockId],
+          hide_from_toc: true,
+        },
+      }), {});
+
+      setTabData({
+        course_blocks: { blocks: newCourseBlocks },
+      });
+      await fetchAndRender();
+
+      const iconHiddenFromTocSectionNode = screen.getByTestId('hide-from-toc-section-icon');
+      const textHiddenFromTocSectionNode = screen.getByTestId('hide-from-toc-section-text');
+      expect(iconHiddenFromTocSectionNode).toBeInTheDocument();
+      expect(textHiddenFromTocSectionNode).toBeInTheDocument();
+      expect(textHiddenFromTocSectionNode.textContent).toBe('Hidden in Course Outline, accessible via link');
+    });
+
+    it('section should not show hidden from toc message when hide_from_toc is false', async () => {
+      const { courseBlocks } = await buildMinimalCourseBlocks(courseId, 'Title', { resumeBlock: true });
+      const courseBlocksIds = Object.keys(courseBlocks.blocks);
+      const newCourseBlocks = courseBlocksIds.reduce((blocks, blockId) => ({
+        ...blocks,
+        [blockId]: {
+          ...courseBlocks.blocks[blockId],
+          hide_from_toc: false,
+        },
+      }), {});
+
+      setTabData({
+        course_blocks: { blocks: newCourseBlocks },
+      });
+      await fetchAndRender();
+
+      const iconHiddenFromTocSectionNode = screen.queryByTestId('hide-from-toc-section-icon');
+      const textHiddenFromTocSectionNode = screen.queryByTestId('hide-from-toc-section-text');
+
+      expect(iconHiddenFromTocSectionNode).not.toBeInTheDocument();
+      expect(textHiddenFromTocSectionNode).not.toBeInTheDocument();
+    });
+
+    it('sequence link should show hidden from toc message when hide_from_toc is true', async () => {
+      const { courseBlocks } = await buildMinimalCourseBlocks(courseId, 'Title', { resumeBlock: true });
+      const courseBlocksIds = Object.keys(courseBlocks.blocks);
+      const newCourseBlocks = courseBlocksIds.reduce((blocks, blockId) => ({
+        ...blocks,
+        [blockId]: {
+          ...courseBlocks.blocks[blockId],
+          hide_from_toc: true,
+        },
+      }), {});
+
+      setTabData({
+        course_blocks: { blocks: newCourseBlocks },
+      });
+      await fetchAndRender();
+
+      const iconHiddenFromTocSequenceLinkNode = screen.getByTestId('hide-from-toc-sequence-link-icon');
+      const textHiddenFromTocSequenceLink = screen.getByTestId('hide-from-toc-sequence-link-text');
+      expect(iconHiddenFromTocSequenceLinkNode).toBeInTheDocument();
+      expect(textHiddenFromTocSequenceLink).toBeInTheDocument();
+      expect(textHiddenFromTocSequenceLink.textContent).toBe('Subsections are not navigable between each other, they can only be accessed through their link.');
+    });
+
+    it('sequence link not show hidden from toc message when hide_from_toc is false', async () => {
+      const { courseBlocks } = await buildMinimalCourseBlocks(courseId, 'Title', { resumeBlock: true });
+      const courseBlocksIds = Object.keys(courseBlocks.blocks);
+      const newCourseBlocks = courseBlocksIds.reduce((blocks, blockId) => ({
+        ...blocks,
+        [blockId]: {
+          ...courseBlocks.blocks[blockId],
+          hide_from_toc: false,
+        },
+      }), {});
+
+      setTabData({
+        course_blocks: { blocks: newCourseBlocks },
+      });
+      await fetchAndRender();
+
+      const iconHiddenFromTocSequenceLink = screen.queryByTestId('hide-from-toc-sequence-link-icon');
+      const textHiddenFromTocSequenceLink = screen.queryByTestId('hide-from-toc-sequence-link-text');
+
+      expect(iconHiddenFromTocSequenceLink).not.toBeInTheDocument();
+      expect(textHiddenFromTocSequenceLink).not.toBeInTheDocument();
+    });
  });
 });
--- a/src/course-home/outline-tab/Section.jsx
+++ b/src/course-home/outline-tab/Section.jsx
@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Collapsible, IconButton } from '@edx/paragon';
+import { Collapsible, IconButton, Icon } from '@openedx/paragon';
 import { faCheckCircle as fasCheckCircle, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { faCheckCircle as farCheckCircle } from '@fortawesome/free-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

+import { DisabledVisible } from '@openedx/paragon/icons';
 import SequenceLink from './SequenceLink';
 import { useModel } from '../../generic/model-store';

@@ -23,6 +24,7 @@ const Section = ({
    complete,
    sequenceIds,
    title,
+    hideFromTOC,
  } = section;
  const {
    courseBlocks: {
@@ -42,7 +44,7 @@ const Section = ({
  }, []);

  const sectionTitle = (
-    <div className="row w-100 m-0">
+    <div className="d-flex row w-100 m-0">
      <div className="col-auto p-0">
        {complete ? (
          <FontAwesomeIcon
@@ -62,12 +64,24 @@ const Section = ({
          />
        )}
      </div>
-      <div className="col-10 ml-3 p-0 font-weight-bold text-dark-500">
-        <span className="align-middle">{title}</span>
+      <div className="col-7 ml-3 p-0 font-weight-bold text-dark-500">
+        <span className="align-middle col-6">{title}</span>
        <span className="sr-only">
          , {intl.formatMessage(complete ? messages.completedSection : messages.incompleteSection)}
        </span>
      </div>
+      {hideFromTOC && (
+      <div className="row">
+        {hideFromTOC && (
+          <span className="small d-flex align-content-end">
+            <Icon className="mr-2" src={DisabledVisible} data-testid="hide-from-toc-section-icon" />
+            <span data-testid="hide-from-toc-section-text">
+              {intl.formatMessage(messages.hiddenSection)}
+            </span>
+          </span>
+        )}
+      </div>
+      )}
    </div>
  );

--- a/src/course-home/outline-tab/SequenceLink.jsx
+++ b/src/course-home/outline-tab/SequenceLink.jsx
@@ -12,6 +12,8 @@ import { faCheckCircle as fasCheckCircle } from '@fortawesome/free-solid-svg-ico
 import { faCheckCircle as farCheckCircle } from '@fortawesome/free-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

+import { Icon } from '@openedx/paragon';
+import { Block } from '@openedx/paragon/icons';
 import EffortEstimate from '../../shared/effort-estimate';
 import { useModel } from '../../generic/model-store';
 import messages from './messages';
@@ -29,6 +31,7 @@ const SequenceLink = ({
    due,
    showLink,
    title,
+    hideFromTOC,
  } = sequence;
  const {
    userTimezone,
@@ -114,6 +117,16 @@ const SequenceLink = ({
            <EffortEstimate className="ml-3 align-middle" block={sequence} />
          </div>
        </div>
+        {hideFromTOC && (
+        <div className="row w-100 my-2 mx-4 pl-3">
+          <span className="small d-flex">
+            <Icon className="mr-2" src={Block} data-testid="hide-from-toc-sequence-link-icon" />
+            <span data-testid="hide-from-toc-sequence-link-text">
+              {intl.formatMessage(messages.hiddenSequenceLink)}
+            </span>
+          </span>
+        </div>
+        )}
        <div className="row w-100 m-0 ml-3 pl-3">
          <small className="text-body pl-2">
            {due ? dueDateMessage : noDueDateMessage}
--- a/src/course-home/outline-tab/alerts/certificate-status-alert/CertificateStatusAlert.jsx
+++ b/src/course-home/outline-tab/alerts/certificate-status-alert/CertificateStatusAlert.jsx
@@ -6,7 +6,7 @@ import {
  injectIntl,
  intlShape,
 } from '@edx/frontend-platform/i18n';
-import { Alert, Button } from '@edx/paragon';
+import { Alert, Button } from '@openedx/paragon';
 import { useDispatch } from 'react-redux';

 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
--- a/src/course-home/outline-tab/alerts/course-end-alert/CourseEndAlert.jsx
+++ b/src/course-home/outline-tab/alerts/course-end-alert/CourseEndAlert.jsx
@@ -6,8 +6,8 @@ import {
  FormattedRelativeTime,
  FormattedTime,
 } from '@edx/frontend-platform/i18n';
-import { Alert } from '@edx/paragon';
-import { Info } from '@edx/paragon/icons';
+import { Alert } from '@openedx/paragon';
+import { Info } from '@openedx/paragon/icons';

 const DAY_SEC = 24 * 60 * 60; // in seconds
 const DAY_MS = DAY_SEC * 1000; // in ms
--- a/src/course-home/outline-tab/alerts/private-course-alert/PrivateCourseAlert.jsx
+++ b/src/course-home/outline-tab/alerts/private-course-alert/PrivateCourseAlert.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { getLoginRedirectUrl } from '@edx/frontend-platform/auth';
-import { Alert, Button, Hyperlink } from '@edx/paragon';
+import { Alert, Button, Hyperlink } from '@openedx/paragon';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSpinner } from '@fortawesome/free-solid-svg-icons';

--- a/src/course-home/outline-tab/alerts/scheduled-content-alert/ScheduledCotentAlert.jsx
+++ b/src/course-home/outline-tab/alerts/scheduled-content-alert/ScheduledCotentAlert.jsx
@@ -1,5 +1,5 @@
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Alert, Button } from '@edx/paragon';
+import { Alert, Button } from '@openedx/paragon';
 import React from 'react';
 import PropTypes from 'prop-types';

--- a/src/course-home/outline-tab/messages.js
+++ b/src/course-home/outline-tab/messages.js
@@ -36,6 +36,16 @@ const messages = defineMessages({
    defaultMessage: 'Completed section',
    description: 'Text used to describe the green checkmark icon in front of a section title',
  },
+  hiddenSection: {
+    id: 'learning.outline.hiddenSection',
+    defaultMessage: 'Hidden in Course Outline, accessible via link',
+    description: 'Label for hidden section in course outline',
+  },
+  hiddenSequenceLink: {
+    id: 'learning.outline.hiddenSequenceLink',
+    defaultMessage: 'Subsections are not navigable between each other, they can only be accessed through their link.',
+    description: 'Label for hidden sequence in course outline',
+  },
  dates: {
    id: 'learning.outline.dates',
    defaultMessage: 'Important dates',
--- a/src/course-home/outline-tab/widgets/FlagButton.scss
+++ b/src/course-home/outline-tab/widgets/FlagButton.scss
@@ -1,5 +1,5 @@
@import "~@edx/brand/paragon/variables";
-@import "~@edx/paragon/scss/core/core";
+@import "~@openedx/paragon/scss/core/core";
@import "~@edx/brand/paragon/overrides";

 .flag-button {
--- a/src/course-home/outline-tab/widgets/ProctoringInfoPanel.jsx
+++ b/src/course-home/outline-tab/widgets/ProctoringInfoPanel.jsx
@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import camelCase from 'lodash.camelcase';

 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';

 import messages from '../messages';
 import { getProctoringInfoData } from '../../data/api';
--- a/src/course-home/outline-tab/widgets/StartOrResumeCourseCard.jsx
+++ b/src/course-home/outline-tab/widgets/StartOrResumeCourseCard.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Card } from '@edx/paragon';
+import { Button, Card } from '@openedx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';

 import { useSelector } from 'react-redux';
--- a/src/course-home/outline-tab/widgets/WeeklyLearningGoalCard.jsx
+++ b/src/course-home/outline-tab/widgets/WeeklyLearningGoalCard.jsx
@@ -2,12 +2,12 @@ import React, { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import PropTypes from 'prop-types';

-import { Form, Card, Icon } from '@edx/paragon';
+import { Form, Card, Icon } from '@openedx/paragon';
 import { history } from '@edx/frontend-platform';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Email } from '@edx/paragon/icons';
+import { Email } from '@openedx/paragon/icons';
 import { useSelector } from 'react-redux';
 import messages from '../messages';
 import LearningGoalButton from './LearningGoalButton';
--- a/src/course-home/outline-tab/widgets/WelcomeMessage.jsx
+++ b/src/course-home/outline-tab/widgets/WelcomeMessage.jsx
@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import PropTypes from 'prop-types';

 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Alert, Button, TransitionReplace } from '@edx/paragon';
+import { Alert, Button, TransitionReplace } from '@openedx/paragon';
 import truncate from 'truncate-html';

 import { useDispatch } from 'react-redux';
@@ -18,8 +18,22 @@ const WelcomeMessage = ({ courseId, intl }) => {

  const [display, setDisplay] = useState(true);

-  const shortWelcomeMessageHtml = truncate(welcomeMessageHtml, 100, { byWords: true, keepWhitespaces: true });
-  const messageCanBeShortened = shortWelcomeMessageHtml.length < welcomeMessageHtml.length;
+  // welcomeMessageHtml can contain comments or malformatted HTML which can impact the length that determines
+  // messageCanBeShortened. We clean it by calling truncate with a length of welcomeMessageHtml.length which
+  // will not result in a truncation but a formatting into 'truncate-html' canonical format.
+  const cleanedWelcomeMessageHtml = useMemo(
+    () => truncate(welcomeMessageHtml, welcomeMessageHtml.length, { keepWhitespaces: true }),
+    [welcomeMessageHtml],
+  );
+  const shortWelcomeMessageHtml = useMemo(
+    () => truncate(cleanedWelcomeMessageHtml, 100, { byWords: true, keepWhitespaces: true }),
+    [cleanedWelcomeMessageHtml],
+  );
+  const messageCanBeShortened = useMemo(
+    () => (shortWelcomeMessageHtml.length < cleanedWelcomeMessageHtml.length),
+    [cleanedWelcomeMessageHtml, shortWelcomeMessageHtml],
+  );
+
  const [showShortMessage, setShowShortMessage] = useState(messageCanBeShortened);
  const dispatch = useDispatch();

@@ -63,7 +77,7 @@ const WelcomeMessage = ({ courseId, intl }) => {
            className="inline-link"
            data-testid="long-welcome-message-iframe"
            key="full-html"
-            html={welcomeMessageHtml}
+            html={cleanedWelcomeMessageHtml}
            title={intl.formatMessage(messages.welcomeMessage)}
          />
        )}
--- a/src/course-home/progress-tab/ProgressHeader.jsx
+++ b/src/course-home/progress-tab/ProgressHeader.jsx
@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';

 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';

 import { useModel } from '../../generic/model-store';

--- a/src/course-home/progress-tab/ProgressTab.jsx
+++ b/src/course-home/progress-tab/ProgressTab.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { breakpoints, useWindowSize } from '@edx/paragon';
+import { breakpoints, useWindowSize } from '@openedx/paragon';

 import CertificateStatus from './certificate-status/CertificateStatus';
 import CourseCompletion from './course-completion/CourseCompletion';
--- a/src/course-home/progress-tab/ProgressTab.test.jsx
+++ b/src/course-home/progress-tab/ProgressTab.test.jsx
@@ -3,7 +3,7 @@ import { Factory } from 'rosie';
 import { getConfig } from '@edx/frontend-platform';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { breakpoints } from '@edx/paragon';
+import { breakpoints } from '@openedx/paragon';
 import MockAdapter from 'axios-mock-adapter';

 import {
--- a/src/course-home/progress-tab/certificate-status/CertificateStatus.jsx
+++ b/src/course-home/progress-tab/certificate-status/CertificateStatus.jsx
@@ -6,7 +6,7 @@ import {
  FormattedDate, FormattedMessage, injectIntl, intlShape,
 } from '@edx/frontend-platform/i18n';

-import { Button, Card } from '@edx/paragon';
+import { Button, Card } from '@openedx/paragon';
 import { getConfig } from '@edx/frontend-platform';
 import { useModel } from '../../../generic/model-store';
 import { COURSE_EXIT_MODES, getCourseExitMode } from '../../../courseware/course/course-exit/utils';
@@ -154,7 +154,7 @@ const CertificateStatus = ({ intl }) => {
        certAvailabilityDate = <FormattedDate value={certificateAvailableDate} day="numeric" month="long" year="numeric" />;
        body = (
          <FormattedMessage
-            id="courseCelebration.certificateBody.notAvailable.endDate"
+            id="progress.certificateStatus.notAvailable.endDate"
            defaultMessage="This course ends on {endDate}. Final grades and any earned certificates are
            scheduled to be available after {certAvailabilityDate}."
            description="This shown for leaner when they are eligible for certifcate but it't not available yet, it could because leaners just finished the course quickly!"
--- a/src/course-home/progress-tab/certificate-status/messages.js
+++ b/src/course-home/progress-tab/certificate-status/messages.js
@@ -56,11 +56,6 @@ const messages = defineMessages({
    defaultMessage: 'Your certificate is available!',
    description: 'Header text when the certifcate is available',
  },
-  downloadableBody: {
-    id: 'progress.certificateStatus.downloadableBody',
-    defaultMessage: 'Showcase your accomplishment on LinkedIn or your resumé today. You can download your certificate now and access it any time from your Dashboard and Profile.',
-    description: 'Recommending an action for learner when course certificate is available',
-  },
  viewableButton: {
    id: 'progress.certificateStatus.viewableButton',
    defaultMessage: 'View my certificate',
--- a/src/course-home/progress-tab/course-completion/CompleteDonutSegment.jsx
+++ b/src/course-home/progress-tab/course-completion/CompleteDonutSegment.jsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';

 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { OverlayTrigger, Popover } from '@edx/paragon';
+import { OverlayTrigger, Popover } from '@openedx/paragon';

 import messages from './messages';

@@ -33,7 +33,7 @@ const CompleteDonutSegment = ({ completePercentage, intl, lockedPercentage }) =>
        show={showCompletePopover}
        placement="top"
        overlay={(
-          <Popover aria-hidden="true">
+          <Popover id="complete-content-tooltip-popover" aria-hidden="true">
            <Popover.Content>
              {intl.formatMessage(messages.completeContentTooltip)}
            </Popover.Content>
--- a/src/course-home/progress-tab/course-completion/IncompleteDonutSegment.jsx
+++ b/src/course-home/progress-tab/course-completion/IncompleteDonutSegment.jsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';

 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { OverlayTrigger, Popover } from '@edx/paragon';
+import { OverlayTrigger, Popover } from '@openedx/paragon';

 import messages from './messages';

@@ -37,7 +37,7 @@ const IncompleteDonutSegment = ({ incompletePercentage, intl }) => {
        show={showIncompletePopover}
        placement="top"
        overlay={(
-          <Popover aria-hidden="true">
+          <Popover id="incomplete-tooltip-popover" aria-hidden="true">
            <Popover.Content>
              {intl.formatMessage(messages.incompleteContentTooltip)}
            </Popover.Content>
--- a/src/course-home/progress-tab/course-completion/LockedDonutSegment.jsx
+++ b/src/course-home/progress-tab/course-completion/LockedDonutSegment.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';

-import { OverlayTrigger, Popover } from '@edx/paragon';
+import { OverlayTrigger, Popover } from '@openedx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';

 import messages from './messages';
@@ -36,7 +36,7 @@ const LockedDonutSegment = ({ intl, lockedPercentage }) => {
        show={showLockedPopover}
        placement="top"
        overlay={(
-          <Popover aria-hidden="true">
+          <Popover id="locked-tooltip-popover" aria-hidden="true">
            <Popover.Content>
              {intl.formatMessage(messages.lockedContentTooltip)}
            </Popover.Content>
--- a/src/course-home/progress-tab/credit-information/CreditInformation.jsx
+++ b/src/course-home/progress-tab/credit-information/CreditInformation.jsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { getConfig } from '@edx/frontend-platform';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { CheckCircle, WarningFilled, WatchFilled } from '@edx/paragon/icons';
-import { Hyperlink, Icon } from '@edx/paragon';
+import { CheckCircle, WarningFilled, WatchFilled } from '@openedx/paragon/icons';
+import { Hyperlink, Icon } from '@openedx/paragon';

 import { useModel } from '../../../generic/model-store';
 import { DashboardLink } from '../../../shared/links';
--- a/src/course-home/progress-tab/grades/course-grade/CourseGradeFooter.jsx
+++ b/src/course-home/progress-tab/grades/course-grade/CourseGradeFooter.jsx
@@ -3,8 +3,8 @@ import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';

 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { CheckCircle, WarningFilled } from '@edx/paragon/icons';
-import { breakpoints, Icon, useWindowSize } from '@edx/paragon';
+import { CheckCircle, WarningFilled } from '@openedx/paragon/icons';
+import { breakpoints, Icon, useWindowSize } from '@openedx/paragon';
 import { useModel } from '../../../../generic/model-store';

 import GradeRangeTooltip from './GradeRangeTooltip';
--- a/src/course-home/progress-tab/grades/course-grade/CourseGradeHeader.jsx
+++ b/src/course-home/progress-tab/grades/course-grade/CourseGradeHeader.jsx
@@ -4,8 +4,8 @@ import { useSelector } from 'react-redux';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Locked } from '@edx/paragon/icons';
-import { Button, Icon } from '@edx/paragon';
+import { Locked } from '@openedx/paragon/icons';
+import { Button, Icon } from '@openedx/paragon';

 import { useModel } from '../../../../generic/model-store';
 import messages from '../messages';
--- a/src/course-home/progress-tab/grades/course-grade/CurrentGradeTooltip.jsx
+++ b/src/course-home/progress-tab/grades/course-grade/CurrentGradeTooltip.jsx
@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
 import {
  getLocale, injectIntl, intlShape, isRtl,
 } from '@edx/frontend-platform/i18n';
-import { OverlayTrigger, Popover } from '@edx/paragon';
+import { OverlayTrigger, Popover } from '@openedx/paragon';

 import { useModel } from '../../../../generic/model-store';

--- a/src/course-home/progress-tab/grades/course-grade/GradeRangeTooltip.jsx
+++ b/src/course-home/progress-tab/grades/course-grade/GradeRangeTooltip.jsx
@@ -3,10 +3,10 @@ import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';

 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { InfoOutline } from '@edx/paragon/icons';
+import { InfoOutline } from '@openedx/paragon/icons';
 import {
  Icon, IconButton, OverlayTrigger, Popover,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import { useModel } from '../../../../generic/model-store';

 import messages from '../messages';
--- a/src/course-home/progress-tab/grades/course-grade/PassingGradeTooltip.jsx
+++ b/src/course-home/progress-tab/grades/course-grade/PassingGradeTooltip.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import {
  getLocale, injectIntl, intlShape, isRtl,
 } from '@edx/frontend-platform/i18n';
-import { OverlayTrigger, Popover } from '@edx/paragon';
+import { OverlayTrigger, Popover } from '@openedx/paragon';

 import messages from '../messages';

--- a/src/course-home/progress-tab/grades/detailed-grades/DetailedGrades.jsx
+++ b/src/course-home/progress-tab/grades/detailed-grades/DetailedGrades.jsx
@@ -4,8 +4,8 @@ import { useSelector } from 'react-redux';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Blocked } from '@edx/paragon/icons';
-import { Icon, Hyperlink } from '@edx/paragon';
+import { Blocked } from '@openedx/paragon/icons';
+import { Icon, Hyperlink } from '@openedx/paragon';
 import { useModel } from '../../../../generic/model-store';

 import DetailedGradesTable from './DetailedGradesTable';
--- a/src/course-home/progress-tab/grades/detailed-grades/DetailedGradesTable.jsx
+++ b/src/course-home/progress-tab/grades/detailed-grades/DetailedGradesTable.jsx
@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux';
 import {
  getLocale, injectIntl, intlShape, isRtl,
 } from '@edx/frontend-platform/i18n';
-import { DataTable } from '@edx/paragon';
+import { DataTable } from '@openedx/paragon';

 import { useModel } from '../../../../generic/model-store';
 import messages from '../messages';
--- a/src/course-home/progress-tab/grades/detailed-grades/ProblemScoreDrawer.jsx
+++ b/src/course-home/progress-tab/grades/detailed-grades/ProblemScoreDrawer.jsx
@@ -15,8 +15,9 @@ const ProblemScoreDrawer = ({ intl, problemScores, subsection }) => {
      <span id="problem-score-label" className="col-auto p-0">{intl.formatMessage(messages.problemScoreLabel)}</span>
      <div className={classNames('col', 'p-0', { 'greyed-out': !subsection.learnerHasAccess })}>
        <ul className="list-unstyled row w-100 m-0" aria-labelledby="problem-score-label">
-          {problemScores.map(problemScore => (
-            <li className="ml-3">{problemScore.earned}{isLocaleRtl ? '\\' : '/'}{problemScore.possible}</li>
+          {problemScores.map((problemScore, i) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <li key={i} className="ml-3">{problemScore.earned}{isLocaleRtl ? '\\' : '/'}{problemScore.possible}</li>
          ))}
        </ul>
      </div>
--- a/src/course-home/progress-tab/grades/detailed-grades/SubsectionTitleCell.jsx
+++ b/src/course-home/progress-tab/grades/detailed-grades/SubsectionTitleCell.jsx
@@ -5,10 +5,10 @@ import PropTypes from 'prop-types';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Collapsible, Icon, Row } from '@edx/paragon';
+import { Collapsible, Icon, Row } from '@openedx/paragon';
 import {
  ArrowDropDown, ArrowDropUp, Blocked, Info,
-} from '@edx/paragon/icons';
+} from '@openedx/paragon/icons';

 import messages from '../messages';
 import { useModel } from '../../../../generic/model-store';
--- a/src/course-home/progress-tab/grades/grade-summary/AssignmentTypeCell.jsx
+++ b/src/course-home/progress-tab/grades/grade-summary/AssignmentTypeCell.jsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Blocked } from '@edx/paragon/icons';
-import { Icon } from '@edx/paragon';
+import { Blocked } from '@openedx/paragon/icons';
+import { Icon } from '@openedx/paragon';
 import { useModel } from '../../../../generic/model-store';
 import messages from '../messages';

--- a/src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.jsx
+++ b/src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.jsx
@@ -5,8 +5,8 @@ import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
  Icon, IconButton, OverlayTrigger, Popover,
-} from '@edx/paragon';
-import { Blocked, InfoOutline } from '@edx/paragon/icons';
+} from '@openedx/paragon';
+import { Blocked, InfoOutline } from '@openedx/paragon/icons';

 import messages from '../messages';
 import { useModel } from '../../../../generic/model-store';
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Muhammad Abdullah Waheed	a4e504da84	feat: added browser logging	2024-04-18 17:44:37 +05:00
Muhammad Abdullah Waheed	26f53ccfbd	refactor: added datadog logging	2024-04-04 14:58:13 +05:00
Isaac Lee	85b95adb9f	fix: modal iframe height to 100% (#1341 )	2024-04-02 13:14:05 -04:00
ABBOUD Moncef	d4e7b416b1	fix: course update iframe (#1204 )	2024-03-29 16:12:23 -04:00
renovate[bot]	0cb369af2b	fix(deps): update dependency @openedx/paragon to v22.2.1	2024-03-27 20:57:21 +00:00
renovate[bot]	c908d3a3dd	fix(deps): update dependency @edx/frontend-platform to v7.1.3	2024-03-27 17:48:28 +00:00
renovate[bot]	895a3b6b9f	chore(deps): update dependency @openedx/frontend-build to v13.0.30	2024-03-27 17:47:25 +00:00
Leangseu Kim	36b3c36379	feat: whole course translations (#1330 ) * feat: add language selection chore: update tests so we have less error message test: update test * test: update tests * chore: remove duplicate translation * chore: lint for console * chore: remove comments * chore: make sure the affect url frame refresh after the language selection change * chore: add whole_course_translation and language to courseware meta (#1305) * feat: Add feedback widget UI mock Add unit tests Fix snapshot Clean Sequence component logEvent calls Clean unit test Put feedback widget behind whole course translation flag Fix useFeedbackWidget test * chore: add src and dest translation * feat: first iteration of plugin translation chore: update plugin instruction * feat: Connect FeedbackWidget with backend services (#1325) Connect FeedbackWidget with backend services Move feedback widget to unit translation plugin * feat: Add authentication to WCT feedback endpoints (#1329) * chore: add fetch config and move feedback widget for the plugin chore: rewrite and test the api request chore: rebase chore: update translation feedback chore: test chore: add more tests * chore: rebase * chore: update requested change * chore: update package * chore: upgrade frontend-lib-special-exams and frontend-lib-learning-assistant * chore: update tests * chore: remove unneeded package * chore: update example config * chore: add source-map-loader * fix: feedback widget render error after submit feedback (#1335) * fix: feedback widget render error after submit feedback * fix: widget logic --------- Co-authored-by: Rodrigo Martin <rodrigom_94@hotmail.com>	2024-03-27 13:39:36 -04:00
Isaac Lee	3917262492	fix: bump exams ver to fix exam timer (#1331 )	2024-03-21 15:57:22 -04:00
Alison Langston	7ad120c4d5	feat: upgrade learning assistant version (#1327 )	2024-03-18 15:33:38 -04:00
Samir Sabri	94d20833aa	feat!: remove Transifex calls for OEP-58	2024-03-18 15:01:23 -04:00
Isaac Lee	4698b11ab9	fix: rollback exams lib to unblock pipeline (#1324 )	2024-03-14 14:31:40 -04:00
Awais Ansari	e46d4cc54d	feat: add tracking event in upgrade notifications tray (#1323 )	2024-03-14 20:52:19 +05:00
Ihor Romaniuk	92d8f637c0	fix: sequence container width and responsive for sequence navigation block (#1219 )	2024-03-13 13:29:34 -03:00
Eugene Dyudyunov	c3b786c771	fix: correct rtl for handouts (#1289 )	2024-03-13 12:58:56 -03:00
Isaac Lee	00aab61551	chore: update exams lib (#1321 )	2024-03-13 10:14:15 -04:00
Ihor Romaniuk	b547ada1a5	fix: RTL for the upgrade notification list (#1220 )	2024-03-11 12:31:36 -04:00
Ihor Romaniuk	b7159590d3	fix: wrong text-color class and text contrast on dates page (#1223 )	2024-03-11 12:31:27 -04:00
Marcos Rigoli	a2d7f704a6	fix: Updated search modal to match Bootstrap's z-index. (#1318 )	2024-03-11 11:44:42 -03:00
Maria Grimaldi	bca3aaccf5	feat: use navigation sequence metadata to disable navigation components (#1273 ) Use navigation_disabled sequence metadata based on Hide From TOC block field, so the student cannot navigate to another sequences in the course outline. https://openedx.atlassian.net/wiki/spaces/OEPM/pages/3853975595/Feature+Enhancement+Proposal+Hide+Sections+from+course+outline	2024-03-08 10:51:31 -03:00
Marcos Rigoli	3b46df6d03	fix: Updated exams UI to fix timer (#1317 )	2024-03-07 15:48:20 -03:00
Bryann Valderrama	7c8e26d213	feat: show hide from toc Show message in course outline when Hide From TOC is enabled https://openedx.atlassian.net/wiki/spaces/OEPM/pages/3853975595/Feature+Enhancement+Proposal+Hide+Sections+from+course+outline	2024-03-06 09:42:19 -03:00
Jeremy Ristau	b1c2c1f7b3	chore: create catalog-info.yaml (#1315 ) * chore: create catalog-info.yaml * chore: update catalog-info.yaml	2024-03-05 09:25:08 -05:00
Emad Rad	4797425a21	docs: broken readme fixed (#1264 )	2024-03-03 07:50:01 -05:00
Alison Langston	54bb72b60c	feat: update chat visibility (#1310 )	2024-03-01 08:17:27 -05:00
renovate[bot]	a91ef116f1	fix(deps): update dependency @edx/frontend-platform to v5.6.1	2024-02-29 00:51:21 +00:00
renovate[bot]	80634c6188	fix(deps): update dependency @edx/frontend-component-header to v4.11.1	2024-02-28 21:46:24 +00:00
renovate[bot]	ec1bad25a7	fix(deps): update dependency @edx/frontend-component-footer to v12.7.1	2024-02-28 21:24:08 +00:00
renovate[bot]	b2980f02a0	fix(deps): update dependency @edx/react-unit-test-utils to v1.7.1	2024-02-28 19:24:33 +00:00
renovate[bot]	9d38e9dc93	chore(deps): update dependency @openedx/frontend-build to v13.0.28	2024-02-28 16:52:17 +00:00
Mashal Malik	c28991d6e0	refactor: replace @edx/paragon and @edx/frontend-build (#1261 ) Co-authored-by: mashal-m <mashal.malik@arbisoft.com> Co-authored-by: Bilal Qamar <59555732+BilalQamar95@users.noreply.github.com>	2024-02-28 13:42:44 -03:00
Alison Langston	ff7366d42a	feat: refactor date visibility (#1298 )	2024-02-22 15:25:37 -05:00
Alison Langston	6def66677a	feat: update chat visibility (#1297 )	2024-02-22 11:46:48 -05:00
Alison Langston	8335dec0de	feat: upgrade learning assistant version (#1295 )	2024-02-21 09:31:08 -05:00
Varsha Menon	992ab4887b	feat: show chat for desktop only (#1286 )	2024-02-20 14:37:57 -05:00
Alison Langston	5d2aa5e60a	feat: update learning assistant version (#1294 )	2024-02-20 13:59:48 -05:00
sundasnoreen12	9dd79ca77e	fix: fixed empty section issue (#1292 ) * fix: fixed empty section issue * refactor: added checks to hide view	2024-02-15 15:56:04 +05:00
Muhammad Adeel Tajamul	9bfa0d06b6	feat: stick discussion sidebar to top (#1290 )	2024-02-15 06:43:32 +05:00
Alison Langston	c6d4bb3b45	feat: update exams and learning-assistant versions (#1291 )	2024-02-13 10:29:49 -05:00
Alison Langston	db1fc7782c	feat: gate visibility of chat component by active attempt (#1282 )	2024-02-12 09:17:32 -05:00
Marcos Rigoli	efd57c326e	CoursewareSearch - Show filters if needed only (#1287 ) * fix: CoursewareSearch - Show filters if needed only * fix: Refactored CoursewareSearch filtering logic * chore: Fixed unit tests for CoursewareResultsFilter * chore: Added CoursewareSearch hooks coverage	2024-02-09 12:50:42 -03:00
Muhammad Abdullah Waheed	a18ed8ed6c	feat: babel-plugin-react-intl to babel-plugin-formatjs migration (#1200 )	2024-02-08 14:58:48 -05:00
mashal-m	a340381738	refactor: update lock file version	2024-02-08 14:10:30 -05:00
Michael Roytman	170cbe1da0	Refactor use of frontend-lib-special-exams public API to use hooks. (#1284 ) * feat: refactor use of frontend-lib-special-exams public API to hooks This commit refactors the use of the frontend-lib-special-exams public API to use hooks. This commit also imports the root reducer from the frontend-lib-special-exams library. This root reducer is used for the specialExams slice when configuring the store for this application. * feat: update special exams version * feat: update snapshots --------- Co-authored-by: Alie Langston <alangsto@wellesley.edu>	2024-02-08 13:58:19 -05:00
Michael Roytman	174de4bc1b	feat: update version of frontend-lib-learning-assistant to 1.21.0 (#1285 ) This commit installs version 1.21.0 of @edx/frontend-lib-learning-assistant. This commit also refactors the Chat tests to assert on whether the Xpert component is rendered by the Chat component, not whether Xpert actually renders. This is because Xpert now has its own logic to determine whether to render. This release uses a new GET endpoint published on the Learning Assistant backend to determine whether the Learning Assistant feature is enabled. If the features is not enabled, the Learning Assistant is not rendered, and vice-versa.	2024-02-07 15:39:23 -05:00