Andal.LND/frontend-app-authoring
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add feedback link (#245)

Browse Source 
For Problem Editor Beta
This commit is contained in:
connorhaugh
2023-02-14 10:20:26 -05:00
committed by GitHub
parent eeaa0e3f68
commit b4f1676acf
3 changed files with 136 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/editors/containers/EditorContainer/components/EditorFooter/__snapshots__/index.test.jsx.snap
View File

@@ -36,6 +36,42 @@ exports[`EditorFooter render snapshot: default args (disableSave: false, saveFai
</div>
`;
exports[`EditorFooter render snapshot: dont show feedback link 1`] = `
<div
className="editor-footer fixed-bottom"
>
<ModalDialog.Footer
className="shadow-sm"
>
<ActionRow>
<ActionRow.Spacer />
<Button
aria-label="Discard changes and return to learning context"
onClick={[MockFunction args.onCancel]}
variant="tertiary"
>
<FormattedMessage
defaultMessage="Cancel"
description="Label for cancel button"
id="authoring.editorfooter.cancelButton.label"
/>
</Button>
<Button
aria-label="Save changes and return to learning context"
disabled={false}
onClick={[MockFunction args.onSave]}
>
<FormattedMessage
defaultMessage="Save"
description="Label for Save button"
id="authoring.editorfooter.savebutton.label"
/>
</Button>
</ActionRow>
</ModalDialog.Footer>
</div>
`;
exports[`EditorFooter render snapshot: save disabled. Show button spinner 1`] = `
<div
className="editor-footer fixed-bottom"
@@ -116,3 +152,45 @@ exports[`EditorFooter render snapshot: save failed. Show error message 1`] = `
</ModalDialog.Footer>
</div>
`;
exports[`EditorFooter render snapshot: show feedback link 1`] = `
<div
className="editor-footer fixed-bottom"
>
<ModalDialog.Footer
className="shadow-sm"
>
<ActionRow>
<Hyperlink
destination="https://docs.google.com/forms/d/e/1FAIpQLSdmtO5at9WWHLcWLrOgk1oMz97gYYYrUq4cvH8Vzd-WQwM0Cg/viewform?usp=sharing"
target="_blank"
>
Share Feedback
</Hyperlink>
<ActionRow.Spacer />
<Button
aria-label="Discard changes and return to learning context"
onClick={[MockFunction args.onCancel]}
variant="tertiary"
>
<FormattedMessage
defaultMessage="Cancel"
description="Label for cancel button"
id="authoring.editorfooter.cancelButton.label"
/>
</Button>
<Button
aria-label="Save changes and return to learning context"
disabled={false}
onClick={[MockFunction args.onSave]}
>
<FormattedMessage
defaultMessage="Save"
description="Label for Save button"
id="authoring.editorfooter.savebutton.label"
/>
</Button>
</ActionRow>
</ModalDialog.Footer>
</div>
`;

71
src/editors/containers/EditorContainer/components/EditorFooter/index.jsx
View File

@@ -7,8 +7,12 @@ import {
Button,
ModalDialog,
Toast,
Hyperlink,
} from '@edx/paragon';
import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { useSelector } from 'react-redux';
import { selectors } from '../../../../data/redux';
import { blockTypes } from '../../../../data/constants/app';
import { nullMethod } from '../../hooks';
import messages from './messages';
@@ -20,37 +24,50 @@ export const EditorFooter = ({
saveFailed,
// injected
intl,
}) => (
<div className="editor-footer fixed-bottom">
{saveFailed && (
}) => {
const blockType = useSelector(selectors.app.blockType);
return (
<div className="editor-footer fixed-bottom">
{saveFailed && (
<Toast show onClose={nullMethod}>
<FormattedMessage {...messages.contentSaveFailed} />
</Toast>
)}
)}
<ModalDialog.Footer className="shadow-sm">
<ActionRow>
<ActionRow.Spacer />
<Button
aria-label={intl.formatMessage(messages.cancelButtonAriaLabel)}
variant="tertiary"
onClick={onCancel}
>
<FormattedMessage {...messages.cancelButtonLabel} />
</Button>
<Button
aria-label={intl.formatMessage(messages.saveButtonAriaLabel)}
onClick={onSave}
disabled={disableSave}
>
{disableSave
? <Spinner animation="border" className="mr-3" />
: <FormattedMessage {...messages.saveButtonLabel} />}
</Button>
</ActionRow>
</ModalDialog.Footer>
</div>
);
<ModalDialog.Footer className="shadow-sm">
<ActionRow>
{
// TODO: Remove this code when the problem Editor Beta is complete.
blockType === blockTypes.problem
&& (
<Hyperlink destination="https://docs.google.com/forms/d/e/1FAIpQLSdmtO5at9WWHLcWLrOgk1oMz97gYYYrUq4cvH8Vzd-WQwM0Cg/viewform?usp=sharing" target="_blank">
Share Feedback
</Hyperlink>
)
}
<ActionRow.Spacer />
<Button
aria-label={intl.formatMessage(messages.cancelButtonAriaLabel)}
variant="tertiary"
onClick={onCancel}
>
<FormattedMessage {...messages.cancelButtonLabel} />
</Button>
<Button
aria-label={intl.formatMessage(messages.saveButtonAriaLabel)}
onClick={onSave}
disabled={disableSave}
>
{disableSave
? <Spinner animation="border" className="mr-3" />
: <FormattedMessage {...messages.saveButtonLabel} />}
</Button>
</ActionRow>
</ModalDialog.Footer>
</div>
);
};
EditorFooter.propTypes = {
disableSave: PropTypes.bool.isRequired,
onCancel: PropTypes.func.isRequired,

14
src/editors/containers/EditorContainer/components/EditorFooter/index.test.jsx
View File

@@ -1,6 +1,7 @@
import React from 'react';
import { shallow } from 'enzyme';
import { useSelector } from 'react-redux';
import { formatMessage } from '../../../../../testUtils';
import { EditorFooter } from '.';
@@ -8,6 +9,10 @@ jest.mock('../../hooks', () => ({
nullMethod: jest.fn().mockName('hooks.nullMethod'),
}));
jest.mock('react-redux', () => ({
useSelector: jest.fn(),
}));
describe('EditorFooter', () => {
const props = {
intl: { formatMessage },
@@ -26,5 +31,14 @@ describe('EditorFooter', () => {
test('snapshot: save failed. Show error message', () => {
expect(shallow(<EditorFooter {...props} saveFailed />)).toMatchSnapshot();
});
test('snapshot: show feedback link', () => {
useSelector.mockReturnValueOnce('problem');
expect(shallow(<EditorFooter {...props} />)).toMatchSnapshot();
});
test('snapshot: dont show feedback link', () => {
useSelector.mockReturnValueOnce('not a Problem');
expect(shallow(<EditorFooter {...props} />)).toMatchSnapshot();
});
});
});