chore(deps): bump minimatch and eslint-plugin-formatjs

Bumps [minimatch](https://github.com/isaacs/minimatch) and [eslint-plugin-formatjs](https://github.com/formatjs/formatjs). These dependencies needed to be updated together.

Updates `minimatch` from 9.0.5 to 9.0.9
- [Changelog](https://github.com/isaacs/minimatch/blob/main/changelog.md)
- [Commits](https://github.com/isaacs/minimatch/compare/v9.0.5...v9.0.9)

Updates `minimatch` from 5.1.6 to 5.1.9
- [Changelog](https://github.com/isaacs/minimatch/blob/main/changelog.md)
- [Commits](https://github.com/isaacs/minimatch/compare/v9.0.5...v9.0.9)

Updates `minimatch` from 3.1.2 to 3.1.5
- [Changelog](https://github.com/isaacs/minimatch/blob/main/changelog.md)
- [Commits](https://github.com/isaacs/minimatch/compare/v9.0.5...v9.0.9)

Updates `eslint-plugin-formatjs` from 4.13.3 to 4.14.0
- [Release notes](https://github.com/formatjs/formatjs/releases)
- [Commits](https://github.com/formatjs/formatjs/compare/eslint-plugin-formatjs@4.13.3...eslint-plugin-formatjs@4.14.0)

---
updated-dependencies:
- dependency-name: minimatch
  dependency-version: 9.0.9
  dependency-type: indirect
- dependency-name: minimatch
  dependency-version: 5.1.9
  dependency-type: indirect
- dependency-name: minimatch
  dependency-version: 3.1.5
  dependency-type: indirect
- dependency-name: eslint-plugin-formatjs
  dependency-version: 4.14.0
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

.env

@@ -1,3 +1,4 @@
+APP_ID='authoring'
 NODE_ENV='production'
 ACCESS_TOKEN_COOKIE_NAME=''
 BASE_URL=''
@@ -16,14 +17,37 @@ LOGO_URL=''
 LOGO_WHITE_URL=''
 LOGOUT_URL=null
 MARKETING_SITE_BASE_URL=''
+TERMS_OF_SERVICE_URL=''
+PRIVACY_POLICY_URL=''
 ORDER_HISTORY_URL=''
 PUBLISHER_BASE_URL=''
 REFRESH_ACCESS_TOKEN_ENDPOINT=''
 SEGMENT_KEY=''
 SITE_NAME=''
+STUDIO_SHORT_NAME='Studio'
 SUPPORT_EMAIL=''
 SUPPORT_URL=''
 USER_INFO_COOKIE_NAME=''
+ENABLE_ACCESSIBILITY_PAGE=false
 ENABLE_PROGRESS_GRAPH_SETTINGS=false
 ENABLE_TEAM_TYPE_SETTING=false
-ENABLE_NEW_EDITOR_PAGES=true
+ENABLE_UNIT_PAGE=false
+ENABLE_ASSETS_PAGE=false
+ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN=false
+ENABLE_TAGGING_TAXONOMY_PAGES=true
+ENABLE_CERTIFICATE_PAGE=true
+ENABLE_COURSE_IMPORT_IN_LIBRARY=false
+ENABLE_UNIT_PAGE_NEW_DESIGN=false
+ENABLE_COURSE_OUTLINE_NEW_DESIGN=false
+BBB_LEARN_MORE_URL=''
+HOTJAR_APP_ID=''
+HOTJAR_VERSION=6
+HOTJAR_DEBUG=false
+INVITE_STUDENTS_EMAIL_TO=''
+ENABLE_CHECKLIST_QUALITY=''
+# "Multi-level" blocks are unsupported in libraries
+LIBRARY_UNSUPPORTED_BLOCKS="conditional,step-builder,problem-builder,library_content,itembank"
+# Fallback in local style files
+PARAGON_THEME_URLS={}
+COURSE_TEAM_SUPPORT_EMAIL=''
+ADMIN_CONSOLE_URL='http://localhost:2025/admin-console'

.env.development

@@ -1,6 +1,7 @@
+APP_ID='authoring'
 NODE_ENV='development'
 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
-BASE_URL='localhost:2001'
+BASE_URL='http://localhost:2001'
 CREDENTIALS_BASE_URL='http://localhost:18150'
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 DISCOVERY_API_BASE_URL=
@@ -16,16 +17,40 @@ LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
 LOGOUT_URL='http://localhost:18000/logout'
 MARKETING_SITE_BASE_URL='http://localhost:18000'
+TERMS_OF_SERVICE_URL=
+PRIVACY_POLICY_URL=
 ORDER_HISTORY_URL='localhost:1996/orders'
 PORT=2001
 PUBLISHER_BASE_URL=
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 SEGMENT_KEY=null
-SITE_NAME='edX'
+SITE_NAME='Your Plaform Name Here'
 STUDIO_BASE_URL='http://localhost:18010'
-SUPPORT_EMAIL='support@example.com'
+STUDIO_SHORT_NAME='Studio'
+SUPPORT_EMAIL=
 SUPPORT_URL='https://support.edx.org'
 USER_INFO_COOKIE_NAME='edx-user-info'
+ENABLE_ACCESSIBILITY_PAGE=false
 ENABLE_PROGRESS_GRAPH_SETTINGS=false
 ENABLE_TEAM_TYPE_SETTING=false
-ENABLE_NEW_EDITOR_PAGES=true
+ENABLE_UNIT_PAGE=false
+ENABLE_ASSETS_PAGE=false
+ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN=true
+ENABLE_CERTIFICATE_PAGE=true
+ENABLE_COURSE_IMPORT_IN_LIBRARY=true
+ENABLE_COURSE_OUTLINE_NEW_DESIGN=true
+ENABLE_UNIT_PAGE_NEW_DESIGN=true
+ENABLE_NEW_VIDEO_UPLOAD_PAGE=true
+ENABLE_TAGGING_TAXONOMY_PAGES=true
+BBB_LEARN_MORE_URL=''
+HOTJAR_APP_ID=''
+HOTJAR_VERSION=6
+HOTJAR_DEBUG=true
+INVITE_STUDENTS_EMAIL_TO="someone@domain.com"
+ENABLE_CHECKLIST_QUALITY=true
+# "Multi-level" blocks are unsupported in libraries
+LIBRARY_UNSUPPORTED_BLOCKS="conditional,step-builder,problem-builder,library_content,itembank"
+# Fallback in local style files
+PARAGON_THEME_URLS={}
+COURSE_TEAM_SUPPORT_EMAIL=''
+ADMIN_CONSOLE_URL='http://localhost:2025/admin-console'

.env.test

@@ -1,5 +1,6 @@
+APP_ID='authoring'
 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
-BASE_URL='localhost:2001'
+BASE_URL='http://localhost:2001'
 CREDENTIALS_BASE_URL='http://localhost:18150'
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 DISCOVERY_API_BASE_URL='http://localhost:18381'
@@ -22,9 +23,24 @@ REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 SEGMENT_KEY=null
 SITE_NAME='edX'
 STUDIO_BASE_URL='http://localhost:18010'
+STUDIO_SHORT_NAME='Studio'
 SUPPORT_EMAIL='support@example.com'
 SUPPORT_URL='https://support.edx.org'
 USER_INFO_COOKIE_NAME='edx-user-info'
 ENABLE_PROGRESS_GRAPH_SETTINGS=false
 ENABLE_TEAM_TYPE_SETTING=false
-ENABLE_NEW_EDITOR_PAGES=true
+ENABLE_UNIT_PAGE=true
+ENABLE_ASSETS_PAGE=false
+ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN=true
+ENABLE_CERTIFICATE_PAGE=true
+ENABLE_COURSE_IMPORT_IN_LIBRARY=true
+ENABLE_COURSE_OUTLINE_NEW_DESIGN=false
+ENABLE_UNIT_PAGE_NEW_DESIGN=false
+ENABLE_TAGGING_TAXONOMY_PAGES=true
+BBB_LEARN_MORE_URL=''
+INVITE_STUDENTS_EMAIL_TO="someone@domain.com"
+ENABLE_CHECKLIST_QUALITY=true
+# "Multi-level" blocks are unsupported in libraries
+LIBRARY_UNSUPPORTED_BLOCKS="conditional,step-builder,problem-builder,library_content,itembank"
+PARAGON_THEME_URLS=
+COURSE_TEAM_SUPPORT_EMAIL='support@example.com'

.eslintignore

@@ -1,4 +1,6 @@
 coverage/*
 dist/
 node_modules/
-jest.config.js
+jest.config.js
+env.config.jsx
+example.env.config.jsx

.eslintrc.js

@@ -1,6 +1,9 @@
-const { createConfig } = require('@edx/frontend-build');
+const path = require('path');
+// eslint-disable-next-line import/no-extraneous-dependencies
+const { createConfig } = require('@openedx/frontend-build');
 
-module.exports = createConfig('eslint',
+module.exports = createConfig(
+  'eslint',
   {
     rules: {
       'jsx-a11y/label-has-associated-control': [2, {
@@ -8,6 +11,34 @@ module.exports = createConfig('eslint',
       }],
       'template-curly-spacing': 'off',
       'react-hooks/exhaustive-deps': 'off',
-      indent: 'off',
+      'no-restricted-exports': 'off',
+      // There is no reason to disallow this syntax anymore; we don't use regenerator-runtime in new browsers
+      'no-restricted-syntax': 'off',
+      'no-restricted-imports': ['error', {
+        patterns: [
+          {
+            group: ['@edx/frontend-platform/i18n'],
+            importNames: ['injectIntl'],
+            message: "Use 'useIntl' hook instead of injectIntl.",
+          },
+        ],
+      }],
     },
-  });
+    settings: {
+      // Import URLs should be resolved using aliases
+      'import/resolver': {
+        webpack: {
+          config: path.resolve(__dirname, 'webpack.dev.config.js'),
+        },
+      },
+    },
+    overrides: [
+      {
+        files: ['plugins/**/*.test.jsx'],
+        rules: {
+          'import/no-extraneous-dependencies': 'off',
+        },
+      },
+    ],
+  },
+);

.github/dependabot.yml

@@ -0,0 +1,7 @@
+version: 2
+updates:
+    # Adding new check for github-actions
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+        interval: "weekly"

.github/pull_request_template.md

@@ -0,0 +1,38 @@
+## Description
+
+Describe what this pull request changes, and why. Include implications for people using this change.
+Design decisions and their rationales should be documented in the repo (docstring / ADR), per
+[OEP-19](https://open-edx-proposals.readthedocs.io/en/latest/oep-0019-bp-developer-documentation.html), and can be linked here.
+
+Useful information to include:
+- Which user roles will this change impact? Common user roles are "Learner", "Course Author",
+"Developer", and "Operator".
+- Include screenshots for changes to the UI (ideally, both "before" and "after" screenshots, if applicable).
+
+## Supporting information
+
+Link to other information about the change, such as GitHub issues, or Discourse discussions.
+Be sure to check they are publicly readable, or if not, repeat the information here.
+
+## Testing instructions
+
+Please provide detailed step-by-step instructions for manually testing this change.
+
+## Other information
+
+Include anything else that will help reviewers and consumers understand the change.
+- Does this change depend on other changes elsewhere?
+- Any special concerns or limitations? For example: deprecations, migrations, security, or accessibility.
+
+## Best Practices Checklist
+
+We're trying to move away from some deprecated patterns in this codebase. Please
+check if your PR meets these recommendations before asking for a review:
+
+- [ ] Any _new_ files are using TypeScript (`.ts`, `.tsx`).
+- [ ] Avoid `propTypes` and `defaultProps` in any new or modified code.
+- [ ] Tests should use the helpers in `src/testUtils.tsx` (specifically `initializeMocks`)
+- [ ] Do not add new fields to the Redux state/store. Use React Context to share state among multiple components.
+- [ ] Use React Query to load data from REST APIs. See any `apiHooks.ts` in this repo for examples.
+- [ ] All new i18n messages in `messages.ts` files have a `description` for translators to use.
+- [ ] Avoid using `../` in import paths. To import from parent folders, use `@src`, e.g. `import { initializeMocks } from '@src/testUtils';` instead of `from '../../../../testUtils'`

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

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

.github/workflows/add-issue-to-btr-project.yml

@@ -0,0 +1,18 @@
+# Run the workflow that adds new tickets that are labelled "release testing"
+# to the org-wide BTR project board
+
+name: Add release testing issues to the BTR project board
+
+on:
+  issues:
+    types: [labeled]
+    # This workflow is triggered when an issue is labeled with 'release testing'.
+    # It adds the issue to the BTR project and applies the 'needs triage' label
+    # if it doesn't already have it.
+
+jobs:
+  handle-release-testing:
+    uses: openedx/.github/.github/workflows/add-issue-to-btr-project.yml@master
+    secrets:
+      GITHUB_APP_ID: ${{ secrets.GRAPHQL_AUTH_APP_ID }}
+      GITHUB_APP_PRIVATE_KEY: ${{ secrets.GRAPHQL_AUTH_APP_PEM }}

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

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

.github/workflows/add-to-cc-board.yml

@@ -0,0 +1,15 @@
+name: Trigger to add Issue or PR to a Core Contributor project board
+on:
+  issues:
+    types: [labeled]
+  pull_request:
+    types: [labeled]
+
+jobs:
+  add-to-cc-board:
+    if: github.event.label.name == 'Core Contributor assignee'
+    uses: openedx/.github/.github/workflows/add-to-cc-board.yml@master
+    with:
+      board_name: cc-frontend-apps
+    secrets:
+      projects_access_token: ${{ secrets.PROJECTS_TOKEN }}

.github/workflows/lockfileversion-check.yml

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

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

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

.github/workflows/update-browserslist-db.yml

@@ -0,0 +1,12 @@
+name: Update Browserslist DB
+on:
+  schedule:
+    - cron:  '0 0 * * 1'
+  workflow_dispatch:
+
+jobs:
+  update-browserslist:
+    uses: openedx/.github/.github/workflows/update-browserslist-db.yml@master
+
+    secrets:
+        requirements_bot_github_token: ${{ secrets.requirements_bot_github_token }}

.github/workflows/validate.yml

@@ -9,16 +9,31 @@ on:
 jobs:
   tests:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node: [16]
+
     steps:
-    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v2
+    - uses: actions/checkout@v6
+    - uses: actions/setup-node@v6
       with:
-        node-version: ${{ matrix.node }}
+        node-version-file: '.nvmrc'
     - run: make validate.ci
+    - name: Archive code coverage results
+      uses: actions/upload-artifact@v6
+      with:
+        name: code-coverage-report
+        path: coverage/*.*
+  coverage:
+    runs-on: ubuntu-latest
+    needs: tests
+    steps:
+    - uses: actions/checkout@v6
+    - name: Download code coverage results
+      uses: actions/download-artifact@v7
+      with:
+        pattern: code-coverage-report
+        path: coverage
+        merge-multiple: true
     - name: Upload coverage
-      uses: codecov/codecov-action@v3
+      uses: codecov/codecov-action@v5
       with:
         fail_ci_if_error: true
+        token: ${{ secrets.CODECOV_TOKEN }}

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 .eslintcache
 .idea
+.run
 node_modules
 npm-debug.log
 coverage
@@ -20,3 +21,12 @@ temp/babel-plugin-react-intl
 /temp
 /.vscode
 /module.config.js
+
+# Local environment overrides
+.env.private
+
+# Messages .json files fetched by atlas
+src/i18n/messages/
+
+# environment js config
+env.config.jsx

.nvmrc

@@ -1 +1 @@
-v16
+24

.oxlintrc.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "categories": {
+    "correctness": "warn"
+  },
+  "rules": {
+    "eslint/no-unused-vars": "off",
+    "typescript/unbound-method": "off", // 🛑 TEMPORARY
+    "typescript/no-floating-promises": ["error", {
+      "allowForKnownSafeCalls": [
+        // queryClient.invalidateQueries returns a promise that can be awaited
+        // if you want to do something after all the subsequent refetches are
+        // complete, but we rarely if ever want that; we usually want to
+        // continue invalidating more things immediately. So we don't usually
+        // want to await this.
+        "invalidateQueries",
+      ]
+    }]
+  },
+  "ignorePatterns": [
+    "webpack.dev-tutor.config.js",
+  ]
+}

.stylelintrc.json

@@ -0,0 +1,35 @@
+{
+  "extends": ["@edx/stylelint-config-edx"],
+  "rules": {
+    "selector-pseudo-class-no-unknown": [true, {
+      "ignorePseudoClasses": ["export"]
+    }],
+    "unit-no-unknown": [true, {
+      "ignoreUnits": ["\\.5"]
+    }],
+    "property-no-vendor-prefix": [true, {
+      "ignoreProperties": ["animation", "filter", "transform", "transition"]
+    }],
+    "value-no-vendor-prefix": [true, {
+      "ignoreValues": ["fill-available"]
+    }],
+    "function-no-unknown": null,
+    "number-leading-zero": "never",
+    "no-descending-specificity": null,
+    "selector-class-pattern": null,
+    "scss/no-global-function-names": null,
+    "color-hex-case": "upper",
+    "color-hex-length": "long",
+    "scss/dollar-variable-empty-line-before": null,
+    "scss/dollar-variable-colon-space-after": "at-least-one-space",
+    "at-rule-no-unknown": null,
+    "scss/at-rule-no-unknown": true,
+    "scss/at-import-partial-extension": null,
+    "scss/comment-no-empty": null,
+    "import-notation": "string",
+    "property-no-unknown": [true, {
+      "ignoreProperties": ["xs", "sm", "md", "lg", "xl", "xxl"]
+    }],
+    "alpha-value-notation": "number"
+  }
+}

.tx/config

@@ -1,9 +0,0 @@
-[main]
-host = https://www.transifex.com
-
-[o:open-edx:p:edx-platform:r:frontend-app-course-authoring]
-file_filter = src/i18n/messages/<lang>.json
-source_file = src/i18n/transifex_input.json
-source_lang = en
-type        = KEYVALUEJSON
-

Makefile

@@ -1,22 +1,17 @@
-transifex_resource = frontend-app-course-authoring
-export TRANSIFEX_RESOURCE = ${transifex_resource}
-transifex_langs = "ar,fr,es_419,zh_CN"
-
+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
-tx_url1 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/translation/en/strings/
-tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/source/
 
 # This directory must match .babelrc .
-transifex_temp = ./temp/babel-plugin-react-intl
+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...
@@ -34,20 +29,18 @@ 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
-
-# Pulls translations from Transifex.
 pull_translations:
-	tx pull -f --mode reviewed --languages=$(transifex_langs)
+	rm -rf src/i18n/messages
+	mkdir src/i18n/messages
+	cd src/i18n/messages \
+	   && atlas pull $(ATLAS_OPTIONS) \
+	            translations/frontend-component-ai-translations/src/i18n/messages:frontend-component-ai-translations \
+	            translations/frontend-platform/src/i18n/messages:frontend-platform \
+	            translations/paragon/src/i18n/messages:paragon \
+	            translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
+	            translations/frontend-app-course-authoring/src/i18n/messages:frontend-app-course-authoring
+
+	$(intl_imports) frontend-component-ai-translations frontend-platform paragon frontend-component-footer frontend-app-course-authoring
 
 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:
@@ -58,8 +51,11 @@ validate-no-uncommitted-package-lock-changes:
 validate:
 	make validate-no-uncommitted-package-lock-changes
 	npm run i18n_extract
-	npm run lint -- --max-warnings 0
-	npm run test
+# We are trying out oxlint. Now that it's been working well for a while with both oxlint and eslint, we have disabled
+# eslint, and after a few weeks we'll evaluate whether any problems are slipping through if only oxlint is used.
+	npm run oxlint
+	npm run types
+	npm run test:ci
 	npm run build
 
 .PHONY: validate.ci

README.rst

@@ -1,39 +1,284 @@
-|Build Status| |Codecov| |license|
+frontend-app-authoring
+######################
 
-frontend-app-course-authoring
-=============================
+|license-badge| |status-badge| |codecov-badge|
 
-Please tag `@edx/teaching-and-learning <https://github.com/orgs/edx/teams/teaching-and-learning>`_ on any PRs or issues.  Thanks.
 
-Prerequisite
+Purpose
+*******
+
+This implements most of the frontend for **Open edX Studio**, allowing authors to create and edit courses, libraries, and their learning components.
+
+A few parts of Studio still default to the `"legacy" pages defined in edx-platform <https://github.com/openedx/edx-platform/tree/master/cms>`_, but those are rapidly being deprecated and replaced with the React- and Paragon-based pages defined here.
+
+
+Getting Started
+************
+
+Prerequisites
+=============
+
+`Tutor`_ is currently recommended as a development environment for the Authoring
+MFE. Most likely, it already has this MFE configured; however, you'll need to
+make some changes in order to run it in development mode. You can refer
+to the `relevant tutor-mfe documentation`_ for details, or follow the quick
+guide below.
+
+.. _Tutor: https://github.com/overhangio/tutor
+
+.. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe#mfe-development
+
+
+Cloning and Setup
+=================
+
+1. Clone your new repo:
+
+.. code-block:: bash
+
+    git clone https://github.com/openedx/frontend-app-authoring.git
+
+2. Use the version of Node specified in the ``.nvmrc`` file.
+
+  The current version of the micro-frontend build scripts supports the version of Node found in ``.nvmrc``.
+  Using other major versions of node *may* work, but this is unsupported.  For
+  convenience, this repository includes an ``.nvmrc`` file to help in setting the
+  correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.
+
+3. Stop the Tutor devstack, if it's running: ``tutor dev stop``
+
+4. Next, we need to tell Tutor that we're going to be running this repo in
+   development mode, and it should be excluded from the ``mfe`` container that
+   otherwise runs every MFE. Run this:
+
+.. code-block:: bash
+
+    tutor mounts add /path/to/frontend-app-authoring
+
+5. Start Tutor in development mode. This command will start the LMS and Studio,
+   and other required MFEs like ``authn`` and ``account``, but will not start
+   the Authoring MFE, which we're going to run on the host instead of in a
+   container managed by Tutor. Run:
+
+.. code-block:: bash
+
+    tutor dev start lms cms mfe
+
+Startup
+=======
+
+1. Install npm dependencies:
+
+.. code-block:: bash
+
+  cd frontend-app-authoring && npm ci
+
+2. Start the dev server:
+
+.. code-block:: bash
+
+  npm run dev
+
+Then you can access the app at http://apps.local.openedx.io:2001/course-authoring/home
+
+Troubleshooting
+---------------
+
+* If you see an "Invalid Host header" error, then you're probably using a different domain name for your devstack such as
+  ``local.edly.io`` or ``local.overhang.io`` (not the new recommended default, ``local.openedx.io``). In that case, run
+  these commands to update your devstack's domain names:
+
+.. code-block:: bash
+
+  tutor dev stop
+  tutor config save --set LMS_HOST=local.openedx.io --set CMS_HOST=studio.local.openedx.io
+  tutor dev launch -I --skip-build
+  tutor dev stop authoring  # We will run this MFE on the host
+
+* If tutor-mfe is not starting the authoring MFE in development mode (eg. `tutor dev start authoring` fails), it may be due to
+  using a tutor version that expects the MFE name to be frontend-app-course-authoring (the previous name of this repo). To fix
+  this, you can rename the cloned repo directory to frontend-app-course-authoring. More information can be found in
+  `this forum post <https://discuss.openedx.org/t/repo-rename-frontend-app-course-authoring-frontend-app-authoring/13930/2>`__.
+
+
+Features
+********
+
+Feature: Pages and Resources Studio Tab
+=======================================
+
+Enables a "Pages & Resources" menu item in Studio, under the "Content" menu.
+
+.. image:: ./docs/readme-images/feature-pages-resources.png
+
+Requirements
 ------------
 
-`Devstack <https://edx.readthedocs.io/projects/edx-installing-configuring-and-running/en/latest/installation/index.html>`_.  If you start Devstack with ``make dev.up.studio`` that should give you everything you need as a companion to this frontend.
+The following are requirements for this feature to function correctly:
 
-Installation and Startup
-------------------------
+* ``edx-platform`` Waffle flags:
 
-1. Clone the repo:
+  * ``discussions.pages_and_resources_mfe``: must be enabled for the set of users meant to access this feature.
 
-  ``git clone https://github.com/openedx/frontend-app-course-authoring.git``
+* `frontend-app-learning <https://github.com/openedx/frontend-app-learning>`_: This MFE expects it to be the LMS frontend.
+* `frontend-app-discussions <https://github.com/openedx/frontend-app-discussions/>`_: This is what the "Discussions" configuration provided by this feature actually configures.  Without it, discussion settings are ignored.
 
-2. Install npm dependencies:
+Configuration
+-------------
 
-  ``cd frontend-app-course-authoring && npm install``
+In additional to the standard settings, the following local configuration items are required:
 
-3. Start the dev server:
+* ``LEARNING_BASE_URL``: points to Learning MFE; necessary so that the `View Live` button works
+* ``ENABLE_PROGRESS_GRAPH_SETTINGS``: allow enabling or disabling the learner progress graph course-wide
 
-  ``npm start``
+Feature Description
+-------------------
+
+Clicking on the "Pages & Resources" menu item takes the user to the course's ``pages-and-resources`` standalone page in this MFE.  (In a devstack, for instance: http://localhost:2001/course/course-v1:edX+DemoX+Demo_Course/pages-and-resources.)
+
+UX-wise, **Pages & Resources** is meant to look like a Studio tab, so reproduces Studio's header.
+
+For a particular course, this page allows one to:
+
+* Configure the new Discussions MFE (making this a requirement for it).  This includes:
+
+  * Enabling/disabling the feature entirely
+  * Picking a different discussion provider, while showing a comparison matrix between them:
+
+    * edX
+    * Ed Discussion
+    * InScribe
+    * Piazza
+    * Yellowdig
+
+  * Allowing to configure the selected provider
+
+* Enable/Disable learner progress
+* Enable/Disable learner notes
+* Enable/Disable the learner wiki
+* Enable/Disable the LMS calculator
+* Go to the textbook management page in Studio (in a devstack: http://localhost:18010/textbooks/course-v1:edX+DemoX+Demo_Course)
+* Go to the custom page management page in Studio(in a devstack http://localhost:18010/tabs/course-v1:edX+DemoX+Demo_Course)
+
+Feature: New React XBlock Editors
+=================================
+
+.. image:: ./docs/readme-images/feature-problem-editor.png
+
+New React editors for the HTML, Video, and Problem XBlocks are provided here and are rendered by this MFE instead of by the XBlock's authoring view.
+
+Feature: New Proctoring Exams View
+==================================
+
+.. image:: ./docs/readme-images/feature-proctored-exams.png
+
+Requirements
+------------
+
+* `edx-exams <https://github.com/edx/edx-exams>`_: for this feature to work, the ``edx-exams`` IDA must be deployed and its API accessible by the browser
+
+Configuration
+-------------
+
+In additional to the standard settings, the following local configuration item is required:
+
+* ``EXAMS_BASE_URL``: URL to the ``edx-exams`` deployment
+
+Feature Description
+-------------------
+
+In Studio, a new item ("Proctored Exam Settings") is added to "Other Course Settings" in the course's "Certificates" settings page.  When clicked, this takes the author to the corresponding page in the Course Authoring MFE, where one can:
+
+* Enable proctored exams for the course
+* Allow opting out of proctored exams
+* Select a proctoring provider
+
+Feature: Advanced Settings
+==========================
+
+.. image:: ./docs/readme-images/feature-advanced-settings.png
+
+In Studio, the "Advanced Settings" page for each enabled course will now be served by this frontend, instead of the UI built into edx-platform. The advanced settings page holds many different settings for the course, such as what features or XBlocks are enabled.
+
+Feature: Files & Uploads
+==========================
+
+.. image:: ./docs/readme-images/feature-files-uploads.png
+
+In Studio, the "Files & Uploads" page for each enabled course will now be served by this frontend, instead of the UI built into edx-platform. This page allows managing static asset files like PDFs, images, etc. used for the course.
+
+Feature: Course Updates
+==========================
+
+.. image:: ./docs/readme-images/feature-course-updates.png
+
+Feature: Import/Export Pages
+============================
+
+.. image:: ./docs/readme-images/feature-export.png
+
+Feature: Tagging/Taxonomy Pages
+================================
+
+.. image:: ./docs/readme-images/feature-tagging-taxonomy-pages.png
+
+Requirements
+------------
+
+* ``edx-platform`` Waffle flags:
+
+  * ``new_studio_mfe.use_tagging_taxonomy_list_page``: this feature flag must be enabled.
+
+Configuration
+-------------
+
+In additional to the standard settings, the following local configuration items are required:
+
+* ``ENABLE_TAGGING_TAXONOMY_PAGES``: must be enabled (which it is by default) in order to actually enable/show the new
+Tagging/Taxonomy functionality.
+
+
+Feature: Libraries V2/Legacy Tabs
+=================================
+
+Configuration
+-------------
+
+In additional to the standard settings, the following local configurations can be set to switch between different library modes:
+
+* ``MEILISEARCH_ENABLED``: Studio setting which is enabled when the `meilisearch plugin`_ is installed.
+* ``edx-platform`` Waffle flags:
+
+  * ``contentstore.new_studio_mfe.disable_legacy_libraries``: this feature flag must be OFF to show legacy Libraries V1
+  * ``contentstore.new_studio_mfe.disable_new_libraries``: this feature flag must be OFF to show Content Libraries V2
+
+.. _meilisearch plugin: https://github.com/open-craft/tutor-contrib-meilisearch
+
+Developing
+**********
+
+`Tutor <https://docs.tutor.edly.io/>`_ is the community-supported Open edX development environment. See the `tutor-mfe plugin README <https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development>`_ for more information.
 
-The dev server is running at `http://localhost:2001 <http://localhost:2001>`_.
 
 If your devstack includes the default Demo course, you can visit the following URLs to see content:
 
-- `Proctored Exam Settings <http://localhost:2001/course/course-v1:edX+DemoX+Demo_Course/proctored-exam-settings>`_
-- `Pages and Resources <http://localhost:2001/course/course-v1:edX+DemoX+Demo_Course/pages-and-resources>`_ (work in progress)
+- `Pages and Resources <http://localhost:2001/course/course-v1:edX+DemoX+Demo_Course/pages-and-resources>`_
+
+Troubleshooting
+========================
+
+* ``npm ERR! gyp ERR! build error`` while running npm install on Macs with M1 processors: Probably due to a compatibility issue of node-canvas with M1.
+
+  Run ``brew install pkg-config pixman cairo pango libpng jpeg giflib librsvg`` before ``npm install`` to get the correct versions of the dependencies.
+  If there is still an error, look for "no package [...] found" in the error message and install missing package via brew.
+  (https://github.com/Automattic/node-canvas/issues/1733)
+
+
+Deploying
+*********
 
 Production Build
-----------------
+================
 
 The production build is created with ``npm run build``.
 
@@ -41,5 +286,108 @@ The production build is created with ``npm run build``.
    :target: https://travis-ci.com/edx/frontend-app-course-authoring
 .. |Codecov| image:: https://codecov.io/gh/edx/frontend-app-course-authoring/branch/master/graph/badge.svg
    :target: https://codecov.io/gh/edx/frontend-app-course-authoring
-.. |license| image:: https://img.shields.io/npm/l/@edx/frontend-app-course-authoring.svg
-   :target: @edx/frontend-app-course-authoring
+.. |license| image:: https://img.shields.io/npm/l/@edx/frontend-app-authoring.svg
+   :target: @edx/frontend-app-authoring
+
+Internationalization
+====================
+
+Please see refer to the `frontend-platform i18n howto`_ for documentation on
+internationalization.
+
+.. _frontend-platform i18n howto: https://github.com/openedx/frontend-platform/blob/master/docs/how_tos/i18n.rst
+
+
+Getting Help
+************
+
+If you're having trouble, we have discussion forums at
+https://discuss.openedx.org where you can connect with others in the community.
+
+Our real-time conversations are on Slack. You can request a `Slack
+invitation`_, then join our `community Slack workspace`_.  Because this is a
+frontend repository, the best place to discuss it would be in the `#wg-frontend
+channel`_.
+
+For anything non-trivial, the best path is to open an issue in this repository
+with as many details about the issue you are facing as you can provide.
+
+https://github.com/openedx/frontend-app-course-authoring/issues
+
+For more information about these options, see the `Getting Help`_ page.
+
+.. _Slack invitation: https://openedx.org/slack
+.. _community Slack workspace: https://openedx.slack.com/
+.. _#wg-frontend channel: https://openedx.slack.com/archives/C04BM6YC7A6
+.. _Getting Help: https://openedx.org/community/connect
+
+
+Legacy Studio
+*************
+
+If you would like to use legacy studio for certain features, you can set the following waffle flags in ``edx-platform``:
+  * ``legacy_studio.text_editor``: loads the legacy HTML Xblock editor when editing a text block
+  * ``legacy_studio.video_editor``: loads the legacy Video editor when editing a video block
+  * ``legacy_studio.problem_editor``: loads the legacy Problem editor when editing a problem block
+  * ``legacy_studio.advanced_settings``: Advanced Settings page
+  * ``legacy_studio.updates``: Updates page
+  * ``legacy_studio.export``: Export page
+  * ``legacy_studio.import``: Import page
+  * ``legacy_studio.files_uploads``: Files page
+  * ``legacy_studio.exam_settings``: loads the legacy Exam Settings
+
+License
+*******
+
+The code in this repository is licensed under the AGPLv3 unless otherwise
+noted.
+
+Please see `LICENSE <LICENSE>`_ for details.
+
+
+Contributing
+************
+
+Contributions are very welcome.  Please read `How To Contribute`_ for details.
+
+.. _How To Contribute: https://openedx.org/r/how-to-contribute
+
+This project is currently accepting all types of contributions, bug fixes,
+security fixes, maintenance work, or new features.  However, please make sure
+to have a discussion about your new feature idea with the maintainers prior to
+beginning development to maximize the chances of your change being accepted.
+You can start a conversation by creating a new issue on this repo summarizing
+your idea.
+
+
+The Open edX Code of Conduct
+****************************
+
+All community members are expected to follow the `Open edX Code of Conduct`_.
+
+.. _Open edX Code of Conduct: https://openedx.org/code-of-conduct/
+
+People
+******
+
+The assigned maintainers for this component and other project details may be
+found in `Backstage`_. Backstage pulls this data from the ``catalog-info.yaml``
+file in this repo.
+
+.. _Backstage: https://open-edx-backstage.herokuapp.com/catalog/default/component/frontend-app-course-authoring
+
+
+Reporting Security Issues
+*************************
+
+Please do not report security issues in public, and email security@openedx.org instead.
+
+.. |license-badge| image:: https://img.shields.io/github/license/openedx/frontend-app-course-authoring.svg
+    :target: https://github.com/openedx/frontend-app-course-authoring/blob/master/LICENSE
+    :alt: License
+
+.. |status-badge| image:: https://img.shields.io/badge/Status-Maintained-brightgreen
+
+.. |codecov-badge| image:: https://codecov.io/github/openedx/frontend-app-course-authoring/coverage.svg?branch=master
+    :target: https://codecov.io/github/openedx/frontend-app-course-authoring?branch=master
+    :alt: Codecov

catalog-info.yaml

@@ -0,0 +1,19 @@
+# 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-authoring'
+  description: "The frontend (MFE) for Open edX Authoring (aka Studio)"
+  links:
+    - url: "https://github.com/openedx/frontend-app-authoring"
+      title: "Frontend app authoring"
+      icon: "Web"
+  annotations:
+    openedx.org/arch-interest-groups: ""
+    openedx.org/release: "master"
+spec:
+  owner: user:bradenmacdonald
+  type: 'website'
+  lifecycle: 'production'

codecov.yml

@@ -8,3 +8,8 @@ coverage:
       default:
         target: auto
         threshold: 0%
+ignore:
+  - "src/grading-settings/grading-scale/react-ranger.js"
+  - "src/generic/DraggableList/verticalSortableList.ts"
+  - "src/container-comparison/data/api.mock.ts"
+  - "src/index.js"

docs/how_tos/override-external-urls.rst

@@ -0,0 +1,80 @@
+Override External URLs
+======================
+
+What is getExternalLinkUrl?
+---------------------------
+
+The `getExternalLinkUrl` function is a utility from `@edx/frontend-platform` that allows for centralized management of external URLs. It enables the override of external links through configuration, making it possible to customize external references without modifying the source code directly.
+
+URLs wrapped with getExternalLinkUrl
+------------------------------------
+Use cases:
+
+1. **Accessibility Page** (`src/accessibility-page/AccessibilityPage.jsx`)
+   - `COMMUNITY_ACCESSIBILITY_LINK` - Points to community accessibility resources: https://www.edx.org/accessibility
+
+2. **Course Outline** (if applicable)
+   - Documentation links
+   - Help resources
+
+3. **Other pages** (search for `getExternalLinkUrl` usage across the codebase)
+   - Help documentation
+   - External tool integrations
+
+Following external URLs are wrapped with `getExternalLinkUrl` in the authoring application:
+
+- 'https://www.edx.org/accessibility'
+- 'https://docs.openedx.org/en/latest/educators/concepts/exercise_tools/about_multi_select.html'
+- 'https://docs.openedx.org/en/latest/educators/how-tos/course_development/exercise_tools/add_multi_select.html'
+- 'https://docs.openedx.org/en/latest/educators/how-tos/course_development/exercise_tools/add_dropdown.html'
+- 'https://docs.openedx.org/en/latest/educators/how-tos/course_development/exercise_tools/manage_numerical_input_problem.html'
+- 'https://docs.openedx.org/en/latest/educators/how-tos/course_development/exercise_tools/add_text_input.html'
+- 'https://docs.openedx.org/en/latest/educators/how-tos/course_development/social_sharing.html'
+- 'https://docs.openedx.org/en/latest/educators/references/course_development/exercise_tools/guide_problem_types.html#advanced-problem-types'
+- 'https://docs.openedx.org/en/latest/educators/references/course_development/parent_child_components.html'
+- 'https://openai.com/api-data-privacy'
+- 'https://docs.openedx.org/en/latest/educators/how-tos/course_development/create_new_library.html'
+- 'https://bigbluebutton.org/privacy-policy/'
+- 'https://creativecommons.org/about'
+
+Note: as new external URLs are added to the codebase, more URLs will be wrapped with `getExternalLinkUrl` and this list may not always be up to date.
+
+How to Override External URLs
+-----------------------------
+
+To override external URLs, you can use the frontend platform's configuration system.
+This object should be added to the config object defined in the env.config.[js,jsx,ts,tsx], and must be named externalLinkUrlOverrides.
+
+1. **Environment Configuration**
+   Add the URL overrides to your environment configuration:
+
+   .. code-block:: javascript
+
+      const config = {
+        // Other config options...
+        externalLinkUrlOverrides: {
+          'https://www.edx.org/accessibility': 'https://your-custom-domain.com/accessibility',
+          // Add other URL overrides here
+        }
+      };
+
+Examples
+--------
+
+**Original URL:** Default community accessibility link
+**Override:** Your institution's accessibility policy page
+
+.. code-block:: javascript
+
+   // In your app configuration
+   getExternalLinkUrl('https://www.edx.org/accessibility')
+   // Returns: 'https://your-custom-domain.com/accessibility'
+   // Instead of the default Open edX community link
+
+Benefits
+--------
+
+- **Customization**: Institutions can point to their own resources
+- **Maintainability**: URLs can be changed without code modifications  
+- **Consistency**: Centralized URL management across the application
+- **Flexibility**: Different environments can have different external links

example.env.config.jsx

@@ -0,0 +1,24 @@
+import WholeCourseTranslation from '@edx/course-app-translation-plugin';
+import { PLUGIN_OPERATIONS, DIRECT_PLUGIN } from '@openedx/frontend-plugin-framework';
+
+// Load environment variables from .env file
+const config = {
+  ...process.env,
+  pluginSlots: {
+    additional_course_plugin: {
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'whole-course-translation-plugin',
+            type: DIRECT_PLUGIN,
+            priority: 1,
+            RenderWidget: WholeCourseTranslation,
+          },
+        },
+      ],
+    },
+  },
+};
+
+export default config;

jest.config.js

@@ -1,17 +1,21 @@
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('jest', {
   setupFilesAfterEnv: [
+    'jest-expect-message',
     '<rootDir>/src/setupTest.js',
   ],
   coveragePathIgnorePatterns: [
     'src/setupTest.js',
     'src/i18n',
   ],
-  snapshotSerializers: [
-    'enzyme-to-json/serializer',
-  ],
   moduleNameMapper: {
     '^lodash-es$': 'lodash',
+    // This alias is for any code in the src directory that wants to avoid '../../' style relative imports:
+    '^@src/(.*)$': '<rootDir>/src/$1',
+    // This alias is used for plugins in the plugins/ folder only.
+    '^CourseAuthoring/(.*)$': '<rootDir>/src/$1',
   },
+  modulePathIgnorePatterns: [
+  ],
 });

openedx.yaml

@@ -1,11 +0,0 @@
-# This file describes this Open edX repo, as described in OEP-2:
-# http://open-edx-proposals.readthedocs.io/en/latest/oeps/oep-0002.html#specification
-
-nick: cath
-oeps: {}
-owner: edx/platform-core-tnl
-openedx-release:
-  # The openedx-release key is described in OEP-10:
-  #   https://open-edx-proposals.readthedocs.io/en/latest/oep-0010-proc-openedx-releases.html
-  # The FAQ might also be helpful: https://openedx.atlassian.net/wiki/spaces/COMM/pages/1331268879/Open+edX+Release+FAQ
-  ref: master

package.json

@@ -1,83 +1,125 @@
 {
-  "name": "@edx/frontend-app-course-authoring",
+  "name": "@edx/frontend-app-authoring",
   "version": "0.1.0",
   "description": "Frontend application template",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/openedx/frontend-app-course-authoring.git"
+    "url": "git+https://github.com/openedx/frontend-app-authoring.git"
   },
   "browserslist": [
     "extends @edx/browserslist-config"
   ],
   "scripts": {
     "build": "fedx-scripts webpack",
-    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
-    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
-    "lint:fix": "fedx-scripts eslint --ext .js --ext .jsx . --fix",
-    "snapshot": "fedx-scripts jest --updateSnapshot",
+    "i18n_extract": "fedx-scripts formatjs extract --include=plugins",
+    "stylelint": "stylelint \"plugins/**/*.scss\" \"src/**/*.scss\" \"scss/**/*.scss\" --config .stylelintrc.json",
+    "lint": "npm run stylelint && fedx-scripts eslint --ext .js --ext .jsx --ext .ts --ext .tsx .",
+    "oxlint": "oxlint --type-aware --deny-warnings",
+    "lint:fix": "npm run stylelint -- --fix && fedx-scripts eslint --fix --ext .js --ext .jsx --ext .ts --ext .tsx .",
     "start": "fedx-scripts webpack-dev-server --progress",
-    "test": "fedx-scripts jest --coverage --passWithNoTests"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run lint"
-    }
+    "start:with-theme": "paragon install-theme && npm start && npm install",
+    "dev": "PUBLIC_PATH=/authoring/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
+    "test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests",
+    "test:ci": "TZ=UTC fedx-scripts jest --silent --coverage --passWithNoTests",
+    "types": "tsc --noEmit"
   },
   "author": "edX",
   "license": "AGPL-3.0",
-  "homepage": "https://github.com/openedx/frontend-app-course-authoring#readme",
+  "homepage": "https://github.com/openedx/frontend-app-authoring#readme",
   "publishConfig": {
     "access": "public"
   },
   "bugs": {
-    "url": "https://github.com/openedx/frontend-app-course-authoring/issues"
+    "url": "https://github.com/openedx/frontend-app-authoring/issues"
   },
   "dependencies": {
-    "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-build": "^11.0.0",
-    "@edx/frontend-component-footer": "11.1.1",
-    "@edx/frontend-lib-content-components": "^1.43.0",
-    "@edx/frontend-platform": "2.5.1",
-    "@edx/paragon": "20.6.1",
-    "@fortawesome/fontawesome-svg-core": "1.2.28",
-    "@fortawesome/free-brands-svg-icons": "5.11.2",
-    "@fortawesome/free-regular-svg-icons": "5.11.2",
-    "@fortawesome/free-solid-svg-icons": "5.11.2",
-    "@fortawesome/react-fontawesome": "0.1.9",
-    "@reduxjs/toolkit": "1.5.0",
-    "classnames": "2.2.6",
-    "core-js": "3.8.1",
+    "@codemirror/lang-html": "^6.0.0",
+    "@codemirror/lang-markdown": "^6.0.0",
+    "@codemirror/lang-xml": "^6.0.0",
+    "@codemirror/lint": "^6.2.1",
+    "@codemirror/state": "^6.0.0",
+    "@codemirror/view": "^6.0.0",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/modifiers": "^7.0.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.3",
+    "@edx/browserslist-config": "1.5.1",
+    "@edx/frontend-component-footer": "^14.9.0",
+    "@edx/frontend-component-header": "^8.1.0",
+    "@edx/frontend-enterprise-hotjar": "^7.2.0",
+    "@edx/frontend-platform": "^8.4.0",
+    "@edx/openedx-atlas": "^0.7.0",
+    "@openedx-plugins/course-app-calculator": "file:plugins/course-apps/calculator",
+    "@openedx-plugins/course-app-edxnotes": "file:plugins/course-apps/edxnotes",
+    "@openedx-plugins/course-app-learning_assistant": "file:plugins/course-apps/learning_assistant",
+    "@openedx-plugins/course-app-live": "file:plugins/course-apps/live",
+    "@openedx-plugins/course-app-ora_settings": "file:plugins/course-apps/ora_settings",
+    "@openedx-plugins/course-app-proctoring": "file:plugins/course-apps/proctoring",
+    "@openedx-plugins/course-app-progress": "file:plugins/course-apps/progress",
+    "@openedx-plugins/course-app-teams": "file:plugins/course-apps/teams",
+    "@openedx-plugins/course-app-wiki": "file:plugins/course-apps/wiki",
+    "@openedx-plugins/course-app-xpert_unit_summary": "file:plugins/course-apps/xpert_unit_summary",
+    "@openedx/frontend-build": "^14.6.2",
+    "@openedx/frontend-plugin-framework": "^1.8.0",
+    "@openedx/paragon": "^23.5.0",
+    "@redux-devtools/extension": "^3.3.0",
+    "@reduxjs/toolkit": "2.11.2",
+    "@tanstack/react-query": "5.90.21",
+    "@tinymce/tinymce-react": "^6.0.0",
+    "classnames": "2.5.1",
+    "codemirror": "^6.0.0",
     "email-validator": "2.0.4",
-    "formik": "2.2.6",
-    "lodash": "4.17.21",
-    "moment": "2.29.2",
-    "prop-types": "15.7.2",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
-    "react-redux": "7.1.3",
-    "react-responsive": "8.1.0",
-    "react-router": "5.1.2",
-    "react-router-dom": "5.1.2",
-    "react-transition-group": "4.4.1",
-    "redux": "4.0.5",
-    "regenerator-runtime": "0.13.7",
-    "uuid": "^3.4.0",
-    "yup": "0.31.1"
+    "fast-xml-parser": "^5.0.0",
+    "file-saver": "^2.0.5",
+    "formik": "2.4.9",
+    "frontend-components-tinymce-advanced-plugins": "^1.0.3",
+    "jszip": "^3.10.1",
+    "lodash": "4.17.23",
+    "meilisearch": "^0.41.0",
+    "moment": "2.30.1",
+    "moment-shortformat": "^2.1.0",
+    "prop-types": "^15.8.1",
+    "react": "^18.3.1",
+    "react-datepicker": "^8.10.0",
+    "react-dom": "^18.3.1",
+    "react-error-boundary": "^4.0.13",
+    "react-helmet": "^6.1.0",
+    "react-onclickoutside": "^6.13.0",
+    "react-redux": "7.2.9",
+    "react-responsive": "10.0.1",
+    "react-router": "6.30.3",
+    "react-router-dom": "6.30.3",
+    "react-select": "5.10.2",
+    "react-textarea-autosize": "^8.5.3",
+    "react-transition-group": "4.4.5",
+    "redux": "4.2.1",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.4.1",
+    "reselect": "^4.1.5",
+    "tinymce": "^5.10.4",
+    "universal-cookie": "^8.0.0",
+    "uuid": "^11.1.0",
+    "xmlchecker": "^0.1.0",
+    "yup": "0.32.11"
   },
   "devDependencies": {
-    "@edx/browserslist-config": "1.0.0",
-    "@edx/frontend-build": "^11.0.0",
-    "@edx/reactifex": "^1.0.3",
-    "@testing-library/jest-dom": "5.16.4",
-    "@testing-library/react": "12.1.1",
-    "@testing-library/user-event": "^13.2.1",
-    "axios-mock-adapter": "1.20.0",
-    "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.6",
-    "enzyme-to-json": "^3.6.2",
-    "glob": "7.1.6",
-    "husky": "3.1.0",
-    "react-test-renderer": "16.9.0",
-    "reactifex": "1.1.1"
+    "@edx/stylelint-config-edx": "2.3.3",
+    "@edx/typescript-config": "^1.0.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/lodash": "^4.17.17",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "axios-mock-adapter": "2.1.0",
+    "eslint-import-resolver-webpack": "^0.13.8",
+    "fetch-mock-jest": "^1.5.1",
+    "jest-canvas-mock": "^2.5.2",
+    "jest-expect-message": "^1.1.3",
+    "oxlint": "^1.42.0",
+    "oxlint-tsgolint": "^0.14.0",
+    "react-test-renderer": "^18.3.1",
+    "redux-mock-store": "^1.5.4"
   }
 }

plugins/course-apps/calculator/Settings.jsx

@@ -1,12 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
-import AppSettingsModal from '../app-settings-modal/AppSettingsModal';
+import AppSettingsModal from 'CourseAuthoring/pages-and-resources/app-settings-modal/AppSettingsModal';
 import messages from './messages';
 
-function CalculatorSettings({ intl, onClose }) {
+/**
+ * Settings widget for the "calculator" Course App.
+ * @param {{onClose: () => void}} props
+ */
+const CalculatorSettings = ({ onClose }) => {
+  const intl = useIntl();
   return (
     <AppSettingsModal
       appId="calculator"
@@ -17,11 +22,10 @@ function CalculatorSettings({ intl, onClose }) {
       onClose={onClose}
     />
   );
-}
+};
 
 CalculatorSettings.propTypes = {
-  intl: intlShape.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 
-export default injectIntl(CalculatorSettings);
+export default CalculatorSettings;

plugins/course-apps/calculator/package.json

@@ -0,0 +1,17 @@
+{
+    "name": "@openedx-plugins/course-app-calculator",
+    "version": "0.1.0",
+    "description": "Calculator configuration for courses using it",
+    "peerDependencies": {
+        "@edx/frontend-app-authoring": "*",
+        "@edx/frontend-platform": "*",
+        "@openedx/paragon": "*",
+        "prop-types": "*",
+        "react": "*"
+    },
+    "peerDependenciesMeta": {
+        "@edx/frontend-app-authoring": {
+            "optional": true
+        }
+    }
+}

plugins/course-apps/edxnotes/Settings.jsx

@@ -1,12 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
-import AppSettingsModal from '../app-settings-modal/AppSettingsModal';
+import AppSettingsModal from 'CourseAuthoring/pages-and-resources/app-settings-modal/AppSettingsModal';
 import messages from './messages';
 
-function NotesSettings({ intl, onClose }) {
+/**
+ * Settings widget for the "edxnotes" Course App.
+ * @param {{onClose: () => void}} props
+ */
+const NotesSettings = ({ onClose }) => {
+  const intl = useIntl();
   return (
     <AppSettingsModal
       appId="edxnotes"
@@ -17,11 +22,10 @@ function NotesSettings({ intl, onClose }) {
       onClose={onClose}
     />
   );
-}
+};
 
 NotesSettings.propTypes = {
-  intl: intlShape.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 
-export default injectIntl(NotesSettings);
+export default NotesSettings;

plugins/course-apps/edxnotes/package.json

@@ -0,0 +1,17 @@
+{
+    "name": "@openedx-plugins/course-app-edxnotes",
+    "version": "0.1.0",
+    "description": "edxnotes configuration for courses using it",
+    "peerDependencies": {
+        "@edx/frontend-app-authoring": "*",
+        "@edx/frontend-platform": "*",
+        "@openedx/paragon": "*",
+        "prop-types": "*",
+        "react": "*"
+    },
+    "peerDependenciesMeta": {
+        "@edx/frontend-app-authoring": {
+            "optional": true
+        }
+    }
+}

plugins/course-apps/learning_assistant/Settings.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink } from '@openedx/paragon';
+
+import AppSettingsModal from 'CourseAuthoring/pages-and-resources/app-settings-modal/AppSettingsModal';
+import { useModel } from 'CourseAuthoring/generic/model-store';
+
+import messages from './messages';
+
+const LearningAssistantSettings = ({ onClose }) => {
+  const appId = 'learning_assistant';
+  const appInfo = useModel('courseApps', appId);
+  const intl = useIntl();
+
+  // We need to render more than one link, so we use the bodyChildren prop.
+  const bodyChildren = (
+    appInfo?.documentationLinks?.learnMoreOpenaiDataPrivacy && appInfo?.documentationLinks?.learnMoreOpenai
+      ? (
+        <div className="d-flex flex-column">
+          {appInfo.documentationLinks?.learnMoreOpenaiDataPrivacy && (
+            <Hyperlink
+              className="text-primary-500"
+              destination={appInfo.documentationLinks.learnMoreOpenaiDataPrivacy}
+              target="_blank"
+              rel="noreferrer noopener"
+            >
+              {intl.formatMessage(messages.learningAssistantOpenAIDataPrivacyLink)}
+            </Hyperlink>
+          )}
+          {appInfo.documentationLinks?.learnMoreOpenai && (
+            <Hyperlink
+              className="text-primary-500"
+              destination={appInfo.documentationLinks.learnMoreOpenai}
+              target="_blank"
+              rel="noreferrer noopener"
+            >
+              {intl.formatMessage(messages.learningAssistantOpenAILink)}
+            </Hyperlink>
+          )}
+        </div>
+      )
+      : null
+  );
+
+  return (
+    <AppSettingsModal
+      appId={appId}
+      title={intl.formatMessage(messages.heading)}
+      enableAppHelp={intl.formatMessage(messages.enableLearningAssistantHelp)}
+      enableAppLabel={intl.formatMessage(messages.enableLearningAssistantLabel)}
+      bodyChildren={bodyChildren}
+      onClose={onClose}
+    />
+  );
+};
+
+LearningAssistantSettings.propTypes = {
+  onClose: PropTypes.func.isRequired,
+};
+
+export default LearningAssistantSettings;

plugins/course-apps/learning_assistant/Settings.test.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+
+import { RequestStatus } from 'CourseAuthoring/data/constants';
+import { initializeMocks, render } from 'CourseAuthoring/testUtils';
+import LearningAssistantSettings from './Settings';
+
+const onClose = () => { };
+
+describe('Learning Assistant Settings', () => {
+  it('renders', async () => {
+    const initialState = {
+      models: {
+        courseApps: {
+          learning_assistant:
+          {
+            id: 'learning_assistant',
+            enabled: true,
+            name: 'Learning Assistant',
+            description: 'Learning Assistant description',
+            allowedOperations: {
+              configure: false,
+              enable: true,
+            },
+            documentationLinks: {
+              learnMoreOpenaiDataPrivacy: 'www.example.com/learn-more-data-privacy',
+              learnMoreOpenai: 'www.example.com/learn-more',
+            },
+          },
+        },
+      },
+      pagesAndResources: {
+        loadingStatus: RequestStatus.SUCCESSFUL,
+      },
+    };
+
+    initializeMocks({ initialState });
+    render(<LearningAssistantSettings onClose={onClose} />);
+
+    const toggleDescription = 'Reinforce learning concepts by sharing text-based course content '
+    + 'with OpenAI (via API) to power an in-course Learning Assistant. Learners can leave feedback about the quality '
+    + 'of the AI-powered experience for use by edX to improve the performance of the tool.';
+
+    await waitFor(() => expect(screen.getByRole('heading', { name: 'Configure Learning Assistant' })).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByText(toggleDescription)).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByText('Learn more about how OpenAI handles data')).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByText('Learn more about OpenAI API data privacy')).toBeInTheDocument());
+  });
+});

plugins/course-apps/learning_assistant/messages.ts

@@ -0,0 +1,28 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  heading: {
+    id: 'course-authoring.pages-resources.learning-assistant.heading',
+    defaultMessage: 'Configure Learning Assistant',
+  },
+  enableLearningAssistantLabel: {
+    id: 'course-authoring.pages-resources.learning_assistant.enable-learning-assistant.label',
+    defaultMessage: 'Learning Assistant',
+  },
+  enableLearningAssistantHelp: {
+    id: 'course-authoring.pages-resources.learning_assistant.enable-learning-assistant.help',
+    defaultMessage: `Reinforce learning concepts by sharing text-based course content with OpenAI (via API) to power
+      an in-course Learning Assistant. Learners can leave feedback about the quality of the AI-powered experience for 
+      use by edX to improve the performance of the tool.`,
+  },
+  learningAssistantOpenAILink: {
+    id: 'course-authoring.pages-resources.learning_assistant.open-ai.link',
+    defaultMessage: 'Learn more about how OpenAI handles data',
+  },
+  learningAssistantOpenAIDataPrivacyLink: {
+    id: 'course-authoring.pages-resources.learning_assistant.open-ai.data-privacy.link',
+    defaultMessage: 'Learn more about OpenAI API data privacy',
+  },
+});
+
+export default messages;

plugins/course-apps/learning_assistant/package.json

@@ -0,0 +1,19 @@
+{
+    "name": "@openedx-plugins/course-app-learning_assistant",
+    "version": "0.1.0",
+    "description": "Learning Assistant configuration for courses using it",
+    "peerDependencies": {
+        "@edx/frontend-app-authoring": "*",
+        "@edx/frontend-platform": "*",
+        "@openedx/paragon": "*",
+        "prop-types": "*",
+        "react": "*",
+        "yup": "*"
+    },
+    "peerDependenciesMeta": {
+        "@edx/frontend-app-authoring": {
+            "optional": true
+        }
+    }
+}
+  

plugins/course-apps/live/BBBSettings.jsx

@@ -1,25 +1,26 @@
 import React, { useEffect, useState } from 'react';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Form, Hyperlink } from '@edx/paragon';
