Skip to content

Commit a80d95f

Browse files
author
Ben Warzeski
authored
feat: Merge pull request #52 from openedx/bw/fakeData
Bw/fake data
2 parents 7b2919b + 5f5c68b commit a80d95f

File tree

95 files changed

+1702
-2000
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

95 files changed

+1702
-2000
lines changed

‎.eslintrc.js

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
11
// eslint-disable-next-line import/no-extraneous-dependencies
22
const { createConfig } = require('@edx/frontend-build');
33

4-
module.exports = createConfig('eslint', {
4+
const config = createConfig('eslint', {
55
rules: {
66
'import/no-unresolved': 'off',
7-
'import/no-named-as-default': 'off',
87
},
9-
overrides: [
10-
{
11-
files: ['*{h,H}ooks.js'],
12-
rules: {
13-
'react-hooks/rules-of-hooks': 'off',
14-
},
15-
},
16-
],
178
});
9+
10+
config.rules['react/function-component-definition'][1].unnamedComponents = 'arrow-function';
11+
module.exports = config;

‎jest.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ const config = createConfig('jest', {
1313
});
1414

1515
config.moduleDirectories = ['node_modules', 'src'];
16+
1617
// add axios to the list of modules to not transform
1718
config.transformIgnorePatterns = ['/node_modules/(?!@edx|axios)'];
1819

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
"dependencies": {
3737
"@edx/brand": "npm:@edx/[email protected]",
3838
"@edx/frontend-component-footer": "12.2.1",
39-
"@edx/frontend-component-header": "4.6.1",
39+
"@edx/frontend-component-header": "4.6.0",
4040
"@edx/frontend-platform": "5.4.0",
4141
"@edx/paragon": "^20.20.0",
4242
"@edx/react-unit-test-utils": "1.7.0",
@@ -51,7 +51,7 @@
5151
"@tinymce/tinymce-react": "3.14.0",
5252
"axios": "^1.5.1",
5353
"classnames": "^2.3.2",
54-
"core-js": "3.33.0",
54+
"core-js": "3.32.2",
5555
"filesize": "^8.0.6",
5656
"jest-when": "^3.6.0",
5757
"pdfjs-dist": "^3.11.174",

‎src/App.jsx

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,42 +12,54 @@ import SelfAssessmentView from 'views/SelfAssessmentView';
1212
import StudentTrainingView from 'views/StudentTrainingView';
1313
import SubmissionView from 'views/SubmissionView';
1414
import XBlockView from 'views/XBlockView';
15-
import FilePreviewView from 'views/FilePreviewView';
15+
import PageDataProvider from 'components/PageDataProvider';
16+
1617
import messages from './messages';
1718
import routes from './routes';
1819

1920
const RouterRoot = () => {
2021
const { formatMessage } = useIntl();
2122
const appRoute = (route, Component) => (
22-
<Route path={route} element={<AppContainer Component={Component} />} />
23+
<Route
24+
path={route}
25+
element={(
26+
<PageDataProvider>
27+
<AppContainer Component={Component} />
28+
</PageDataProvider>
29+
)}
30+
/>
2331
);
2432
const modalRoute = (route, Component, title) => (
25-
<Route path={route} element={<ModalContainer {...{ title, Component }} />} />
33+
<Route
34+
path={route}
35+
element={(
36+
<PageDataProvider>
37+
<ModalContainer {...{ title, Component }} />
38+
</PageDataProvider>
39+
)}
40+
/>
2641
);
2742

2843
const embeddedRoutes = [
29-
<Route path={routes.embedded.xblock} element={<XBlockView />} />,
30-
modalRoute(routes.embedded.peerAssessment, PeerAssessmentView, 'ORA Peer Assessment'),
31-
modalRoute(routes.embedded.selfAssessment, SelfAssessmentView, 'ORA Self Assessment'),
32-
modalRoute(routes.embedded.studentTraining, StudentTrainingView, 'ORA Student Training'),
33-
modalRoute(routes.embedded.submission, SubmissionView, 'ORA Submission'),
34-
modalRoute(routes.preview, FilePreviewView, 'File Preview'),
35-
<Route path={routes.embedded.root} element={<ErrorPage message={formatMessage(messages.error404Message)} />} />,
44+
<Route path={routes.xblockEmbed} element={<XBlockView />} />,
45+
modalRoute(routes.peerAssessmentEmbed, PeerAssessmentView, 'ORA Peer Assessment'),
46+
modalRoute(routes.selfAssessmentEmbed, SelfAssessmentView, 'ORA Self Assessment'),
47+
modalRoute(routes.studentTrainingEmbed, StudentTrainingView, 'ORA Student Training'),
48+
modalRoute(routes.submissionEmbed, SubmissionView, 'ORA Submission'),
49+
<Route path={routes.rootEmbed} element={<ErrorPage message={formatMessage(messages.error404Message)} />} />,
3650
];
3751
const baseRoutes = [
3852
appRoute(routes.xblock, PeerAssessmentView),
3953
appRoute(routes.peerAssessment, PeerAssessmentView),
4054
appRoute(routes.selfAssessment, SelfAssessmentView),
4155
appRoute(routes.studentTraining, StudentTrainingView),
4256
appRoute(routes.submission, SubmissionView),
43-
appRoute(routes.preview, FilePreviewView),
4457
<Route path={routes.root} element={<ErrorPage message={formatMessage(messages.error404Message)} />} />,
4558
];
4659

4760
const isConfigLoaded = useIsORAConfigLoaded();
48-
const isPageLoaded = useIsPageDataLoaded();
4961

50-
if (!isConfigLoaded || !isPageLoaded) {
62+
if (!isConfigLoaded) {
5163
return (
5264
<div className="h-screen d-flex justify-content-center align-items-center">
5365
<Spinner

‎src/components/Assessment/Assessment.scss

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
@import "~@edx/brand/paragon/variables";
2+
@import "~@edx/paragon/scss/core/core";
3+
@import "~@edx/brand/paragon/overrides";
4+
5+
.criteria-label {
6+
width: 100%;
7+
.criteria-title {
8+
display: inline-block;
9+
max-width: calc(100% - 44px);
10+
color: $primary-500;
11+
font-weight: bold;
12+
vertical-align: top;
13+
}
14+
.esg-help-icon {
15+
float: right;
16+
margin-top: (map-get($spacers, 2) * -1);
17+
margin-right: (map-get($spacers, 2\.5) * -1);
18+
vertical-align: top;
19+
}
20+
}
21+
.criteria-option {
22+
width: 100%;
23+
> div {
24+
display: inline;
25+
width: 100%;
26+
.pgn__form-label {
27+
display: inline-flex;
28+
}
29+
.pgn__form-control-description {
30+
float: right;
31+
}
32+
}
33+
}
34+
35+
.criterion-feedback {
36+
margin-top: 1rem;
37+
}
38+
39+
.popover.overlay-help-popover {
40+
z-index: 4000;
41+
margin-right: map-get($spacers, 1) !important;
42+
.help-popover-option {
43+
margin-bottom: map-get($spacers, 1);
44+
}
45+
}
46+
47+
48+
.assessment-card {
49+
width: 320px !important;
50+
height: fit-content;
51+
max-height: 100%;
52+
margin-left: map-get($spacers, 3);
53+
position: sticky !important;
54+
top: map-get($spacers, 1) * -1;
55+
56+
.assessment-header {
57+
box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.3) !important;
58+
display: flex;
59+
justify-content: center;
60+
padding: map-get($spacers, 3);
61+
}
62+
63+
.assessment-body {
64+
overflow-y: scroll;
65+
}
66+
67+
.assessment-footer {
68+
box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.3) !important;
69+
display: flex;
70+
justify-content: center;
71+
padding: map-get($spacers, 3);
72+
}
73+
74+
button.pgn__stateful-btn.pgn__stateful-btn-state-pending {
75+
opacity: .4 !important;
76+
}
77+
}
78+
79+
@include media-breakpoint-down(sm) {
80+
.assessment-card {
81+
margin-left: 0 !important;
82+
}
83+
}

‎src/components/Assessment/EditableAssessment/OverallFeedback/__snapshots__/index.test.jsx.snap

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`<OverallFeedback /> renders overall feedback is disabled 1`] = `
4+
<Form.Group>
5+
<Form.Label
6+
className="criteria-label"
7+
>
8+
<span
9+
className="criteria-title"
10+
>
11+
Overall comments
12+
</span>
13+
<InfoPopover
14+
onClick={[Function]}
15+
>
16+
<div>
17+
props.overallFeedbackPrompt
18+
</div>
19+
</InfoPopover>
20+
</Form.Label>
21+
<Form.Control
22+
as="textarea"
23+
className="rubric-feedback feedback-input"
24+
disabled={true}
25+
floatingLabel="Comments (Optional)"
26+
onChange={[MockFunction props.onChange]}
27+
value=""
28+
/>
29+
</Form.Group>
30+
`;
31+
32+
exports[`<OverallFeedback /> renders overall feedback is enabled 1`] = `
33+
<Form.Group>
34+
<Form.Label
35+
className="criteria-label"
36+
>
37+
<span
38+
className="criteria-title"
39+
>
40+
Overall comments
41+
</span>
42+
<InfoPopover
43+
onClick={[Function]}
44+
>
45+
<div>
46+
props.overallFeedbackPrompt
47+
</div>
48+
</InfoPopover>
49+
</Form.Label>
50+
<Form.Control
51+
as="textarea"
52+
className="rubric-feedback feedback-input"
53+
disabled={false}
54+
floatingLabel="Add comments (Optional)"
55+
onChange={[MockFunction props.onChange]}
56+
value=""
57+
/>
58+
</Form.Group>
59+
`;
60+
61+
exports[`<OverallFeedback /> renders overall feedback is invalid 1`] = `
62+
<Form.Group>
63+
<Form.Label
64+
className="criteria-label"
65+
>
66+
<span
67+
className="criteria-title"
68+
>
69+
Overall comments
70+
</span>
71+
<InfoPopover
72+
onClick={[Function]}
73+
>
74+
<div>
75+
props.overallFeedbackPrompt
76+
</div>
77+
</InfoPopover>
78+
</Form.Label>
79+
<Form.Control
80+
as="textarea"
81+
className="rubric-feedback feedback-input"
82+
disabled={false}
83+
floatingLabel="Add comments (Optional)"
84+
onChange={[MockFunction props.onChange]}
85+
value=""
86+
/>
87+
<Form.Control.Feedback
88+
className="feedback-error-msg"
89+
type="invalid"
90+
>
91+
The overall feedback is required
92+
</Form.Control.Feedback>
93+
</Form.Group>
94+
`;

‎src/components/Assessment/EditableAssessment/OverallFeedback/index.jsx

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
import { Form } from '@edx/paragon';
5+
import { useIntl } from '@edx/frontend-platform/i18n';
6+
7+
import InfoPopover from 'components/InfoPopover';
8+
9+
import messages from 'components/Assessment/messages';
10+
11+
/**
12+
* <OverallFeedback />
13+
*/
14+
const OverallFeedback = ({
15+
prompt,
16+
value,
17+
isDisabled,
18+
isInvalid,
19+
onChange,
20+
}) => {
21+
const { formatMessage } = useIntl();
22+
23+
const inputLabel = formatMessage(
24+
!isDisabled ? messages.addComments : messages.comments,
25+
);
26+
27+
return (
28+
<Form.Group>
29+
<Form.Label className="criteria-label">
30+
<span className="criteria-title">
31+
{formatMessage(messages.overallComments)}
32+
</span>
33+
<InfoPopover>
34+
<div>{prompt}</div>
35+
</InfoPopover>
36+
</Form.Label>
37+
<Form.Control
38+
as="textarea"
39+
className="rubric-feedback feedback-input"
40+
floatingLabel={inputLabel}
41+
value={value}
42+
onChange={onChange}
43+
disabled={isDisabled}
44+
/>
45+
{isInvalid && (
46+
<Form.Control.Feedback type="invalid" className="feedback-error-msg">
47+
{formatMessage(messages.overallFeedbackError)}
48+
</Form.Control.Feedback>
49+
)}
50+
</Form.Group>
51+
);
52+
};
53+
54+
OverallFeedback.defaultProps = {
55+
value: '',
56+
isDisabled: false,
57+
isInvalid: false,
58+
};
59+
60+
OverallFeedback.propTypes = {
61+
prompt: PropTypes.string.isRequired,
62+
value: PropTypes.string,
63+
isDisabled: PropTypes.bool,
64+
onChange: PropTypes.func.isRequired,
65+
isInvalid: PropTypes.bool,
66+
};
67+
68+
export default OverallFeedback;

0 commit comments

Comments
 (0)