{
);
};
GreetingBanner.propTypes = {
- size: PropTypes.oneOf('small', 'large').isRequired,
+ size: PropTypes.oneOf(['small', 'large']).isRequired,
};
export default GreetingBanner;
diff --git a/src/containers/LearnerDashboardHeader/index.jsx b/src/containers/LearnerDashboardHeader/index.jsx
index 8b8ff22..096125d 100644
--- a/src/containers/LearnerDashboardHeader/index.jsx
+++ b/src/containers/LearnerDashboardHeader/index.jsx
@@ -5,6 +5,7 @@ import { AppContext } from '@edx/frontend-platform/react';
import { Program } from '@edx/paragon/icons';
import { Button } from '@edx/paragon';
+import MasqueradeBar from 'containers/MasqueradeBar';
import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
import GreetingBanner from './GreetingBanner';
@@ -43,6 +44,8 @@ export const LearnerDashboardHeader = () => {
{!isCollapsed &&
+
+ View as:
+
+
+
+
+ Submit
+
+
+`;
+
+exports[`MasqueradeBar snapshot can masquerade with input 1`] = `
+
+
+ View as:
+
+
+
+
+ Submit
+
+
+`;
+
+exports[`MasqueradeBar snapshot cannot masquerade 1`] = `""`;
+
+exports[`MasqueradeBar snapshot is masquerading failed with error 1`] = `
+
+
+ View as:
+
+
+
+ test-error
+
+
+
+ Submit
+
+
+`;
+
+exports[`MasqueradeBar snapshot is masquerading with input 1`] = `
+
+
+ Viewing as:
+
+
+ test
+
+
+`;
diff --git a/src/containers/MasqueradeBar/hooks.js b/src/containers/MasqueradeBar/hooks.js
new file mode 100644
index 0000000..54196cf
--- /dev/null
+++ b/src/containers/MasqueradeBar/hooks.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { thunkActions, selectors } from 'data/redux';
+import { StrictDict } from 'utils';
+import * as module from './hooks';
+
+export const state = StrictDict({
+ masqueradeInput: (val) => React.useState(val), // eslint-disable-line
+});
+
+export const useMasqueradeInput = () => {
+ const [masqueradeInput, setMasqueradeInput] = module.state.masqueradeInput('');
+ const handleMasqueradeInputChange = (e) => setMasqueradeInput(e.target.value);
+ return {
+ handleMasqueradeInputChange,
+ masqueradeInput,
+ };
+};
+
+export const useMasqueradeBarData = ({
+ authenticatedUser,
+}) => {
+ const dispatch = useDispatch();
+ const { formatMessage } = useIntl();
+ const canMasquerade = authenticatedUser?.administrator;
+
+ const handleMasqueradeSubmit = (user) => () => dispatch(thunkActions.app.masqueradeAs(user));
+ const handleClearMasquerade = () => dispatch(thunkActions.app.clearMasquerade());
+
+ const {
+ isMasquerading,
+ isMasqueradingFailed,
+ masqueradeError,
+ } = useSelector(selectors.requests.masquerade);
+ const { masqueradeInput, handleMasqueradeInputChange } = module.useMasqueradeInput();
+
+ return {
+ canMasquerade,
+ isMasquerading,
+ isMasqueradingFailed,
+ masqueradeError,
+ masqueradeInput,
+ handleMasqueradeSubmit,
+ handleClearMasquerade,
+ handleMasqueradeInputChange,
+ formatMessage,
+ };
+};
+
+export default useMasqueradeBarData;
diff --git a/src/containers/MasqueradeBar/hooks.test.js b/src/containers/MasqueradeBar/hooks.test.js
new file mode 100644
index 0000000..ab0773a
--- /dev/null
+++ b/src/containers/MasqueradeBar/hooks.test.js
@@ -0,0 +1,70 @@
+import { MockUseState } from 'testUtils';
+import { thunkActions } from 'data/redux';
+
+import { useSelector } from 'react-redux';
+import * as hooks from './hooks';
+
+jest.mock('data/redux', () => ({
+ thunkActions: {
+ app: {
+ masqueradeAs: jest.fn(),
+ clearMasquerade: jest.fn(),
+ },
+ },
+ selectors: {
+ requests: {
+ masquerade: jest.fn(),
+ },
+ },
+}));
+
+const state = new MockUseState(hooks);
+
+describe('MasqueradeBar hooks', () => {
+ let out;
+ const authenticatedUser = {
+ administrator: true,
+ };
+ describe('state values', () => {
+ state.testGetter(state.keys.masqueradeInput);
+ });
+ describe('useMasqueradeBarData', () => {
+ beforeEach(() => {
+ state.mock();
+ out = hooks.useMasqueradeBarData({ authenticatedUser });
+ });
+ afterEach(state.restore);
+ test('canMasquerade', () => {
+ expect(out.canMasquerade).toEqual(true);
+ });
+ test('cannotMasquerade', () => {
+ out = hooks.useMasqueradeBarData({
+ authenticatedUser: {
+ administrator: false,
+ },
+ });
+ expect(out.canMasquerade).toEqual(false);
+ });
+ test('masqueradeError', () => {
+ expect(out.masqueradeError).toBeUndefined();
+ useSelector.mockReturnValueOnce({
+ masqueradeError: 'test error',
+ });
+ out = hooks.useMasqueradeBarData({ authenticatedUser });
+ expect(out.masqueradeError).toEqual('test error');
+ });
+ test('handleMasqueradeInputChange', () => {
+ expect(state.stateVals.masqueradeInput).toEqual('');
+ out.handleMasqueradeInputChange({ target: { value: 'test' } });
+ expect(state.setState.masqueradeInput).toHaveBeenCalledWith('test');
+ });
+ test('handleMasqueradeSubmit', () => {
+ out.handleMasqueradeSubmit('test')();
+ expect(thunkActions.app.masqueradeAs).toHaveBeenCalledWith('test');
+ });
+ test('handleClearMasquerade', () => {
+ out.handleClearMasquerade();
+ expect(thunkActions.app.clearMasquerade).toHaveBeenCalled();
+ });
+ });
+});
diff --git a/src/containers/MasqueradeBar/index.jsx b/src/containers/MasqueradeBar/index.jsx
new file mode 100644
index 0000000..20eb2ab
--- /dev/null
+++ b/src/containers/MasqueradeBar/index.jsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import { AppContext } from '@edx/frontend-platform/react';
+
+import {
+ Chip,
+ Button,
+ FormControl,
+ FormControlFeedback,
+ FormLabel,
+ FormGroup,
+} from '@edx/paragon';
+import { Close } from '@edx/paragon/icons';
+
+import messages from './messages';
+import { useMasqueradeBarData } from './hooks';
+import './index.scss';
+
+export const MasqueradeBar = () => {
+ const { authenticatedUser } = React.useContext(AppContext);
+
+ const {
+ canMasquerade,
+ isMasquerading,
+ isMasqueradingFailed,
+ masqueradeInput,
+ masqueradeError,
+ handleMasqueradeInputChange,
+ handleClearMasquerade,
+ handleMasqueradeSubmit,
+ formatMessage,
+ } = useMasqueradeBarData({ authenticatedUser });
+
+ if (!canMasquerade) { return null; }
+
+ return (
+
+ {isMasquerading ? (
+ <>
+
+ {formatMessage(messages.ViewingAs)}
+
+
+ {masqueradeInput}
+
+
+ ) : (
+ <>
+
+ {formatMessage(messages.ViewAs)}
+
+
+
+ {masqueradeError}
+
+ )}
+
+
+ {formatMessage(messages.SubmitButton)}
+
+
+ )}
+
+ );
+};
+
+export default MasqueradeBar;
diff --git a/src/containers/MasqueradeBar/index.scss b/src/containers/MasqueradeBar/index.scss
new file mode 100644
index 0000000..7a9014b
--- /dev/null
+++ b/src/containers/MasqueradeBar/index.scss
@@ -0,0 +1,22 @@
+@import "@edx/paragon/scss/core/core";
+
+.masquerade-bar {
+ display: flex;
+ align-items: flex-start;
+ padding: map-get($spacers, 4) map-get($spacers, 3) 0 map-get($spacers, 3);
+
+ .masquerade-form-label {
+ padding: map-get($spacers, 2) map-get($spacers, 1);
+ }
+
+ .masquerade-form-input {
+ margin-bottom: 0;
+ flex-grow: 1;
+ max-width: map-get($grid-breakpoints, 'md');
+ }
+
+ .masquerade-chip {
+ padding: map-get($spacers, 2) map-get($spacers, 3);
+ font-size: $font-size-base;
+ }
+}
\ No newline at end of file
diff --git a/src/containers/MasqueradeBar/index.test.jsx b/src/containers/MasqueradeBar/index.test.jsx
new file mode 100644
index 0000000..f3704e7
--- /dev/null
+++ b/src/containers/MasqueradeBar/index.test.jsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { formatMessage } from 'testUtils';
+
+import MasqueradeBar from '.';
+import hooks from './hooks';
+
+jest.mock('./hooks', () => ({
+ useMasqueradeBarData: jest.fn(),
+}));
+
+describe('MasqueradeBar', () => {
+ const masqueradeMockData = {
+ canMasquerade: true,
+ isMasquerading: false,
+ isMasqueradingFailed: false,
+ masqueradeInput: '',
+ masqueradeError: '',
+ handleMasqueradeInputChange: jest.fn().mockName('handleMasqueradeInputChange'),
+ handleClearMasquerade: jest.fn().mockName('handleClearMasquerade'),
+ handleMasqueradeSubmit: jest.fn().mockName('handleMasqueradeSubmit'),
+ formatMessage,
+ };
+
+ describe('snapshot', () => {
+ test('can masquerade', () => {
+ hooks.useMasqueradeBarData.mockReturnValueOnce(masqueradeMockData);
+ expect(shallow(