+import { getConfig, getExternalLinkUrl } from '@edx/frontend-platform';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { Form, Hyperlink } from '@openedx/paragon';
 import PropTypes from 'prop-types';
-import messages from './messages';
-import { providerNames, bbbPlanTypes } from './constants';
-import AppConfigFormDivider from '../discussions/app-config-form/apps/shared/AppConfigFormDivider';
-import LiveCommonFields from './LiveCommonFields';
-import { useModel } from '../../generic/model-store';
+import AppConfigFormDivider from 'CourseAuthoring/pages-and-resources/discussions/app-config-form/apps/shared/AppConfigFormDivider';
+import { useModel } from 'CourseAuthoring/generic/model-store';
 
-function BbbSettings({
-  intl,
+import { providerNames, bbbPlanTypes } from './constants';
+import LiveCommonFields from './LiveCommonFields';
+import messages from './messages';
+
+const BbbSettings = ({
   values,
   setFieldValue,
-}) {
+}) => {
+  const intl = useIntl();
   const [bbbPlan, setBbbPlan] = useState(values.tierType);
 
   useEffect(() => {
     setBbbPlan(values.tierType);
   }, [values.tierType]);
 
-  const appInfo = useModel('courseApps', 'live');
   const app = useModel('liveApps', 'big_blue_button');
   const isPiiDisabled = !values.piiSharingEnable;
   function getBbbPlanOptions() {
@@ -71,7 +72,7 @@ function BbbSettings({
       </Form.Group>
 
       <Hyperlink
-        destination={appInfo.documentationLinks.learnMoreConfiguration}
+        destination={getConfig().BBB_LEARN_MORE_URL}
         target="_blank"
         rel="noopener noreferrer"
         showLaunchIcon
@@ -88,22 +89,28 @@ function BbbSettings({
         ) : (
           <>
             {bbbPlan === bbbPlanTypes.commercial && <LiveCommonFields values={values} />}
-            {bbbPlan === bbbPlanTypes.free
-              && (
-              <p data-testid="free-plan-message">
+            {bbbPlan === bbbPlanTypes.free && (
+              <span data-testid="free-plan-message">
                 {intl.formatMessage(messages.freePlanMessage)}
-              </p>
+                <Hyperlink
+                  destination={getExternalLinkUrl('https://bigbluebutton.org/privacy-policy/')}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  showLaunchIcon
+                  className="text-gray-700 ml-1"
+                >
+                  {intl.formatMessage(messages.privacyPolicy)}
+                </Hyperlink>
+              </span>
             )}
           </>
         )}
       </>
     </>
-
   );
-}
+};
 
 BbbSettings.propTypes = {
-  intl: intlShape.isRequired,
   values: PropTypes.shape({
     consumerKey: PropTypes.string,
     consumerSecret: PropTypes.string,
@@ -118,4 +125,4 @@ BbbSettings.propTypes = {
   setFieldValue: PropTypes.func.isRequired,
 };
 
-export default injectIntl(BbbSettings);
+export default BbbSettings;

plugins/course-apps/live/BbbSettings.test.jsx

@@ -4,18 +4,16 @@ import {
   getByRole,
   getAllByRole,
   waitForElementToBeRemoved,
-} from '@testing-library/react';
+  initializeMocks,
+} from 'CourseAuthoring/testUtils';
 
-import { Switch } from 'react-router-dom';
-import { initializeMockApp, history } from '@edx/frontend-platform';
-import MockAdapter from 'axios-mock-adapter';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { AppProvider, PageRoute } from '@edx/frontend-platform/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import ReactDOM from 'react-dom';
 
 import userEvent from '@testing-library/user-event';
-import initializeStore from '../../store';
-import { executeThunk } from '../../utils';
+import { executeThunk } from 'CourseAuthoring/utils';
+import PagesAndResourcesProvider from 'CourseAuthoring/pages-and-resources/PagesAndResourcesProvider';
+
+import { CourseAuthoringProvider } from 'CourseAuthoring/CourseAuthoringContext';
 import LiveSettings from './Settings';
 import {
   generateLiveConfigurationApiResponse,
@@ -23,40 +21,44 @@ import {
   initialState,
   configurationProviders,
 } from './factories/mockApiResponses';
-
 import { fetchLiveConfiguration, fetchLiveProviders } from './data/thunks';
 import { providerConfigurationApiUrl, providersApiUrl } from './data/api';
 import messages from './messages';
-import PagesAndResourcesProvider from '../PagesAndResourcesProvider';
 
 let axiosMock;
 let container;
 let store;
 const liveSettingsUrl = `/course/${courseId}/pages-and-resources/live/settings`;
 
+// Modal creates a portal. Overriding ReactDOM.createPortal allows portals to be tested in jest.
+ReactDOM.createPortal = jest.fn(node => node);
+
 const renderComponent = () => {
   const wrapper = render(
-    <IntlProvider locale="en">
-      <AppProvider store={store}>
-        <PagesAndResourcesProvider courseId={courseId}>
-          <Switch>
-            <PageRoute path={liveSettingsUrl}>
-              <LiveSettings onClose={() => {}} />
-            </PageRoute>
-          </Switch>
-        </PagesAndResourcesProvider>
-      </AppProvider>
-    </IntlProvider>,
+    <CourseAuthoringProvider courseId={courseId}>
+      <PagesAndResourcesProvider courseId={courseId}>
+        <LiveSettings onClose={() => {}} />
+      </PagesAndResourcesProvider>
+    </CourseAuthoringProvider>,
+    {
+      path: liveSettingsUrl,
+      routerProps: {
+        initialEntries: [liveSettingsUrl],
+      },
+      params: {
+        courseId,
+      },
+    },
   );
   container = wrapper.container;
 };
 
 const mockStore = async ({
- usernameSharing = false,
- emailSharing = false,
- enabled = true,
- piiSharingAllowed = true,
- isFreeTier = false,
+  usernameSharing = false,
+  emailSharing = false,
+  enabled = true,
+  piiSharingAllowed = true,
+  isFreeTier = false,
 }) => {
   const fetchProviderConfigUrl = `${providersApiUrl}/${courseId}/`;
   const fetchLiveConfigUrl = `${providerConfigurationApiUrl}/${courseId}/`;
@@ -70,17 +72,9 @@ const mockStore = async ({
 
 describe('BBB Settings', () => {
   beforeEach(async () => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: false,
-        roles: [],
-      },
-    });
-    store = initializeStore(initialState);
-    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-    history.push(liveSettingsUrl);
+    const mocks = initializeMocks({ initialState });
+    store = mocks.reduxStore;
+    axiosMock = mocks.axiosMock;
   });
 
   test('Plan dropdown to be visible and enabled in UI', async () => {
@@ -103,7 +97,8 @@ describe('BBB Settings', () => {
     expect(getAllByRole(dropDown, 'option').length).toBe(noOfOptions);
   });
 
-  test('Connect to support and PII sharing message is visible and plans selection is disabled, When pii sharing is disabled, ',
+  test(
+    'Connect to support and PII sharing message is visible and plans selection is disabled, When pii sharing is disabled, ',
     async () => {
       await mockStore({ piiSharingAllowed: false });
       renderComponent();
@@ -116,17 +111,19 @@ describe('BBB Settings', () => {
       );
       expect(helpRequestPiiText).toHaveTextContent(messages.piiSharingEnableHelpTextBbb.defaultMessage);
       expect(container.querySelector('select[name="tierType"]')).toBeDisabled();
-    });
+    },
+  );
 
   test('free plans message is visible when free plan is selected', async () => {
+    const user = userEvent.setup();
     await mockStore({ emailSharing: true, isFreeTier: true });
     renderComponent();
     const spinner = getByRole(container, 'status');
     await waitForElementToBeRemoved(spinner);
     const dropDown = container.querySelector('select[name="tierType"]');
-    userEvent.selectOptions(
+    await user.selectOptions(
       dropDown,
-     getByRole(dropDown, 'option', { name: 'Free' }),
+      getByRole(dropDown, 'option', { name: 'Free' }),
     );
     expect(queryByTestId(container, 'free-plan-message')).toBeInTheDocument();
     expect(queryByTestId(container, 'free-plan-message')).toHaveTextContent(messages.freePlanMessage.defaultMessage);

plugins/course-apps/live/LiveCommonFields.jsx

@@ -1,13 +1,14 @@
 import React from 'react';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
-import messages from './messages';
-import FormikControl from '../../generic/FormikControl';
+import FormikControl from 'CourseAuthoring/generic/FormikControl';
 
-function LiveCommonFields({
- intl,
- values,
-}) {
+import messages from './messages';
+
+const LiveCommonFields = ({
+  values,
+}) => {
+  const intl = useIntl();
   return (
     <>
       <p className="pb-2">{intl.formatMessage(messages.formInstructions)}</p>
@@ -34,10 +35,9 @@ function LiveCommonFields({
       />
     </>
   );
-}
+};
 
 LiveCommonFields.propTypes = {
-  intl: intlShape.isRequired,
   values: PropTypes.shape({
     consumerKey: PropTypes.string,
     consumerSecret: PropTypes.string,
@@ -46,4 +46,4 @@ LiveCommonFields.propTypes = {
   }).isRequired,
 };
 
-export default injectIntl(LiveCommonFields);
+export default LiveCommonFields;

plugins/course-apps/live/Settings.jsx

@@ -0,0 +1,139 @@
+// oxlint-disable unicorn/no-thenable
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { camelCase } from 'lodash';
+import { Icon } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import PropTypes from 'prop-types';
+import * as Yup from 'yup';
+import { useNavigate } from 'react-router-dom';
+import SelectableBox from 'CourseAuthoring/editors/sharedComponents/SelectableBox';
+import AppSettingsModal from 'CourseAuthoring/pages-and-resources/app-settings-modal/AppSettingsModal';
+import { useModel } from 'CourseAuthoring/generic/model-store';
+import Loading from 'CourseAuthoring/generic/Loading';
+import { RequestStatus } from 'CourseAuthoring/data/constants';
+import { useCourseAuthoringContext } from 'CourseAuthoring/CourseAuthoringContext';
+
+import { fetchLiveData, saveLiveConfiguration, saveLiveConfigurationAsDraft } from './data/thunks';
+import { selectApp } from './data/slice';
+import { iconsSrc, bbbPlanTypes } from './constants';
+import messages from './messages';
+import ZoomSettings from './ZoomSettings';
+import BBBSettings from './BBBSettings';
+
+const LiveSettings = ({
+  onClose,
+}) => {
+  const intl = useIntl();
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const { courseId } = useCourseAuthoringContext();
+  const availableProviders = useSelector((state) => state.live.appIds);
+  const {
+    piiSharingAllowed, selectedAppId, enabled, status,
+  } = useSelector(state => state.live);
+
+  const appConfig = useModel('liveAppConfigs', selectedAppId);
+  const app = useModel('liveApps', selectedAppId);
+
+  const liveConfiguration = {
+    enabled: enabled || false,
+    consumerKey: appConfig?.consumerKey || '',
+    consumerSecret: appConfig?.consumerSecret || '',
+    launchUrl: appConfig?.launchUrl || '',
+    launchEmail: appConfig?.launchEmail || '',
+    provider: selectedAppId || 'zoom',
+    piiSharingEnable: piiSharingAllowed || false,
+    piiSharingUsername: app?.piiSharing?.username || false,
+    piiSharingEmail: app?.piiSharing?.email || false,
+    tierType: appConfig?.tierType || '',
+  };
+
+  const validationSchema = {
+    enabled: Yup.boolean(),
+    consumerKey: Yup.string().when(['provider', 'tierType'], {
+      is: (provider, tier) => provider === 'zoom' || (provider === 'big_blue_button' && tier === bbbPlanTypes.commercial),
+      then: Yup.string().required(intl.formatMessage(messages.consumerKeyRequired)),
+    }),
+    consumerSecret: Yup.string().when(['provider', 'tierType'], {
+      is: (provider, tier) => provider === 'zoom' || (provider === 'big_blue_button' && tier === bbbPlanTypes.commercial),
+      then: Yup.string().notRequired(intl.formatMessage(messages.consumerSecretRequired)),
+    }),
+    launchUrl: Yup.string().when(['provider', 'tierType'], {
+      is: (provider, tier) => provider === 'zoom' || (provider === 'big_blue_button' && tier === bbbPlanTypes.commercial),
+      then: Yup.string().required(intl.formatMessage(messages.launchUrlRequired)),
+    }),
+    launchEmail: Yup.string(),
+  };
+
+  const handleProviderChange = (providerId, setFieldValue, values) => {
+    dispatch(saveLiveConfigurationAsDraft(values));
+    dispatch(selectApp({ appId: providerId }));
+    setFieldValue('provider', providerId);
+  };
+
+  const handleSettingsSave = async (values) => {
+    // oxlint-disable-next-line @typescript-eslint/await-thenable - this dispatch() IS returning a promise.
+    await dispatch(saveLiveConfiguration(courseId, values, navigate));
+  };
+
+  useEffect(() => {
+    dispatch(fetchLiveData(courseId));
+  }, [courseId]);
+
+  return (
+    <AppSettingsModal
+      appId="live"
+      title={intl.formatMessage(messages.heading)}
+      enableAppHelp={intl.formatMessage(messages.enableLiveHelp)}
+      enableAppLabel={intl.formatMessage(messages.enableLiveLabel)}
+      learnMoreText={intl.formatMessage(messages.enableLiveLink)}
+      onClose={onClose}
+      initialValues={liveConfiguration}
+      validationSchema={validationSchema}
+      onSettingsSave={handleSettingsSave}
+      configureBeforeEnable
+      enableReinitialize
+    >
+      {({ values, setFieldValue }) => (
+        (status === RequestStatus.IN_PROGRESS) ? (
+          <Loading />
+        ) : (
+          <>
+            <h4 className="my-3">{intl.formatMessage(messages.selectProvider)}</h4>
+            <SelectableBox.Set
+              type="checkbox"
+              value={values.provider}
+              onChange={(event) => handleProviderChange(event.target.value, setFieldValue, values)}
+              name="provider"
+              columns={3}
+              className="mb-3"
+            >
+              {availableProviders.map((provider) => (
+                <SelectableBox value={provider} type="checkbox" key={provider}>
+                  <div className="d-flex flex-column align-items-center">
+                    <Icon src={iconsSrc[`${camelCase(provider)}`]} alt={provider} />
+                    <span>{intl.formatMessage(messages[`appName-${camelCase(provider)}`])}</span>
+                  </div>
+                </SelectableBox>
+              ))}
+            </SelectableBox.Set>
+            {values.provider === 'zoom' ? <ZoomSettings values={values} />
+              : (
+                <BBBSettings
+                  values={values}
+                  setFieldValue={setFieldValue}
+                />
+              )}
+          </>
+        )
+      )}
+    </AppSettingsModal>
+  );
+};
+
+LiveSettings.propTypes = {
+  onClose: PropTypes.func.isRequired,
+};
+
+export default LiveSettings;

plugins/course-apps/live/Settings.test.jsx

@@ -8,17 +8,14 @@ import {
   queryByText,
   getByRole,
   waitForElementToBeRemoved,
-} from '@testing-library/react';
+  initializeMocks,
+} from 'CourseAuthoring/testUtils';
 
-import { Switch } from 'react-router-dom';
-import { initializeMockApp, history } from '@edx/frontend-platform';
-import MockAdapter from 'axios-mock-adapter';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { AppProvider, PageRoute } from '@edx/frontend-platform/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import ReactDOM from 'react-dom';
+import { executeThunk } from 'CourseAuthoring/utils';
+import PagesAndResourcesProvider from 'CourseAuthoring/pages-and-resources/PagesAndResourcesProvider';
 
-import initializeStore from '../../store';
-import { executeThunk } from '../../utils';
+import { CourseAuthoringProvider } from 'CourseAuthoring/CourseAuthoringContext';
 import LiveSettings from './Settings';
 import {
   generateLiveConfigurationApiResponse,
@@ -30,35 +27,40 @@ import {
 import { fetchLiveConfiguration, fetchLiveProviders } from './data/thunks';
 import { providerConfigurationApiUrl, providersApiUrl } from './data/api';
 import messages from './messages';
-import PagesAndResourcesProvider from '../PagesAndResourcesProvider';
 
 let axiosMock;
 let container;
 let store;
 const liveSettingsUrl = `/course/${courseId}/pages-and-resources/live/settings`;
 
+// Modal creates a portal. Overriding ReactDOM.createPortal allows portals to be tested in jest.
+ReactDOM.createPortal = jest.fn(node => node);
+
 const renderComponent = () => {
   const wrapper = render(
-    <IntlProvider locale="en">
-      <AppProvider store={store}>
-        <PagesAndResourcesProvider courseId={courseId}>
-          <Switch>
-            <PageRoute path={liveSettingsUrl}>
-              <LiveSettings onClose={() => {}} />
-            </PageRoute>
-          </Switch>
-        </PagesAndResourcesProvider>
-      </AppProvider>
-    </IntlProvider>,
+    <PagesAndResourcesProvider courseId={courseId}>
+      <CourseAuthoringProvider>
+        <LiveSettings onClose={() => {}} />
+      </CourseAuthoringProvider>
+    </PagesAndResourcesProvider>,
+    {
+      path: liveSettingsUrl,
+      routerProps: {
+        initialEntries: [liveSettingsUrl],
+      },
+      params: {
+        courseId,
+      },
+    },
   );
   container = wrapper.container;
 };
 
 const mockStore = async ({
- usernameSharing = false,
- emailSharing = false,
- enabled = true,
- piiSharingAllowed = true,
+  usernameSharing = false,
+  emailSharing = false,
+  enabled = true,
+  piiSharingAllowed = true,
 }) => {
   const fetchProviderConfigUrl = `${providersApiUrl}/${courseId}/`;
   const fetchLiveConfigUrl = `${providerConfigurationApiUrl}/${courseId}/`;
@@ -72,17 +74,11 @@ const mockStore = async ({
 
 describe('LiveSettings', () => {
   beforeEach(async () => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: false,
-        roles: [],
-      },
+    const mocks = initializeMocks({
+      initialState,
     });
-    store = initializeStore(initialState);
-    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-    history.push(liveSettingsUrl);
+    store = mocks.reduxStore;
+    axiosMock = mocks.axiosMock;
   });
 
   test('Live Configuration modal is visible', async () => {

plugins/course-apps/live/ZoomSettings.jsx

@@ -1,29 +1,31 @@
 import React from 'react';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
+import FormikControl from 'CourseAuthoring/generic/FormikControl';
+
 import messages from './messages';
 import { providerNames } from './constants';
 import LiveCommonFields from './LiveCommonFields';
-import FormikControl from '../../generic/FormikControl';
 
-function ZoomsSettings({
- intl,
- values,
-}) {
+const ZoomSettings = ({
+  values,
+}) => {
+  const intl = useIntl();
   return (
+    // eslint-disable-next-line react/jsx-no-useless-fragment
     <>
-      {(!values.piiSharingEnable && (values.piiSharingEmail || values.piiSharingUsername)) ? (
+      {!values.piiSharingEnable ? (
         <p data-testid="request-pii-sharing">
           {intl.formatMessage(messages.requestPiiSharingEnable, { provider: providerNames[values.provider] })}
         </p>
       ) : (
         <>
           {(values.piiSharingEmail || values.piiSharingUsername)
-          && (
-            <p data-testid="helper-text">
-              {intl.formatMessage(messages.providerHelperText, { providerName: providerNames[values.provider] })}
-            </p>
-          )}
+            && (
+              <p data-testid="helper-text">
+                {intl.formatMessage(messages.providerHelperText, { providerName: providerNames[values.provider] })}
+              </p>
+            )}
           <LiveCommonFields values={values} />
           <FormikControl
             name="launchEmail"
@@ -35,10 +37,9 @@ function ZoomsSettings({
       )}
     </>
   );
-}
+};
 
-ZoomsSettings.propTypes = {
-  intl: intlShape.isRequired,
+ZoomSettings.propTypes = {
   values: PropTypes.shape({
     consumerKey: PropTypes.string,
     consumerSecret: PropTypes.string,
@@ -51,4 +52,4 @@ ZoomsSettings.propTypes = {
   }).isRequired,
 };
 
-export default injectIntl(ZoomsSettings);
+export default ZoomSettings;

plugins/course-apps/live/ZoomSettings.test.jsx

@@ -3,17 +3,14 @@ import {
   queryByTestId,
   getByRole,
   waitForElementToBeRemoved,
-} from '@testing-library/react';
+  initializeMocks,
+} from 'CourseAuthoring/testUtils';
 
-import { Switch } from 'react-router-dom';
-import { initializeMockApp, history } from '@edx/frontend-platform';
-import MockAdapter from 'axios-mock-adapter';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { AppProvider, PageRoute } from '@edx/frontend-platform/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import ReactDOM from 'react-dom';
 
-import initializeStore from '../../store';
-import { executeThunk } from '../../utils';
+import { executeThunk } from 'CourseAuthoring/utils';
+import PagesAndResourcesProvider from 'CourseAuthoring/pages-and-resources/PagesAndResourcesProvider';
+import { CourseAuthoringProvider } from 'CourseAuthoring/CourseAuthoringContext';
 import LiveSettings from './Settings';
 import {
   generateLiveConfigurationApiResponse,
@@ -25,35 +22,40 @@ import {
 import { fetchLiveConfiguration, fetchLiveProviders } from './data/thunks';
 import { providerConfigurationApiUrl, providersApiUrl } from './data/api';
 import messages from './messages';
-import PagesAndResourcesProvider from '../PagesAndResourcesProvider';
 
 let axiosMock;
 let container;
 let store;
 const liveSettingsUrl = `/course/${courseId}/pages-and-resources/live/settings`;
 
+// Modal creates a portal. Overriding ReactDOM.createPortal allows portals to be tested in jest.
+ReactDOM.createPortal = jest.fn(node => node);
+
 const renderComponent = () => {
   const wrapper = render(
-    <IntlProvider locale="en">
-      <AppProvider store={store}>
-        <PagesAndResourcesProvider courseId={courseId}>
-          <Switch>
-            <PageRoute path={liveSettingsUrl}>
-              <LiveSettings onClose={() => {}} />
-            </PageRoute>
-          </Switch>
-        </PagesAndResourcesProvider>
-      </AppProvider>
-    </IntlProvider>,
+    <CourseAuthoringProvider courseId={courseId}>
+      <PagesAndResourcesProvider courseId={courseId}>
+        <LiveSettings onClose={() => {}} />
+      </PagesAndResourcesProvider>
+    </CourseAuthoringProvider>,
+    {
+      path: liveSettingsUrl,
+      routerProps: {
+        initialEntries: [liveSettingsUrl],
+      },
+      params: {
+        courseId,
+      },
+    },
   );
   container = wrapper.container;
 };
 
 const mockStore = async ({
- usernameSharing = false,
- emailSharing = false,
- enabled = true,
- piiSharingAllowed = true,
+  usernameSharing = false,
+  emailSharing = false,
+  enabled = true,
+  piiSharingAllowed = true,
 }) => {
   const fetchProviderConfigUrl = `${providersApiUrl}/${courseId}/`;
   const fetchLiveConfigUrl = `${providerConfigurationApiUrl}/${courseId}/`;
@@ -67,21 +69,13 @@ const mockStore = async ({
 
 describe('Zoom Settings', () => {
   beforeEach(async () => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: false,
-        roles: [],
-      },
-    });
-    store = initializeStore(initialState);
-    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-    history.push(liveSettingsUrl);
+    const mocks = initializeMocks({ initialState });
+    store = mocks.reduxStore;
+    axiosMock = mocks.axiosMock;
   });
 
-  test('LTI fields are visible when pii sharing is enabled and email or username sharing required', async () => {
-    await mockStore({ emailSharing: true });
+  test('LTI fields are visible when pii sharing is enabled', async () => {
+    await mockStore({ piiSharingAllowed: true });
     renderComponent();
 
     const spinner = getByRole(container, 'status');
@@ -103,9 +97,9 @@ describe('Zoom Settings', () => {
   });
 
   test(
-    'Only connect to support message is visible when pii sharing is disabled and email or username sharing is required',
+    'Only connect to support message is visible when pii sharing is disabled',
     async () => {
-      await mockStore({ emailSharing: true, piiSharingAllowed: false });
+      await mockStore({ piiSharingAllowed: false });
       renderComponent();
 
       const spinner = getByRole(container, 'status');
@@ -129,7 +123,7 @@ describe('Zoom Settings', () => {
 
   test('Provider Configuration should be displayed correctly', async () => {
     const apiDefaultResponse = generateLiveConfigurationApiResponse(true, true);
-    await mockStore({ emailSharing: false, piiSharingAllowed: false });
+    await mockStore({ piiSharingAllowed: true });
     renderComponent();
 
     const spinner = getByRole(container, 'status');

plugins/course-apps/live/constants.js

@@ -1,6 +1,6 @@
 import {
- GoogleMeet, MicrosoftTeams, Zoom, Bbb,
-} from '@edx/paragon/icons';
+  GoogleMeet, MicrosoftTeams, Zoom, Bbb,
+} from '@openedx/paragon/icons';
 
 export const iconsSrc = {
   googleMeet: GoogleMeet,

plugins/course-apps/live/data/api.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 import { ensureConfig, getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { bbbPlanTypes } from '../constants';

plugins/course-apps/live/data/slice.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-param-reassign */
 import { createSlice } from '@reduxjs/toolkit';
-import { RequestStatus } from '../../../data/constants';
+import { RequestStatus } from 'CourseAuthoring/data/constants';
 
 const slice = createSlice({
   name: 'live',

plugins/course-apps/live/data/thunks.js

@@ -1,14 +1,14 @@
-import { history } from '@edx/frontend-platform';
-import { addModel, addModels, updateModel } from '../../../generic/model-store';
+import { addModel, addModels, updateModel } from 'CourseAuthoring/generic/model-store';
+import { RequestStatus } from 'CourseAuthoring/data/constants';
+
 import {
- getLiveConfiguration,
- getLiveProviders,
- postLiveConfiguration,
- normalizeSettings,
- deNormalizeSettings,
+  getLiveConfiguration,
+  getLiveProviders,
+  postLiveConfiguration,
+  normalizeSettings,
+  deNormalizeSettings,
 } from './api';
 import { loadApps, updateStatus, updateSaveStatus } from './slice';
-import { RequestStatus } from '../../../data/constants';
 
 function updateLiveSettingsState({
   appConfig,
@@ -56,7 +56,7 @@ export function fetchLiveData(courseId) {
   };
 }
 
-export function saveLiveConfiguration(courseId, config) {
+export function saveLiveConfiguration(courseId, config, navigate) {
   return async (dispatch) => {
     dispatch(updateSaveStatus({ status: RequestStatus.IN_PROGRESS }));
     try {
@@ -64,7 +64,7 @@ export function saveLiveConfiguration(courseId, config) {
       dispatch(updateLiveSettingsState(apps));
 
       dispatch(updateSaveStatus({ status: RequestStatus.SUCCESSFUL }));
-      history.push(`/course/${courseId}/pages-and-resources/`);
+      navigate(`/course/${courseId}/pages-and-resources/`);
     } catch (error) {
       if (error.response && error.response.status === 403) {
         dispatch(updateSaveStatus({ status: RequestStatus.DENIED }));

plugins/course-apps/live/factories/mockApiResponses.jsx

@@ -36,11 +36,11 @@ export const initialState = {
 export const configurationProviders = (
   emailSharing,
   usernameSharing,
-  activeProvider = 'zoom',
+  activeProvider,
   hasFreeTier,
 ) => ({
   providers: {
-    active: activeProvider,
+    active: activeProvider || 'zoom',
     available: {
       zoom: {
         features: [],
@@ -65,7 +65,7 @@ export const generateLiveConfigurationApiResponse = (
   enabled,
   piiSharingAllowed,
   providerType = 'zoom',
-  isFreeTier,
+  isFreeTier = undefined,
 ) => ({
   course_key: courseId,
   enabled,

plugins/course-apps/live/messages.ts

@@ -160,9 +160,14 @@ const messages = defineMessages({
 
   freePlanMessage: {
     id: 'authoring.live.freePlanMessage',
-    defaultMessage: 'The free plan is pre-configured, and no additional configurations are required.',
+    defaultMessage: 'The free plan is pre-configured, and no additional configurations are required. By selecting the free plan, you are agreeing to Blindside Networks',
     description: 'Tells user that free plans requires no additional configurations',
   },
+  privacyPolicy: {
+    id: 'authoring.live.privacyPolicy',
+    defaultMessage: 'Privacy Policy.',
+    description: 'The text of privacy policy hyperlink for free plan',
+  },
 });
 
 export default messages;

plugins/course-apps/live/package.json

@@ -0,0 +1,22 @@
+{
+    "name": "@openedx-plugins/course-app-live",
+    "version": "0.1.0",
+    "description": "Live course configuration for courses using it",
+    "peerDependencies": {
+        "@edx/frontend-app-authoring": "*",
+        "@edx/frontend-platform": "*",
+        "@openedx/paragon": "*",
+        "@reduxjs/toolkit": "*",
+        "lodash": "*",
+        "prop-types": "*",
+        "react": "*",
+        "react-redux": "*",
+        "react-router-dom": "*",
+        "yup": "*"
+    },
+    "peerDependenciesMeta": {
+        "@edx/frontend-app-authoring": {
+            "optional": true
+        }
+    }
+}

plugins/course-apps/ora_settings/Settings.jsx

@@ -0,0 +1,177 @@
+import { useEffect, useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { useDispatch, useSelector } from 'react-redux';
+
+import {
+  ActionRow, Alert, Badge, Form, Hyperlink, ModalDialog, StatefulButton,
+} from '@openedx/paragon';
+import { Info } from '@openedx/paragon/icons';
+import { updateModel, useModel } from 'CourseAuthoring/generic/model-store';
+
+import { RequestStatus } from 'CourseAuthoring/data/constants';
+import FormSwitchGroup from 'CourseAuthoring/generic/FormSwitchGroup';
+import Loading from 'CourseAuthoring/generic/Loading';
+import PermissionDeniedAlert from 'CourseAuthoring/generic/PermissionDeniedAlert';
+import ConnectionErrorAlert from 'CourseAuthoring/generic/ConnectionErrorAlert';
+import { useAppSetting, useIsMobile } from 'CourseAuthoring/utils';
+import { getLoadingStatus, getSavingStatus } from 'CourseAuthoring/pages-and-resources/data/selectors';
+import { updateSavingStatus } from 'CourseAuthoring/pages-and-resources/data/slice';
+
+import messages from './messages';
+
+const ORASettings = ({ onClose }) => {
+  const dispatch = useDispatch();
+  const { formatMessage } = useIntl();
+  const alertRef = useRef(null);
+  const updateSettingsRequestStatus = useSelector(getSavingStatus);
+  const loadingStatus = useSelector(getLoadingStatus);
+  const isMobile = useIsMobile();
+  const modalVariant = isMobile ? 'dark' : 'default';
+  const appId = 'ora_settings';
+  const appInfo = useModel('courseApps', appId);
+
+  const [enableFlexiblePeerGrade, saveSetting] = useAppSetting(
+    'forceOnFlexiblePeerOpenassessments',
+  );
+  const initialFormValues = { enableFlexiblePeerGrade };
+
+  const [formValues, setFormValues] = useState(initialFormValues);
+  const [saveError, setSaveError] = useState(false);
+
+  const submitButtonState = updateSettingsRequestStatus === RequestStatus.IN_PROGRESS ? 'pending' : 'default';
+  const handleSettingsSave = (values) => saveSetting(values.enableFlexiblePeerGrade);
+
+  const handleSubmit = async (event) => {
+    let success = true;
+    event.preventDefault();
+
+    success = success && await handleSettingsSave(formValues);
+    setSaveError(!success);
+    if ((initialFormValues.enableFlexiblePeerGrade !== formValues.enableFlexiblePeerGrade) && success) {
+      // oxlint-disable-next-line @typescript-eslint/await-thenable - this dispatch() IS returning a promise.
+      success = await dispatch(updateModel({
+        modelType: 'courseApps',
+        model: {
+          id: appId, enabled: formValues.enableFlexiblePeerGrade,
+        },
+      }));
+    }
+    !success && alertRef?.current.scrollIntoView(); // eslint-disable-line @typescript-eslint/no-unused-expressions
+  };
+
+  const handleChange = (e) => {
+    setFormValues({ enableFlexiblePeerGrade: e.target.checked });
+  };
+
+  useEffect(() => {
+    if (updateSettingsRequestStatus === RequestStatus.SUCCESSFUL) {
+      dispatch(updateSavingStatus({ status: '' }));
+      onClose();
+    }
+  }, [updateSettingsRequestStatus]);
+
+  const renderBody = () => {
+    switch (loadingStatus) {
+      case RequestStatus.SUCCESSFUL:
+        return (
+          <>
+            {saveError && (
+              <Alert variant="danger" icon={Info} ref={alertRef}>
+                <Alert.Heading>
+                  {formatMessage(messages.errorSavingTitle)}
+                </Alert.Heading>
+                {formatMessage(messages.errorSavingMessage)}
+              </Alert>
+            )}
+            <FormSwitchGroup
+              id="enable-flexible-peer-grade"
+              name="enableFlexiblePeerGrade"
+              label={(
+                <div className="d-flex align-items-center">
+                  {formatMessage(messages.enableFlexPeerGradeLabel)}
+                  {formValues.enableFlexiblePeerGrade && (
+                    <Badge className="ml-2" variant="success" data-testid="enable-badge">
+                      {formatMessage(messages.enabledBadgeLabel)}
+                    </Badge>
+                  )}
+                </div>
+              )}
+              helpText={(
+                <div>
+                  <p>{formatMessage(messages.enableFlexPeerGradeHelp)}</p>
+                  <span className="py-3">
+                    <Hyperlink
+                      className="text-primary-500 small"
+                      destination={appInfo.documentationLinks?.learnMoreConfiguration}
+                      target="_blank"
+                      rel="noreferrer noopener"
+                    >
+                      {formatMessage(messages.ORASettingsHelpLink)}
+                    </Hyperlink>
+                  </span>
+                </div>
+              )}
+              onChange={handleChange}
+              checked={formValues.enableFlexiblePeerGrade}
+            />
+          </>
+        );
+      case RequestStatus.DENIED:
+        return <PermissionDeniedAlert />;
+      case RequestStatus.FAILED:
+        return <ConnectionErrorAlert />;
+      default:
+        return <Loading />;
+    }
+  };
+
+  return (
+    <ModalDialog
+      title={formatMessage(messages.heading)}
+      isOpen
+      onClose={onClose}
+      size="lg"
+      variant={modalVariant}
+      hasCloseButton={isMobile}
+      isFullscreenScroll
+      isFullscreenOnMobile
+    >
+      <Form onSubmit={handleSubmit} data-testid="proctoringForm">
+        <ModalDialog.Header>
+          <ModalDialog.Title>
+            {formatMessage(messages.heading)}
+          </ModalDialog.Title>
+        </ModalDialog.Header>
+        <ModalDialog.Body>
+          {renderBody()}
+        </ModalDialog.Body>
+        <ModalDialog.Footer className="p-4">
+          <ActionRow>
+            <ModalDialog.CloseButton variant="tertiary">
+              {formatMessage(messages.cancelLabel)}
+            </ModalDialog.CloseButton>
+            <StatefulButton
+              labels={{
+                default: formatMessage(messages.saveLabel),
+                pending: formatMessage(messages.pendingSaveLabel),
+              }}
+              description="Form save button"
+              data-testid="submissionButton"
+              disabled={submitButtonState === RequestStatus.IN_PROGRESS}
+              state={submitButtonState}
+              type="submit"
+            />
+          </ActionRow>
+        </ModalDialog.Footer>
+      </Form>
+    </ModalDialog>
+  );
+};
+
+ORASettings.propTypes = {
+  onClose: PropTypes.func.isRequired,
+};
+
+export default ORASettings;

plugins/course-apps/ora_settings/Settings.test.jsx

@@ -0,0 +1,155 @@
+import {
+  render,
+  screen,
+  waitFor,
+  within,
+} from '@testing-library/react';
+import ReactDOM from 'react-dom';
+import { Routes, Route, MemoryRouter } from 'react-router-dom';
+import { initializeMockApp } from '@edx/frontend-platform';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { AppProvider, PageWrap } from '@edx/frontend-platform/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import initializeStore from 'CourseAuthoring/store';
+import { executeThunk } from 'CourseAuthoring/utils';
+import PagesAndResourcesProvider from 'CourseAuthoring/pages-and-resources/PagesAndResourcesProvider';
+import { getCourseAppsApiUrl, getCourseAdvancedSettingsApiUrl } from 'CourseAuthoring/pages-and-resources/data/api';
+import { fetchCourseApps, fetchCourseAppSettings } from 'CourseAuthoring/pages-and-resources/data/thunks';
+import ORASettings from './Settings';
+import messages from './messages';
+import {
+  courseId,
+  inititalState,
+} from './factories/mockData';
+
+let axiosMock;
+let store;
+const oraSettingsUrl = `/course/${courseId}/pages-and-resources/live/settings`;
+
+// Modal creates a portal. Overriding ReactDOM.createPortal allows portals to be tested in jest.
+ReactDOM.createPortal = jest.fn(node => node);
+
+const renderComponent = () => (
+  render(
+    <IntlProvider locale="en">
+      <AppProvider store={store} wrapWithRouter={false}>
+        <PagesAndResourcesProvider courseId={courseId}>
+          <MemoryRouter initialEntries={[oraSettingsUrl]}>
+            <Routes>
+              <Route path={oraSettingsUrl} element={<PageWrap><ORASettings onClose={jest.fn()} /></PageWrap>} />
+            </Routes>
+          </MemoryRouter>
+        </PagesAndResourcesProvider>
+      </AppProvider>
+    </IntlProvider>,
+  )
+);
+
+const mockStore = async ({
+  apiStatus,
+  enabled,
+}) => {
+  const settings = ['forceOnFlexiblePeerOpenassessments'];
+  const fetchCourseAppsUrl = `${getCourseAppsApiUrl()}/${courseId}`;
+  const fetchAdvancedSettingsUrl = `${getCourseAdvancedSettingsApiUrl()}/${courseId}`;
+
+  axiosMock.onGet(fetchCourseAppsUrl).reply(
+    200,
+    [{
+      allowed_operations: { enable: false, configure: true },
+      description: 'setting',
+      documentation_links: { learnMoreConfiguration: '' },
+      enabled,
+      id: 'ora_settings',
+      name: 'Flexible Peer Grading for ORAs',
+    }],
+  );
+  axiosMock.onGet(fetchAdvancedSettingsUrl).reply(
+    apiStatus,
+    { force_on_flexible_peer_openassessments: { value: enabled } },
+  );
+
+  await executeThunk(fetchCourseApps(courseId), store.dispatch);
+  await executeThunk(fetchCourseAppSettings(courseId, settings), store.dispatch);
+};
+
+describe('ORASettings', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: false,
+        roles: [],
+      },
+    });
+    store = initializeStore(inititalState);
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+
+  it('Flexible peer grading configuration modal is visible', async () => {
+    renderComponent();
+    expect(screen.getByRole('dialog')).toBeVisible();
+  });
+
+  it('Displays "Configure Flexible Peer Grading" heading', async () => {
+    renderComponent();
+    const headingElement = screen.getByText(messages.heading.defaultMessage);
+
+    expect(headingElement).toBeVisible();
+  });
+
+  it('Displays loading component', () => {
+    renderComponent();
+    const loadingElement = screen.getByRole('status');
+
+    expect(within(loadingElement).getByText('Loading...')).toBeInTheDocument();
+  });
+
+  it('Displays Connection Error Alert', async () => {
+    await mockStore({ apiStatus: 404, enabled: true });
+    renderComponent();
+    const errorAlert = screen.getByRole('alert');
+
+    expect(within(errorAlert).getByText('We encountered a technical error when loading this page.', { exact: false })).toBeVisible();
+  });
+
+  it('Displays Permissions Error Alert', async () => {
+    await mockStore({ apiStatus: 403, enabled: true });
+    renderComponent();
+    const errorAlert = screen.getByRole('alert');
+
+    expect(within(errorAlert).getByText('You are not authorized to view this page', { exact: false })).toBeVisible();
+  });
+
+  it('Displays title, helper text and badge when flexible peer grading button is enabled', async () => {
+    await mockStore({ apiStatus: 200, enabled: true });
+    renderComponent();
+
+    const checkbox = screen.getByRole('checkbox', { name: /Flex Peer Grading/ });
+    expect(checkbox).toBeChecked();
+
+    await waitFor(() => {
+      const label = screen.getByText(messages.enableFlexPeerGradeLabel.defaultMessage);
+      const enableBadge = screen.getByTestId('enable-badge');
+
+      expect(label).toBeVisible();
+
+      expect(enableBadge).toHaveTextContent('Enabled');
+    });
+  });
+
+  it('Displays title, helper text and hides badge when flexible peer grading button is disabled', async () => {
+    renderComponent();
+    await mockStore({ apiStatus: 200, enabled: false });
+
+    const label = await screen.findByText(messages.enableFlexPeerGradeLabel.defaultMessage);
+    const enableBadge = screen.queryByTestId('enable-badge');
+
+    expect(label).toBeVisible();
+
+    expect(enableBadge).toBeNull();
+  });
+});

plugins/course-apps/ora_settings/factories/mockData.js

@@ -0,0 +1,32 @@
+export const courseId = 'course-v1:org+num+run';
+
+export const inititalState = {
+  courseDetail: {
+    courseId,
+    status: 'successful',
+  },
+  pagesAndResources: {
+    courseAppIds: ['ora_settings'],
+    loadingStatus: 'in-progress',
+    savingStatus: '',
+    courseAppsApiStatus: {},
+    courseAppSettings: {},
+  },
+  models: {
+    courseApps: {
+      ora_settings: {
+        id: 'ora_settings',
+        name: 'Flexible Peer Grading',
+        enabled: true,
+        description: 'Enable flexible peer grading',
+        allowedOperations: {
+          enable: false,
+          configure: true,
+        },
+        documentationLinks: {
+          learnMoreConfiguration: '',
+        },
+      },
+    },
+  },
+};

plugins/course-apps/ora_settings/messages.ts

@@ -0,0 +1,54 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  heading: {
+    id: 'course-authoring.pages-resources.ora.heading',
+    defaultMessage: 'Configure Flexible Peer Grading',
+    description: 'Title for the modal dialog header',
+  },
+  ORASettingsHelpLink: {
+    id: 'course-authoring.pages-resources.ora.flex-peer-grading.link',
+    defaultMessage: 'Learn more about open response assessment settings',
+    description: 'Descriptive text for the hyperlink to the docs site',
+  },
+  enableFlexPeerGradeLabel: {
+    id: 'course-authoring.pages-resources.ora.flex-peer-grading.label',
+    defaultMessage: 'Flex Peer Grading',
+    description: 'Label for form switch',
+  },
+  enableFlexPeerGradeHelp: {
+    id: 'course-authoring.pages-resources.ora.flex-peer-grading.help',
+    defaultMessage: 'Turn on Flexible Peer Grading for all open response assessments in the course with peer grading.',
+    description: 'Help text describing what happens when the switch is enabled',
+  },
+  enabledBadgeLabel: {
+    id: 'course-authoring.pages-resources.ora.flex-peer-grading.enabled-badge.label',
+    defaultMessage: 'Enabled',
+    description: 'Label for badge that show users that a setting is enabled',
+  },
+  cancelLabel: {
+    id: 'course-authoring.pages-resources.ora.flex-peer-grading.cancel-button.label',
+    defaultMessage: 'Cancel',
+    description: 'Label for button that cancels user changes',
+  },
+  saveLabel: {
+    id: 'course-authoring.pages-resources.ora.flex-peer-grading.save-button.label',
+    defaultMessage: 'Save',
+    description: 'Label for button that saves user changes',
+  },
+  pendingSaveLabel: {
+    id: 'course-authoring.pages-resources.ora.flex-peer-grading.pending-save-button.label',
+    defaultMessage: 'Saving',
+    description: 'Label for button that has pending api save calls',
+  },
+  errorSavingTitle: {
+    id: 'course-authoring.pages-resources.ora.flex-peer-grading.save-error.title',
+    defaultMessage: 'We couldn\'t apply your changes.',
+  },
+  errorSavingMessage: {
+    id: 'course-authoring.pages-resources.ora.flex-peer-grading.save-error.message',
+    defaultMessage: 'Please check your entries and try again.',
+  },
+});
+
+export default messages;

plugins/course-apps/ora_settings/package.json

@@ -0,0 +1,20 @@
+{
+    "name": "@openedx-plugins/course-app-ora_settings",
+    "version": "0.1.0",
+    "description": "Open Response Assessment configuration for courses using it",
+    "peerDependencies": {
+        "@edx/frontend-app-authoring": "*",
+        "@edx/frontend-platform": "*",
+        "@openedx/paragon": "*",
+        "prop-types": "*",
+        "react": "*",
+        "react-redux": "*",
+        "yup": "*"
+    },
+    "peerDependenciesMeta": {
+        "@edx/frontend-app-authoring": {
+            "optional": true
+        }
+    }
+}
+  

plugins/course-apps/proctoring/Settings.jsx

@@ -8,40 +8,46 @@ import PropTypes from 'prop-types';
 
 import { getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 import {
   ActionRow, Alert, Badge, Form, Hyperlink, ModalDialog, StatefulButton,
-} from '@edx/paragon';
+} from '@openedx/paragon';
+
+import ExamsApiService from 'CourseAuthoring/data/services/ExamsApiService';
+import StudioApiService from 'CourseAuthoring/data/services/StudioApiService';
+import Loading from 'CourseAuthoring/generic/Loading';
+import ConnectionErrorAlert from 'CourseAuthoring/generic/ConnectionErrorAlert';
+import FormSwitchGroup from 'CourseAuthoring/generic/FormSwitchGroup';
+import { useModel } from 'CourseAuthoring/generic/model-store';
+import PermissionDeniedAlert from 'CourseAuthoring/generic/PermissionDeniedAlert';
+import { useIsMobile } from 'CourseAuthoring/utils';
+import { PagesAndResourcesContext } from 'CourseAuthoring/pages-and-resources/PagesAndResourcesProvider';
+import { useCourseAuthoringContext } from 'CourseAuthoring/CourseAuthoringContext';
 
-import StudioApiService from '../../data/services/StudioApiService';
-import Loading from '../../generic/Loading';
-import ConnectionErrorAlert from '../../generic/ConnectionErrorAlert';
-import FormSwitchGroup from '../../generic/FormSwitchGroup';
-import { useModel } from '../../generic/model-store';
-import PermissionDeniedAlert from '../../generic/PermissionDeniedAlert';
-import { useIsMobile } from '../../utils';
-import { PagesAndResourcesContext } from '../PagesAndResourcesProvider';
 import messages from './messages';
 
-function ProctoringSettings({ intl, onClose }) {
+const ProctoringSettings = ({ onClose }) => {
+  const intl = useIntl();
   const initialFormValues = {
     enableProctoredExams: false,
     proctoringProvider: false,
-    proctortrackEscalationEmail: '',
+    escalationEmail: '',
     allowOptingOut: false,
-    createZendeskTickets: false,
   };
   const [formValues, setFormValues] = useState(initialFormValues);
   const [loading, setLoading] = useState(true);
   const [loaded, setLoaded] = useState(false);
   const [loadingConnectionError, setLoadingConnectionError] = useState(false);
   const [loadingPermissionError, setLoadingPermissionError] = useState(false);
+  const [allowLtiProviders, setAllowLtiProviders] = useState(false);
   const [availableProctoringProviders, setAvailableProctoringProviders] = useState([]);
+  const [requiresEscalationEmailProviders, setRequiresEscalationEmailProviders] = useState([]);
+  const [ltiProctoringProviders, setLtiProctoringProviders] = useState([]);
   const [courseStartDate, setCourseStartDate] = useState('');
   const [saveSuccess, setSaveSuccess] = useState(false);
   const [saveError, setSaveError] = useState(false);
   const [submissionInProgress, setSubmissionInProgress] = useState(false);
-  const [showProctortrackEscalationEmail, setShowProctortrackEscalationEmail] = useState(false);
+  const [showEscalationEmail, setShowEscalationEmail] = useState(false);
   const isEdxStaff = getAuthenticatedUser().administrator;
   const [formStatus, setFormStatus] = useState({
     isValid: true,
@@ -50,90 +56,122 @@ function ProctoringSettings({ intl, onClose }) {
   const isMobile = useIsMobile();
   const modalVariant = isMobile ? 'dark' : 'default';
 
+  const isLtiProvider = (provider) => (
+    ltiProctoringProviders.some(p => p.name === provider)
+  );
+
+  function getProviderDisplayLabel(provider) {
+    // if a display label exists for this provider return it
+    return ltiProctoringProviders.find(p => p.name === provider)?.verbose_name || provider;
+  }
+
   const { courseId } = useContext(PagesAndResourcesContext);
+  const { courseDetails } = useCourseAuthoringContext();
+  const org = courseDetails?.org;
   const appInfo = useModel('courseApps', 'proctoring');
   const alertRef = React.createRef();
   const saveStatusAlertRef = React.createRef();
   const proctoringEscalationEmailInputRef = useRef(null);
   const submitButtonState = submissionInProgress ? 'pending' : 'default';
 
-  function handleChange(event) {
+  const handleChange = (event) => {
     const { target } = event;
     const value = target.type === 'checkbox' ? target.checked : target.value;
     const { name } = target;
 
-    if (['allowOptingOut', 'createZendeskTickets'].includes(name)) {
+    if (['allowOptingOut'].includes(name)) {
       // Form.Radio expects string values, so convert back to a boolean here
       setFormValues({ ...formValues, [name]: value === 'true' });
     } else if (name === 'proctoringProvider') {
       const newFormValues = { ...formValues, proctoringProvider: value };
-
-      if (value === 'proctortrack') {
-        setFormValues({ ...newFormValues, createZendeskTickets: false });
-        setShowProctortrackEscalationEmail(true);
+      if (requiresEscalationEmailProviders.includes(value)) {
+        setFormValues({ ...newFormValues });
+        setShowEscalationEmail(true);
+      } else if (isLtiProvider(value)) {
+        setFormValues(newFormValues);
+        setShowEscalationEmail(true);
       } else {
-        if (value === 'software_secure') {
-          setFormValues({ ...newFormValues, createZendeskTickets: true });
-        } else {
-          setFormValues(newFormValues);
-        }
-
-        setShowProctortrackEscalationEmail(false);
+        setFormValues(newFormValues);
+        setShowEscalationEmail(false);
       }
     } else {
       setFormValues({ ...formValues, [name]: value });
     }
-  }
+  };
 
-  function setFocusToProctortrackEscalationEmailInput() {
+  const setFocusToEscalationEmailInput = () => {
     if (proctoringEscalationEmailInputRef && proctoringEscalationEmailInputRef.current) {
       proctoringEscalationEmailInputRef.current.focus();
     }
-  }
+  };
 
   function postSettingsBackToServer() {
-    const dataToPostBack = {
+    const selectedProvider = formValues.proctoringProvider;
+    const isLtiProviderSelected = isLtiProvider(selectedProvider);
+    const studioDataToPostBack = {
       proctored_exam_settings: {
         enable_proctored_exams: formValues.enableProctoredExams,
-        proctoring_provider: formValues.proctoringProvider,
-        create_zendesk_tickets: formValues.createZendeskTickets,
+        // lti providers are managed outside edx-platform, lti_external indicates this
+        proctoring_provider: isLtiProviderSelected ? 'lti_external' : selectedProvider,
       },
     };
     if (isEdxStaff) {
-      dataToPostBack.proctored_exam_settings.allow_proctoring_opt_out = formValues.allowOptingOut;
+      studioDataToPostBack.proctored_exam_settings.allow_proctoring_opt_out = formValues.allowOptingOut;
     }
 
-    if (formValues.proctoringProvider === 'proctortrack') {
-      dataToPostBack.proctored_exam_settings.proctoring_escalation_email = formValues.proctortrackEscalationEmail === '' ? null : formValues.proctortrackEscalationEmail;
+    if (requiresEscalationEmailProviders.includes(formValues.proctoringProvider)) {
+      studioDataToPostBack.proctored_exam_settings.proctoring_escalation_email = formValues.escalationEmail === '' ? null : formValues.escalationEmail;
     }
 
+    // only save back to exam service if necessary
     setSubmissionInProgress(true);
-    StudioApiService.saveProctoredExamSettingsData(courseId, dataToPostBack).then(() => {
-      setSaveSuccess(true);
-      setSaveError(false);
-      setSubmissionInProgress(false);
-    }).catch(() => {
-      setSaveSuccess(false);
-      setSaveError(true);
-      setSubmissionInProgress(false);
-    });
+
+    const saveOperations = [StudioApiService.saveProctoredExamSettingsData(courseId, studioDataToPostBack)];
+    if (allowLtiProviders && ExamsApiService.isAvailable()) {
+      const selectedEscalationEmail = formValues.escalationEmail;
+
+      saveOperations.push(
+        ExamsApiService.saveCourseExamConfiguration(
+          courseId,
+          {
+            provider: isLtiProviderSelected ? formValues.proctoringProvider : null,
+            escalationEmail: (isLtiProviderSelected && selectedEscalationEmail !== '') ? selectedEscalationEmail : null,
+          },
+        ),
+      );
+    }
+    Promise.all(saveOperations)
+      .then(() => {
+        setSaveSuccess(true);
+        setSaveError(false);
+        setSubmissionInProgress(false);
+      }).catch((error) => {
+        setSaveSuccess(false);
+        setSaveError(error);
+        setSubmissionInProgress(false);
+      });
   }
 
-  function handleSubmit(event) {
+  const handleSubmit = (event) => {
     event.preventDefault();
+    const isLtiProviderSelected = isLtiProvider(formValues.proctoringProvider);
     if (
-      formValues.proctoringProvider === 'proctortrack'
-      && !EmailValidator.validate(formValues.proctortrackEscalationEmail)
-      && !(formValues.proctortrackEscalationEmail === '' && !formValues.enableProctoredExams)
+      (requiresEscalationEmailProviders.includes(formValues.proctoringProvider) || isLtiProviderSelected)
+      && !EmailValidator.validate(formValues.escalationEmail)
+      && !(formValues.escalationEmail === '' && !formValues.enableProctoredExams)
     ) {
-      if (formValues.proctortrackEscalationEmail === '') {
-        const errorMessage = intl.formatMessage(messages['authoring.proctoring.escalationemail.error.blank']);
+      if (formValues.escalationEmail === '') {
+        const errorMessage = intl.formatMessage(messages['authoring.proctoring.escalationemail.error.blank'], { proctoringProviderName: getProviderDisplayLabel(formValues.proctoringProvider) });
 
         setFormStatus({
           isValid: false,
           errors: {
-            formProctortrackEscalationEmail: {
-              dialogErrorMessage: (<Alert.Link onClick={setFocusToProctortrackEscalationEmailInput} href="#formProctortrackEscalationEmail" data-testid="proctorTrackEscalationEmailErrorLink">{errorMessage}</Alert.Link>),
+            formEscalationEmail: {
+              dialogErrorMessage: (
+                <Alert.Link onClick={setFocusToEscalationEmailInput} href="#formEscalationEmail" data-testid="escalationEmailErrorLink">
+                  {errorMessage}
+                </Alert.Link>
+              ),
               inputErrorMessage: errorMessage,
             },
           },
@@ -144,8 +182,8 @@ function ProctoringSettings({ intl, onClose }) {
         setFormStatus({
           isValid: false,
           errors: {
-            formProctortrackEscalationEmail: {
-              dialogErrorMessage: (<Alert.Link onClick={setFocusToProctortrackEscalationEmailInput} href="#formProctortrackEscalationEmail" data-testid="proctorTrackEscalationEmailErrorLink">{errorMessage}</Alert.Link>),
+            formEscalationEmail: {
+              dialogErrorMessage: (<Alert.Link onClick={setFocusToEscalationEmailInput} href="#formEscalationEmail" data-testid="escalationEmailErrorLink">{errorMessage}</Alert.Link>),
               inputErrorMessage: errorMessage,
             },
           },
@@ -154,13 +192,13 @@ function ProctoringSettings({ intl, onClose }) {
     } else {
       postSettingsBackToServer();
       const errors = { ...formStatus.errors };
-      delete errors.formProctortrackEscalationEmail;
+      delete errors.formEscalationEmail;
       setFormStatus({
         isValid: true,
         errors,
       });
     }
-  }
+  };
 
   function cannotEditProctoringProvider() {
     const currentDate = moment(moment()).format('YYYY-MM-DD[T]hh:mm:ss[Z]');
@@ -186,7 +224,7 @@ function ProctoringSettings({ intl, onClose }) {
         disabled={isDisabledOption(provider)}
         data-testid={provider}
       >
-        {provider}
+        {getProviderDisplayLabel(provider)}
       </option>
     ));
   }
@@ -206,7 +244,7 @@ function ProctoringSettings({ intl, onClose }) {
     );
   }
 
-  const learnMoreLink = appInfo.documentationLinks?.learnMoreConfiguration && (
+  const learnMoreLink = appInfo?.documentationLinks?.learnMoreConfiguration && (
     <Hyperlink
       className="text-primary-500"
       destination={appInfo.documentationLinks.learnMoreConfiguration}
@@ -218,16 +256,18 @@ function ProctoringSettings({ intl, onClose }) {
   );
 
   function renderContent() {
+    const isLtiProviderSelected = isLtiProvider(formValues.proctoringProvider);
+
     return (
       <>
-        {!formStatus.isValid && formStatus.errors.formProctortrackEscalationEmail
+        {!formStatus.isValid && formStatus.errors.formEscalationEmail
           && (
             // tabIndex="-1" to make non-focusable element focusable
             <Alert
-              id="proctortrackEscalationEmailError"
+              id="escalationEmailError"
               variant="danger"
               tabIndex="-1"
-              data-testid="proctortrackEscalationEmailError"
+              data-testid="escalationEmailError"
               ref={alertRef}
             >
               {getFormErrorMessage()}
@@ -290,30 +330,30 @@ function ProctoringSettings({ intl, onClose }) {
           </>
         )}
 
-        {/* PROCTORTRACK ESCALATION EMAIL */}
-        {showProctortrackEscalationEmail && formValues.enableProctoredExams && (
-          <Form.Group controlId="formProctortrackEscalationEmail">
+        {/* ESCALATION EMAIL */}
+        {showEscalationEmail && formValues.enableProctoredExams && (
+          <Form.Group controlId="formEscalationEmail">
             <Form.Label className="font-weight-bold">
               {intl.formatMessage(messages['authoring.proctoring.escalationemail.label'])}
             </Form.Label>
             <Form.Control
               ref={proctoringEscalationEmailInputRef}
               type="email"
-              name="proctortrackEscalationEmail"
+              name="escalationEmail"
               data-testid="escalationEmail"
               onChange={handleChange}
-              value={formValues.proctortrackEscalationEmail}
-              isInvalid={Object.prototype.hasOwnProperty.call(formStatus.errors, 'formProctortrackEscalationEmail')}
-              aria-describedby="proctortrackEscalationEmailHelpText"
+              value={formValues.escalationEmail}
+              isInvalid={Object.prototype.hasOwnProperty.call(formStatus.errors, 'formEscalationEmail')}
+              aria-describedby="escalationEmailHelpText"
             />
-            <Form.Text id="proctortrackEscalationEmailHelpText">
+            <Form.Text id="escalationEmailHelpText">
               {intl.formatMessage(messages['authoring.proctoring.escalationemail.help'])}
             </Form.Text>
-            {Object.prototype.hasOwnProperty.call(formStatus.errors, 'formProctortrackEscalationEmail') && (
+            {Object.prototype.hasOwnProperty.call(formStatus.errors, 'formEscalationEmail') && (
               <Form.Control.Feedback type="invalid">
                 {
-                  formStatus.errors.formProctortrackEscalationEmail
-                  && formStatus.errors.formProctortrackEscalationEmail.inputErrorMessage
+                  formStatus.errors.formEscalationEmail
+                  && formStatus.errors.formEscalationEmail.inputErrorMessage
                 }
               </Form.Control.Feedback>
             )}
@@ -321,7 +361,7 @@ function ProctoringSettings({ intl, onClose }) {
         )}
 
         {/* ALLOW OPTING OUT OF PROCTORED EXAMS */}
-        { isEdxStaff && formValues.enableProctoredExams && (
+        { isEdxStaff && formValues.enableProctoredExams && !isLtiProviderSelected && (
           <fieldset aria-describedby="allowOptingOutHelpText">
             <Form.Group controlId="formAllowingOptingOut">
               <Form.Label as="legend" className="font-weight-bold">
@@ -329,6 +369,7 @@ function ProctoringSettings({ intl, onClose }) {
               </Form.Label>
               <Form.RadioSet
                 name="allowOptingOut"
+                data-testid="allowOptingOutRadio"
                 value={formValues.allowOptingOut.toString()}
                 onChange={handleChange}
               >
@@ -342,29 +383,6 @@ function ProctoringSettings({ intl, onClose }) {
             </Form.Group>
           </fieldset>
         )}
-
-        {/* CREATE ZENDESK TICKETS */}
-        { isEdxStaff && formValues.enableProctoredExams && (
-          <fieldset aria-describedby="createZendeskTicketsText">
-            <Form.Group controlId="formCreateZendeskTickets">
-              <Form.Label as="legend" className="font-weight-bold">
-                {intl.formatMessage(messages['authoring.proctoring.createzendesk.label'])}
-              </Form.Label>
-              <Form.RadioSet
-                name="createZendeskTickets"
-                value={formValues.createZendeskTickets.toString()}
-                onChange={handleChange}
-              >
-                <Form.Radio value="true" data-testid="createZendeskTicketsYes">
-                  {intl.formatMessage(messages['authoring.proctoring.yes'])}
-                </Form.Radio>
-                <Form.Radio value="false" data-testid="createZendeskTicketsNo">
-                  {intl.formatMessage(messages['authoring.proctoring.no'])}
-                </Form.Radio>
-              </Form.RadioSet>
-            </Form.Group>
-          </fieldset>
-        )}
       </>
     );
   }
@@ -416,21 +434,32 @@ function ProctoringSettings({ intl, onClose }) {
   }
 
   function renderSaveError() {
-    return (
-      <Alert
-        variant="danger"
-        data-testid="saveError"
-        tabIndex="-1"
-        ref={saveStatusAlertRef}
-        onClose={() => setSaveError(false)}
-        dismissible
-      >
+    let errorMessage = (
+      <FormattedMessage
+        id="authoring.proctoring.alert.error"
+        defaultMessage={`
+          We encountered a technical error while trying to save proctored exam settings.
+          This might be a temporary issue, so please try again in a few minutes.
+          If the problem persists, please go to the {support_link} for help.
+        `}
+        values={{
+          support_link: (
+            <Alert.Link href={getConfig().SUPPORT_URL}>
+              {intl.formatMessage(messages['authoring.proctoring.support.text'])}
+            </Alert.Link>
+          ),
+        }}
+      />
+    );
+
+    if (saveError?.response.status === 403) {
+      errorMessage = (
         <FormattedMessage
-          id="authoring.examsettings.alert.error"
+          id="authoring.proctoring.alert.error.forbidden"
           defaultMessage={`
-            We encountered a technical error while trying to save proctored exam settings.
-            This might be a temporary issue, so please try again in a few minutes.
-            If the problem persists, please go to the {support_link} for help.
+            You do not have permission to edit proctored exam settings for this course.
+            If you are a course team member and this problem persists,
+            please go to the {support_link} for help.
           `}
           values={{
             support_link: (
@@ -440,51 +469,101 @@ function ProctoringSettings({ intl, onClose }) {
             ),
           }}
         />
+      );
+    }
+
+    return (
+      <Alert
+        variant="danger"
+        data-testid="saveError"
+        tabIndex="-1"
+        ref={saveStatusAlertRef}
+        onClose={() => setSaveError(false)}
+        dismissible
+      >
+        {errorMessage}
       </Alert>
     );
   }
 
-  useEffect(
-    () => {
-      StudioApiService.getProctoredExamSettingsData(courseId)
-        .then(
-          response => {
-            const proctoredExamSettings = response.data.proctored_exam_settings;
-            setLoaded(true);
-            setLoading(false);
-            setSubmissionInProgress(false);
-            setCourseStartDate(response.data.course_start_date);
-            const isProctortrack = proctoredExamSettings.proctoring_provider === 'proctortrack';
-            setShowProctortrackEscalationEmail(isProctortrack);
-            setAvailableProctoringProviders(response.data.available_proctoring_providers);
-            const proctoringEscalationEmail = proctoredExamSettings.proctoring_escalation_email;
+  useEffect(() => {
+    Promise.all([
+      StudioApiService.getProctoredExamSettingsData(courseId),
+      ExamsApiService.isAvailable() ? ExamsApiService.getCourseExamConfiguration(courseId) : Promise.resolve(),
+      ExamsApiService.isAvailable() ? ExamsApiService.getAvailableProviders(org) : Promise.resolve(),
+    ])
+      .then(
+        ([settingsResponse, examConfigResponse, ltiProvidersResponse]) => {
+          const proctoredExamSettings = settingsResponse.data.proctored_exam_settings;
+          setLoaded(true);
+          setLoading(false);
+          setSubmissionInProgress(false);
+          setCourseStartDate(settingsResponse.data.course_start_date);
+          setAvailableProctoringProviders(settingsResponse.data.available_proctoring_providers);
+          setRequiresEscalationEmailProviders(settingsResponse.data.requires_escalation_email_providers);
 
-            setFormValues({
-              ...formValues,
-              enableProctoredExams: proctoredExamSettings.enable_proctored_exams,
-              proctoringProvider: proctoredExamSettings.proctoring_provider,
-              allowOptingOut: proctoredExamSettings.allow_proctoring_opt_out,
-              createZendeskTickets: proctoredExamSettings.create_zendesk_tickets,
-              // The backend API may return null for the proctoringEscalationEmail value, which is the default.
-              // In order to keep our email input component controlled, we use the empty string as the default
-              // and perform this conversion during GETs and POSTs.
-              proctortrackEscalationEmail: proctoringEscalationEmail === null ? '' : proctoringEscalationEmail,
-            });
-          },
-        ).catch(
-          error => {
-            if (error.response.status === 403) {
-              setLoadingPermissionError(true);
-            } else {
-              setLoadingConnectionError(true);
-            }
-            setLoading(false);
-            setLoaded(false);
-            setSubmissionInProgress(false);
-          },
-        );
-    }, [],
-  );
+          // The list of providers returned by studio settings are the default behavior. If lti_external
+          // is available as an option display the list of LTI providers returned by the exam service.
+          // Setting 'lti_external' in studio indicates an LTI provider configured outside of edx-platform.
+          // This option is not directly selectable.
+          const proctoringProvidersStudio = settingsResponse.data.available_proctoring_providers;
+          const proctoringProvidersLti = ltiProvidersResponse?.data || [];
+          const enableLtiProviders = proctoringProvidersStudio.includes('lti_external');
+          setAllowLtiProviders(enableLtiProviders);
+          setLtiProctoringProviders(proctoringProvidersLti);
+          // flatten provider objects and coalesce values to just the provider key
+          let availableProviders = proctoringProvidersStudio.filter(value => value !== 'lti_external');
+          if (enableLtiProviders) {
+            availableProviders = proctoringProvidersLti.reduce(
+              (result, provider) => [...result, provider.name],
+              availableProviders,
+            );
+          }
+          setAvailableProctoringProviders(availableProviders);
+
+          let selectedProvider;
+          if (proctoredExamSettings.proctoring_provider === 'lti_external') {
+            selectedProvider = examConfigResponse.data.provider;
+          } else {
+            selectedProvider = proctoredExamSettings.proctoring_provider;
+          }
+
+          const requiresEscalationEmailProvidersList = settingsResponse.data.requires_escalation_email_providers;
+          const isEscalationEmailRequired = requiresEscalationEmailProvidersList.includes(selectedProvider);
+          const ltiProviderSelected = proctoringProvidersLti.some(p => p.name === selectedProvider);
+
+          if (isEscalationEmailRequired || ltiProviderSelected) {
+            setShowEscalationEmail(true);
+          }
+
+          const proctoringEscalationEmail = ltiProviderSelected
+            ? examConfigResponse.data.escalation_email
+            : proctoredExamSettings.proctoring_escalation_email;
+
+          setFormValues({
+            ...formValues,
+            proctoringProvider: selectedProvider,
+            enableProctoredExams: proctoredExamSettings.enable_proctored_exams,
+            allowOptingOut: proctoredExamSettings.allow_proctoring_opt_out,
+            // The backend API may return null for the proctoringEscalationEmail value, which is the default.
+            // In order to keep our email input component controlled, we use the empty string as the default
+            // and perform this conversion during GETs and POSTs.
+            escalationEmail: proctoringEscalationEmail === null ? '' : proctoringEscalationEmail,
+          });
+        },
+      ).catch(
+        error => {
+          if (error.response?.status === 403) {
+            setLoadingPermissionError(true);
+          } else {
+            setLoadingConnectionError(true);
+          }
+          setLoading(false);
+          setLoaded(false);
+          setSubmissionInProgress(false);
+        },
+      );
+  }, []);
 
   useEffect(() => {
     if ((saveSuccess || saveError) && !!saveStatusAlertRef.current) {
@@ -545,13 +624,12 @@ function ProctoringSettings({ intl, onClose }) {
       </Form>
     </ModalDialog>
   );
-}
+};
 
 ProctoringSettings.propTypes = {
-  intl: intlShape.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 
 ProctoringSettings.defaultProps = {};
 
-export default injectIntl(ProctoringSettings);
+export default ProctoringSettings;

plugins/course-apps/proctoring/Settings.test.jsx

@@ -0,0 +1,844 @@
+import {
+  render, screen, cleanup, waitFor, fireEvent, act,
+  initializeMocks,
+} from 'CourseAuthoring/testUtils';
+
+import { mergeConfig } from '@edx/frontend-platform';
+
+import StudioApiService from 'CourseAuthoring/data/services/StudioApiService';
+import ExamsApiService from 'CourseAuthoring/data/services/ExamsApiService';
+import PagesAndResourcesProvider from 'CourseAuthoring/pages-and-resources/PagesAndResourcesProvider';
+import { CourseAuthoringProvider } from 'CourseAuthoring/CourseAuthoringContext';
+import { getCourseDetailsUrl } from 'CourseAuthoring/data/api';
+import ProctoredExamSettings from './Settings';
+
+const courseId = 'course-v1%3AedX%2BDemoX%2BDemo_Course';
+const defaultProps = {
+  courseId,
+  onClose: () => {},
+};
+
+const renderComponent = children => (
+  <CourseAuthoringProvider courseId={defaultProps.courseId}>
+    <PagesAndResourcesProvider courseId={defaultProps.courseId}>
+      {children}
+    </PagesAndResourcesProvider>
+  </CourseAuthoringProvider>
+);
+let axiosMock;
+
+describe('ProctoredExamSettings', () => {
+  /**
+   * @param {boolean} isAdmin
+   * @param {string | undefined} org
+   */
+  function setupApp(isAdmin = true, org = undefined) {
+    mergeConfig({
+      EXAMS_BASE_URL: 'http://exams.testing.co',
+    }, 'CourseAuthoringConfig');
+    const user = {
+      userId: 3,
+      username: 'abc123',
+      administrator: isAdmin,
+      roles: [],
+    };
+    const mocks = initializeMocks({
+      user,
+      initialState: {
+        models: {
+          courseApps: {
+            proctoring: {},
+          },
+        },
+      },
+    });
+
+    axiosMock = mocks.axiosMock;
+    axiosMock
+      .onGet(getCourseDetailsUrl(courseId, user.username))
+      .reply(200, {
+        courseId,
+        name: 'Course Test',
+        start: Date(),
+        ...(org ? { org } : {}),
+      });
+    axiosMock.onGet(`${ExamsApiService.getExamsBaseUrl()}/api/v1/providers`)
+      .reply(200, [{ name: 'test_lti', verbose_name: 'LTI Provider' }]);
+    if (org) {
+      axiosMock.onGet(`${ExamsApiService.getExamsBaseUrl()}/api/v1/providers?org=${org}`)
+        .reply(200, [{ name: 'test_lti', verbose_name: 'LTI Provider' }]);
+    }
+    axiosMock.onGet(
+      `${ExamsApiService.getExamsBaseUrl()}/api/v1/configs/course_id/${defaultProps.courseId}`,
+    ).reply(200, {
+      provider: null,
+    });
+
+    axiosMock.onGet(
+      StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
+    ).reply(200, {
+      proctored_exam_settings: {
+        enable_proctored_exams: true,
+        allow_proctoring_opt_out: false,
+        proctoring_provider: 'mockproc',
+        proctoring_escalation_email: 'test@example.com',
+      },
+      available_proctoring_providers: ['software_secure', 'mockproc', 'lti_external'],
+      requires_escalation_email_providers: ['test_lti'],
+      course_start_date: '2070-01-01T00:00:00Z',
+    });
+  }
+
+  beforeEach(async () => {
+    setupApp();
+  });
+
+  describe('Field dependencies', () => {
+    beforeEach(async () => {
+      await act(async () => render(renderComponent(<ProctoredExamSettings {...defaultProps} />)));
+    });
+
+    it('Hides all other fields when enabledProctorExam is false when first loaded', async () => {
+      cleanup();
+      // Overrides the handler defined in beforeEach.
+      axiosMock.onGet(
+        StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
+      ).reply(200, {
+        proctored_exam_settings: {
+          enable_proctored_exams: false,
+          allow_proctoring_opt_out: false,
+          proctoring_provider: 'mockproc',
+          proctoring_escalation_email: 'test@example.com',
+        },
+        available_proctoring_providers: ['software_secure', 'mockproc'],
+        requires_escalation_email_providers: [],
+        course_start_date: '2070-01-01T00:00:00Z',
+      });
+
+      await act(async () => render(renderComponent(<ProctoredExamSettings {...defaultProps} />)));
+      await waitFor(() => {
+        screen.getByText('Proctored exams');
+      });
+      const enabledProctoredExamCheck = screen.getByLabelText('Proctored exams');
+      expect(enabledProctoredExamCheck.checked).toEqual(false);
+      expect(screen.queryByText('Allow Opting Out of Proctored Exams')).toBeNull();
+      expect(screen.queryByDisplayValue('mockproc')).toBeNull();
+      expect(screen.queryByTestId('escalationEmail')).toBeNull();
+    });
+
+    it('Hides all other fields when enableProctoredExams toggled to false', async () => {
+      await waitFor(() => {
+        screen.getByText('Proctored exams');
+      });
+      expect(screen.queryByText('Allow opting out of proctored exams')).toBeDefined();
+      expect(screen.queryByDisplayValue('mockproc')).toBeDefined();
+      expect(screen.queryByTestId('escalationEmail')).toBeDefined();
+
+      let enabledProctoredExamCheck = screen.getAllByLabelText('Proctored exams', { exact: false })[0];
+      expect(enabledProctoredExamCheck.checked).toEqual(true);
+      fireEvent.click(enabledProctoredExamCheck, { target: { value: false } });
+      enabledProctoredExamCheck = screen.getByLabelText('Proctored exams');
+      expect(enabledProctoredExamCheck.checked).toEqual(false);
+      expect(screen.queryByText('Allow opting out of proctored exams')).toBeNull();
+      expect(screen.queryByDisplayValue('mockproc')).toBeNull();
+      expect(screen.queryByTestId('escalationEmail')).toBeNull();
+    });
+
+    it('Hides unsupported fields when lti provider is selected', async () => {
+      await waitFor(() => {
+        screen.getByDisplayValue('mockproc');
+      });
+      const selectElement = screen.getByDisplayValue('mockproc');
+      fireEvent.change(selectElement, { target: { value: 'test_lti' } });
+      expect(screen.queryByTestId('allowOptingOutRadio')).toBeNull();
+    });
+  });
+
+  describe('Validation with invalid escalation email', () => {
+    const proctoringProvidersRequiringEscalationEmail = ['test_lti'];
+
+    beforeEach(async () => {
+      axiosMock.onGet(
+        StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
+      ).reply(200, {
+        proctored_exam_settings: {
+          enable_proctored_exams: true,
+          allow_proctoring_opt_out: false,
+          proctoring_provider: 'lti_external',
+          proctoring_escalation_email: 'test@example.com',
+        },
+        available_proctoring_providers: ['software_secure', 'mockproc', 'lti_external'],
+        requires_escalation_email_providers: ['test_lti'],
+        course_start_date: '2070-01-01T00:00:00Z',
+      });
+
+      axiosMock.onGet(
+        `${ExamsApiService.getExamsBaseUrl()}/api/v1/configs/course_id/${defaultProps.courseId}`,
+      ).reply(200, {
+        provider: 'test_lti',
+        escalation_email: 'test@example.com',
+      });
+
+      axiosMock.onPatch(
+        ExamsApiService.getExamConfigurationUrl(defaultProps.courseId),
+      ).reply(204, {});
+
+      axiosMock.onPost(
+        StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
+      ).reply(200, {});
+
+      await act(async () => render(renderComponent(<ProctoredExamSettings {...defaultProps} />)));
+    });
+
+    proctoringProvidersRequiringEscalationEmail.forEach(provider => {
+      it(`Creates an alert when no proctoring escalation email is provided with ${provider} selected`, async () => {
+        await waitFor(() => {
+          screen.getByDisplayValue('LTI Provider');
+        });
+        const selectEscalationEmailElement = screen.getByDisplayValue('test@example.com');
+        fireEvent.change(selectEscalationEmailElement, { target: { value: '' } });
+        const selectButton = screen.getByTestId('submissionButton');
+        fireEvent.click(selectButton);
+
+        // verify alert content and focus management
+        const escalationEmailError = screen.getByTestId('escalationEmailError');
+        expect(escalationEmailError.textContent).not.toBeNull();
+        expect(document.activeElement).toEqual(escalationEmailError);
+
+        // verify alert link links to offending input
+        const errorLink = screen.getByTestId('escalationEmailErrorLink');
+        fireEvent.click(errorLink);
+        const escalationEmailInput = screen.getByTestId('escalationEmail');
+        expect(document.activeElement).toEqual(escalationEmailInput);
+      });
+
+      it(`Creates an alert when invalid proctoring escalation email is provided with ${provider} selected`, async () => {
+        await waitFor(() => {
+          screen.getByDisplayValue('LTI Provider');
+        });
+
+        const selectElement = screen.getByDisplayValue('LTI Provider');
+        fireEvent.change(selectElement, { target: { value: provider } });
+
+        const selectEscalationEmailElement = screen.getByDisplayValue('test@example.com');
+        fireEvent.change(selectEscalationEmailElement, { target: { value: 'foo.bar' } });
+        const proctoringForm = screen.getByTestId('proctoringForm');
+        fireEvent.submit(proctoringForm);
+
+        // verify alert content and focus management
+        const escalationEmailError = screen.getByTestId('escalationEmailError');
+        expect(document.activeElement).toEqual(escalationEmailError);
+        expect(escalationEmailError.textContent).not.toBeNull();
+        expect(document.activeElement).toEqual(escalationEmailError);
+
+        // verify alert link links to offending input
+        const errorLink = screen.getByTestId('escalationEmailErrorLink');
+        fireEvent.click(errorLink);
+        const escalationEmailInput = screen.getByTestId('escalationEmail');
+        expect(document.activeElement).toEqual(escalationEmailInput);
+      });
+
+      it('Creates an alert when invalid proctoring escalation email is provided with proctoring disabled', async () => {
+        await waitFor(() => {
+          screen.getByDisplayValue('LTI Provider');
+        });
+        const selectEscalationEmailElement = screen.getByDisplayValue('test@example.com');
+        fireEvent.change(selectEscalationEmailElement, { target: { value: 'foo.bar' } });
+        const enableProctoringElement = screen.getByText('Proctored exams');
+        fireEvent.click(enableProctoringElement);
+        const selectButton = screen.getByTestId('submissionButton');
+        fireEvent.click(selectButton);
+
+        // verify alert content and focus management
+        const escalationEmailError = screen.getByTestId('escalationEmailError');
+        expect(document.activeElement).toEqual(escalationEmailError);
+        expect(escalationEmailError.textContent).not.toBeNull();
+        expect(document.activeElement).toEqual(escalationEmailError);
+      });
+
+      it('Has no error when empty proctoring escalation email is provided with proctoring disabled', async () => {
+        await waitFor(() => {
+          screen.getByDisplayValue('LTI Provider');
+        });
+        const selectEscalationEmailElement = screen.getByDisplayValue('test@example.com');
+        fireEvent.change(selectEscalationEmailElement, { target: { value: '' } });
+        const enableProctoringElement = screen.getByText('Proctored exams');
+        fireEvent.click(enableProctoringElement);
+        const selectButton = screen.getByTestId('submissionButton');
+        fireEvent.click(selectButton);
+
+        // verify there is no escalation email alert, and focus has been set on save success alert
+        expect(screen.queryByTestId('escalationEmailError')).toBeNull();
+
+        await waitFor(() => {
+          const errorAlert = screen.getByTestId('saveSuccess');
+          expect(errorAlert.textContent).toEqual(
+            expect.stringContaining('Proctored exam settings saved successfully.'),
+          );
+          expect(document.activeElement).toEqual(errorAlert);
+        });
+      });
+
+      it(`Has no error when valid proctoring escalation email is provided with ${provider} selected`, async () => {
+        await waitFor(() => {
+          screen.getByDisplayValue('LTI Provider');
+        });
+        const selectEscalationEmailElement = screen.getByDisplayValue('test@example.com');
+        fireEvent.change(selectEscalationEmailElement, { target: { value: 'foo@bar.com' } });
+        const selectButton = screen.getByTestId('submissionButton');
+        fireEvent.click(selectButton);
+
+        // verify there is no escalation email alert, and focus has been set on save success alert
+        expect(screen.queryByTestId('escalationEmailError')).toBeNull();
+
+        await waitFor(() => {
+          const errorAlert = screen.getByTestId('saveSuccess');
+          expect(errorAlert.textContent).toEqual(
+            expect.stringContaining('Proctored exam settings saved successfully.'),
+          );
+          expect(document.activeElement).toEqual(errorAlert);
+        });
+      });
+
+      it(`Escalation email field hidden when proctoring backend is not ${provider}`, async () => {
+        await waitFor(() => {
+          screen.getByDisplayValue('LTI Provider');
+        });
+        const proctoringBackendSelect = screen.getByDisplayValue('LTI Provider');
+        const selectEscalationEmailElement = screen.getByTestId('escalationEmail');
+        expect(selectEscalationEmailElement.value).toEqual('test@example.com');
+        fireEvent.change(proctoringBackendSelect, { target: { value: 'software_secure' } });
+        expect(screen.queryByTestId('escalationEmail')).toBeNull();
+      });
+
+      it(`Escalation email Field Show when proctoring backend is switched back to ${provider}`, async () => {
+        await waitFor(() => {
+          screen.getByDisplayValue('LTI Provider');
+        });
+        const proctoringBackendSelect = screen.getByDisplayValue('LTI Provider');
+        let selectEscalationEmailElement = screen.getByTestId('escalationEmail');
+        fireEvent.change(proctoringBackendSelect, { target: { value: 'software_secure' } });
+        expect(screen.queryByTestId('escalationEmail')).toBeNull();
+        fireEvent.change(proctoringBackendSelect, { target: { value: provider } });
+        expect(screen.queryByTestId('escalationEmail')).toBeDefined();
+        selectEscalationEmailElement = screen.getByTestId('escalationEmail');
+        expect(selectEscalationEmailElement.value).toEqual('test@example.com');
+      });
+
+      it('Submits form when "Enter" key is hit in the escalation email field', async () => {
+        await waitFor(() => {
+          screen.getByDisplayValue('LTI Provider');
+        });
+        const selectEscalationEmailElement = screen.getByDisplayValue('test@example.com');
+        fireEvent.change(selectEscalationEmailElement, { target: { value: '' } });
+        fireEvent.submit(selectEscalationEmailElement);
+        // if the error appears, the form has been submitted
+        expect(screen.getByTestId('escalationEmailError')).toBeDefined();
+      });
+    });
+  });
+
+  describe('Proctoring provider options', () => {
+    const mockGetFutureCourseData = {
+      proctored_exam_settings: {
+        enable_proctored_exams: true,
+        allow_proctoring_opt_out: false,
+        proctoring_provider: 'mockproc',
+        proctoring_escalation_email: 'test@example.com',
+      },
+      available_proctoring_providers: ['software_secure', 'mockproc'],
+      requires_escalation_email_providers: [],
+      course_start_date: '2099-01-01T00:00:00Z',
+    };
+
+    const mockGetPastCourseData = {
+      proctored_exam_settings: {
+        enable_proctored_exams: true,
+        allow_proctoring_opt_out: false,
+        proctoring_provider: 'mockproc',
+        proctoring_escalation_email: 'test@example.com',
+      },
+      available_proctoring_providers: ['software_secure', 'mockproc'],
+      requires_escalation_email_providers: [],
+      course_start_date: '2013-01-01T00:00:00Z',
+    };
+
+    function mockCourseData(data) {
+      axiosMock.onGet(StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId)).reply(200, data);
+    }
+
+    it('Disables irrelevant proctoring provider fields when user is not an administrator and it is after start date', async () => {
+      const isAdmin = false;
+      setupApp(isAdmin);
+      mockCourseData(mockGetPastCourseData);
+      await act(async () => render(renderComponent(<ProctoredExamSettings {...defaultProps} />)));
+      const providerOption = screen.getByTestId('software_secure');
+      expect(providerOption.hasAttribute('disabled')).toEqual(true);
+    });
+
+    it('Enables all proctoring provider options if user is not an administrator and it is before start date', async () => {
+      const isAdmin = false;
+      setupApp(isAdmin);
+      mockCourseData(mockGetFutureCourseData);
+      await act(async () => render(renderComponent(<ProctoredExamSettings {...defaultProps} />)));
+      const providerOption = screen.getByTestId('software_secure');
+      expect(providerOption.hasAttribute('disabled')).toEqual(false);
+    });
+
+    it('Sends the org to the proctoring provider endpoint', async () => {
+      const isAdmin = false;
+      const org = 'test-org';
+      setupApp(isAdmin, org);
+      mockCourseData(mockGetFutureCourseData);
+      await act(async () => render(renderComponent(<ProctoredExamSettings {...defaultProps} />)));
+      const providerOption = screen.getByTestId('software_secure');
+      expect(providerOption.hasAttribute('disabled')).toEqual(false);
+    });
+
+    it('Enables all proctoring provider options if user administrator and it is after start date', async () => {
+      const isAdmin = true;
+      setupApp(isAdmin);
+      mockCourseData(mockGetPastCourseData);
+      await act(async () => render(renderComponent(<ProctoredExamSettings {...defaultProps} />)));
+      const providerOption = screen.getByTestId('software_secure');
+      expect(providerOption.hasAttribute('disabled')).toEqual(false);
+    });
+
+    it('Enables all proctoring provider options if user administrator and it is before start date', async () => {
+      const isAdmin = true;
+      setupApp(isAdmin);
+      mockCourseData(mockGetFutureCourseData);
+      await act(async () => render(renderComponent(<ProctoredExamSettings {...defaultProps} />)));
+      const providerOption = screen.getByTestId('software_secure');
+      expect(providerOption.hasAttribute('disabled')).toEqual(false);
+    });
+
+    it('Does not include lti_external as a selectable option', async () => {
+      const courseData = {
+        ...mockGetFutureCourseData,
+        available_proctoring_providers: ['lti_external', 'mockproc'],
+      };
+      mockCourseData(courseData);
+      await act(async () => render(renderComponent(<ProctoredExamSettings {...defaultProps} />)));
+      await waitFor(() => {
+        screen.getByDisplayValue('mockproc');
+      });
+      expect(screen.queryByTestId('lti_external')).toBeNull();
+    });
+
+    it('Includes lti proctoring provider options when lti_external is allowed by studio', async () => {
+      const courseData = {
+        ...mockGetFutureCourseData,
+        available_proctoring_providers: ['lti_external', 'mockproc'],
+      };
+      mockCourseData(courseData);
+      await act(async () => render(renderComponent(<ProctoredExamSettings {...defaultProps} />)));
+      await waitFor(() => {
+        screen.getByDisplayValue('mockproc');
+      });
+      const providerOption = screen.getByTestId('test_lti');
+      // as as admin the provider should not be disabled
+      expect(providerOption.hasAttribute('disabled')).toEqual(false);
+    });
+
+    it('Does not include lti provider options when lti_external is not available in studio', async () => {
+      const isAdmin = true;
+      setupApp(isAdmin);
+      mockCourseData(mockGetFutureCourseData);
+      await act(async () => render(renderComponent(<ProctoredExamSettings {...defaultProps} />)));
+      await waitFor(() => {
+        screen.getByDisplayValue('mockproc');
+      });
+
+      const providerOption = screen.queryByTestId('test_lti');
+      expect(providerOption).not.toBeInTheDocument();
+    });
+
+    it('Does not request lti provider options if there is no exam service url configuration', async () => {
+      mergeConfig({
+        EXAMS_BASE_URL: null,
+      }, 'CourseAuthoringConfig');
+
+      await act(async () => render(renderComponent(<ProctoredExamSettings {...defaultProps} />)));
+      await waitFor(() => {
+        screen.getByDisplayValue('mockproc');
+      });
+      // (1) for studio settings
+      // (2) waffle flags
+      // (3) for course details
+      expect(axiosMock.history.get.length).toBe(3);
+      expect(axiosMock.history.get[0].url.includes('proctored_exam_settings')).toEqual(true);
+    });
+
+    it('Selected LTI proctoring provider is shown on page load', async () => {
+      const courseData = { ...mockGetFutureCourseData };
+      courseData.available_proctoring_providers = ['lti_external', 'mockproc'];
+      courseData.proctored_exam_settings.proctoring_provider = 'lti_external';
+      mockCourseData(courseData);
+      axiosMock.onGet(
+        `${ExamsApiService.getExamsBaseUrl()}/api/v1/configs/course_id/${defaultProps.courseId}`,
+      ).reply(200, {
+        provider: 'test_lti',
+      });
+      await act(async () => render(renderComponent(<ProctoredExamSettings {...defaultProps} />)));
+      await waitFor(() => {
+        screen.getByText('Proctoring provider');
+      });
+
+      // make sure test_lti is the selected provider
+      expect(screen.getByDisplayValue('LTI Provider')).toBeInTheDocument();
+    });
+  });
+
+  describe('Toggles field visibility based on user permissions', () => {
+    it('Hides opting out for non edX staff', async () => {
+      setupApp(false);
+      await act(async () => render(renderComponent(<ProctoredExamSettings {...defaultProps} />)));
+      expect(screen.queryByTestId('allowOptingOutYes')).toBeNull();
+    });
+
+    it('Shows opting out for edX staff', async () => {
+      setupApp(true);
+      await act(async () => render(renderComponent(<ProctoredExamSettings {...defaultProps} />)));
+      expect(screen.queryByTestId('allowOptingOutYes')).not.toBeNull();
+    });
+  });
+
+  describe('Connection states', () => {
+    it('Shows the spinner before the connection is complete', async () => {
+      render(renderComponent(<ProctoredExamSettings {...defaultProps} />));
+      const spinner = await screen.findByRole('status');
+      expect(spinner.textContent).toEqual('Loading...');
+    });
+
+    it('Show connection error message when we suffer studio server side error', async () => {
+      axiosMock.onGet(
+        StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
+      ).reply(500);
+
+      await act(async () => render(renderComponent(<ProctoredExamSettings {...defaultProps} />)));
+      const connectionError = screen.getByTestId('connectionErrorAlert');
+      expect(connectionError.textContent).toEqual(
+        expect.stringContaining('We encountered a technical error when loading this page.'),
+      );
+    });
+
+    it('Show connection error message when we suffer edx-exams server side error', async () => {
+      axiosMock.onGet(
+        `${ExamsApiService.getExamsBaseUrl()}/api/v1/providers`,
+      ).reply(500);
+
+      await act(async () => render(renderComponent(<ProctoredExamSettings {...defaultProps} />)));
+      const connectionError = screen.getByTestId('connectionErrorAlert');
+      expect(connectionError.textContent).toEqual(
+        expect.stringContaining('We encountered a technical error when loading this page.'),
+      );
+    });
+
+    it('Show permission error message when user do not have enough permission', async () => {
+      axiosMock.onGet(
+        StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
+      ).reply(403);
+
+      await act(async () => render(renderComponent(<ProctoredExamSettings {...defaultProps} />)));
+      const permissionError = screen.getByTestId('permissionDeniedAlert');
+      expect(permissionError.textContent).toEqual(
+        expect.stringContaining('You are not authorized to view this page'),
+      );
+    });
+  });
+
+  describe('Save settings', () => {
+    beforeEach(async () => {
+      axiosMock.onPost(
+        StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
+      ).reply(200, 'success');
+      axiosMock.onPatch(
+        `${ExamsApiService.getExamsBaseUrl()}/api/v1/configs/course_id/${defaultProps.courseId}`,
+      ).reply(200, 'success');
+    });
+
+    it('Disable button while submitting', async () => {
+      await act(async () => render(renderComponent(<ProctoredExamSettings {...defaultProps} />)));
+      let submitButton = screen.getByTestId('submissionButton');
+      expect(screen.queryByTestId('saveInProgress')).toBeFalsy();
+      fireEvent.click(submitButton);
+
+      submitButton = screen.getByTestId('submissionButton');
+      expect(submitButton).toHaveAttribute('disabled');
+    });
+
+    it('Makes API call successfully with proctoring_escalation_email if test_lti', async () => {
+      // Setup mock to include test_lti as available provider
+      axiosMock.onGet(
+        StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
+      ).reply(200, {
+        proctored_exam_settings: {
+          enable_proctored_exams: true,
+          allow_proctoring_opt_out: false,
+          proctoring_provider: 'mockproc',
+          proctoring_escalation_email: 'test@example.com',
+        },
+        available_proctoring_providers: ['software_secure', 'mockproc', 'lti_external'],
+        requires_escalation_email_providers: ['test_lti'],
+        course_start_date: '2070-01-01T00:00:00Z',
+      });
+
+      await act(async () => render(renderComponent(<ProctoredExamSettings {...defaultProps} />)));
+      // Make a change to the provider to test_lti and set the email
+      const selectElement = screen.getByDisplayValue('mockproc');
+      fireEvent.change(selectElement, { target: { value: 'test_lti' } });
+      const escalationEmail = screen.getByTestId('escalationEmail');
+      expect(escalationEmail.value).toEqual('test@example.com');
+      fireEvent.change(escalationEmail, { target: { value: 'test_lti@example.com' } });
+      expect(escalationEmail.value).toEqual('test_lti@example.com');
+      const submitButton = screen.getByTestId('submissionButton');
+      fireEvent.click(submitButton);
+      expect(axiosMock.history.post.length).toBe(1);
+      expect(JSON.parse(axiosMock.history.post[0].data)).toEqual({
+        proctored_exam_settings: {
+          enable_proctored_exams: true,
+          allow_proctoring_opt_out: false,
+          proctoring_provider: 'lti_external',
+          proctoring_escalation_email: 'test_lti@example.com',
+        },
+      });
+      expect(axiosMock.history.patch.length).toBe(1);
+      expect(JSON.parse(axiosMock.history.patch[0].data)).toEqual({
+        provider: 'test_lti',
+        escalation_email: 'test_lti@example.com',
+      });
+
+      await waitFor(() => {
+        const errorAlert = screen.getByTestId('saveSuccess');
+        expect(errorAlert.textContent).toEqual(
+          expect.stringContaining('Proctored exam settings saved successfully.'),
+        );
+        expect(document.activeElement).toEqual(errorAlert);
+      });
+    });
+
+    it('Makes API call successfully without proctoring_escalation_email if not requiring escalation email', async () => {
+      await act(async () => render(renderComponent(<ProctoredExamSettings {...defaultProps} />)));
+
+      // make sure we have not selected a provider requiring escalation email
+      expect(screen.getByDisplayValue('mockproc')).toBeDefined();
+
+      const submitButton = screen.getByTestId('submissionButton');
+      fireEvent.click(submitButton);
+      expect(axiosMock.history.post.length).toBe(1);
+      expect(JSON.parse(axiosMock.history.post[0].data)).toEqual({
+        proctored_exam_settings: {
+          enable_proctored_exams: true,
+          allow_proctoring_opt_out: false,
+          proctoring_provider: 'mockproc',
+        },
+      });
+
+      await waitFor(() => {
+        const errorAlert = screen.getByTestId('saveSuccess');
+        expect(errorAlert.textContent).toEqual(
+          expect.stringContaining('Proctored exam settings saved successfully.'),
+        );
+        expect(document.activeElement).toEqual(errorAlert);
+      });
+    });
+
+    it('Successfully updates exam configuration and studio provider is set to "lti_external" for lti providers', async () => {
+      await act(async () => render(renderComponent(<ProctoredExamSettings {...defaultProps} />)));
+      // Make a change to the provider to test_lti and set the email
+      const selectElement = screen.getByDisplayValue('mockproc');
+      fireEvent.change(selectElement, { target: { value: 'test_lti' } });
+
+      const escalationEmail = screen.getByTestId('escalationEmail');
+      expect(escalationEmail.value).toEqual('test@example.com');
+      fireEvent.change(escalationEmail, { target: { value: 'test_lti@example.com' } });
+      expect(escalationEmail.value).toEqual('test_lti@example.com');
+
+      const submitButton = screen.getByTestId('submissionButton');
+      fireEvent.click(submitButton);
+
+      // update exam service config
+      expect(axiosMock.history.patch.length).toBe(1);
+      expect(JSON.parse(axiosMock.history.patch[0].data)).toEqual({
+        provider: 'test_lti',
+        escalation_email: 'test_lti@example.com',
+      });
+
+      // update studio settings
+      expect(axiosMock.history.post.length).toBe(1);
+      expect(JSON.parse(axiosMock.history.post[0].data)).toEqual({
+        proctored_exam_settings: {
+          enable_proctored_exams: true,
+          allow_proctoring_opt_out: false,
+          proctoring_provider: 'lti_external',
+          proctoring_escalation_email: 'test_lti@example.com',
+        },
+      });
+
+      await waitFor(() => {
+        const errorAlert = screen.getByTestId('saveSuccess');
+        expect(errorAlert.textContent).toEqual(
+          expect.stringContaining('Proctored exam settings saved successfully.'),
+        );
+        expect(document.activeElement).toEqual(errorAlert);
+      });
+    });
+
+    it('Sets exam service provider to null if a non-lti provider is selected', async () => {
+      await act(async () => render(renderComponent(<ProctoredExamSettings {...defaultProps} />)));
+      const submitButton = screen.getByTestId('submissionButton');
+      fireEvent.click(submitButton);
+      // update exam service config
+      expect(axiosMock.history.patch.length).toBe(1);
+      expect(JSON.parse(axiosMock.history.patch[0].data)).toEqual({
+        provider: null,
+        escalation_email: null,
+      });
+      expect(axiosMock.history.patch.length).toBe(1);
+      expect(axiosMock.history.post.length).toBe(1);
+      expect(JSON.parse(axiosMock.history.post[0].data)).toEqual({
+        proctored_exam_settings: {
+          enable_proctored_exams: true,
+          allow_proctoring_opt_out: false,
+          proctoring_provider: 'mockproc',
+        },
+      });
+
+      await waitFor(() => {
+        const errorAlert = screen.getByTestId('saveSuccess');
+        expect(errorAlert.textContent).toEqual(
+          expect.stringContaining('Proctored exam settings saved successfully.'),
+        );
+        expect(document.activeElement).toEqual(errorAlert);
+      });
+    });
+
+    it('Does not update exam service if lti is not enabled in studio', async () => {
+      axiosMock.onGet(
+        StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
+      ).reply(200, {
+        proctored_exam_settings: {
+          enable_proctored_exams: true,
+          allow_proctoring_opt_out: false,
+          proctoring_provider: 'mockproc',
+          proctoring_escalation_email: 'test@example.com',
+        },
+        available_proctoring_providers: ['software_secure', 'mockproc'],
+        requires_escalation_email_providers: [],
+        course_start_date: '2070-01-01T00:00:00Z',
+      });
+
+      await act(async () => render(renderComponent(<ProctoredExamSettings {...defaultProps} />)));
+      const submitButton = screen.getByTestId('submissionButton');
+      fireEvent.click(submitButton);
+      // does not update exam service config
+      expect(axiosMock.history.patch.length).toBe(0);
+      // does update studio
+      expect(axiosMock.history.post.length).toBe(1);
+      expect(JSON.parse(axiosMock.history.post[0].data)).toEqual({
+        proctored_exam_settings: {
+          enable_proctored_exams: true,
+          allow_proctoring_opt_out: false,
+          proctoring_provider: 'mockproc',
+        },
+      });
+
+      await waitFor(() => {
+        const errorAlert = screen.getByTestId('saveSuccess');
+        expect(errorAlert.textContent).toEqual(
+          expect.stringContaining('Proctored exam settings saved successfully.'),
+        );
+        expect(document.activeElement).toEqual(errorAlert);
+      });
+    });
+
+    it('Makes studio API call generated error', async () => {
+      axiosMock.onPost(
+        StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
+      ).reply(500);
+
+      await act(async () => render(renderComponent(<ProctoredExamSettings {...defaultProps} />)));
+      const submitButton = screen.getByTestId('submissionButton');
+      fireEvent.click(submitButton);
+      expect(axiosMock.history.post.length).toBe(1);
+      await waitFor(() => {
+        const errorAlert = screen.getByTestId('saveError');
+        expect(errorAlert.textContent).toEqual(
+          expect.stringContaining('We encountered a technical error while trying to save proctored exam settings'),
+        );
+        expect(document.activeElement).toEqual(errorAlert);
+      });
+    });
+
+    it('Makes exams API call generated error', async () => {
+      axiosMock.onPatch(
+        `${ExamsApiService.getExamsBaseUrl()}/api/v1/configs/course_id/${defaultProps.courseId}`,
+      ).reply(500, 'error');
+
+      await act(async () => render(renderComponent(<ProctoredExamSettings {...defaultProps} />)));
+      const submitButton = screen.getByTestId('submissionButton');
+      fireEvent.click(submitButton);
+      expect(axiosMock.history.post.length).toBe(1);
+      await waitFor(() => {
+        const errorAlert = screen.getByTestId('saveError');
+        expect(errorAlert.textContent).toEqual(
+          expect.stringContaining('We encountered a technical error while trying to save proctored exam settings'),
+        );
+        expect(document.activeElement).toEqual(errorAlert);
+      });
+    });
+
+    test('Exams API permission error', async () => {
+      axiosMock.onPatch(
+        `${ExamsApiService.getExamsBaseUrl()}/api/v1/configs/course_id/${defaultProps.courseId}`,
+      ).reply(403, 'error');
+
+      await act(async () => render(renderComponent(<ProctoredExamSettings {...defaultProps} />)));
+      const submitButton = screen.getByTestId('submissionButton');
+      fireEvent.click(submitButton);
+      expect(axiosMock.history.post.length).toBe(1);
+      await waitFor(() => {
+        const errorAlert = screen.getByTestId('saveError');
+        expect(errorAlert.textContent).toEqual(
+          expect.stringContaining('You do not have permission to edit proctored exam settings for this course'),
+        );
+        expect(document.activeElement).toEqual(errorAlert);
+      });
+    });
+
+    it('Manages focus correctly after different save statuses', async () => {
+      // first make a call that will cause a save error
+      axiosMock.onPost(
+        StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
+      ).reply(500);
+
+      await act(async () => render(renderComponent(<ProctoredExamSettings {...defaultProps} />)));
+      const submitButton = screen.getByTestId('submissionButton');
+      fireEvent.click(submitButton);
+      expect(axiosMock.history.post.length).toBe(1);
+      await waitFor(() => {
+        const errorAlert = screen.getByTestId('saveError');
+        expect(errorAlert.textContent).toEqual(
+          expect.stringContaining('We encountered a technical error while trying to save proctored exam settings'),
+        );
+        expect(document.activeElement).toEqual(errorAlert);
+      });
+
+      // now make a call that will allow for a successful save
+      axiosMock.onPost(
+        StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
+      ).reply(200, 'success');
+      fireEvent.click(submitButton);
+
+      expect(axiosMock.history.post.length).toBe(2);
+      await waitFor(() => {
+        const successAlert = screen.getByTestId('saveSuccess');
+        expect(successAlert.textContent).toEqual(
+          expect.stringContaining('Proctored exam settings saved successfully.'),
+        );
+        expect(document.activeElement).toEqual(successAlert);
+      });
+    });
+  });
+});

plugins/course-apps/proctoring/messages.ts

@@ -1,6 +1,11 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
+  'authoring.proctoring.alert.forbidden': {
+    id: 'authoring.proctoring.alert.forbidden',
+    defaultMessage: 'You do not have permission to edit proctored exam settings for this course. If you are a course team member and this problem persists, please go to the {support_link} for help.',
+    description: 'Alert message for proctoring settings permission error.',
+  },
   'authoring.proctoring.no': {
     id: 'authoring.proctoring.no',
     defaultMessage: 'No',
@@ -53,7 +58,7 @@ const messages = defineMessages({
   },
   'authoring.proctoring.escalationemail.label': {
     id: 'authoring.proctoring.escalationemail.label',
-    defaultMessage: 'Proctortrack escalation email',
+    defaultMessage: 'Escalation email',
     description: 'Label for escalation email text field',
   },
   'authoring.proctoring.escalationemail.help': {
@@ -63,12 +68,12 @@ const messages = defineMessages({
   },
   'authoring.proctoring.escalationemail.error.blank': {
     id: 'authoring.proctoring.escalationemail.error.blank',
-    defaultMessage: 'The Proctortrack Escalation Email field cannot be empty if proctortrack is the selected provider.',
+    defaultMessage: 'The Escalation Email field cannot be empty if {proctoringProviderName} is the selected provider.',
     description: 'Error message for missing required email field.',
   },
   'authoring.proctoring.escalationemail.error.invalid': {
     id: 'authoring.proctoring.escalationemail.error.invalid',
-    defaultMessage: 'The Proctortrack Escalation Email field is in the wrong format and is not valid.',
+    defaultMessage: 'The Escalation Email field is in the wrong format and is not valid.',
     description: 'Error message for a invalid email format.',
   },
   'authoring.proctoring.allowoptout.label': {
@@ -76,11 +81,6 @@ const messages = defineMessages({
     defaultMessage: 'Allow learners to opt out of proctoring on proctored exams',
     description: 'Label for radio selection allowing proctored exam opt out',
   },
-  'authoring.proctoring.createzendesk.label': {
-    id: 'authoring.proctoring.createzendesk.label',
-    defaultMessage: 'Create Zendesk tickets for suspicious attempts',
-    description: 'Label for Zendesk ticket creation radio select.',
-  },
   'authoring.proctoring.error.single': {
     id: 'authoring.proctoring.error.single',
     defaultMessage: 'There is 1 error in this form.',

plugins/course-apps/proctoring/package.json

@@ -0,0 +1,20 @@
+{
+    "name": "@openedx-plugins/course-app-proctoring",
+    "version": "0.1.0",
+    "description": "Proctoring configuration for courses using it",
+    "peerDependencies": {
+        "@edx/frontend-app-authoring": "*",
+        "@edx/frontend-platform": "*",
+        "@openedx/paragon": "*",
+        "classnames": "*",
+        "email-validator": "*",
+        "react": "*",
+        "prop-types": "*",
+        "moment": "*"
+    },
+    "peerDependenciesMeta": {
+        "@edx/frontend-app-authoring": {
+            "optional": true
+        }
+    }
+}

plugins/course-apps/progress/Settings.jsx

@@ -1,19 +1,20 @@
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
 import React from 'react';
 import * as Yup from 'yup';
 import { getConfig } from '@edx/frontend-platform';
-import FormSwitchGroup from '../../generic/FormSwitchGroup';
-import { useAppSetting } from '../../utils';
-import AppSettingsModal from '../app-settings-modal/AppSettingsModal';
+import FormSwitchGroup from 'CourseAuthoring/generic/FormSwitchGroup';
+import { useAppSetting } from 'CourseAuthoring/utils';
+import AppSettingsModal from 'CourseAuthoring/pages-and-resources/app-settings-modal/AppSettingsModal';
 import messages from './messages';
 
-function ProgressSettings({ intl, onClose }) {
+const ProgressSettings = ({ onClose }) => {
+  const intl = useIntl();
   const [disableProgressGraph, saveSetting] = useAppSetting('disableProgressGraph');
-  const showProgressGraphSetting = getConfig().ENABLE_PROGRESS_GRAPH_SETTINGS.toLowerCase() === 'true';
+  const showProgressGraphSetting = getConfig().ENABLE_PROGRESS_GRAPH_SETTINGS.toString().toLowerCase() === 'true';
 
-  const handleSettingsSave = (values) => {
-    if (showProgressGraphSetting) { saveSetting(!values.enableProgressGraph); }
+  const handleSettingsSave = async (values) => {
+    if (showProgressGraphSetting) { await saveSetting(!values.enableProgressGraph); }
   };
 
   return (
@@ -31,25 +32,24 @@ function ProgressSettings({ intl, onClose }) {
       {
         ({ handleChange, handleBlur, values }) => (
           showProgressGraphSetting && (
-          <FormSwitchGroup
-            id="enable-progress-graph"
-            name="enableProgressGraph"
-            label={intl.formatMessage(messages.enableGraphLabel)}
-            helpText={intl.formatMessage(messages.enableGraphHelp)}
-            onChange={handleChange}
-            onBlur={handleBlur}
-            checked={values.enableProgressGraph}
-          />
+            <FormSwitchGroup
+              id="enable-progress-graph"
+              name="enableProgressGraph"
+              label={intl.formatMessage(messages.enableGraphLabel)}
+              helpText={intl.formatMessage(messages.enableGraphHelp)}
+              onChange={handleChange}
+              onBlur={handleBlur}
+              checked={values.enableProgressGraph}
+            />
           )
         )
       }
     </AppSettingsModal>
   );
-}
+};
 
 ProgressSettings.propTypes = {
-  intl: intlShape.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 
-export default injectIntl(ProgressSettings);
+export default ProgressSettings;

plugins/course-apps/progress/package.json

@@ -0,0 +1,18 @@
+{
+    "name": "@openedx-plugins/course-app-progress",
+    "version": "0.1.0",
+    "description": "Progress configuration for courses using it",
+    "peerDependencies": {
+        "@edx/frontend-app-authoring": "*",
+        "@edx/frontend-platform": "*",
+        "@openedx/paragon": "*",
+        "prop-types": "*",
+        "react": "*",
+        "yup": "*"
+    },
+    "peerDependenciesMeta": {
+        "@edx/frontend-app-authoring": {
+            "optional": true
+        }
+    }
+}

plugins/course-apps/teams/GroupEditor.jsx

@@ -1,12 +1,13 @@
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Button, Form, TransitionReplace } from '@edx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button, Form, TransitionReplace } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
-import { GroupTypes, TeamSizes } from '../../data/constants';
+import { GroupTypes, TeamSizes } from 'CourseAuthoring/data/constants';
 
-import CollapsableEditor from '../../generic/CollapsableEditor';
-import FormikControl from '../../generic/FormikControl';
+import CollapsableEditor from 'CourseAuthoring/generic/CollapsableEditor';
+import FormikControl from 'CourseAuthoring/generic/FormikControl';
 import messages from './messages';
+import { isGroupTypeEnabled } from './utils';
 
 // Maps a team type to its corresponding intl message
 const TeamTypeNameMessage = {
@@ -14,6 +15,10 @@ const TeamTypeNameMessage = {
     label: messages.groupTypeOpen,
     description: messages.groupTypeOpenDescription,
   },
+  [GroupTypes.OPEN_MANAGED]: {
+    label: messages.groupTypeOpenManaged,
+    description: messages.groupTypeOpenManagedDescription,
+  },
   [GroupTypes.PUBLIC_MANAGED]: {
     label: messages.groupTypePublicManaged,
     description: messages.groupTypePublicManagedDescription,
@@ -24,9 +29,10 @@ const TeamTypeNameMessage = {
   },
 };
 
-function GroupEditor({
-  intl, group, onDelete, onChange, onBlur, fieldNameCommonBase, errors,
-}) {
+const GroupEditor = ({
+  group, onDelete, onChange, onBlur, fieldNameCommonBase, errors,
+}) => {
+  const intl = useIntl();
   const [isDeleting, setDeleting] = useState(false);
   const [isOpen, setOpen] = useState(group.id === null);
   const initiateDeletion = () => setDeleting(true);
@@ -105,7 +111,7 @@ function GroupEditor({
                 onChange={onChange}
                 onBlur={onBlur}
               >
-                {Object.values(GroupTypes).map(groupType => (
+                {Object.values(GroupTypes).map(groupType => isGroupTypeEnabled(groupType) && (
                   <Form.Radio
                     key={groupType}
                     value={groupType}
@@ -133,7 +139,7 @@ function GroupEditor({
         )}
     </TransitionReplace>
   );
-}
+};
 
 export const groupShape = PropTypes.shape({
   id: PropTypes.string,
@@ -144,7 +150,6 @@ export const groupShape = PropTypes.shape({
 });
 
 GroupEditor.propTypes = {
-  intl: intlShape.isRequired,
   fieldNameCommonBase: PropTypes.string.isRequired,
   errors: PropTypes.shape({
     name: PropTypes.string,
@@ -165,4 +170,4 @@ GroupEditor.defaultProps = {
   },
 };
 
-export default injectIntl(GroupEditor);
+export default GroupEditor;

plugins/course-apps/teams/GroupEditor.test.jsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { useFormikContext } from 'formik';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import GroupEditor from './GroupEditor';
+
+import messages from './messages';
+
+jest.mock('formik', () => ({
+  ...jest.requireActual('formik'),
+  useFormikContext: jest.fn(),
+}));
+
+describe('GroupEditor', () => {
+  const mockIntl = { formatMessage: jest.fn() };
+
+  const mockGroup = {
+    id: '1',
+    name: 'Test Group',
+    description: 'Test Group Description',
+    type: 'open',
+    maxTeamSize: 5,
+  };
+
+  const mockProps = {
+    intl: mockIntl,
+    fieldNameCommonBase: 'test',
+    group: mockGroup,
+    onDelete: jest.fn(),
+    onChange: jest.fn(),
+    onBlur: jest.fn(),
+    errors: {},
+  };
+
+  const renderComponent = (overrideProps = {}) => render(
+    <IntlProvider locale="en" messages={{}}>
+      <GroupEditor {...mockProps} {...overrideProps} />
+    </IntlProvider>,
+  );
+
+  beforeEach(() => {
+    useFormikContext.mockReturnValue({
+      touched: {},
+      errors: {},
+      handleChange: jest.fn(),
+      handleBlur: jest.fn(),
+      setFieldError: jest.fn(),
+    });
+
+    jest.clearAllMocks();
+  });
+
+  test('renders without errors', () => {
+    renderComponent();
+  });
+
+  test('renders the group name and description', () => {
+    const { getByText } = renderComponent();
+    expect(getByText('Test Group')).toBeInTheDocument();
+    expect(getByText('Test Group Description')).toBeInTheDocument();
+  });
+
+  describe('group types messages', () => {
+    test('group type open message', () => {
+      const { getByLabelText, getByText } = renderComponent();
+      const expandButton = getByLabelText('Expand group editor');
+      expect(expandButton).toBeInTheDocument();
+      fireEvent.click(expandButton);
+      expect(getByText(messages.groupTypeOpenDescription.defaultMessage)).toBeInTheDocument();
+    });
+
+    test('group type public_managed message', () => {
+      const publicManagedGroupMock = {
+        id: '2',
+        name: 'Test Group',
+        description: 'Test Group Description',
+        type: 'public_managed',
+        maxTeamSize: 5,
+      };
+      const { getByLabelText, getByText } = renderComponent({ group: publicManagedGroupMock });
+      const expandButton = getByLabelText('Expand group editor');
+      expect(expandButton).toBeInTheDocument();
+      fireEvent.click(expandButton);
+      expect(getByText(messages.groupTypePublicManagedDescription.defaultMessage)).toBeInTheDocument();
+    });
+
+    test('group type private_managed message', () => {
+      const privateManagedGroupMock = {
+        id: '3',
+        name: 'Test Group',
+        description: 'Test Group Description',
+        type: 'private_managed',
+        maxTeamSize: 5,
+      };
+      const { getByLabelText, getByText } = renderComponent({ group: privateManagedGroupMock });
+      const expandButton = getByLabelText('Expand group editor');
+      expect(expandButton).toBeInTheDocument();
+      fireEvent.click(expandButton);
+      expect(getByText(messages.groupTypePrivateManagedDescription.defaultMessage)).toBeInTheDocument();
+    });
+  });
+});

plugins/course-apps/teams/Settings.jsx

@@ -1,31 +1,32 @@
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Button, Form } from '@edx/paragon';
-import { Add } from '@edx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button, Form } from '@openedx/paragon';
+import { Add } from '@openedx/paragon/icons';
 
 import { FieldArray } from 'formik';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { v4 as uuid } from 'uuid';
 import * as Yup from 'yup';
-import { GroupTypes, TeamSizes } from '../../data/constants';
-import FormikControl from '../../generic/FormikControl';
-import { setupYupExtensions, useAppSetting } from '../../utils';
-import AppSettingsModal from '../app-settings-modal/AppSettingsModal';
+import { GroupTypes, TeamSizes } from 'CourseAuthoring/data/constants';
+import FormikControl from 'CourseAuthoring/generic/FormikControl';
+import { setupYupExtensions, useAppSetting } from 'CourseAuthoring/utils';
+import AppSettingsModal from 'CourseAuthoring/pages-and-resources/app-settings-modal/AppSettingsModal';
 import GroupEditor from './GroupEditor';
 import messages from './messages';
 
 setupYupExtensions();
 
-function TeamSettings({
-  intl,
+const TeamSettings = ({
   onClose,
-}) {
+}) => {
+  const intl = useIntl();
   const [teamsConfiguration, saveSettings] = useAppSetting('teamsConfiguration');
   const blankNewGroup = {
     name: '',
     description: '',
     type: GroupTypes.OPEN,
     maxTeamSize: null,
+    userPartitionId: null,
     id: null,
     key: uuid(),
   };
@@ -38,6 +39,7 @@ function TeamSettings({
       type: group.type,
       description: group.description,
       max_team_size: group.maxTeamSize,
+      user_partition_id: group.userPartitionId,
     }));
     return saveSettings({
       team_sets: groups,
@@ -105,6 +107,7 @@ function TeamSettings({
         )
           .when('enabled', {
             is: true,
+            // oxlint-disable-next-line unicorn/no-thenable
             then: Yup.array().min(1),
           })
           .default([])
@@ -161,11 +164,10 @@ function TeamSettings({
       }
     </AppSettingsModal>
   );
-}
+};
 
 TeamSettings.propTypes = {
-  intl: intlShape.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 
-export default injectIntl(TeamSettings);
+export default TeamSettings;

plugins/course-apps/teams/messages.ts

@@ -93,6 +93,14 @@ const messages = defineMessages({
     id: 'authoring.pagesAndResources.teams.group.types.open',
     defaultMessage: 'Open',
   },
+  groupTypeOpenManaged: {
+    id: 'authoring.pagesAndResources.teams.group.types.open_managed',
+    defaultMessage: 'Open managed',
+  },
+  groupTypeOpenManagedDescription: {
+    id: 'authoring.pagesAndResources.teams.group.types.open_managed.description',
+    defaultMessage: 'Only course staff can create teams. Learners can see, join and leave teams.',
+  },
   groupTypeOpenDescription: {
     id: 'authoring.pagesAndResources.teams.group.types.open.description',
     defaultMessage: 'Learners can create, join, leave, and see other teams',

plugins/course-apps/teams/package.json

@@ -0,0 +1,20 @@
+{
+    "name": "@openedx-plugins/course-app-teams",
+    "version": "0.1.0",
+    "description": "Teams configuration for courses using it",
+    "peerDependencies": {
+        "@edx/frontend-app-authoring": "*",
+        "@edx/frontend-platform": "*",
+        "@openedx/paragon": "*",
+        "formik": "*",
+        "prop-types": "*",
+        "react": "*",
+        "uuid": "*",
+        "yup": "*"
+    },
+    "peerDependenciesMeta": {
+        "@edx/frontend-app-authoring": {
+            "optional": true
+        }
+    }
+}

plugins/course-apps/teams/utils.js

@@ -0,0 +1,22 @@
+import { getConfig } from '@edx/frontend-platform';
+
+import { GroupTypes } from 'CourseAuthoring/data/constants';
+
+/**
+ * Check if a group type is enabled by the current configuration.
+ * This is a temporary workaround to disable the OPEN MANAGED team type until it is fully adopted.
+ * For more information, see: https://openedx.atlassian.net/wiki/spaces/COMM/pages/3885760525/Open+Managed+Group+Type
+ * @param {string} groupType - the group type to check
+ * @returns {boolean} - true if the group type is enabled
+ */
+export const isGroupTypeEnabled = (groupType) => {
+  const enabledTypesByDefault = [
+    GroupTypes.OPEN,
+    GroupTypes.PUBLIC_MANAGED,
+    GroupTypes.PRIVATE_MANAGED,
+  ];
+  const enabledTypesByConfig = {
+    [GroupTypes.OPEN_MANAGED]: getConfig().ENABLE_OPEN_MANAGED_TEAM_TYPE,
+  };
+  return enabledTypesByDefault.includes(groupType) || enabledTypesByConfig[groupType] || false;
+};

plugins/course-apps/teams/utils.test.js

@@ -0,0 +1,39 @@
+import { getConfig } from '@edx/frontend-platform';
+import { GroupTypes } from 'CourseAuthoring/data/constants';
+import { isGroupTypeEnabled } from './utils';
+
+jest.mock('@edx/frontend-platform', () => ({ getConfig: jest.fn() }));
+
+describe('teams utils', () => {
+  describe('isGroupTypeEnabled', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    test('returns true if the group type is enabled', () => {
+      getConfig.mockReturnValue({ ENABLE_OPEN_MANAGED_TEAM_TYPE: false });
+      expect(isGroupTypeEnabled(GroupTypes.OPEN)).toBe(true);
+      expect(isGroupTypeEnabled(GroupTypes.PUBLIC_MANAGED)).toBe(true);
+      expect(isGroupTypeEnabled(GroupTypes.PRIVATE_MANAGED)).toBe(true);
+    });
+    test('returns false if the OPEN_MANAGED group is not enabled', () => {
+      getConfig.mockReturnValue({ ENABLE_OPEN_MANAGED_TEAM_TYPE: false });
+      expect(isGroupTypeEnabled(GroupTypes.OPEN_MANAGED)).toBe(false);
+    });
+
+    test('returns true if the OPEN_MANAGED group is enabled', () => {
+      getConfig.mockReturnValue({ ENABLE_OPEN_MANAGED_TEAM_TYPE: true });
+      expect(isGroupTypeEnabled(GroupTypes.OPEN_MANAGED)).toBe(true);
+    });
+
+    test('returns false if the group is invalid', () => {
+      getConfig.mockReturnValue({ ENABLE_OPEN_MANAGED_TEAM_TYPE: true });
+      expect(isGroupTypeEnabled('FOO')).toBe(false);
+    });
+
+    test('returns false if the group is null', () => {
+      getConfig.mockReturnValue({ ENABLE_OPEN_MANAGED_TEAM_TYPE: true });
+      expect(isGroupTypeEnabled(null)).toBe(false);
+    });
+  });
+});

plugins/course-apps/wiki/Settings.jsx

@@ -1,14 +1,15 @@
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
 import React from 'react';
 import * as Yup from 'yup';
 
-import FormSwitchGroup from '../../generic/FormSwitchGroup';
-import { useAppSetting } from '../../utils';
-import AppSettingsModal from '../app-settings-modal/AppSettingsModal';
+import FormSwitchGroup from 'CourseAuthoring/generic/FormSwitchGroup';
+import { useAppSetting } from 'CourseAuthoring/utils';
+import AppSettingsModal from 'CourseAuthoring/pages-and-resources/app-settings-modal/AppSettingsModal';
 import messages from './messages';
 
-function WikiSettings({ intl, onClose }) {
+const WikiSettings = ({ onClose }) => {
+  const intl = useIntl();
   const [enablePublicWiki, saveSetting] = useAppSetting('allowPublicWikiAccess');
   const handleSettingsSave = (values) => saveSetting(values.enablePublicWiki);
 
@@ -32,18 +33,17 @@ function WikiSettings({ intl, onClose }) {
             label={intl.formatMessage(messages.enablePublicWikiLabel)}
             helpText={intl.formatMessage(messages.enablePublicWikiHelp)}
             onChange={handleChange}
-            onBlue={handleBlur}
+            onBlur={handleBlur}
             checked={values.enablePublicWiki}
           />
         )
       }
     </AppSettingsModal>
   );
-}
+};
 
 WikiSettings.propTypes = {
-  intl: intlShape.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 
-export default injectIntl(WikiSettings);
+export default WikiSettings;

plugins/course-apps/wiki/messages.ts

@@ -26,8 +26,8 @@ const messages = defineMessages({
   },
   enablePublicWikiHelp: {
     id: 'course-authoring.pages-resources.wiki.enable-public-wiki.help',
-    defaultMessage: `If enabled, edX users can view the course wiki even when
-    they're not enrolled in the course.`,
+    defaultMessage: `If enabled, any registered user can view the course wiki
+    even if they are not enrolled in the course`,
   },
 });
 

plugins/course-apps/wiki/package.json

@@ -0,0 +1,18 @@
+{
+    "name": "@openedx-plugins/course-app-wiki",
+    "version": "0.1.0",
+    "description": "Wiki configuration for courses using it",
+    "peerDependencies": {
+        "@edx/frontend-app-authoring": "*",
+        "@edx/frontend-platform": "*",
+        "@openedx/paragon": "*",
+        "prop-types": "*",
+        "react": "*",
+        "yup": "*"
+    },
+    "peerDependenciesMeta": {
+        "@edx/frontend-app-authoring": {
+            "optional": true
+        }
+    }
+}

plugins/course-apps/xpert_unit_summary/README.rst

@@ -0,0 +1,4 @@
+Xpert Unit Summaries Configuration Plugin
+=========================================
+
+Install this using ``npm install plugins/course-apps/xpert_unit_summary/ --no-save``.

plugins/course-apps/xpert_unit_summary/Settings.jsx

@@ -0,0 +1,41 @@
+import React, { useCallback, useContext, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { PagesAndResourcesContext } from 'CourseAuthoring/pages-and-resources/PagesAndResourcesProvider';
+import { useNavigate } from 'react-router-dom';
+
+import SettingsModal from './settings-modal/SettingsModal';
+import messages from './messages';
+
+import { fetchXpertSettings } from './data/thunks';
+
+const XpertUnitSummarySettings = () => {
+  const intl = useIntl();
+  const { path: pagesAndResourcesPath, courseId } = useContext(PagesAndResourcesContext);
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    dispatch(fetchXpertSettings(courseId));
+  }, [courseId]);
+
+  const handleClose = useCallback(() => {
+    navigate(pagesAndResourcesPath);
+  }, [pagesAndResourcesPath]);
+
+  return (
+    <SettingsModal
+      appId="xpert-unit-summary"
+      title={intl.formatMessage(messages.heading)}
+      enableAppHelp={intl.formatMessage(messages.enableXpertUnitSummaryHelp)}
+      helpPrivacyText={intl.formatMessage(messages.enableXpertUnitSummaryHelpPrivacyLink)}
+      enableAppLabel={intl.formatMessage(messages.enableXpertUnitSummaryLabel)}
+      learnMoreText={intl.formatMessage(messages.enableXpertUnitSummaryLink)}
+      allUnitsEnabledText={intl.formatMessage(messages.allUnitsEnabledByDefault)}
+      noUnitsEnabledText={intl.formatMessage(messages.noUnitsEnabledByDefault)}
+      onClose={handleClose}
+    />
+  );
+};
+
+export default XpertUnitSummarySettings;

plugins/course-apps/xpert_unit_summary/Settings.test.jsx

@@ -0,0 +1,282 @@
+import ReactDOM from 'react-dom';
+import React from 'react';
+import { MemoryRouter, Routes, Route } from 'react-router-dom';
+import {
+  getConfig, initializeMockApp, setConfig,
+} from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { AppProvider, PageWrap } from '@edx/frontend-platform/react';
+import {
+  findByTestId, queryByTestId, render, waitFor, getByText, fireEvent,
+} from '@testing-library/react';
+import MockAdapter from 'axios-mock-adapter';
+import PagesAndResourcesProvider from 'CourseAuthoring/pages-and-resources/PagesAndResourcesProvider';
+import initializeStore from 'CourseAuthoring/store';
+import { executeThunk } from 'CourseAuthoring/utils';
+
+import XpertUnitSummarySettings from './Settings';
+import * as API from './data/api';
+import * as Thunks from './data/thunks';
+
+const courseId = 'course-v1:edX+TestX+Test_Course';
+let axiosMock;
+let store;
+let container;
+
+// Modal creates a portal. Overriding ReactDOM.createPortal allows portals to be tested in jest.
+ReactDOM.createPortal = jest.fn(node => node);
+
+function renderComponent() {
+  const wrapper = render(
+    <AppProvider store={store} wrapWithRouter={false}>
+      <PagesAndResourcesProvider courseId={courseId}>
+        <MemoryRouter initialEntries={['/xpert-unit-summary/settings']}>
+          <Routes>
+            <Route
+              path="/xpert-unit-summary/settings"
+              element={<PageWrap><XpertUnitSummarySettings courseId={courseId} /></PageWrap>}
+            />
+            <Route
+              path="/"
+              element={<PageWrap><div /></PageWrap>}
+            />
+          </Routes>
+        </MemoryRouter>
+      </PagesAndResourcesProvider>
+    </AppProvider>,
+  );
+  container = wrapper.container;
+}
+
+function generateCourseLevelAPIResponse({
+  success, enabled,
+}) {
+  return {
+    response: {
+      success, enabled,
+    },
+  };
+}
+
+describe('XpertUnitSummarySettings', () => {
+  beforeEach(() => {
+    setConfig({
+      ...getConfig(),
+      BASE_URL: 'http://test.edx.org',
+      LMS_BASE_URL: 'http://lmstest.edx.org',
+      CMS_BASE_URL: 'http://cmstest.edx.org',
+      LOGIN_URL: 'http://support.edx.org/login',
+      LOGOUT_URL: 'http://support.edx.org/logout',
+      REFRESH_ACCESS_TOKEN_ENDPOINT: 'http://support.edx.org/access_token',
+      ACCESS_TOKEN_COOKIE_NAME: 'cookie',
+      CSRF_TOKEN_API_PATH: '/',
+      SUPPORT_URL: 'http://support.edx.org',
+    });
+
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore({
+      models: {
+        courseDetails: {
+          [courseId]: {
+            start: Date(),
+          },
+        },
+      },
+    });
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+
+  describe('with successful network connections', () => {
+    beforeEach(() => {
+      axiosMock.onGet(API.getXpertSettingsUrl(courseId))
+        .reply(200, generateCourseLevelAPIResponse({
+          success: true,
+          enabled: true,
+        }));
+
+      renderComponent();
+    });
+
+    test('Shows switch on if enabled from backend', async () => {
+      const enableBadge = await findByTestId(container, 'enable-badge');
+      expect(container.querySelector('#enable-xpert-unit-summary-toggle').checked).toBeTruthy();
+      expect(enableBadge).toBeTruthy();
+    });
+
+    test('Shows switch on if disabled from backend', async () => {
+      axiosMock.onGet(API.getXpertSettingsUrl(courseId))
+        .reply(200, generateCourseLevelAPIResponse({
+          success: true,
+          enabled: false,
+        }));
+
+      renderComponent();
+      await waitFor(() => expect(container.querySelector('#enable-xpert-unit-summary-toggle')).toBeTruthy());
+      expect(container.querySelector('#enable-xpert-unit-summary-toggle').checked).toBeTruthy();
+      expect(queryByTestId(container, 'enable-badge')).toBeTruthy();
+    });
+
+    test('Shows enable radio selected if enabled from backend', async () => {
+      await waitFor(() => expect(container.querySelector('#enable-xpert-unit-summary-toggle')).toBeTruthy());
+      expect(queryByTestId(container, 'enable-radio').checked).toBeTruthy();
+    });
+
+    test('Shows disable radio selected if enabled from backend', async () => {
+      axiosMock.onGet(API.getXpertSettingsUrl(courseId))
+        .reply(200, generateCourseLevelAPIResponse({
+          success: true,
+          enabled: false,
+        }));
+
+      renderComponent();
+      await waitFor(() => expect(container.querySelector('#enable-xpert-unit-summary-toggle')).toBeTruthy());
+      expect(queryByTestId(container, 'disable-radio').checked).toBeTruthy();
+    });
+  });
+
+  describe('first time course configuration', () => {
+    beforeEach(() => {
+      axiosMock.onGet(API.getXpertSettingsUrl(courseId))
+        .reply(400, generateCourseLevelAPIResponse({
+          success: false,
+          enabled: undefined,
+        }));
+
+      renderComponent();
+    });
+
+    test('Does not show as enabled if configuration does not exist', async () => {
+      await waitFor(() => expect(container.querySelector('#enable-xpert-unit-summary-toggle')).toBeTruthy());
+      expect(container.querySelector('#enable-xpert-unit-summary-toggle').checked).not.toBeTruthy();
+      expect(queryByTestId(container, 'enable-badge')).not.toBeTruthy();
+    });
+  });
+
+  describe('saving configuration changes', () => {
+    beforeEach(() => {
+      axiosMock.onGet(API.getXpertSettingsUrl(courseId))
+        .reply(200, generateCourseLevelAPIResponse({
+          success: true,
+          enabled: false,
+        }));
+
+      axiosMock.onPost(API.getXpertSettingsUrl(courseId))
+        .reply(200, generateCourseLevelAPIResponse({
+          success: true,
+          enabled: true,
+        }));
+
+      renderComponent();
+    });
+
+    test('Saving configuration changes', async () => {
+      jest.spyOn(API, 'postXpertSettings');
+
+      await waitFor(() => expect(container.querySelector('#enable-xpert-unit-summary-toggle')).toBeTruthy());
+      expect(queryByTestId(container, 'disable-radio').checked).toBeTruthy();
+      fireEvent.click(queryByTestId(container, 'enable-radio'));
+      fireEvent.click(getByText(container, 'Save'));
+      await waitFor(() => expect(container.querySelector('#enable-xpert-unit-summary-toggle')).toBeTruthy());
+      expect(API.postXpertSettings).toBeCalled();
+    });
+  });
+
+  describe('testing configurable gating', () => {
+    beforeEach(async () => {
+      axiosMock.onGet(API.getXpertConfigurationStatusUrl(courseId))
+        .reply(200, generateCourseLevelAPIResponse({
+          success: true,
+          enabled: true,
+        }));
+      jest.spyOn(API, 'getXpertPluginConfigurable');
+      await executeThunk(Thunks.fetchXpertPluginConfigurable(courseId), store.dispatch);
+      renderComponent();
+    });
+
+    test('getting Xpert Plugin configurable status', () => {
+      expect(API.getXpertPluginConfigurable).toBeCalled();
+    });
+  });
+
+  describe('removing course configuration', () => {
+    beforeEach(() => {
+      axiosMock.onGet(API.getXpertSettingsUrl(courseId))
+        .reply(200, generateCourseLevelAPIResponse({
+          success: true,
+          enabled: true,
+        }));
+
+      axiosMock.onDelete(API.getXpertSettingsUrl(courseId))
+        .reply(200, generateCourseLevelAPIResponse({
+          success: true,
+          enabled: undefined,
+        }));
+
+      renderComponent();
+    });
+
+    test('Deleting course configuration', async () => {
+      jest.spyOn(API, 'deleteXpertSettings');
+
+      await waitFor(() => expect(container.querySelector('#enable-xpert-unit-summary-toggle')).toBeTruthy());
+      fireEvent.click(container.querySelector('#enable-xpert-unit-summary-toggle'));
+      fireEvent.click(getByText(container, 'Save'));
+      await waitFor(() => expect(container.querySelector('#enable-xpert-unit-summary-toggle')).toBeTruthy());
+      expect(API.deleteXpertSettings).toBeCalled();
+    });
+  });
+
+  describe('resetting course units', () => {
+    test('reset all units to be enabled', async () => {
+      axiosMock.onGet(API.getXpertSettingsUrl(courseId))
+        .reply(200, generateCourseLevelAPIResponse({
+          success: true,
+          enabled: true,
+        }));
+
+      axiosMock.onPost(API.getXpertSettingsUrl(courseId))
+        .reply(200, generateCourseLevelAPIResponse({
+          success: true,
+          enabled: true,
+        }));
+
+      renderComponent();
+
+      jest.spyOn(API, 'postXpertSettings');
+
+      await waitFor(() => expect(container.querySelector('#enable-xpert-unit-summary-toggle')).toBeTruthy());
+      fireEvent.click(queryByTestId(container, 'reset-units'));
+      expect(API.postXpertSettings).toBeCalledWith(courseId, { reset: true, enabled: true });
+    });
+
+    test('reset all units to be disabled', async () => {
+      axiosMock.onGet(API.getXpertSettingsUrl(courseId))
+        .reply(200, generateCourseLevelAPIResponse({
+          success: true,
+          enabled: false,
+        }));
+
+      axiosMock.onPost(API.getXpertSettingsUrl(courseId))
+        .reply(200, generateCourseLevelAPIResponse({
+          success: true,
+          enabled: false,
+        }));
+
+      renderComponent();
+
+      jest.spyOn(API, 'postXpertSettings');
+
+      await waitFor(() => expect(container.querySelector('#enable-xpert-unit-summary-toggle')).toBeTruthy());
+      fireEvent.click(queryByTestId(container, 'reset-units'));
+      expect(API.postXpertSettings).toBeCalledWith(courseId, { reset: true, enabled: false });
+    });
+  });
+});

plugins/course-apps/xpert_unit_summary/appInfo.js

@@ -0,0 +1,13 @@
+export default {
+  id: 'xpert-unit-summary',
+  enabled: false,
+  name: 'Xpert unit summaries',
+  description: 'Use generative AI to summarize course content and reinforce learning.',
+  allowedOperations: {
+    enable: true,
+    configure: true,
+  },
+  documentationLinks: {
+    learnMoreConfiguration: 'https://openai.com/',
+  },
+};

plugins/course-apps/xpert_unit_summary/data/api.js

@@ -0,0 +1,41 @@
+import { getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+export function getXpertSettingsUrl(courseId) {
+  return `${getConfig().STUDIO_BASE_URL}/ai_aside/v1/${courseId}`;
+}
+
+export function getXpertConfigurationStatusUrl(courseId) {
+  return `${getConfig().STUDIO_BASE_URL}/ai_aside/v1/${courseId}/configurable`;
+}
+
+export async function getXpertSettings(courseId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(getXpertSettingsUrl(courseId));
+
+  return data;
+}
+
+export async function postXpertSettings(courseId, state) {
+  const { data } = await getAuthenticatedHttpClient()
+    .post(getXpertSettingsUrl(courseId), {
+      enabled: state.enabled,
+      reset: state.reset,
+    });
+
+  return data;
+}
+
+export async function getXpertPluginConfigurable(courseId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(getXpertConfigurationStatusUrl(courseId));
+
+  return data;
+}
+
+export async function deleteXpertSettings(courseId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .delete(getXpertSettingsUrl(courseId));
+
+  return data;
+}

plugins/course-apps/xpert_unit_summary/data/thunks.js

@@ -0,0 +1,113 @@
+import { updateSavingStatus, updateLoadingStatus, updateResetStatus } from 'CourseAuthoring/pages-and-resources/data/slice';
+import { RequestStatus } from 'CourseAuthoring/data/constants';
+import { addModel, updateModel } from 'CourseAuthoring/generic/model-store';
+
+import {
+  getXpertSettings, postXpertSettings, getXpertPluginConfigurable, deleteXpertSettings,
+} from './api';
+
+export function updateXpertSettings(courseId, state) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.IN_PROGRESS }));
+    try {
+      const { response } = await postXpertSettings(courseId, state);
+      const { success } = response;
+      if (success) {
+        dispatch(updateModel({ modelType: 'XpertSettings', model: { id: 'xpert-unit-summary', enabled: state.enabled } }));
+        dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+        return true;
+      }
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+      return false;
+    } catch {
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+      return false;
+    }
+  };
+}
+
+export function fetchXpertPluginConfigurable(courseId) {
+  return async (dispatch) => {
+    let enabled;
+    dispatch(updateLoadingStatus({ status: RequestStatus.PENDING }));
+    try {
+      const { response } = await getXpertPluginConfigurable(courseId);
+      enabled = response?.enabled;
+    } catch {
+      enabled = undefined;
+    }
+
+    dispatch(addModel({
+      modelType: 'XpertSettings.enabled',
+      model: {
+        id: 'xpert-unit-summary',
+        enabled,
+      },
+    }));
+  };
+}
+
+export function fetchXpertSettings(courseId) {
+  return async (dispatch) => {
+    let enabled;
+    dispatch(updateLoadingStatus({ status: RequestStatus.PENDING }));
+
+    try {
+      const { response } = await getXpertSettings(courseId);
+      enabled = response?.enabled;
+    } catch {
+      enabled = undefined;
+    }
+
+    dispatch(addModel({
+      modelType: 'XpertSettings',
+      model: {
+        id: 'xpert-unit-summary',
+        enabled,
+      },
+    }));
+
+    dispatch(updateLoadingStatus({ status: RequestStatus.SUCCESSFUL }));
+  };
+}
+
+export function removeXpertSettings(courseId) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
+
+    try {
+      const { response } = await deleteXpertSettings(courseId);
+      const { success } = response;
+      if (success) {
+        const model = { id: 'xpert-unit-summary', enabled: undefined };
+        dispatch(updateModel({ modelType: 'XpertSettings', model }));
+        dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+        return true;
+      }
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+      return false;
+    } catch {
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+      return false;
+    }
+  };
+}
+
+export function resetXpertSettings(courseId, state) {
+  return async (dispatch) => {
+    dispatch(updateResetStatus({ status: RequestStatus.PENDING }));
+    try {
+      const { response } = await postXpertSettings(courseId, state);
+      const { success } = response;
+      if (success) {
+        dispatch(updateResetStatus({ status: RequestStatus.SUCCESSFUL }));
+        return true;
+      }
+      dispatch(updateResetStatus({ status: RequestStatus.FAILED }));
+      return false;
+    } catch {
+      dispatch(updateResetStatus({ status: RequestStatus.FAILED }));
+      return false;
+    }
+  };
+}

plugins/course-apps/xpert_unit_summary/messages.ts

@@ -0,0 +1,34 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  heading: {
+    id: 'course-authoring.pages-resources.xpert-unit-summary.heading',
+    defaultMessage: 'Configure Xpert unit summaries',
+  },
+  enableXpertUnitSummaryLabel: {
+    id: 'course-authoring.pages-resources.xpert-unit-summary.enable-xpert-unit-summary.label',
+    defaultMessage: 'Xpert unit summaries',
+  },
+  enableXpertUnitSummaryHelp: {
+    id: 'course-authoring.pages-resources.xpert-unit-summary.enable-xpert-unit-summary.help',
+    defaultMessage: 'Reinforce learning concepts by sharing text-based course content with OpenAI (via API) to display unit summaries on-demand for learners. Learners can leave feedback about the quality of the AI-generated summaries for use by edX to improve the performance of the tool.',
+  },
+  enableXpertUnitSummaryHelpPrivacyLink: {
+    id: 'course-authoring.pages-resources.xpert-unit-summary.enable-xpert-unit-summary.help.privacylink',
+    defaultMessage: 'Learn more about OpenAI API data privacy.',
+  },
+  enableXpertUnitSummaryLink: {
+    id: 'course-authoring.pages-resources.xpert-unit-summary.enable-xpert-unit-summary.link',
+    defaultMessage: 'Learn more about how OpenAI handles data',
+  },
+  allUnitsEnabledByDefault: {
+    id: 'course-authoring.pages-resources.xpert-unit-summary.all-units-enabled-by-default',
+    defaultMessage: 'All units enabled by default',
+  },
+  noUnitsEnabledByDefault: {
+    id: 'course-authoring.pages-resources.xpert-unit-summary.no-units-enabled-by-default',
+    defaultMessage: 'No units enabled by default',
+  },
+});
+
+export default messages;

plugins/course-apps/xpert_unit_summary/package.json

@@ -0,0 +1,21 @@
+{
+    "name": "@openedx-plugins/course-app-xpert_unit_summary",
+    "version": "0.1.0",
+    "description": "Xpert Unit Summaries configuration for courses using it",
+    "peerDependencies": {
+        "@edx/frontend-app-authoring": "*",
+        "@edx/frontend-platform": "*",
+        "@openedx/paragon": "*",
+        "formik": "*",
+        "prop-types": "*",
+        "yup": "*",
+        "react": "*",
+        "react-redux": "*",
+        "react-router-dom": "*"
+    },
+    "peerDependenciesMeta": {
+        "@edx/frontend-app-authoring": {
+            "optional": true
+        }
+    }
+}

plugins/course-apps/xpert_unit_summary/settings-modal/ResetIcon.jsx

@@ -0,0 +1,21 @@
+const ResetIcon = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    role="img"
+    focusable="false"
+    aria-hidden="true"
+    transform="scale(-1,1)"
+    {...props}
+  >
+    <path
+      d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default ResetIcon;

plugins/course-apps/xpert_unit_summary/settings-modal/SettingsModal.jsx

@@ -0,0 +1,454 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { getExternalLinkUrl } from '@edx/frontend-platform';
+import {
+  ActionRow,
+  Alert,
+  Badge,
+  Form,
+  Icon,
+  ModalDialog,
+  OverlayTrigger,
+  StatefulButton,
+  Tooltip,
+  TransitionReplace,
+  Hyperlink,
+} from '@openedx/paragon';
+import {
+  Info, CheckCircleOutline, SpinnerSimple,
+} from '@openedx/paragon/icons';
+
+import { Formik } from 'formik';
+import PropTypes from 'prop-types';
+import React, {
+  useContext, useEffect, useRef, useState,
+} from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import * as Yup from 'yup';
+
+import { RequestStatus } from 'CourseAuthoring/data/constants';
+import ConnectionErrorAlert from 'CourseAuthoring/generic/ConnectionErrorAlert';
+import FormSwitchGroup from 'CourseAuthoring/generic/FormSwitchGroup';
+import Loading from 'CourseAuthoring/generic/Loading';
+import { useModel } from 'CourseAuthoring/generic/model-store';
+import PermissionDeniedAlert from 'CourseAuthoring/generic/PermissionDeniedAlert';
+import { useIsMobile } from 'CourseAuthoring/utils';
+import { getLoadingStatus, getSavingStatus, getResetStatus } from 'CourseAuthoring/pages-and-resources/data/selectors';
+import { updateSavingStatus, updateResetStatus } from 'CourseAuthoring/pages-and-resources/data/slice';
+import AppConfigFormDivider from 'CourseAuthoring/pages-and-resources/discussions/app-config-form/apps/shared/AppConfigFormDivider';
+import { PagesAndResourcesContext } from 'CourseAuthoring/pages-and-resources/PagesAndResourcesProvider';
+
+import { updateXpertSettings, resetXpertSettings, removeXpertSettings } from '../data/thunks';
+import messages from './messages';
+import appInfo from '../appInfo';
+import ResetIcon from './ResetIcon';
+
+import './SettingsModal.scss';
+
+const AppSettingsForm = ({
+  formikProps, children, showForm,
+}) => children && (
+  <TransitionReplace>
+    {showForm ? (
+      <React.Fragment key="app-enabled">
+        {children(formikProps)}
+      </React.Fragment>
+    ) : (
+      <React.Fragment key="app-disabled" />
+    )}
+  </TransitionReplace>
+);
+
+AppSettingsForm.propTypes = {
+  // Ignore the warning here since we're just passing along the props as-is and the child component should validate
+  // eslint-disable-next-line react/forbid-prop-types
+  formikProps: PropTypes.object.isRequired,
+  showForm: PropTypes.bool.isRequired,
+  children: PropTypes.func,
+};
+
+AppSettingsForm.defaultProps = {
+  children: null,
+};
+
+const SettingsModalBase = ({
+  title, onClose, variant, isMobile, children, footer,
+}) => {
+  const intl = useIntl();
+  return (
+    <ModalDialog
+      title={title}
+      isOpen
+      onClose={onClose}
+      size="lg"
+      variant={variant}
+      hasCloseButton={isMobile}
+      isFullscreenOnMobile
+    >
+      <ModalDialog.Header>
+        <ModalDialog.Title data-testid="modal-title">
+          {title}
+        </ModalDialog.Title>
+      </ModalDialog.Header>
+      <ModalDialog.Body>
+        {children}
+      </ModalDialog.Body>
+      <ModalDialog.Footer className="p-4">
+        <ActionRow>
+          <ModalDialog.CloseButton variant="tertiary">
+            {intl.formatMessage(messages.cancel)}
+          </ModalDialog.CloseButton>
+          {footer}
+        </ActionRow>
+      </ModalDialog.Footer>
+    </ModalDialog>
+  );
+};
+
+SettingsModalBase.propTypes = {
+  title: PropTypes.string.isRequired,
+  onClose: PropTypes.func.isRequired,
+  variant: PropTypes.oneOf(['default', 'dark']).isRequired,
+  isMobile: PropTypes.bool.isRequired,
+  children: PropTypes.node.isRequired,
+  footer: PropTypes.node,
+};
+
+SettingsModalBase.defaultProps = {
+  footer: null,
+};
+
+const ResetUnitsButton = ({
+  courseId,
+  checked,
+  visible,
+}) => {
+  const intl = useIntl();
+  const resetStatusRequestStatus = useSelector(getResetStatus);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (resetStatusRequestStatus === RequestStatus.SUCCESSFUL) {
+      setTimeout(() => {
+        dispatch(updateResetStatus({ status: '' }));
+      }, 2000);
+    }
+  }, [resetStatusRequestStatus]);
+
+  const handleResetUnits = () => {
+    dispatch(resetXpertSettings(courseId, { enabled: checked === 'true', reset: true }));
+  };
+
+  const getResetButtonState = () => {
+    switch (resetStatusRequestStatus) {
+      case RequestStatus.PENDING:
+        return 'pending';
+      case RequestStatus.SUCCESSFUL:
+        return 'finish';
+      default:
+        return 'default';
+    }
+  };
+
+  if (!visible) { return null; }
+
+  const messageKey = checked === 'true' ? 'resetAllUnitsTooltipChecked' : 'resetAllUnitsTooltipUnchecked';
+
+  return (
+    <OverlayTrigger
+      placement="right"
+      overlay={(
+        <Tooltip
+          id={`tooltip-reset-${checked}`}
+          className="reset-tooltip"
+        >
+          {intl.formatMessage(messages[messageKey])}
+        </Tooltip>
+      )}
+    >
+      <StatefulButton
+        className="reset-units-button"
+        labels={{
+          default: intl.formatMessage(messages.resetAllUnits),
+          pending: '',
+          finish: intl.formatMessage(messages.reset),
+        }}
+        icons={{
+          default: <Icon src={ResetIcon} />,
+          pending: <Icon src={SpinnerSimple} className="icon-spin" />,
+          finish: <Icon src={CheckCircleOutline} />,
+        }}
+        state={getResetButtonState()}
+        onClick={handleResetUnits}
+        disabledStates={['pending', 'finish']}
+        variant="outline"
+        data-testid="reset-units"
+      />
+    </OverlayTrigger>
+  );
+};
+
+ResetUnitsButton.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  checked: PropTypes.oneOf(['true', 'false']).isRequired,
+  visible: PropTypes.bool,
+};
+
+ResetUnitsButton.defaultProps = {
+  visible: false,
+};
+
+const SettingsModal = ({
+  appId,
+  title,
+  children,
+  configureBeforeEnable,
+  initialValues,
+  validationSchema,
+  onClose,
+  onSettingsSave,
+  enableAppLabel,
+  enableAppHelp,
+  learnMoreText,
+  helpPrivacyText,
+  enableReinitialize,
+  allUnitsEnabledText,
+  noUnitsEnabledText,
+}) => {
+  const intl = useIntl();
+  const { courseId } = useContext(PagesAndResourcesContext);
+  const loadingStatus = useSelector(getLoadingStatus);
+  const updateSettingsRequestStatus = useSelector(getSavingStatus);
+  const alertRef = useRef(null);
+  const [saveError, setSaveError] = useState(false);
+  const dispatch = useDispatch();
+  const submitButtonState = updateSettingsRequestStatus === RequestStatus.IN_PROGRESS ? 'pending' : 'default';
+  const isMobile = useIsMobile();
+  const modalVariant = isMobile ? 'dark' : 'default';
+
+  const xpertSettings = useModel('XpertSettings', appId);
+
+  useEffect(() => {
+    if (updateSettingsRequestStatus === RequestStatus.SUCCESSFUL) {
+      dispatch(updateSavingStatus({ status: '' }));
+      onClose();
+    }
+  }, [updateSettingsRequestStatus]);
+
+  const handleFormSubmit = async ({ enabled, checked, ...rest }) => {
+    let success;
+    const values = { ...rest, enabled: enabled ? checked === 'true' : undefined };
+
+    if (enabled) {
+      // oxlint-disable-next-line @typescript-eslint/await-thenable - this dispatch() IS returning a promise.
+      success = await dispatch(updateXpertSettings(courseId, values));
+    } else {
+      // oxlint-disable-next-line @typescript-eslint/await-thenable - this dispatch() IS returning a promise.
+      success = await dispatch(removeXpertSettings(courseId));
+    }
+
+    if (onSettingsSave) {
+      success = success && await onSettingsSave(values);
+    }
+    setSaveError(!success);
+    !success && alertRef?.current.scrollIntoView(); // eslint-disable-line @typescript-eslint/no-unused-expressions
+  };
+
+  const handleFormikSubmit = ({ handleSubmit, errors }) => async (event) => {
+    // If submitting the form with errors, show the alert and scroll to it.
+    await handleSubmit(event);
+    if (Object.keys(errors).length > 0) {
+      setSaveError(true);
+      alertRef?.current.scrollIntoView?.(); // eslint-disable-line no-unused-expressions
+    }
+  };
+
+  const learnMoreLink = appInfo.documentationLinks?.learnMoreConfiguration && (
+    <div className="py-1">
+      <Hyperlink
+        className="text-primary-500"
+        destination={appInfo.documentationLinks.learnMoreConfiguration}
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        {learnMoreText}
+      </Hyperlink>
+    </div>
+  );
+
+  const helpPrivacyLink = (
+    <div className="py-1">
+      <Hyperlink
+        className="text-primary-500"
+        destination={getExternalLinkUrl('https://openai.com/api-data-privacy')}
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        {helpPrivacyText}
+      </Hyperlink>
+    </div>
+  );
+
+  if (loadingStatus === RequestStatus.SUCCESSFUL) {
+    return (
+      <Formik
+        initialValues={{
+          enabled: xpertSettings?.enabled !== undefined,
+          checked: xpertSettings?.enabled?.toString() || 'true',
+          ...initialValues,
+        }}
+        validationSchema={
+          Yup.object()
+            .shape({
+              enabled: Yup.boolean(),
+              checked: Yup.string().oneOf(['true', 'false']),
+              ...validationSchema,
+            })
+        }
+        onSubmit={handleFormSubmit}
+        enableReinitialize={enableReinitialize}
+      >
+        {(formikProps) => (
+          <Form onSubmit={handleFormikSubmit(formikProps)}>
+            <SettingsModalBase
+              title={title}
+              isOpen
+              onClose={onClose}
+              variant={modalVariant}
+              isMobile={isMobile}
+              isFullscreenOnMobile
+              intl={intl}
+              footer={(
+                <StatefulButton
+                  labels={{
+                    default: intl.formatMessage(messages.save),
+                    pending: intl.formatMessage(messages.saving),
+                    complete: intl.formatMessage(messages.saved),
+                  }}
+                  state={submitButtonState}
+                  onClick={handleFormikSubmit(formikProps)}
+                  disabled={!formikProps.dirty}
+                />
+              )}
+            >
+              {saveError && (
+                <Alert variant="danger" icon={Info} ref={alertRef}>
+                  <Alert.Heading>
+                    {formikProps.errors.enabled?.title || intl.formatMessage(messages.errorSavingTitle)}
+                  </Alert.Heading>
+                  {formikProps.errors.enabled?.message || intl.formatMessage(messages.errorSavingMessage)}
+                </Alert>
+              )}
+              <FormSwitchGroup
+                id={`enable-${appId}-toggle`}
+                name="enabled"
+                onChange={formikProps.handleChange}
+                onBlur={formikProps.handleBlur}
+                checked={formikProps.values.enabled}
+                label={(
+                  <div className="d-flex align-items-center">
+                    {enableAppLabel}
+                    {formikProps.values.enabled && (
+                      <Badge className="ml-2" variant="success" data-testid="enable-badge">
+                        {intl.formatMessage(messages.enabled)}
+                      </Badge>
+                    )}
+                  </div>
+                )}
+                helpText={(
+                  <div>
+                    <p>{enableAppHelp}</p>
+                    {helpPrivacyLink}
+                    {learnMoreLink}
+                  </div>
+                )}
+              />
+              {(formikProps.values.enabled || configureBeforeEnable) && (
+                <Form.RadioSet
+                  name="checked"
+                  onChange={formikProps.handleChange}
+                  onBlur={formikProps.handleBlur}
+                  value={formikProps.values.checked}
+                >
+                  <Form.Radio
+                    className="summary-radio m-2 px-3"
+                    data-testid="enable-radio"
+                    value="true"
+                  >
+                    {allUnitsEnabledText}
+                    <ResetUnitsButton
+                      courseId={courseId}
+                      checked={formikProps.values.checked}
+                      visible={formikProps.values.checked === 'true'}
+                    />
+                  </Form.Radio>
+                  <Form.Radio
+                    className="summary-radio m-2 px-3"
+                    data-testid="disable-radio"
+                    value="false"
+                  >
+                    {noUnitsEnabledText}
+                    <ResetUnitsButton
+                      courseId={courseId}
+                      checked={formikProps.values.checked}
+                      visible={formikProps.values.checked === 'false'}
+                    />
+                  </Form.Radio>
+                </Form.RadioSet>
+              )}
+              {(formikProps.values.enabled || configureBeforeEnable) && children
+                && <AppConfigFormDivider marginAdj={{ default: 0, sm: 0 }} />}
+              <AppSettingsForm formikProps={formikProps} showForm={formikProps.values.enabled || configureBeforeEnable}>
+                {children}
+              </AppSettingsForm>
+            </SettingsModalBase>
+          </Form>
+        )}
+      </Formik>
+    );
+  }
+  return (
+    <SettingsModalBase
+      intl={intl}
+      title={title}
+      isOpen
+      onClose={onClose}
+      size="sm"
+      variant={modalVariant}
+      isMobile={isMobile}
+      isFullscreenOnMobile
+    >
+      {loadingStatus === RequestStatus.IN_PROGRESS && <Loading />}
+      {loadingStatus === RequestStatus.FAILED && <ConnectionErrorAlert />}
+      {loadingStatus === RequestStatus.DENIED && <PermissionDeniedAlert />}
+    </SettingsModalBase>
+  );
+};
+
+SettingsModal.propTypes = {
+  title: PropTypes.string.isRequired,
+  appId: PropTypes.string.isRequired,
+  children: PropTypes.func,
+  onSettingsSave: PropTypes.func,
+  initialValues: PropTypes.shape({}),
+  validationSchema: PropTypes.shape({}),
+  onClose: PropTypes.func.isRequired,
+  enableAppLabel: PropTypes.string.isRequired,
+  enableAppHelp: PropTypes.string.isRequired,
+  learnMoreText: PropTypes.string.isRequired,
+  helpPrivacyText: PropTypes.string.isRequired,
+  allUnitsEnabledText: PropTypes.string.isRequired,
+  noUnitsEnabledText: PropTypes.string.isRequired,
+  configureBeforeEnable: PropTypes.bool,
+  enableReinitialize: PropTypes.bool,
+};
+
+SettingsModal.defaultProps = {
+  children: null,
+  onSettingsSave: null,
+  initialValues: {},
+  validationSchema: {},
+  configureBeforeEnable: false,
+  enableReinitialize: false,
+};
+
+export default SettingsModal;

plugins/course-apps/xpert_unit_summary/settings-modal/SettingsModal.scss

@@ -0,0 +1,44 @@
+@import "~@openedx/paragon/styles/scss/core/utilities-only";
+
+.summary-radio {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border-width: $border-width;
+  border-color: $border-color;
+  border-radius: $border-radius;
+  border-style: solid;
+
+  &:has(input:checked) {
+    border-width: 3px;
+    border-color: theme-color("primary");
+  }
+
+  > div {
+    flex: 1;
+
+    > label {
+      min-height: 80px;
+      flex-wrap: wrap;
+      justify-content: space-between;
+    }
+  }
+}
+
+.reset-units-button {
+  color: $link-color;
+  border-width: $border-width;
+  border-color: $border-color;
+  border-radius: $border-radius;
+  border-style: solid;
+}
+
+.reset-tooltip {
+  .arrow::before {
+    border-right-color: #00262B;
+  }
+
+  .tooltip-inner {
+    background-color: #00262B;
+  }
+}

plugins/course-apps/xpert_unit_summary/settings-modal/messages.ts

@@ -0,0 +1,58 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  cancel: {
+    id: 'course-authoring.pages-resources.app-settings-modal.button.cancel',
+    defaultMessage: 'Cancel',
+  },
+  save: {
+    id: 'course-authoring.pages-resources.app-settings-modal.button.save',
+    defaultMessage: 'Save',
+  },
+  saving: {
+    id: 'course-authoring.pages-resources.app-settings-modal.button.saving',
+    defaultMessage: 'Saving',
+  },
+  saved: {
+    id: 'course-authoring.pages-resources.app-settings-modal.button.saved',
+    defaultMessage: 'Saved',
+  },
+  retry: {
+    id: 'course-authoring.pages-resources.app-settings-modal.button.retry',
+    defaultMessage: 'Retry',
+  },
+  enabled: {
+    id: 'course-authoring.pages-resources.app-settings-modal.badge.enabled',
+    defaultMessage: 'Enabled',
+  },
+  disabled: {
+    id: 'course-authoring.pages-resources.app-settings-modal.badge.disabled',
+    defaultMessage: 'Disabled',
+  },
+  resetAllUnits: {
+    id: 'course-authoring.pages-resources.app-settings-modal.reset-all-units',
+    defaultMessage: 'Reset all units',
+  },
+  resetAllUnitsTooltipChecked: {
+    id: 'course-authoring.pages-resources.app-settings-modal.reset-all-units-tooltip.checked',
+    defaultMessage: 'Immediately reset any unit-level changes and checked "Enable summaries" on all units.',
+  },
+  resetAllUnitsTooltipUnchecked: {
+    id: 'course-authoring.pages-resources.app-settings-modal.reset-all-units-tooltip.unchecked',
+    defaultMessage: 'Immediately reset any unit-level changes and unchecked "Enable summaries" on all units.',
+  },
+  reset: {
+    id: 'course-authoring.pages-resources.app-settings-modal.reset',
+    defaultMessage: 'Reset',
+  },
+  errorSavingTitle: {
+    id: 'course-authoring.pages-resources.app-settings-modal.save-error.title',
+    defaultMessage: 'We couldn\'t apply your changes.',
+  },
+  errorSavingMessage: {
+    id: 'course-authoring.pages-resources.app-settings-modal.save-error.message',
+    defaultMessage: 'Please check your entries and try again.',
+  },
+});
+
+export default messages;

public/index.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <html lang="en-us">
   <head>
-      <title>Course Authoring | edX</title>
+      <title>Course Authoring | <%= process.env.SITE_NAME %></title>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <link rel="shortcut icon" href="<%= process.env.FAVICON_URL %>" type="image/x-icon" />
+      <link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon" />
   </head>
   <body>
     <div id="root"></div>

renovate.json

@@ -1,19 +1,24 @@
 {
   "extends": [
     "config:base",
-    "schedule:daily",
+    "schedule:weekly",
     ":rebaseStalePrs",
-    ":semanticCommits"
+    ":semanticCommits",
+    ":dependencyDashboard"
   ],
+  "timezone": "America/New_York",
   "patch": {
-    "automerge": true
+    "automerge": false
   },
   "rebaseStalePrs": true,
   "packageRules": [
     {
-      "matchPackagePatterns": ["@edx"],
+      "extends": [
+        "schedule:daily"
+      ],
+      "matchPackagePatterns": ["@edx", "@openedx"],
       "matchUpdateTypes": ["minor", "patch"],
-      "automerge": true
+      "automerge": false
     }
   ]
 }

src/CourseAuthoringContext.tsx

@@ -0,0 +1,172 @@
+import { getConfig } from '@edx/frontend-platform';
+import {
+  createContext, useContext, useMemo, useState,
+} from 'react';
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import { useCreateCourseBlock } from '@src/course-outline/data/apiHooks';
+import { useSelector } from 'react-redux';
+import { useNavigate } from 'react-router';
+import { getOutlineIndexData } from '@src/course-outline/data/selectors';
+import { useToggleWithValue } from '@src/hooks';
+import { SelectionState, type UnitXBlock, type XBlock } from '@src/data/types';
+import { CourseDetailsData } from './data/api';
+import { useCourseDetails, useWaffleFlags } from './data/apiHooks';
+import { RequestStatusType } from './data/constants';
+
+type ModalState = {
+  value?: XBlock | UnitXBlock;
+  subsectionId?: string;
+  sectionId?: string;
+};
+
+export type CourseAuthoringContextData = {
+  /** The ID of the current course */
+  courseId: string;
+  courseUsageKey: string;
+  courseDetails?: CourseDetailsData;
+  courseDetailStatus: RequestStatusType;
+  canChangeProviders: boolean;
+  handleAddAndOpenUnit: ReturnType<typeof useCreateCourseBlock>;
+  handleAddBlock: ReturnType<typeof useCreateCourseBlock>;
+  openUnitPage: (locator: string) => void;
+  getUnitUrl: (locator: string) => string;
+  isUnlinkModalOpen: boolean;
+  currentUnlinkModalData?: ModalState;
+  openUnlinkModal: (value: ModalState) => void;
+  closeUnlinkModal: () => void;
+  isPublishModalOpen: boolean;
+  currentPublishModalData?: ModalState;
+  openPublishModal: (value: ModalState) => void;
+  closePublishModal: () => void;
+  currentSelection?: SelectionState;
+  setCurrentSelection: React.Dispatch<React.SetStateAction<SelectionState | undefined>>;
+};
+
+/**
+ * Course Authoring Context.
+ * Always available when we're in the context of a single course.
+ *
+ * Get this using `useCourseAuthoringContext()`
+ *
+ */
+const CourseAuthoringContext = createContext<CourseAuthoringContextData | undefined>(undefined);
+
+type CourseAuthoringProviderProps = {
+  children?: React.ReactNode;
+  courseId: string;
+};
+
+export const CourseAuthoringProvider = ({
+  children,
+  courseId,
+}: CourseAuthoringProviderProps) => {
+  const navigate = useNavigate();
+  const waffleFlags = useWaffleFlags();
+  const { data: courseDetails, status: courseDetailStatus } = useCourseDetails(courseId);
+  const canChangeProviders = getAuthenticatedUser().administrator || new Date(courseDetails?.start ?? 0) > new Date();
+  const { courseStructure } = useSelector(getOutlineIndexData);
+  const { id: courseUsageKey } = courseStructure || {};
+  const [
+    isUnlinkModalOpen,
+    currentUnlinkModalData,
+    openUnlinkModal,
+    closeUnlinkModal,
+  ] = useToggleWithValue<ModalState>();
+  const [
+    isPublishModalOpen,
+    currentPublishModalData,
+    openPublishModal,
+    closePublishModal,
+  ] = useToggleWithValue<ModalState>();
+  /**
+  * This will hold the state of current item that is being operated on,
+  * For example:
+  *  - the details of container that is being edited.
+  *  - the details of container of which see more dropdown is open.
+  * It is mostly used in modals which should be soon be replaced with its equivalent in sidebar.
+  */
+  const [currentSelection, setCurrentSelection] = useState<SelectionState | undefined>();
+
+  const getUnitUrl = (locator: string) => {
+    if (getConfig().ENABLE_UNIT_PAGE === 'true' && waffleFlags.useNewUnitPage) {
+      // instanbul ignore next
+      return `/course/${courseId}/container/${locator}`;
+    }
+    return `${getConfig().STUDIO_BASE_URL}/container/${locator}`;
+  };
+
+  /**
+   * Open the unit page for a given locator.
+   */
+  const openUnitPage = async (locator: string) => {
+    const url = getUnitUrl(locator);
+    if (getConfig().ENABLE_UNIT_PAGE === 'true' && waffleFlags.useNewUnitPage) {
+      // instanbul ignore next
+      navigate(url);
+    } else {
+      window.location.assign(url);
+    }
+  };
+  /**
+  * import a unit block from library and redirect user to this unit page.
+  */
+  const handleAddAndOpenUnit = useCreateCourseBlock(courseId, openUnitPage);
+  const handleAddBlock = useCreateCourseBlock(courseId);
+
+  const context = useMemo<CourseAuthoringContextData>(() => ({
+    courseId,
+    courseUsageKey,
+    courseDetails,
+    courseDetailStatus,
+    canChangeProviders,
+    handleAddBlock,
+    handleAddAndOpenUnit,
+    getUnitUrl,
+    openUnitPage,
+    isUnlinkModalOpen,
+    openUnlinkModal,
+    closeUnlinkModal,
+    currentUnlinkModalData,
+    isPublishModalOpen,
+    currentPublishModalData,
+    openPublishModal,
+    closePublishModal,
+    currentSelection,
+    setCurrentSelection,
+  }), [
+    courseId,
+    courseUsageKey,
+    courseDetails,
+    courseDetailStatus,
+    canChangeProviders,
+    handleAddBlock,
+    handleAddAndOpenUnit,
+    getUnitUrl,
+    openUnitPage,
+    isUnlinkModalOpen,
+    openUnlinkModal,
+    closeUnlinkModal,
+    currentUnlinkModalData,
+    isPublishModalOpen,
+    currentPublishModalData,
+    openPublishModal,
+    closePublishModal,
+    currentSelection,
+    setCurrentSelection,
+  ]);
+
+  return (
+    <CourseAuthoringContext.Provider value={context}>
+      {children}
+    </CourseAuthoringContext.Provider>
+  );
+};
+
+export function useCourseAuthoringContext(): CourseAuthoringContextData {
+  const ctx = useContext(CourseAuthoringContext);
+  if (ctx === undefined) {
+    /* istanbul ignore next */
+    throw new Error('useCourseAuthoringContext() was used in a component without a <CourseAuthoringProvider> ancestor.');
+  }
+  return ctx;
+}

src/CourseAuthoringPage.jsx

@@ -1,73 +0,0 @@
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import Footer from '@edx/frontend-component-footer';
-import { useDispatch, useSelector } from 'react-redux';
-
-import {
-  useLocation,
-} from 'react-router-dom';
-import Header from './studio-header/Header';
-import { fetchCourseDetail } from './data/thunks';
-import { useModel } from './generic/model-store';
-import PermissionDeniedAlert from './generic/PermissionDeniedAlert';
-import { getCourseAppsApiStatus, getLoadingStatus } from './pages-and-resources/data/selectors';
-import { RequestStatus } from './data/constants';
-import Loading from './generic/Loading';
-
-export default function CourseAuthoringPage({ courseId, children }) {
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    dispatch(fetchCourseDetail(courseId));
-  }, [courseId]);
-
-  const courseDetail = useModel('courseDetails', courseId);
-
-  const courseNumber = courseDetail ? courseDetail.number : null;
-  const courseOrg = courseDetail ? courseDetail.org : null;
-  const courseTitle = courseDetail ? courseDetail.name : courseId;
-  const courseAppsApiStatus = useSelector(getCourseAppsApiStatus);
-  const inProgress = useSelector(getLoadingStatus) === RequestStatus.IN_PROGRESS;
-  const { pathname } = useLocation();
-  if (courseAppsApiStatus === RequestStatus.DENIED) {
-    return (
-      <PermissionDeniedAlert />
-    );
-  }
-
-  const AppHeader = () => (
-    <Header
-      courseNumber={courseNumber}
-      courseOrg={courseOrg}
-      courseTitle={courseTitle}
-      courseId={courseId}
-    />
-  );
-
-  const AppFooter = () => (
-    <div className="mt-6">
-      <Footer />
-    </div>
-  );
-
-  return (
-    <div className="bg-light-200">
-      {/* While V2 Editors are tempoarily served from thier own pages
-      using url pattern containing /editor/,
-      we shouldn't have the header and footer on these pages.
-      This functionality will be removed in TNL-9591 */}
-      {inProgress ? !pathname.includes('/editor/') && <Loading /> : <AppHeader />}
-      {children}
-      {!inProgress && <AppFooter />}
-    </div>
-  );
-}
-
-CourseAuthoringPage.propTypes = {
-  children: PropTypes.node,
-  courseId: PropTypes.string.isRequired,
-};
-
-CourseAuthoringPage.defaultProps = {
-  children: null,
-};