Compare commits
52 Commits
open-relea
...
release/te
| Author | SHA1 | Date | |
|---|---|---|---|
|
0c1eb6cae0 | ||
|
|
16738335d0 | ||
|
|
658b70e455 | ||
|
|
6cb174b146 | ||
|
|
143f0dcd4b | ||
|
|
ad19426aee | ||
|
|
5ab646b69c | ||
|
|
1cd02a9dfb | ||
|
|
445a2f6cd3 | ||
|
|
166b6fe7ae | ||
|
|
a6711a59dc | ||
|
|
454d3ddcdf | ||
|
|
e4a7448850 | ||
|
|
1fd3343355 | ||
|
|
ef6ade6de1 | ||
|
|
7dc08c060f | ||
|
|
1e1f269b6b | ||
|
|
a8093439a9 | ||
|
|
10f906b72f | ||
|
|
3a14119d01 | ||
|
|
cb3b2b4670 | ||
|
|
9279a3e4ce | ||
|
|
2a5cf010f8 | ||
|
|
6dd835d63f | ||
|
|
87c1cb5bd2 | ||
|
|
5875631a6c | ||
|
|
176a95c352 | ||
|
|
b24971572d | ||
|
|
20f212501f | ||
|
|
852d0ef2d9 | ||
|
|
809112d4b2 | ||
|
|
d249b5e4aa | ||
|
|
dad6c84d46 | ||
|
|
5f61578e28 | ||
|
|
da30730662 | ||
|
|
6e4ae9d976 | ||
|
|
e863eef77d | ||
|
|
ff900335a1 | ||
|
|
c0dc0cbad6 | ||
|
|
83aec7318e | ||
|
|
a037f5b340 | ||
|
|
91402fbf12 | ||
|
|
7a299eb064 | ||
|
|
90e8eeeb50 | ||
|
|
f25ce0b95d | ||
|
|
98db1a4a35 | ||
|
|
cf4b632c55 | ||
|
|
0720b2feae | ||
|
|
56e1781004 | ||
|
|
83eb21bb9a | ||
|
|
18ddb35e1e | ||
|
|
ae93b68d57 |
@@ -1,6 +1,6 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
|
||||
const { createConfig } = require('@edx/frontend-build');
|
||||
const { createConfig } = require('@openedx/frontend-build');
|
||||
|
||||
module.exports = createConfig('eslint', {
|
||||
rules: {
|
||||
|
||||
9
.github/workflows/ci.yml
vendored
9
.github/workflows/ci.yml
vendored
@@ -18,9 +18,9 @@ jobs:
|
||||
- name: Setup Nodejs Env
|
||||
run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
|
||||
- name: Setup Nodejs
|
||||
uses: actions/setup-node@v3
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: ${{ env.NODE_VER }}
|
||||
node-version-file: '.nvmrc'
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
- name: Validate package-lock.json changes
|
||||
@@ -34,4 +34,7 @@ jobs:
|
||||
- name: i18n_extract
|
||||
run: npm run i18n_extract
|
||||
- name: Coverage
|
||||
uses: codecov/codecov-action@v3
|
||||
uses: codecov/codecov-action@v4
|
||||
with:
|
||||
token: ${{ secrets.CODECOV_TOKEN }}
|
||||
fail_ci_if_error: true
|
||||
|
||||
2
.github/workflows/lockfileversion-check.yml
vendored
2
.github/workflows/lockfileversion-check.yml
vendored
@@ -10,4 +10,4 @@ on:
|
||||
|
||||
jobs:
|
||||
version-check:
|
||||
uses: openedx/.github/.github/workflows/lockfile-check.yml@master
|
||||
uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master
|
||||
|
||||
2
.gitignore
vendored
2
.gitignore
vendored
@@ -5,6 +5,7 @@ node_modules
|
||||
npm-debug.log
|
||||
coverage
|
||||
module.config.js
|
||||
env.config.*
|
||||
|
||||
dist/
|
||||
src/i18n/transifex_input.json
|
||||
@@ -17,3 +18,4 @@ temp/babel-plugin-react-intl
|
||||
*~
|
||||
/temp
|
||||
/.vscode
|
||||
src/i18n/messages/
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
[main]
|
||||
host = https://www.transifex.com
|
||||
|
||||
[o:open-edx:p:edx-platform:r:frontend-app-communications]
|
||||
file_filter = src/i18n/messages/<lang>.json
|
||||
source_file = src/i18n/transifex_input.json
|
||||
source_lang = en
|
||||
type = KEYVALUEJSON
|
||||
38
Makefile
38
Makefile
@@ -1,20 +1,17 @@
|
||||
export TRANSIFEX_RESOURCE = frontend-app-communications
|
||||
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
|
||||
|
||||
# This directory must match .babelrc .
|
||||
transifex_temp = ./temp/babel-plugin-react-intl
|
||||
transifex_temp = ./temp/babel-plugin-formatjs
|
||||
|
||||
precommit:
|
||||
npm run lint
|
||||
npm audit
|
||||
|
||||
requirements:
|
||||
npm install
|
||||
npm ci
|
||||
|
||||
i18n.extract:
|
||||
# Pulling display strings from .jsx files into .json files...
|
||||
@@ -32,35 +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
|
||||
|
||||
ifeq ($(OPENEDX_ATLAS_PULL),)
|
||||
# Pulls translations from Transifex.
|
||||
pull_translations:
|
||||
tx pull -t -f --mode reviewed --languages=$(transifex_langs)
|
||||
else
|
||||
# Experimental: OEP-58 Pulls translations using atlas
|
||||
pull_translations:
|
||||
rm -rf src/i18n/messages
|
||||
mkdir src/i18n/messages
|
||||
cd src/i18n/messages \
|
||||
&& atlas pull --filter=$(transifex_langs) \
|
||||
translations/frontend-component-header/src/i18n/messages:frontend-component-header \
|
||||
translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
|
||||
translations/paragon/src/i18n/messages:paragon \
|
||||
translations/frontend-app-communications/src/i18n/messages:frontend-app-communications
|
||||
&& atlas pull $(ATLAS_OPTIONS) \
|
||||
translations/frontend-component-header/src/i18n/messages:frontend-component-header \
|
||||
translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
|
||||
translations/paragon/src/i18n/messages:paragon \
|
||||
translations/frontend-platform/src/i18n/messages:frontend-platform \
|
||||
translations/frontend-app-communications/src/i18n/messages:frontend-app-communications
|
||||
|
||||
$(intl_imports) frontend-component-header frontend-component-footer paragon frontend-app-communications
|
||||
endif
|
||||
$(intl_imports) frontend-component-header frontend-component-footer paragon frontend-platform frontend-app-communications
|
||||
|
||||
# This target is used by Travis.
|
||||
validate-no-uncommitted-package-lock-changes:
|
||||
|
||||
61
README.rst
61
README.rst
@@ -1,5 +1,5 @@
|
||||
frontend-app-communications
|
||||
#############################
|
||||
###########################
|
||||
|
||||
|license-badge| |status-badge| |ci-badge| |codecov-badge|
|
||||
|
||||
@@ -7,52 +7,56 @@ frontend-app-communications
|
||||
Purpose
|
||||
*******
|
||||
|
||||
A tool used by course teams to communicate with their learners. The interface for anything related to instructor to learner communications. Instructor bulk email, for example.
|
||||
A tool used by course teams to communicate with their learners. The interface for anything related to instructor-to-learner communications. Instructor bulk email, for example.
|
||||
|
||||
Getting started
|
||||
------------
|
||||
---------------
|
||||
|
||||
For now, this repo is not intergrated with devstack. You'll be running the app locally and not through docker. This does make setup a little easier.
|
||||
For now, this repo is not integrated with devstack. You'll be running the app locally and not through docker. This does make setup a little easier.
|
||||
|
||||
Cloning and Startup
|
||||
===================
|
||||
|
||||
1. Clone your new repo:
|
||||
1. Clone your new repo:
|
||||
|
||||
``git clone https://github.com/edx/frontend-app-communications.git``
|
||||
.. code-block:: bash
|
||||
|
||||
2. Use node v18.x.
|
||||
git clone https://github.com/edx/frontend-app-communications.git
|
||||
|
||||
The current version of the micro-frontend build scripts support node 18.
|
||||
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>`_.
|
||||
2. Use node v18.x.
|
||||
|
||||
3. Install npm dependencies:
|
||||
The current version of the micro-frontend build scripts supports node 18.
|
||||
Using other major versions of node *may* work, but this is unsupported. For
|
||||
convenience, this repository includes a ``.nvmrc`` file to help in setting the
|
||||
correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.
|
||||
|
||||
``cd frontend-app-communications && npm install``
|
||||
3. Install npm dependencies:
|
||||
|
||||
4. Update the application port to use for local development:
|
||||
.. code-block:: bash
|
||||
|
||||
Default port is 1984. If this does not work for you, update the line
|
||||
`PORT=1984` to your port in all .env.* files
|
||||
cd frontend-app-communications && npm install
|
||||
|
||||
5. Start the devserver. The app will be running at ``localhost:1984``, or whatever port you change it too.
|
||||
4. Update the application port to use for local development:
|
||||
|
||||
.. code-block::
|
||||
The default port is 1984. If this does not work for you, update the line
|
||||
``PORT=1984`` to your port in all ``.env.*`` files
|
||||
|
||||
npm start
|
||||
5. Start the devserver. The app will be running at ``localhost:1984``, or whatever port you change it too.
|
||||
|
||||
.. code-block:: bash
|
||||
|
||||
npm start
|
||||
|
||||
|
||||
Environment Variables/Setup Notes
|
||||
---------------------------------
|
||||
|
||||
If you wish to add new environment varibles for local testing, they should be listed in 2 places:
|
||||
If you wish to add new environment variables for local testing, they should be listed in 2 places:
|
||||
|
||||
1. In ``.env.development``
|
||||
2. Added to the ``mergeConfig`` found in ``src/index.jsx``
|
||||
|
||||
.. code-block::
|
||||
.. code-block:: jsx
|
||||
|
||||
initialize({
|
||||
config: () => {
|
||||
@@ -61,14 +65,19 @@ If you wish to add new environment varibles for local testing, they should be li
|
||||
}, 'CommuncationsAppConfig');
|
||||
|
||||
Running Tests
|
||||
---------------------------
|
||||
-------------
|
||||
|
||||
Tests use `jest` and `react-test-library`. To run all the tests for this repo:
|
||||
|
||||
.. code-block::
|
||||
.. code-block::
|
||||
|
||||
npm test
|
||||
npm test
|
||||
|
||||
Plugins
|
||||
=======
|
||||
This MFE can be customized using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
|
||||
|
||||
The parts of this MFE that can be customized in that manner are documented `here </src/plugin-slots>`_.
|
||||
|
||||
**Production Build**
|
||||
|
||||
@@ -77,7 +86,7 @@ The production build is created with ``npm run build``.
|
||||
Internationalization
|
||||
====================
|
||||
|
||||
Please see refer to the `frontend-platform i18n howto`_ for documentation on
|
||||
Please 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
|
||||
@@ -160,4 +169,4 @@ Please do not report security issues in public, and email security@openedx.org i
|
||||
|
||||
.. |codecov-badge| image:: https://codecov.io/github/openedx/frontend-app-communications/coverage.svg?branch=master
|
||||
:target: https://codecov.io/github/openedx/frontend-app-communications?branch=master
|
||||
:alt: Codecov
|
||||
:alt: Codecov
|
||||
|
||||
@@ -12,7 +12,8 @@ metadata:
|
||||
icon: "Article"
|
||||
annotations:
|
||||
openedx.org/arch-interest-groups: ""
|
||||
openedx.org/release: "master"
|
||||
spec:
|
||||
owner: group:frontend-all
|
||||
owner: group:committers-frontend
|
||||
type: "service"
|
||||
lifecycle: "production"
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
const { createConfig } = require('@edx/frontend-build');
|
||||
const { createConfig } = require('@openedx/frontend-build');
|
||||
|
||||
module.exports = createConfig('jest', {
|
||||
// setupFilesAfterEnv is used after the jest environment has been loaded. In general this is what you want.
|
||||
|
||||
@@ -23,9 +23,9 @@ module.exports = {
|
||||
**********************************************************************************************/
|
||||
|
||||
// { moduleName: '@edx/brand', dir: '../brand-openedx' }, // replace with your brand checkout
|
||||
// { moduleName: '@edx/paragon/scss/core', dir: '../paragon', dist: 'scss/core' },
|
||||
// { moduleName: '@edx/paragon/icons', dir: '../paragon', dist: 'icons' },
|
||||
// { moduleName: '@edx/paragon', dir: '../paragon', dist: 'dist' },
|
||||
// { moduleName: '@openedx/paragon/scss/core', dir: '../paragon', dist: 'scss/core' },
|
||||
// { moduleName: '@openedx/paragon/icons', dir: '../paragon', dist: 'icons' },
|
||||
// { moduleName: '@openedx/paragon', dir: '../paragon', dist: 'dist' },
|
||||
// { moduleName: '@edx/frontend-platform', dir: '../frontend-platform', dist: 'dist' },
|
||||
],
|
||||
};
|
||||
|
||||
@@ -1,9 +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
|
||||
|
||||
oeps: {}
|
||||
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
|
||||
19495
package-lock.json
generated
19495
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
33
package.json
33
package.json
@@ -11,18 +11,14 @@
|
||||
],
|
||||
"scripts": {
|
||||
"build": "fedx-scripts webpack",
|
||||
"i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
|
||||
"i18n_extract": "fedx-scripts formatjs extract",
|
||||
"lint": "fedx-scripts eslint --ext .js --ext .jsx .",
|
||||
"lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
|
||||
"snapshot": "fedx-scripts jest --updateSnapshot",
|
||||
"start": "fedx-scripts webpack-dev-server --progress",
|
||||
"dev": "PUBLIC_PATH=/communications/ 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"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "npm run lint"
|
||||
}
|
||||
},
|
||||
"author": "edX",
|
||||
"license": "AGPL-3.0",
|
||||
"homepage": "https://github.com/edx/frontend-app-communications#readme",
|
||||
@@ -33,17 +29,19 @@
|
||||
"url": "https://github.com/edx/frontend-app-communications/issues"
|
||||
},
|
||||
"dependencies": {
|
||||
"@edx/brand": "npm:@edx/brand-openedx@1.1.0",
|
||||
"@edx/frontend-component-footer": "12.2.0",
|
||||
"@edx/frontend-component-header": "4.6.0",
|
||||
"@edx/frontend-platform": "5.0.0",
|
||||
"@edx/paragon": "^20.44.0",
|
||||
"@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
|
||||
"@edx/frontend-component-footer": "^14.6.0",
|
||||
"@edx/frontend-component-header": "^6.4.0",
|
||||
"@edx/frontend-platform": "^8.3.1",
|
||||
"@edx/openedx-atlas": "^0.6.0",
|
||||
"@edx/tinymce-language-selector": "1.1.0",
|
||||
"@fortawesome/fontawesome-svg-core": "1.2.36",
|
||||
"@fortawesome/free-brands-svg-icons": "5.15.4",
|
||||
"@fortawesome/free-regular-svg-icons": "5.15.4",
|
||||
"@fortawesome/free-solid-svg-icons": "5.15.4",
|
||||
"@fortawesome/react-fontawesome": "0.2.0",
|
||||
"@openedx/frontend-plugin-framework": "^1.6.0",
|
||||
"@openedx/paragon": "^22.16.0",
|
||||
"@tinymce/tinymce-react": "3.14.0",
|
||||
"axios": "0.27.2",
|
||||
"classnames": "2.3.2",
|
||||
@@ -51,8 +49,8 @@
|
||||
"jquery": "3.6.1",
|
||||
"popper.js": "1.16.1",
|
||||
"prop-types": "15.8.1",
|
||||
"react": "17.0.2",
|
||||
"react-dom": "17.0.2",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-helmet": "^6.1.0",
|
||||
"react-redux": "7.2.9",
|
||||
"react-router": "6.15.0",
|
||||
@@ -63,14 +61,13 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@edx/browserslist-config": "^1.2.0",
|
||||
"@edx/frontend-build": "^12.7.0",
|
||||
"@edx/reactifex": "^2.1.1",
|
||||
"@testing-library/jest-dom": "5.16.5",
|
||||
"@testing-library/react": "12.1.5",
|
||||
"@openedx/frontend-build": "^14.3.3",
|
||||
"@testing-library/jest-dom": "^6.6.3",
|
||||
"@testing-library/react": "^16.2.0",
|
||||
"axios-mock-adapter": "1.21.2",
|
||||
"glob": "7.2.3",
|
||||
"husky": "7.0.4",
|
||||
"jest": "27.5.1",
|
||||
"jest": "29.7.0",
|
||||
"prettier": "2.8.1",
|
||||
"rosie": "2.1.0"
|
||||
}
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
<title>Communications | <%= 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="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
"automerge": true
|
||||
},
|
||||
{
|
||||
"matchPackagePatterns": ["@edx"],
|
||||
"matchPackagePatterns": ["@edx", "@openedx"],
|
||||
"matchUpdateTypes": ["minor", "patch"],
|
||||
"automerge": true
|
||||
}
|
||||
|
||||
38
src/__snapshots__/index.test.jsx.snap
Normal file
38
src/__snapshots__/index.test.jsx.snap
Normal file
@@ -0,0 +1,38 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`app registry subscribe: APP_INIT_ERROR. snapshot: displays an ErrorPage to root element 1`] = `
|
||||
<UNDEFINED>
|
||||
<ErrorPage
|
||||
message="test-error-message"
|
||||
/>
|
||||
</UNDEFINED>
|
||||
`;
|
||||
|
||||
exports[`app registry subscribe: APP_READY. links App to root element 1`] = `
|
||||
<UNDEFINED>
|
||||
<AppProvider>
|
||||
<HelmetWrapper
|
||||
defer={true}
|
||||
encodeSpecialCharacters={true}
|
||||
>
|
||||
<link
|
||||
href="favicon-url"
|
||||
rel="shortcut icon"
|
||||
type="image/x-icon"
|
||||
/>
|
||||
</HelmetWrapper>
|
||||
<Routes>
|
||||
<Route
|
||||
element={
|
||||
<AuthenticatedPageRoute>
|
||||
<Page Container>
|
||||
<Bulk Email Tool />
|
||||
</Page Container>
|
||||
</AuthenticatedPageRoute>
|
||||
}
|
||||
path="/courses/:courseId/bulk_email"
|
||||
/>
|
||||
</Routes>
|
||||
</AppProvider>
|
||||
</UNDEFINED>
|
||||
`;
|
||||
@@ -3,7 +3,7 @@ import React from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
|
||||
import { ErrorPage } from '@edx/frontend-platform/react';
|
||||
import { Container } from '@edx/paragon';
|
||||
import { Container } from '@openedx/paragon';
|
||||
import { FormattedMessage } from '@edx/frontend-platform/i18n';
|
||||
import BulkEmailTaskManager from './bulk-email-task-manager/BulkEmailTaskManager';
|
||||
import NavigationTabs from '../navigation-tabs/NavigationTabs';
|
||||
@@ -24,7 +24,7 @@ export default function BulkEmailTool() {
|
||||
<Container size="md">
|
||||
<BackToInstructor courseId={courseId} />
|
||||
<div className="row pb-4.5">
|
||||
<h1 className="text-primary-500" id="main-content">
|
||||
<h1 className="text-primary-500">
|
||||
<FormattedMessage
|
||||
id="bulk.email.send.email.header"
|
||||
defaultMessage="Send an email"
|
||||
@@ -33,7 +33,11 @@ export default function BulkEmailTool() {
|
||||
</h1>
|
||||
</div>
|
||||
<div className="row">
|
||||
<BulkEmailForm courseId={courseId} cohorts={courseMetadata.cohorts} />
|
||||
<BulkEmailForm
|
||||
courseId={courseId}
|
||||
cohorts={courseMetadata.cohorts}
|
||||
courseModes={courseMetadata.courseModes}
|
||||
/>
|
||||
</div>
|
||||
<div className="row py-5">
|
||||
<BulkEmailTaskManager courseId={courseId} />
|
||||
|
||||
@@ -4,10 +4,10 @@ import PropTypes from 'prop-types';
|
||||
import {
|
||||
Button,
|
||||
Form, Icon, StatefulButton, Toast, useToggle,
|
||||
} from '@edx/paragon';
|
||||
} from '@openedx/paragon';
|
||||
import {
|
||||
SpinnerSimple, Cancel, Send, Event, Check,
|
||||
} from '@edx/paragon/icons';
|
||||
} from '@openedx/paragon/icons';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import classNames from 'classnames';
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
@@ -47,7 +47,12 @@ const FORM_ACTIONS = {
|
||||
};
|
||||
|
||||
function BulkEmailForm(props) {
|
||||
const { courseId, cohorts, intl } = props;
|
||||
const {
|
||||
courseId,
|
||||
cohorts,
|
||||
courseModes,
|
||||
intl,
|
||||
} = props;
|
||||
const [{ editor }, dispatch] = useContext(BulkEmailContext);
|
||||
const [emailFormStatus, setEmailFormStatus] = useState(FORM_SUBMIT_STATES.DEFAULT);
|
||||
const [emailFormValidation, setEmailFormValidation] = useState({
|
||||
@@ -272,10 +277,14 @@ function BulkEmailForm(props) {
|
||||
handleCheckboxes={onRecipientChange}
|
||||
additionalCohorts={cohorts}
|
||||
isValid={emailFormValidation.recipients}
|
||||
courseModes={courseModes}
|
||||
/>
|
||||
<Form.Group controlId="emailSubject">
|
||||
<Form.Label className="h3 text-primary-500">{intl.formatMessage(messages.bulkEmailSubjectLabel)}</Form.Label>
|
||||
<Form.Control name="emailSubject" className="w-lg-50" onChange={onFormChange} value={editor.emailSubject} />
|
||||
<Form.Control name="emailSubject" className="w-lg-50" onChange={onFormChange} value={editor.emailSubject} maxLength={128} />
|
||||
<Form.Control.Feedback className="px-3" type="default">
|
||||
{intl.formatMessage(messages.bulkEmailFormSubjectTip)}
|
||||
</Form.Control.Feedback>
|
||||
{!emailFormValidation.subject && (
|
||||
<Form.Control.Feedback className="px-3" hasIcon type="invalid">
|
||||
{intl.formatMessage(messages.bulkEmailFormSubjectError)}
|
||||
@@ -384,6 +393,12 @@ BulkEmailForm.propTypes = {
|
||||
courseId: PropTypes.string.isRequired,
|
||||
cohorts: PropTypes.arrayOf(PropTypes.string),
|
||||
intl: intlShape.isRequired,
|
||||
courseModes: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
slug: PropTypes.string.isRequired,
|
||||
name: PropTypes.string.isRequired,
|
||||
}),
|
||||
).isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(BulkEmailForm);
|
||||
|
||||
@@ -2,13 +2,15 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import { FormattedMessage } from '@edx/frontend-platform/i18n';
|
||||
import { Form } from '@edx/paragon';
|
||||
import { Form } from '@openedx/paragon';
|
||||
import useMobileResponsive from '../../../utils/useMobileResponsive';
|
||||
|
||||
function ScheduleEmailForm(props) {
|
||||
const isMobile = useMobileResponsive();
|
||||
const { isValid, onDateTimeChange, dateTime } = props;
|
||||
const { date, time } = dateTime;
|
||||
const descriptionDate = new Date();
|
||||
descriptionDate.setDate(new Date().getDate() + 1);
|
||||
return (
|
||||
<Form.Group>
|
||||
<div className={classNames('d-flex', isMobile ? 'flex-column' : 'flex-row', 'my-3')}>
|
||||
@@ -30,7 +32,10 @@ function ScheduleEmailForm(props) {
|
||||
<small className="text-gray-500 x-small">
|
||||
<FormattedMessage
|
||||
id="bulk.email.form.schedule.date.description"
|
||||
defaultMessage="Enter a start date, e.g. 11/27/2023"
|
||||
defaultMessage="Enter a start date, e.g. {date}"
|
||||
values={{
|
||||
date: descriptionDate.toLocaleDateString(),
|
||||
}}
|
||||
/>
|
||||
</small>
|
||||
</div>
|
||||
@@ -52,7 +57,10 @@ function ScheduleEmailForm(props) {
|
||||
<small className="text-gray-500 x-small">
|
||||
<FormattedMessage
|
||||
id="bulk.email.form.schedule.time.description"
|
||||
defaultMessage="Enter a start time, e.g. 09:00 AM"
|
||||
defaultMessage="Enter a start time, e.g. {time}"
|
||||
values={{
|
||||
time: descriptionDate.toLocaleTimeString([], { timeStyle: 'short' }),
|
||||
}}
|
||||
/>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Form } from '@edx/paragon';
|
||||
import { Form } from '@openedx/paragon';
|
||||
import { FormattedMessage } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import './bulkEmailRecepient.scss';
|
||||
@@ -14,7 +14,13 @@ const DEFAULT_GROUPS = {
|
||||
};
|
||||
|
||||
export default function BulkEmailRecipient(props) {
|
||||
const { handleCheckboxes, selectedGroups, additionalCohorts } = props;
|
||||
const {
|
||||
handleCheckboxes,
|
||||
selectedGroups,
|
||||
additionalCohorts,
|
||||
courseModes,
|
||||
} = props;
|
||||
const hasCourseModes = courseModes && courseModes.length > 1;
|
||||
return (
|
||||
<Form.Group>
|
||||
<Form.Label>
|
||||
@@ -50,18 +56,24 @@ export default function BulkEmailRecipient(props) {
|
||||
description="A selectable choice from a list of potential email recipients"
|
||||
/>
|
||||
</Form.Checkbox>
|
||||
<Form.Checkbox
|
||||
key="track:verified"
|
||||
value="track:verified"
|
||||
disabled={selectedGroups.find((group) => group === DEFAULT_GROUPS.ALL_LEARNERS)}
|
||||
className="col col-lg-4 col-sm-6 col-12"
|
||||
>
|
||||
<FormattedMessage
|
||||
id="bulk.email.form.recipients.verified"
|
||||
defaultMessage="Learners in the verified certificate track"
|
||||
description="A selectable choice from a list of potential email recipients"
|
||||
/>
|
||||
</Form.Checkbox>
|
||||
{
|
||||
// additional modes
|
||||
hasCourseModes
|
||||
&& courseModes.map((courseMode) => (
|
||||
<Form.Checkbox
|
||||
key={`track:${courseMode.slug}`}
|
||||
value={`track:${courseMode.slug}`}
|
||||
disabled={selectedGroups.find((group) => group === DEFAULT_GROUPS.ALL_LEARNERS)}
|
||||
className="col col-lg-4 col-sm-6 col-12"
|
||||
>
|
||||
<FormattedMessage
|
||||
id="bulk.email.form.mode.label"
|
||||
defaultMessage="Learners in the {courseModeName} Track"
|
||||
values={{ courseModeName: courseMode.name }}
|
||||
/>
|
||||
</Form.Checkbox>
|
||||
))
|
||||
}
|
||||
{
|
||||
// additional cohorts
|
||||
additionalCohorts
|
||||
@@ -80,18 +92,6 @@ export default function BulkEmailRecipient(props) {
|
||||
</Form.Checkbox>
|
||||
))
|
||||
}
|
||||
<Form.Checkbox
|
||||
key="track:audit"
|
||||
value="track:audit"
|
||||
disabled={selectedGroups.find((group) => group === DEFAULT_GROUPS.ALL_LEARNERS)}
|
||||
className="col col-lg-4 col-sm-6 col-12"
|
||||
>
|
||||
<FormattedMessage
|
||||
id="bulk.email.form.recipients.audit"
|
||||
defaultMessage="Learners in the audit track"
|
||||
description="A selectable choice from a list of potential email recipients"
|
||||
/>
|
||||
</Form.Checkbox>
|
||||
<Form.Checkbox
|
||||
key="learners"
|
||||
value="learners"
|
||||
@@ -127,4 +127,10 @@ BulkEmailRecipient.propTypes = {
|
||||
handleCheckboxes: PropTypes.func.isRequired,
|
||||
isValid: PropTypes.bool,
|
||||
additionalCohorts: PropTypes.arrayOf(PropTypes.string),
|
||||
courseModes: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
slug: PropTypes.string.isRequired,
|
||||
name: PropTypes.string.isRequired,
|
||||
}),
|
||||
).isRequired,
|
||||
};
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
import { Factory } from 'rosie'; // eslint-disable-line import/no-extraneous-dependencies
|
||||
|
||||
/**
|
||||
* Generates an array of course mode objects using Rosie Factory.
|
||||
* @returns {Array<Object>} An array of course mode objects with attributes 'slug' and 'name'.
|
||||
*/
|
||||
const courseModeFactory = () => {
|
||||
const AuditModeFactory = Factory.define('AuditModeFactory')
|
||||
.attr('slug', 'audit')
|
||||
.attr('name', 'Audit');
|
||||
|
||||
const VerifiedModeFactory = Factory.define('VerifiedModeFactory')
|
||||
.attr('slug', 'verified')
|
||||
.attr('name', 'Verified Certificate');
|
||||
|
||||
return [
|
||||
AuditModeFactory.build(),
|
||||
VerifiedModeFactory.build(),
|
||||
];
|
||||
};
|
||||
|
||||
export default courseModeFactory;
|
||||
@@ -41,6 +41,11 @@ const messages = defineMessages({
|
||||
defaultMessage: 'Subject',
|
||||
description: 'Email subject line input label. Meant to have colon or equivilant punctuation.',
|
||||
},
|
||||
bulkEmailFormSubjectTip: {
|
||||
id: 'bulk.email.form.subject.tip',
|
||||
defaultMessage: '(Maximum 128 characters)',
|
||||
description: 'Default Subject tip',
|
||||
},
|
||||
bulkEmailFormSubjectError: {
|
||||
id: 'bulk.email.form.subject.error',
|
||||
defaultMessage: 'A subject is required',
|
||||
|
||||
@@ -12,6 +12,7 @@ import * as bulkEmailFormApi from '../data/api';
|
||||
import { BulkEmailContext, BulkEmailProvider } from '../../bulk-email-context';
|
||||
import { formatDate } from '../../../../utils/formatDateAndTime';
|
||||
import cohortFactory from '../data/__factories__/bulkEmailFormCohort.factory';
|
||||
import courseModeFactory from '../data/__factories__/bulkEmailFormCourseMode.factory';
|
||||
|
||||
jest.mock('../../text-editor/TextEditor');
|
||||
|
||||
@@ -20,12 +21,17 @@ const dispatchMock = jest.fn();
|
||||
|
||||
const tomorrow = new Date();
|
||||
tomorrow.setDate(new Date().getDate() + 1);
|
||||
const courseMode = courseModeFactory();
|
||||
|
||||
function renderBulkEmailForm() {
|
||||
const { cohorts } = cohortFactory.build();
|
||||
return (
|
||||
<BulkEmailProvider>
|
||||
<BulkEmailForm courseId="test" cohorts={cohorts} />
|
||||
<BulkEmailForm
|
||||
courseId="test"
|
||||
cohorts={cohorts}
|
||||
courseModes={courseMode}
|
||||
/>
|
||||
</BulkEmailProvider>
|
||||
);
|
||||
}
|
||||
@@ -33,7 +39,7 @@ function renderBulkEmailForm() {
|
||||
function renderBulkEmailFormContext(value) {
|
||||
return (
|
||||
<BulkEmailContext.Provider value={[value, dispatchMock]}>
|
||||
<BulkEmailForm courseId="test" />
|
||||
<BulkEmailForm courseId="test" courseMode={courseMode} />
|
||||
</BulkEmailContext.Provider>
|
||||
);
|
||||
}
|
||||
@@ -96,8 +102,8 @@ describe('bulk-email-form', () => {
|
||||
test('Checking "All Learners" disables each learner group', async () => {
|
||||
render(renderBulkEmailForm());
|
||||
fireEvent.click(screen.getByRole('checkbox', { name: 'All Learners' }));
|
||||
const verifiedLearners = screen.getByRole('checkbox', { name: 'Learners in the verified certificate track' });
|
||||
const auditLearners = screen.getByRole('checkbox', { name: 'Learners in the audit track' });
|
||||
const verifiedLearners = screen.getByRole('checkbox', { name: 'Learners in the Verified Certificate Track' });
|
||||
const auditLearners = screen.getByRole('checkbox', { name: 'Learners in the Audit Track' });
|
||||
const { cohorts } = cohortFactory.build();
|
||||
cohorts.forEach(cohort => expect(screen.getByRole('checkbox', { name: `Cohort: ${cohort}` })).toBeDisabled());
|
||||
expect(verifiedLearners).toBeDisabled();
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
/* eslint-disable react/no-unstable-nested-components */
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import {
|
||||
Button, Collapsible, Icon,
|
||||
} from '@edx/paragon';
|
||||
import { SpinnerSimple } from '@edx/paragon/icons';
|
||||
} from '@openedx/paragon';
|
||||
import { SpinnerSimple } from '@openedx/paragon/icons';
|
||||
import messages from './messages';
|
||||
import { getSentEmailHistory } from './data/api';
|
||||
import BulkEmailTaskManagerTable from './BulkEmailHistoryTable';
|
||||
@@ -51,17 +51,15 @@ function BulkEmailContentHistory({ intl }) {
|
||||
* up a level (the `subject` field). We also convert the `sent_to` data to be a String rather than an array to fix a
|
||||
* display bug in the table.
|
||||
*/
|
||||
function transformDataForTable() {
|
||||
let tableData = [];
|
||||
if (emailHistoryData) {
|
||||
tableData = emailHistoryData.map((item) => ({
|
||||
...item,
|
||||
subject: item.email.subject,
|
||||
sent_to: item.sent_to.join(', '),
|
||||
}));
|
||||
}
|
||||
return tableData;
|
||||
}
|
||||
const transformDataForTable = useMemo(() => {
|
||||
const tableData = emailHistoryData?.map((item) => ({
|
||||
...item,
|
||||
subject: item.email.subject,
|
||||
sent_to: item.sent_to.join(', '),
|
||||
created: new Date(item.created).toLocaleString(),
|
||||
}));
|
||||
return tableData || [];
|
||||
}, [emailHistoryData]);
|
||||
|
||||
/**
|
||||
* This function is responsible for setting the current `messageContent` state data. This will be the contents of a
|
||||
@@ -102,7 +100,7 @@ function BulkEmailContentHistory({ intl }) {
|
||||
* contents of a previously sent message.
|
||||
*/
|
||||
const additionalColumns = () => {
|
||||
const tableData = transformDataForTable();
|
||||
const tableData = transformDataForTable;
|
||||
|
||||
return [
|
||||
{
|
||||
@@ -139,7 +137,7 @@ function BulkEmailContentHistory({ intl }) {
|
||||
{showHistoricalEmailContentTable ? (
|
||||
<BulkEmailTaskManagerTable
|
||||
errorRetrievingData={errorRetrievingData}
|
||||
tableData={transformDataForTable()}
|
||||
tableData={transformDataForTable}
|
||||
tableDescription={intl.formatMessage(messages.emailHistoryTableViewMessageInstructions)}
|
||||
alertWarningMessage={intl.formatMessage(messages.noEmailData)}
|
||||
alertErrorMessage={intl.formatMessage(messages.errorFetchingEmailHistoryData)}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Alert, DataTable } from '@edx/paragon';
|
||||
import { Alert, DataTable } from '@openedx/paragon';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
@@ -2,8 +2,8 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import { Hyperlink, Alert } from '@edx/paragon';
|
||||
import { WarningFilled } from '@edx/paragon/icons';
|
||||
import { Hyperlink, Alert } from '@openedx/paragon';
|
||||
import { WarningFilled } from '@openedx/paragon/icons';
|
||||
import { FormattedMessage } from '@edx/frontend-platform/i18n';
|
||||
|
||||
export default function BulkEmailPendingTasksAlert(props) {
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import { Icon, Collapsible } from '@edx/paragon';
|
||||
import { SpinnerSimple } from '@edx/paragon/icons';
|
||||
import { Icon, Collapsible } from '@openedx/paragon';
|
||||
import { SpinnerSimple } from '@openedx/paragon/icons';
|
||||
import { getEmailTaskHistory } from './data/api';
|
||||
import messages from './messages';
|
||||
|
||||
@@ -41,6 +41,14 @@ function BulkEmailTaskHistory({ intl }) {
|
||||
setShowHistoricalTaskContentTable(true);
|
||||
}
|
||||
|
||||
const transformDataForTable = useMemo(() => {
|
||||
const tableData = emailTaskHistoryData?.map((item) => ({
|
||||
...item,
|
||||
created: new Date(item.created).toLocaleString(),
|
||||
}));
|
||||
return tableData || [];
|
||||
}, [emailTaskHistoryData]);
|
||||
|
||||
const tableColumns = [
|
||||
{
|
||||
Header: `${intl.formatMessage(messages.taskHistoryTableColumnHeaderTaskType)}`,
|
||||
@@ -95,7 +103,7 @@ function BulkEmailTaskHistory({ intl }) {
|
||||
{showHistoricalTaskContentTable ? (
|
||||
<BulkEmailTaskManagerTable
|
||||
errorRetrievingData={errorRetrievingData}
|
||||
tableData={emailTaskHistoryData}
|
||||
tableData={transformDataForTable}
|
||||
alertWarningMessage={intl.formatMessage(messages.noTaskHistoryData)}
|
||||
alertErrorMessage={intl.formatMessage(messages.errorFetchingTaskHistoryData)}
|
||||
columns={tableColumns}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { useContext } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { ActionRow, Button, ModalDialog } from '@edx/paragon';
|
||||
import { ActionRow, Button, ModalDialog } from '@openedx/paragon';
|
||||
import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import messages from './messages';
|
||||
import { BulkEmailContext } from '../bulk-email-context';
|
||||
|
||||
@@ -7,10 +7,10 @@ import React, {
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import {
|
||||
Alert, DataTable, Icon, IconButton, useToggle,
|
||||
} from '@edx/paragon';
|
||||
} from '@openedx/paragon';
|
||||
import {
|
||||
Delete, Info, Visibility, Edit,
|
||||
} from '@edx/paragon/icons';
|
||||
} from '@openedx/paragon/icons';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { BulkEmailContext } from '../../bulk-email-context';
|
||||
import { deleteScheduledEmailThunk, getScheduledBulkEmailThunk } from './data/thunks';
|
||||
@@ -26,6 +26,7 @@ function flattenScheduledEmailsArray(emails) {
|
||||
emailId: email.courseEmail.id,
|
||||
task: email.task,
|
||||
taskDue: new Date(email.taskDue).toLocaleString(),
|
||||
taskDueUTC: email.taskDue,
|
||||
...email.courseEmail,
|
||||
targets: email.courseEmail.targets.join(', '),
|
||||
}));
|
||||
@@ -91,10 +92,10 @@ function BulkEmailScheduledEmailsTable({ intl }) {
|
||||
const handleEditEmail = (row) => {
|
||||
const {
|
||||
original: {
|
||||
htmlMessage: emailBody, subject: emailSubject, taskDue, targets, schedulingId, emailId,
|
||||
htmlMessage: emailBody, subject: emailSubject, taskDueUTC, targets, schedulingId, emailId,
|
||||
},
|
||||
} = row;
|
||||
const dateTime = new Date(taskDue);
|
||||
const dateTime = new Date(taskDueUTC);
|
||||
const emailRecipients = targets.replaceAll('-', ':').split(', ');
|
||||
const scheduleDate = formatDate(dateTime);
|
||||
const scheduleTime = formatTime(dateTime);
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
*/
|
||||
import React from 'react';
|
||||
import {
|
||||
render, screen, fireEvent, cleanup, act, initializeMockApp,
|
||||
render, screen, fireEvent, cleanup, initializeMockApp,
|
||||
} from '../../../../setupTest';
|
||||
import { BulkEmailProvider } from '../../bulk-email-context';
|
||||
import BulkEmailContentHistory from '../BulkEmailContentHistory';
|
||||
@@ -41,105 +41,99 @@ describe('BulkEmailContentHistory component', () => {
|
||||
});
|
||||
|
||||
test('renders a table when the button is pressed and data is returned', async () => {
|
||||
await act(async () => {
|
||||
const emailHistoryData = buildEmailContentHistoryData(1);
|
||||
getSentEmailHistory.mockImplementation(() => emailHistoryData);
|
||||
const emailHistoryData = buildEmailContentHistoryData(1);
|
||||
getSentEmailHistory.mockImplementation(() => emailHistoryData);
|
||||
|
||||
render(renderBulkEmailContentHistory());
|
||||
render(renderBulkEmailContentHistory());
|
||||
|
||||
const showEmailContentHistoryButton = await screen.findByText('Show Sent Email History');
|
||||
fireEvent.click(showEmailContentHistoryButton);
|
||||
const showEmailContentHistoryButton = await screen.findByText('Show Sent Email History');
|
||||
fireEvent.click(showEmailContentHistoryButton);
|
||||
|
||||
// verify component structure
|
||||
const tableDescription = await screen.findByText(
|
||||
'To read a sent email message, click the `View Message` button within the table.',
|
||||
);
|
||||
expect(tableDescription).toBeTruthy();
|
||||
// verify component structure
|
||||
const tableDescription = await screen.findByText(
|
||||
'To read a sent email message, click the `View Message` button within the table.',
|
||||
);
|
||||
expect(tableDescription).toBeTruthy();
|
||||
|
||||
// verify table structure
|
||||
expect(await screen.findByText('Subject')).toBeTruthy();
|
||||
expect(await screen.findByText('Sent By')).toBeTruthy();
|
||||
expect(await screen.findByText('Sent To')).toBeTruthy();
|
||||
expect(await screen.findByText('Time Sent')).toBeTruthy();
|
||||
expect(await screen.findByText('Number Sent')).toBeTruthy();
|
||||
// verify table structure
|
||||
expect(await screen.findByText('Subject')).toBeTruthy();
|
||||
expect(await screen.findByText('Sent By')).toBeTruthy();
|
||||
expect(await screen.findByText('Sent To')).toBeTruthy();
|
||||
expect(await screen.findByText('Time Sent')).toBeTruthy();
|
||||
expect(await screen.findByText('Number Sent')).toBeTruthy();
|
||||
|
||||
// verify table contents
|
||||
const { emails } = emailHistoryData;
|
||||
const email = emails[0];
|
||||
expect(await screen.findByText(email.created)).toBeTruthy();
|
||||
expect(await screen.findByText(email.number_sent)).toBeTruthy();
|
||||
expect(await screen.findByText(email.requester)).toBeTruthy();
|
||||
expect(await screen.findByText(email.sent_to.join(', '))).toBeTruthy();
|
||||
expect(await screen.findByText(email.email.subject)).toBeTruthy();
|
||||
// verify screen reader only <span />
|
||||
expect(await screen.findByText('0')).toHaveClass('sr-only');
|
||||
expect(await screen.findAllByText('View Message')).toBeTruthy();
|
||||
});
|
||||
// verify table contents
|
||||
const { emails } = emailHistoryData;
|
||||
const email = emails[0];
|
||||
const createdDate = new Date(email.created).toLocaleString();
|
||||
expect(await screen.findByText(createdDate)).toBeTruthy();
|
||||
expect(await screen.findByText(email.number_sent)).toBeTruthy();
|
||||
expect(await screen.findByText(email.requester)).toBeTruthy();
|
||||
expect(await screen.findByText(email.sent_to.join(', '))).toBeTruthy();
|
||||
expect(await screen.findByText(email.email.subject)).toBeTruthy();
|
||||
// verify screen reader only <span />
|
||||
expect(await screen.findByText('0')).toHaveClass('sr-only');
|
||||
expect(await screen.findAllByText('View Message')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('renders a modal that will display the contents of the previously sent message to a user', async () => {
|
||||
await act(async () => {
|
||||
const emailHistoryData = buildEmailContentHistoryData(1);
|
||||
getSentEmailHistory.mockImplementation(() => emailHistoryData);
|
||||
const emailHistoryData = buildEmailContentHistoryData(1);
|
||||
getSentEmailHistory.mockImplementation(() => emailHistoryData);
|
||||
|
||||
render(renderBulkEmailContentHistory());
|
||||
render(renderBulkEmailContentHistory());
|
||||
|
||||
const showEmailContentHistoryButton = await screen.findByText('Show Sent Email History');
|
||||
fireEvent.click(showEmailContentHistoryButton);
|
||||
const showEmailContentHistoryButton = await screen.findByText('Show Sent Email History');
|
||||
fireEvent.click(showEmailContentHistoryButton);
|
||||
|
||||
const viewMessageButton = await screen.findByText('View Message');
|
||||
fireEvent.click(viewMessageButton);
|
||||
const viewMessageButton = await screen.findByText('View Message');
|
||||
fireEvent.click(viewMessageButton);
|
||||
|
||||
// verify modal components and behavior
|
||||
const { emails } = emailHistoryData;
|
||||
const email = emails[0];
|
||||
const closeButton = await screen.findAllByText('Close');
|
||||
// verify modal components and behavior
|
||||
const { emails } = emailHistoryData;
|
||||
const email = emails[0];
|
||||
const closeButton = await screen.findAllByText('Close');
|
||||
|
||||
expect(closeButton).toBeTruthy();
|
||||
expect(await screen.findByText('Subject:')).toBeTruthy();
|
||||
expect(await screen.findByText('Sent by:')).toBeTruthy();
|
||||
expect(await screen.findByText('Time sent:')).toBeTruthy();
|
||||
expect(await screen.findByText('Sent to:')).toBeTruthy();
|
||||
expect(await screen.findByText('Message:')).toBeTruthy();
|
||||
expect(await screen.findAllByText(email.email.subject)).toBeTruthy();
|
||||
expect(await screen.findAllByText(email.requester)).toBeTruthy();
|
||||
expect(await screen.findAllByText(email.created)).toBeTruthy();
|
||||
expect(await screen.findAllByText(email.sent_to.join(', '))).toBeTruthy();
|
||||
// .replace() call strips the HTML tags from the string
|
||||
expect(await screen.findByText(email.email.html_message.replace(/<[^>]*>?/gm, ''))).toBeTruthy();
|
||||
});
|
||||
expect(closeButton).toBeTruthy();
|
||||
expect(await screen.findByText('Subject:')).toBeTruthy();
|
||||
expect(await screen.findByText('Sent by:')).toBeTruthy();
|
||||
expect(await screen.findByText('Time sent:')).toBeTruthy();
|
||||
expect(await screen.findByText('Sent to:')).toBeTruthy();
|
||||
expect(await screen.findByText('Message:')).toBeTruthy();
|
||||
expect(await screen.findAllByText(email.email.subject)).toBeTruthy();
|
||||
expect(await screen.findAllByText(email.requester)).toBeTruthy();
|
||||
const createdDate = new Date(email.created).toLocaleString();
|
||||
expect(await screen.findAllByText(createdDate)).toBeTruthy();
|
||||
expect(await screen.findAllByText(email.sent_to.join(', '))).toBeTruthy();
|
||||
// .replace() call strips the HTML tags from the string
|
||||
expect(await screen.findByText(email.email.html_message.replace(/<[^>]*>?/gm, ''))).toBeTruthy();
|
||||
});
|
||||
|
||||
test('renders a warning Alert when the button is pressed but there is no data to display', async () => {
|
||||
await act(async () => {
|
||||
const emailHistoryData = buildEmailContentHistoryData(0);
|
||||
getSentEmailHistory.mockImplementation(() => emailHistoryData);
|
||||
// render the component
|
||||
render(renderBulkEmailContentHistory());
|
||||
// press the `show sent email history` button to initiate data retrieval
|
||||
const showEmailContentHistoryButton = await screen.findByText('Show Sent Email History');
|
||||
fireEvent.click(showEmailContentHistoryButton);
|
||||
// verify that an alert is displayed since the array of tasks is empty
|
||||
const alertMessage = await screen.findByText('There is no email history for this course.');
|
||||
expect(alertMessage).toBeTruthy();
|
||||
});
|
||||
const emailHistoryData = buildEmailContentHistoryData(0);
|
||||
getSentEmailHistory.mockImplementation(() => emailHistoryData);
|
||||
// render the component
|
||||
render(renderBulkEmailContentHistory());
|
||||
// press the `show sent email history` button to initiate data retrieval
|
||||
const showEmailContentHistoryButton = await screen.findByText('Show Sent Email History');
|
||||
fireEvent.click(showEmailContentHistoryButton);
|
||||
// verify that an alert is displayed since the array of tasks is empty
|
||||
const alertMessage = await screen.findByText('There is no email history for this course.');
|
||||
expect(alertMessage).toBeTruthy();
|
||||
});
|
||||
|
||||
test('renders an error Alert when the button is pressed and an error occurs retrieving data', async () => {
|
||||
await act(async () => {
|
||||
getSentEmailHistory.mockImplementation(() => {
|
||||
throw new Error();
|
||||
});
|
||||
// render the component
|
||||
render(renderBulkEmailContentHistory());
|
||||
// press the `show sent email history` button to initiate data retrieval
|
||||
const showEmailContentHistoryButton = await screen.findByText('Show Sent Email History');
|
||||
fireEvent.click(showEmailContentHistoryButton);
|
||||
// verify that an alert is displayed since the array of tasks is empty
|
||||
const alertMessage = await screen.findByText(
|
||||
'An error occurred retrieving email history data for this course. Please try again later.',
|
||||
);
|
||||
expect(alertMessage).toBeTruthy();
|
||||
getSentEmailHistory.mockImplementation(() => {
|
||||
throw new Error();
|
||||
});
|
||||
// render the component
|
||||
render(renderBulkEmailContentHistory());
|
||||
// press the `show sent email history` button to initiate data retrieval
|
||||
const showEmailContentHistoryButton = await screen.findByText('Show Sent Email History');
|
||||
fireEvent.click(showEmailContentHistoryButton);
|
||||
// verify that an alert is displayed since the array of tasks is empty
|
||||
const alertMessage = await screen.findByText(
|
||||
'An error occurred retrieving email history data for this course. Please try again later.',
|
||||
);
|
||||
expect(alertMessage).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -61,7 +61,7 @@ describe('BulkEmailPendingTasks component', () => {
|
||||
expect(await screen.findByText('State')).toBeTruthy();
|
||||
expect(await screen.findByText('Status')).toBeTruthy();
|
||||
expect(await screen.findByText('Task Progress')).toBeTruthy();
|
||||
expect(await screen.findAllByText('Showing 1 of 1.')).toBeTruthy();
|
||||
expect(await screen.findAllByText('Showing 1 - 1 of 1.')).toBeTruthy();
|
||||
|
||||
// verification of table contents
|
||||
const { tasks } = pendingInstructorTaskData;
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
*/
|
||||
import React from 'react';
|
||||
import {
|
||||
render, screen, fireEvent, cleanup, act, initializeMockApp,
|
||||
render, screen, fireEvent, cleanup, initializeMockApp,
|
||||
} from '../../../../setupTest';
|
||||
import BulkEmailTaskHistory from '../BulkEmailTaskHistory';
|
||||
import { getEmailTaskHistory } from '../data/api';
|
||||
@@ -32,71 +32,66 @@ describe('BulkEmailTaskHistory component', () => {
|
||||
});
|
||||
|
||||
test('renders a table properly when the button is pressed and data is returned', async () => {
|
||||
await act(async () => {
|
||||
// build our mocked response
|
||||
const taskHistoryData = buildEmailTaskHistoryData(1);
|
||||
getEmailTaskHistory.mockImplementation(() => taskHistoryData);
|
||||
// render the component
|
||||
render(<BulkEmailTaskHistory />);
|
||||
// press the `show task history button` to initiate data retrieval and rendering of the table in our component
|
||||
const showTaskHistoryButton = await screen.findByText('Show Email Task History');
|
||||
fireEvent.click(showTaskHistoryButton);
|
||||
// verification of table structure
|
||||
expect(await screen.findByText('Task Type')).toBeTruthy();
|
||||
expect(await screen.findByText('Task Inputs')).toBeTruthy();
|
||||
expect(await screen.findByText('Task Id')).toBeTruthy();
|
||||
expect(await screen.findByText('Requester')).toBeTruthy();
|
||||
expect(await screen.findByText('Submitted')).toBeTruthy();
|
||||
expect(await screen.findByText('Duration (seconds)')).toBeTruthy();
|
||||
expect(await screen.findByText('State')).toBeTruthy();
|
||||
expect(await screen.findByText('Status')).toBeTruthy();
|
||||
expect(await screen.findByText('Task Progress')).toBeTruthy();
|
||||
expect(await screen.findAllByText('Showing 1 of 1.')).toBeTruthy();
|
||||
// verification of row contents
|
||||
const { tasks } = taskHistoryData;
|
||||
const task = tasks[0];
|
||||
expect(await screen.findByText(task.created)).toBeTruthy();
|
||||
expect(await screen.findByText(task.duration_sec)).toBeTruthy();
|
||||
expect(await screen.findByText(task.requester)).toBeTruthy();
|
||||
expect(await screen.findByText(task.status)).toBeTruthy();
|
||||
expect(await screen.findByText(task.task_id)).toBeTruthy();
|
||||
expect(await screen.findByText(task.task_input)).toBeTruthy();
|
||||
expect(await screen.findByText(task.task_message)).toBeTruthy();
|
||||
expect(await screen.findByText(task.task_state)).toBeTruthy();
|
||||
expect(await screen.findByText(task.task_type)).toBeTruthy();
|
||||
});
|
||||
// build our mocked response
|
||||
const taskHistoryData = buildEmailTaskHistoryData(1);
|
||||
getEmailTaskHistory.mockImplementation(() => taskHistoryData);
|
||||
// render the component
|
||||
render(<BulkEmailTaskHistory />);
|
||||
// press the `show task history button` to initiate data retrieval and rendering of the table in our component
|
||||
const showTaskHistoryButton = await screen.findByText('Show Email Task History');
|
||||
fireEvent.click(showTaskHistoryButton);
|
||||
// verification of table structure
|
||||
expect(await screen.findByText('Task Type')).toBeTruthy();
|
||||
expect(await screen.findByText('Task Inputs')).toBeTruthy();
|
||||
expect(await screen.findByText('Task Id')).toBeTruthy();
|
||||
expect(await screen.findByText('Requester')).toBeTruthy();
|
||||
expect(await screen.findByText('Submitted')).toBeTruthy();
|
||||
expect(await screen.findByText('Duration (seconds)')).toBeTruthy();
|
||||
expect(await screen.findByText('State')).toBeTruthy();
|
||||
expect(await screen.findByText('Status')).toBeTruthy();
|
||||
expect(await screen.findByText('Task Progress')).toBeTruthy();
|
||||
expect(await screen.findAllByText('Showing 1 - 1 of 1.')).toBeTruthy();
|
||||
// verification of row contents
|
||||
const { tasks } = taskHistoryData;
|
||||
const task = tasks[0];
|
||||
const createdDate = new Date(task.created).toLocaleString();
|
||||
expect(await screen.findByText(createdDate)).toBeTruthy();
|
||||
expect(await screen.findByText(task.duration_sec)).toBeTruthy();
|
||||
expect(await screen.findByText(task.requester)).toBeTruthy();
|
||||
expect(await screen.findByText(task.status)).toBeTruthy();
|
||||
expect(await screen.findByText(task.task_id)).toBeTruthy();
|
||||
expect(await screen.findByText(task.task_input)).toBeTruthy();
|
||||
expect(await screen.findByText(task.task_message)).toBeTruthy();
|
||||
expect(await screen.findByText(task.task_state)).toBeTruthy();
|
||||
expect(await screen.findByText(task.task_type)).toBeTruthy();
|
||||
});
|
||||
|
||||
test('renders a warning Alert when the button is pressed but there is no data to display', async () => {
|
||||
await act(async () => {
|
||||
const taskHistoryData = buildEmailTaskHistoryData(0);
|
||||
getEmailTaskHistory.mockImplementation(() => taskHistoryData);
|
||||
// render the component
|
||||
render(<BulkEmailTaskHistory />);
|
||||
// press the `show task history` button to initiate data retrieval
|
||||
const showTaskHistoryButton = await screen.findByText('Show Email Task History');
|
||||
fireEvent.click(showTaskHistoryButton);
|
||||
// verify that an alert is displayed since the array of tasks is empty
|
||||
const alertMessage = await screen.findByText('There is no email task history for this course.');
|
||||
expect(alertMessage).toBeTruthy();
|
||||
});
|
||||
const taskHistoryData = buildEmailTaskHistoryData(0);
|
||||
getEmailTaskHistory.mockImplementation(() => taskHistoryData);
|
||||
// render the component
|
||||
render(<BulkEmailTaskHistory />);
|
||||
// press the `show task history` button to initiate data retrieval
|
||||
const showTaskHistoryButton = await screen.findByText('Show Email Task History');
|
||||
fireEvent.click(showTaskHistoryButton);
|
||||
// verify that an alert is displayed since the array of tasks is empty
|
||||
const alertMessage = await screen.findByText('There is no email task history for this course.');
|
||||
expect(alertMessage).toBeTruthy();
|
||||
});
|
||||
|
||||
test('renders an error Alert when the button is pressed and an error occurs retrieving data', async () => {
|
||||
await act(async () => {
|
||||
getEmailTaskHistory.mockImplementation(() => {
|
||||
throw new Error();
|
||||
});
|
||||
// render the component
|
||||
render(<BulkEmailTaskHistory />);
|
||||
// press the `show task history` button to initiate data retrieval
|
||||
const showTaskHistoryButton = await screen.findByText('Show Email Task History');
|
||||
fireEvent.click(showTaskHistoryButton);
|
||||
// verify that an alert is displayed since the array of tasks is empty
|
||||
const alertMessage = await screen.findByText(
|
||||
'Error fetching email task history data for this course. Please try again later.',
|
||||
);
|
||||
expect(alertMessage).toBeTruthy();
|
||||
getEmailTaskHistory.mockImplementation(() => {
|
||||
throw new Error();
|
||||
});
|
||||
// render the component
|
||||
render(<BulkEmailTaskHistory />);
|
||||
// press the `show task history` button to initiate data retrieval
|
||||
const showTaskHistoryButton = await screen.findByText('Show Email Task History');
|
||||
fireEvent.click(showTaskHistoryButton);
|
||||
// verify that an alert is displayed since the array of tasks is empty
|
||||
const alertMessage = await screen.findByText(
|
||||
'Error fetching email task history data for this course. Please try again later.',
|
||||
);
|
||||
expect(alertMessage).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { ActionRow, AlertModal, Button } from '@edx/paragon';
|
||||
import { ActionRow, AlertModal, Button } from '@openedx/paragon';
|
||||
import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
|
||||
function TaskAlertModal(props) {
|
||||
|
||||
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
|
||||
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import { FormattedMessage } from '@edx/frontend-platform/i18n';
|
||||
import { Button, Icon } from '@edx/paragon';
|
||||
import { ArrowBack } from '@edx/paragon/icons';
|
||||
import { Button, Icon } from '@openedx/paragon';
|
||||
import { ArrowBack } from '@openedx/paragon/icons';
|
||||
|
||||
export default function BackToInstructor(props) {
|
||||
const { courseId } = props;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { Nav } from '@edx/paragon';
|
||||
import { Nav } from '@openedx/paragon';
|
||||
|
||||
export default function NavigationTabs(props) {
|
||||
const { tabData } = props;
|
||||
|
||||
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
|
||||
import { useParams } from 'react-router-dom';
|
||||
|
||||
import { LearningHeader as Header } from '@edx/frontend-component-header';
|
||||
import Footer from '@edx/frontend-component-footer';
|
||||
import { Spinner } from '@edx/paragon';
|
||||
import { FooterSlot } from '@edx/frontend-component-footer';
|
||||
import { Spinner } from '@openedx/paragon';
|
||||
|
||||
import { getCohorts, getCourseHomeCourseMetadata } from './data/api';
|
||||
|
||||
@@ -39,7 +39,7 @@ export default function PageContainer(props) {
|
||||
}
|
||||
|
||||
const {
|
||||
org, number, title, tabs, originalUserIsStaff,
|
||||
org, number, title, tabs, originalUserIsStaff, courseModes,
|
||||
} = metadataResponse;
|
||||
const { cohorts } = cohortsResponse;
|
||||
|
||||
@@ -48,6 +48,7 @@ export default function PageContainer(props) {
|
||||
number,
|
||||
title,
|
||||
originalUserIsStaff,
|
||||
courseModes,
|
||||
tabs: [...tabs],
|
||||
cohorts: cohorts.map(({ name }) => name),
|
||||
});
|
||||
@@ -66,10 +67,12 @@ export default function PageContainer(props) {
|
||||
courseNumber={courseMetadata.number}
|
||||
courseTitle={courseMetadata.title}
|
||||
/>
|
||||
<main>
|
||||
{children}
|
||||
</main>
|
||||
<Footer />
|
||||
<div className="pb-3 container">
|
||||
<main id="main-content">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
<FooterSlot />
|
||||
</>
|
||||
</CourseMetadataContext.Provider>
|
||||
);
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
import React from 'react';
|
||||
import { Factory } from 'rosie';
|
||||
import {
|
||||
act, cleanup, initializeMockApp, render, screen,
|
||||
cleanup, initializeMockApp, render, screen,
|
||||
} from '../../../setupTest';
|
||||
|
||||
import PageContainer from '../PageContainer';
|
||||
@@ -32,36 +32,32 @@ describe('PageContainer', () => {
|
||||
afterEach(cleanup);
|
||||
|
||||
test('PageContainer renders properly when given course metadata', async () => {
|
||||
await act(async () => {
|
||||
const cohorts = { cohorts: [Factory.build('cohort'), Factory.build('cohort')] };
|
||||
const courseMetadata = Factory.build('courseMetadata');
|
||||
const cohorts = { cohorts: [Factory.build('cohort'), Factory.build('cohort')] };
|
||||
const courseMetadata = Factory.build('courseMetadata');
|
||||
|
||||
getCohorts.mockImplementation(() => cohorts);
|
||||
getCourseHomeCourseMetadata.mockImplementation(() => courseMetadata);
|
||||
getCohorts.mockImplementation(() => cohorts);
|
||||
getCourseHomeCourseMetadata.mockImplementation(() => courseMetadata);
|
||||
|
||||
render(<PageContainer />);
|
||||
render(<PageContainer />);
|
||||
|
||||
// Look for the org, title, and number of the course, which should be displayed in the Header.
|
||||
expect(await screen.findByText(`${courseMetadata.org} ${courseMetadata.number}`)).toBeTruthy();
|
||||
expect(await screen.findByText(courseMetadata.title)).toBeTruthy();
|
||||
});
|
||||
// Look for the org, title, and number of the course, which should be displayed in the Header.
|
||||
expect(await screen.findByText(`${courseMetadata.org} ${courseMetadata.number}`)).toBeTruthy();
|
||||
expect(await screen.findByText(courseMetadata.title)).toBeTruthy();
|
||||
});
|
||||
|
||||
test('PageContainer renders children nested within it.', async () => {
|
||||
await act(async () => {
|
||||
const cohorts = { cohorts: [Factory.build('cohort'), Factory.build('cohort')] };
|
||||
const courseMetadata = Factory.build('courseMetadata');
|
||||
const cohorts = { cohorts: [Factory.build('cohort'), Factory.build('cohort')] };
|
||||
const courseMetadata = Factory.build('courseMetadata');
|
||||
|
||||
getCohorts.mockImplementation(() => cohorts);
|
||||
getCourseHomeCourseMetadata.mockImplementation(() => courseMetadata);
|
||||
getCohorts.mockImplementation(() => cohorts);
|
||||
getCourseHomeCourseMetadata.mockImplementation(() => courseMetadata);
|
||||
|
||||
render(
|
||||
<PageContainer>
|
||||
<span>Test Text</span>
|
||||
</PageContainer>,
|
||||
);
|
||||
render(
|
||||
<PageContainer>
|
||||
<span>Test Text</span>
|
||||
</PageContainer>,
|
||||
);
|
||||
|
||||
expect(await screen.findByText('Test Text')).toBeTruthy();
|
||||
});
|
||||
expect(await screen.findByText('Test Text')).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,41 +1 @@
|
||||
import { messages as footerMessages } from '@edx/frontend-component-footer';
|
||||
import { messages as headerMessages } from '@edx/frontend-component-header';
|
||||
import { messages as paragonMessages } from '@edx/paragon';
|
||||
|
||||
import arMessages from './messages/ar.json';
|
||||
import caMessages from './messages/ca.json';
|
||||
// no need to import en messages-- they are in the defaultMessage field
|
||||
import es419Messages from './messages/es_419.json';
|
||||
import frMessages from './messages/fr.json';
|
||||
import zhcnMessages from './messages/zh_CN.json';
|
||||
import heMessages from './messages/he.json';
|
||||
import idMessages from './messages/id.json';
|
||||
import kokrMessages from './messages/ko_kr.json';
|
||||
import plMessages from './messages/pl.json';
|
||||
import ptbrMessages from './messages/pt_br.json';
|
||||
import ruMessages from './messages/ru.json';
|
||||
import thMessages from './messages/th.json';
|
||||
import ukMessages from './messages/uk.json';
|
||||
|
||||
const appMessages = {
|
||||
ar: arMessages,
|
||||
'es-419': es419Messages,
|
||||
fr: frMessages,
|
||||
'zh-cn': zhcnMessages,
|
||||
ca: caMessages,
|
||||
he: heMessages,
|
||||
id: idMessages,
|
||||
'ko-kr': kokrMessages,
|
||||
pl: plMessages,
|
||||
'pt-br': ptbrMessages,
|
||||
ru: ruMessages,
|
||||
th: thMessages,
|
||||
uk: ukMessages,
|
||||
};
|
||||
|
||||
export default [
|
||||
headerMessages,
|
||||
footerMessages,
|
||||
paragonMessages,
|
||||
appMessages,
|
||||
];
|
||||
export default [];
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
{}
|
||||
@@ -1 +0,0 @@
|
||||
{}
|
||||
@@ -1 +0,0 @@
|
||||
{}
|
||||
@@ -1 +0,0 @@
|
||||
{}
|
||||
@@ -1 +0,0 @@
|
||||
{}
|
||||
@@ -1 +0,0 @@
|
||||
{}
|
||||
@@ -1 +0,0 @@
|
||||
{}
|
||||
@@ -1 +0,0 @@
|
||||
{}
|
||||
@@ -1 +0,0 @@
|
||||
{}
|
||||
@@ -1 +0,0 @@
|
||||
{}
|
||||
@@ -1 +0,0 @@
|
||||
{}
|
||||
@@ -1 +0,0 @@
|
||||
{}
|
||||
@@ -1 +0,0 @@
|
||||
{}
|
||||
@@ -5,7 +5,8 @@ import {
|
||||
APP_INIT_ERROR, APP_READY, subscribe, initialize, mergeConfig, getConfig,
|
||||
} from '@edx/frontend-platform';
|
||||
import { AppProvider, AuthenticatedPageRoute, ErrorPage } from '@edx/frontend-platform/react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { StrictMode } from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
|
||||
import { Helmet } from 'react-helmet';
|
||||
import { Routes, Route } from 'react-router-dom';
|
||||
@@ -16,12 +17,14 @@ import BulkEmailTool from './components/bulk-email-tool';
|
||||
import PageContainer from './components/page-container/PageContainer';
|
||||
|
||||
subscribe(APP_READY, () => {
|
||||
ReactDOM.render(
|
||||
<AppProvider>
|
||||
<Helmet>
|
||||
<link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
|
||||
</Helmet>
|
||||
<div className="pb-3 container">
|
||||
const root = createRoot(document.getElementById('root'));
|
||||
|
||||
root.render(
|
||||
<StrictMode>
|
||||
<AppProvider>
|
||||
<Helmet>
|
||||
<link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
|
||||
</Helmet>
|
||||
<Routes>
|
||||
<Route
|
||||
path="/courses/:courseId/bulk_email"
|
||||
@@ -31,17 +34,22 @@ subscribe(APP_READY, () => {
|
||||
<BulkEmailTool />
|
||||
</PageContainer>
|
||||
</AuthenticatedPageRoute>
|
||||
)}
|
||||
)}
|
||||
/>
|
||||
</Routes>
|
||||
</div>
|
||||
</AppProvider>,
|
||||
document.getElementById('root'),
|
||||
</AppProvider>
|
||||
</StrictMode>,
|
||||
);
|
||||
});
|
||||
|
||||
subscribe(APP_INIT_ERROR, (error) => {
|
||||
ReactDOM.render(<ErrorPage message={error.message} />, document.getElementById('root'));
|
||||
const root = createRoot(document.getElementById('root'));
|
||||
|
||||
root.render(
|
||||
<StrictMode>
|
||||
<ErrorPage message={error.message} />
|
||||
</StrictMode>,
|
||||
);
|
||||
});
|
||||
|
||||
initialize({
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@import "~@edx/brand/paragon/fonts";
|
||||
@import "~@edx/brand/paragon/variables";
|
||||
@import "~@edx/paragon/scss/core/core";
|
||||
@import "~@openedx/paragon/scss/core/core";
|
||||
@import "~@edx/brand/paragon/overrides";
|
||||
|
||||
@import "~@edx/frontend-component-header/dist/index";
|
||||
|
||||
67
src/index.test.jsx
Normal file
67
src/index.test.jsx
Normal file
@@ -0,0 +1,67 @@
|
||||
import {
|
||||
APP_INIT_ERROR, APP_READY, subscribe,
|
||||
} from '@edx/frontend-platform';
|
||||
|
||||
// Jest needs this for module resolution
|
||||
import * as app from '.'; // eslint-disable-line no-unused-vars
|
||||
|
||||
// These need to be var not let so they get hoisted
|
||||
// and can be used by jest.mock (which is also hoisted)
|
||||
var mockRender; // eslint-disable-line no-var
|
||||
var mockCreateRoot; // eslint-disable-line no-var
|
||||
jest.mock('react-dom/client', () => {
|
||||
mockRender = jest.fn();
|
||||
mockCreateRoot = jest.fn(() => ({
|
||||
render: mockRender,
|
||||
}));
|
||||
|
||||
return ({
|
||||
createRoot: mockCreateRoot,
|
||||
});
|
||||
});
|
||||
|
||||
jest.mock('@edx/frontend-platform', () => ({
|
||||
APP_READY: 'app-is-ready-key',
|
||||
APP_INIT_ERROR: 'app-init-error',
|
||||
subscribe: jest.fn(),
|
||||
initialize: jest.fn(),
|
||||
mergeConfig: jest.fn(),
|
||||
getConfig: () => ({
|
||||
FAVICON_URL: 'favicon-url',
|
||||
}),
|
||||
ensureConfig: jest.fn(),
|
||||
}));
|
||||
|
||||
jest.mock('./components/bulk-email-tool/BulkEmailTool', () => 'Bulk Email Tool');
|
||||
jest.mock('./components/page-container/PageContainer', () => 'Page Container');
|
||||
|
||||
describe('app registry', () => {
|
||||
let getElement;
|
||||
|
||||
beforeEach(() => {
|
||||
mockCreateRoot.mockClear();
|
||||
mockRender.mockClear();
|
||||
|
||||
getElement = window.document.getElementById;
|
||||
window.document.getElementById = jest.fn(id => ({ id }));
|
||||
});
|
||||
afterAll(() => {
|
||||
window.document.getElementById = getElement;
|
||||
});
|
||||
|
||||
test('subscribe: APP_READY. links App to root element', () => {
|
||||
const callArgs = subscribe.mock.calls[0];
|
||||
expect(callArgs[0]).toEqual(APP_READY);
|
||||
callArgs[1]();
|
||||
const [rendered] = mockRender.mock.calls[0];
|
||||
expect(rendered).toMatchSnapshot();
|
||||
});
|
||||
test('subscribe: APP_INIT_ERROR. snapshot: displays an ErrorPage to root element', () => {
|
||||
const callArgs = subscribe.mock.calls[1];
|
||||
expect(callArgs[0]).toEqual(APP_INIT_ERROR);
|
||||
const error = { message: 'test-error-message' };
|
||||
callArgs[1](error);
|
||||
const [rendered] = mockRender.mock.calls[0];
|
||||
expect(rendered).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
53
src/plugin-slots/FooterSlot/README.md
Normal file
53
src/plugin-slots/FooterSlot/README.md
Normal file
@@ -0,0 +1,53 @@
|
||||
# Footer Slot
|
||||
|
||||
### Slot ID: `org.openedx.frontend.layout.footer.v1`
|
||||
|
||||
### Slot ID Aliases
|
||||
* `footer_slot`
|
||||
|
||||
## Description
|
||||
|
||||
This slot is used to replace/modify/hide the footer.
|
||||
|
||||
The implementation of the `FooterSlot` component lives in [the `frontend-component-footer` repository](https://github.com/openedx/frontend-component-footer/).
|
||||
|
||||
## Example
|
||||
|
||||
The following `env.config.jsx` will replace the default footer.
|
||||
|
||||
|
||||
|
||||
with a simple custom footer
|
||||
|
||||
|
||||
|
||||
```jsx
|
||||
import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
|
||||
|
||||
const config = {
|
||||
pluginSlots: {
|
||||
'org.openedx.frontend.layout.footer.v1': {
|
||||
plugins: [
|
||||
{
|
||||
// Hide the default footer
|
||||
op: PLUGIN_OPERATIONS.Hide,
|
||||
widgetId: 'default_contents',
|
||||
},
|
||||
{
|
||||
// Insert a custom footer
|
||||
op: PLUGIN_OPERATIONS.Insert,
|
||||
widget: {
|
||||
id: 'custom_footer',
|
||||
type: DIRECT_PLUGIN,
|
||||
RenderWidget: () => (
|
||||
<h1 style={{textAlign: 'center'}}>🦶</h1>
|
||||
),
|
||||
},
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
export default config;
|
||||
```
|
||||
BIN
src/plugin-slots/FooterSlot/images/custom_footer.png
Normal file
BIN
src/plugin-slots/FooterSlot/images/custom_footer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/plugin-slots/FooterSlot/images/default_footer.png
Normal file
BIN
src/plugin-slots/FooterSlot/images/default_footer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
3
src/plugin-slots/README.md
Normal file
3
src/plugin-slots/README.md
Normal file
@@ -0,0 +1,3 @@
|
||||
# `frontend-app-communications` Plugin Slots
|
||||
|
||||
* [`org.openedx.frontend.layout.footer.v1`](./FooterSlot/)
|
||||
@@ -29,6 +29,8 @@ Object.defineProperty(window, 'matchMedia', {
|
||||
})),
|
||||
});
|
||||
|
||||
global.Date.prototype.toLocaleDateString = jest.fn();
|
||||
|
||||
export function initializeMockApp() {
|
||||
mergeConfig({
|
||||
// MICROBA-1505: Remove this when we remove the flag from config
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
const { createConfig } = require('@edx/frontend-build');
|
||||
const { createConfig } = require('@openedx/frontend-build');
|
||||
|
||||
const config = createConfig('webpack-dev');
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
const { createConfig } = require('@edx/frontend-build');
|
||||
const { createConfig } = require('@openedx/frontend-build');
|
||||
|
||||
const config = createConfig('webpack-prod');
|
||||
|
||||
|
||||
Reference in New Issue
Block a user