Skip to content

Commit a56fd7d

Browse files
KristinAokiKristinAoki
authored
feat: change blocked icon to lock icon (#1619)
* feat: replace blocked icon with locked * refactor: replace injectIntl with useIntl * revert: temporary test change * fix: failing test * fix: wording of message description * fix: lingering lint error * fix: missing message variable
1 parent 679caa6 commit a56fd7d

25 files changed

+210
-249
lines changed

‎src/course-home/progress-tab/ProgressHeader.jsx

+4-9
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1-
import React from 'react';
2-
31
import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
4-
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
2+
import { useIntl } from '@edx/frontend-platform/i18n';
53
import { Button } from '@openedx/paragon';
64
import { useSelector } from 'react-redux';
75

86
import { useModel } from '../../generic/model-store';
97

108
import messages from './messages';
119

12-
const ProgressHeader = ({ intl }) => {
10+
const ProgressHeader = () => {
11+
const intl = useIntl();
1312
const {
1413
courseId,
1514
targetUserId,
@@ -37,8 +36,4 @@ const ProgressHeader = ({ intl }) => {
3736
);
3837
};
3938

40-
ProgressHeader.propTypes = {
41-
intl: intlShape.isRequired,
42-
};
43-
44-
export default injectIntl(ProgressHeader);
39+
export default ProgressHeader;

‎src/course-home/progress-tab/ProgressTab.test.jsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -471,9 +471,12 @@ describe('Progress Tab', () => {
471471
await fetchAndRender();
472472
expect(screen.getByText('limited feature')).toBeInTheDocument();
473473
expect(screen.getByText('Unlock to work towards a certificate.')).toBeInTheDocument();
474-
expect(screen.queryAllByText('You have limited access to graded assignments as part of the audit track in this course.')).toHaveLength(2);
474+
expect(screen.queryAllByText(
475+
'You have limited access to graded assignments as part of the audit track in this course.',
476+
{ exact: false },
477+
)).toHaveLength(2);
475478

476-
expect(screen.queryAllByTestId('blocked-icon')).toHaveLength(4);
479+
expect(screen.queryAllByTestId('locked-icon')).toHaveLength(4);
477480
});
478481

479482
it('does not render subsections for which showGrades is false', async () => {

‎src/course-home/progress-tab/course-completion/CompleteDonutSegment.jsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import React, { useState } from 'react';
1+
import { useState } from 'react';
22
import PropTypes from 'prop-types';
33

4-
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
4+
import { useIntl } from '@edx/frontend-platform/i18n';
55
import { OverlayTrigger, Popover } from '@openedx/paragon';
66

77
import messages from './messages';
88

9-
const CompleteDonutSegment = ({ completePercentage, intl, lockedPercentage }) => {
9+
const CompleteDonutSegment = ({ completePercentage, lockedPercentage }) => {
10+
const intl = useIntl();
1011
const [showCompletePopover, setShowCompletePopover] = useState(false);
1112

1213
if (!completePercentage) {
@@ -82,8 +83,7 @@ const CompleteDonutSegment = ({ completePercentage, intl, lockedPercentage }) =>
8283

8384
CompleteDonutSegment.propTypes = {
8485
completePercentage: PropTypes.number.isRequired,
85-
intl: intlShape.isRequired,
8686
lockedPercentage: PropTypes.number.isRequired,
8787
};
8888

89-
export default injectIntl(CompleteDonutSegment);
89+
export default CompleteDonutSegment;

‎src/course-home/progress-tab/course-completion/CompletionDonutChart.jsx

+4-10
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
import React from 'react';
2-
import {
3-
getLocale, injectIntl, intlShape, isRtl,
4-
} from '@edx/frontend-platform/i18n';
1+
import { getLocale, isRtl, useIntl } from '@edx/frontend-platform/i18n';
52
import { useContextId } from '../../../data/hooks';
63
import { useModel } from '../../../generic/model-store';
74

@@ -10,7 +7,8 @@ import IncompleteDonutSegment from './IncompleteDonutSegment';
107
import LockedDonutSegment from './LockedDonutSegment';
118
import messages from './messages';
129

13-
const CompletionDonutChart = ({ intl }) => {
10+
const CompletionDonutChart = () => {
11+
const intl = useIntl();
1412
const courseId = useContextId();
1513

1614
const {
@@ -60,8 +58,4 @@ const CompletionDonutChart = ({ intl }) => {
6058
);
6159
};
6260

63-
CompletionDonutChart.propTypes = {
64-
intl: intlShape.isRequired,
65-
};
66-
67-
export default injectIntl(CompletionDonutChart);
61+
export default CompletionDonutChart;

‎src/course-home/progress-tab/course-completion/CourseCompletion.jsx

+19-20
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,26 @@
1-
import React from 'react';
2-
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
1+
import { useIntl } from '@edx/frontend-platform/i18n';
32

43
import CompletionDonutChart from './CompletionDonutChart';
54
import messages from './messages';
65

7-
const CourseCompletion = ({ intl }) => (
8-
<section className="text-dark-700 mb-4 rounded raised-card p-4">
9-
<div className="row w-100 m-0">
10-
<div className="col-12 col-sm-6 col-md-7 p-0">
11-
<h2>{intl.formatMessage(messages.courseCompletion)}</h2>
12-
<p className="small">
13-
{intl.formatMessage(messages.completionBody)}
14-
</p>
15-
</div>
16-
<div className="col-12 col-sm-6 col-md-5 mt-sm-n3 p-0 text-center">
17-
<CompletionDonutChart />
18-
</div>
19-
</div>
20-
</section>
21-
);
6+
const CourseCompletion = () => {
7+
const intl = useIntl();
228

23-
CourseCompletion.propTypes = {
24-
intl: intlShape.isRequired,
9+
return (
10+
<section className="text-dark-700 mb-4 rounded raised-card p-4">
11+
<div className="row w-100 m-0">
12+
<div className="col-12 col-sm-6 col-md-7 p-0">
13+
<h2>{intl.formatMessage(messages.courseCompletion)}</h2>
14+
<p className="small">
15+
{intl.formatMessage(messages.completionBody)}
16+
</p>
17+
</div>
18+
<div className="col-12 col-sm-6 col-md-5 mt-sm-n3 p-0 text-center">
19+
<CompletionDonutChart />
20+
</div>
21+
</div>
22+
</section>
23+
);
2524
};
2625

27-
export default injectIntl(CourseCompletion);
26+
export default CourseCompletion;

‎src/course-home/progress-tab/course-completion/IncompleteDonutSegment.jsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import React, { useState } from 'react';
1+
import { useState } from 'react';
22
import PropTypes from 'prop-types';
33

4-
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
4+
import { useIntl } from '@edx/frontend-platform/i18n';
55
import { OverlayTrigger, Popover } from '@openedx/paragon';
66

77
import messages from './messages';
88

9-
const IncompleteDonutSegment = ({ incompletePercentage, intl }) => {
9+
const IncompleteDonutSegment = ({ incompletePercentage }) => {
10+
const intl = useIntl();
1011
const [showIncompletePopover, setShowIncompletePopover] = useState(false);
1112

1213
if (!incompletePercentage) {
@@ -53,7 +54,6 @@ const IncompleteDonutSegment = ({ incompletePercentage, intl }) => {
5354

5455
IncompleteDonutSegment.propTypes = {
5556
incompletePercentage: PropTypes.number.isRequired,
56-
intl: intlShape.isRequired,
5757
};
5858

59-
export default injectIntl(IncompleteDonutSegment);
59+
export default IncompleteDonutSegment;

‎src/course-home/progress-tab/course-completion/LockedDonutSegment.jsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import React, { useState } from 'react';
1+
import { useState } from 'react';
22
import PropTypes from 'prop-types';
33

44
import { OverlayTrigger, Popover } from '@openedx/paragon';
5-
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
5+
import { useIntl } from '@edx/frontend-platform/i18n';
66

77
import messages from './messages';
88

9-
const LockedDonutSegment = ({ intl, lockedPercentage }) => {
9+
const LockedDonutSegment = ({ lockedPercentage }) => {
10+
const intl = useIntl();
1011
const [showLockedPopover, setShowLockedPopover] = useState(false);
1112

1213
if (!lockedPercentage) {
@@ -65,8 +66,7 @@ const LockedDonutSegment = ({ intl, lockedPercentage }) => {
6566
};
6667

6768
LockedDonutSegment.propTypes = {
68-
intl: intlShape.isRequired,
6969
lockedPercentage: PropTypes.number.isRequired,
7070
};
7171

72-
export default injectIntl(LockedDonutSegment);
72+
export default LockedDonutSegment;

‎src/course-home/progress-tab/credit-information/CreditInformation.jsx

+7-34
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import React from 'react';
21
import { getConfig } from '@edx/frontend-platform';
3-
import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
2+
import { useIntl } from '@edx/frontend-platform/i18n';
43
import { CheckCircle, WarningFilled, WatchFilled } from '@openedx/paragon/icons';
54
import { Hyperlink, Icon } from '@openedx/paragon';
65
import { useContextId } from '../../../data/hooks';
@@ -10,7 +9,8 @@ import { DashboardLink } from '../../../shared/links';
109

1110
import messages from './messages';
1211

13-
const CreditInformation = ({ intl }) => {
12+
const CreditInformation = () => {
13+
const intl = useIntl();
1414
const courseId = useContextId();
1515

1616
const {
@@ -34,36 +34,13 @@ const CreditInformation = ({ intl }) => {
3434

3535
switch (creditCourseRequirements.eligibilityStatus) {
3636
case 'not_eligible':
37-
eligibilityStatus = (
38-
<FormattedMessage
39-
id="progress.creditInformation.creditNotEligible"
40-
defaultMessage="You are no longer eligible for credit in this course. Learn more about {creditLink}."
41-
description="Message to learner who are not eligible for course credit, it can because the a requirement deadline have passed"
42-
values={{ creditLink }}
43-
/>
44-
);
37+
eligibilityStatus = intl.formatMessage(messages.creditNotEligibleStatus, { creditLink });
4538
break;
4639
case 'eligible':
47-
eligibilityStatus = (
48-
<FormattedMessage
49-
id="progress.creditInformation.creditEligible"
50-
defaultMessage="
51-
You have met the requirements for credit in this course. Go to your
52-
{dashboardLink} to purchase course credit. Or learn more about {creditLink}."
53-
description="After the credit requirements are met, leaners can then do the last step which purchasing the credit. Note that is only doable for leaners after they met all the requirements"
54-
values={{ dashboardLink, creditLink }}
55-
/>
56-
);
40+
eligibilityStatus = intl.formatMessage(messages.creditEligibleStatus, { dashboardLink, creditLink });
5741
break;
5842
case 'partial_eligible':
59-
eligibilityStatus = (
60-
<FormattedMessage
61-
id="progress.creditInformation.creditPartialEligible"
62-
defaultMessage="You have not yet met the requirements for credit. Learn more about {creditLink}."
63-
description="This means that one or more requirements is not satisfied yet"
64-
values={{ creditLink }}
65-
/>
66-
);
43+
eligibilityStatus = intl.formatMessage(messages.creditPartialEligibleStatus, { creditLink });
6744
break;
6845
default:
6946
break;
@@ -106,8 +83,4 @@ const CreditInformation = ({ intl }) => {
10683
);
10784
};
10885

109-
CreditInformation.propTypes = {
110-
intl: intlShape.isRequired,
111-
};
112-
113-
export default injectIntl(CreditInformation);
86+
export default CreditInformation;

‎src/course-home/progress-tab/credit-information/messages.ts

+16
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,22 @@ const messages = defineMessages({
3535
defaultMessage: 'Verification submitted',
3636
description: 'It indicate that the learner submitted a requirement but is not graded or reviewed yet',
3737
},
38+
creditNotEligibleStatus: {
39+
id: 'progress.creditInformation.creditNotEligible',
40+
defaultMessage: 'You are no longer eligible for credit in this course. Learn more about {creditLink}.',
41+
description: 'Message to learner who are not eligible for course credit, it can be that a requirement deadline has passed',
42+
},
43+
creditEligibleStatus: {
44+
id: 'progress.creditInformation.creditEligible',
45+
defaultMessage: `You have met the requirements for credit in this course. Go to your
46+
{dashboardLink} to purchase course credit. Or learn more about {creditLink}.`,
47+
description: 'After the credit requirements are met, leaners can then do the last step which purchasing the credit. Note that is only doable for leaners after they met all the requirements',
48+
},
49+
creditPartialEligibleStatus: {
50+
id: 'progress.creditInformation.creditPartialEligible',
51+
defaultMessage: 'You have not yet met the requirements for credit. Learn more about {creditLink}.',
52+
description: 'This means that one or more requirements is not satisfied yet',
53+
},
3854
});
3955

4056
export default messages;

‎src/course-home/progress-tab/grades/course-grade/CourseGrade.jsx

+4-8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import React from 'react';
2-
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
1+
import { useIntl } from '@edx/frontend-platform/i18n';
32
import { useContextId } from '../../../../data/hooks';
43

54
import { useModel } from '../../../../generic/model-store';
@@ -11,7 +10,8 @@ import CreditInformation from '../../credit-information/CreditInformation';
1110

1211
import messages from '../messages';
1312

14-
const CourseGrade = ({ intl }) => {
13+
const CourseGrade = () => {
14+
const intl = useIntl();
1515
const courseId = useContextId();
1616

1717
const {
@@ -52,8 +52,4 @@ const CourseGrade = ({ intl }) => {
5252
);
5353
};
5454

55-
CourseGrade.propTypes = {
56-
intl: intlShape.isRequired,
57-
};
58-
59-
export default injectIntl(CourseGrade);
55+
export default CourseGrade;

‎src/course-home/progress-tab/grades/course-grade/CourseGradeFooter.jsx

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import React from 'react';
21
import PropTypes from 'prop-types';
32

4-
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
3+
import { useIntl } from '@edx/frontend-platform/i18n';
54
import { CheckCircle, WarningFilled } from '@openedx/paragon/icons';
65
import { breakpoints, Icon, useWindowSize } from '@openedx/paragon';
76
import { useContextId } from '../../../../data/hooks';
@@ -10,7 +9,8 @@ import { useModel } from '../../../../generic/model-store';
109
import GradeRangeTooltip from './GradeRangeTooltip';
1110
import messages from '../messages';
1211

13-
const CourseGradeFooter = ({ intl, passingGrade }) => {
12+
const CourseGradeFooter = ({ passingGrade }) => {
13+
const intl = useIntl();
1414
const courseId = useContextId();
1515

1616
const {
@@ -84,8 +84,7 @@ const CourseGradeFooter = ({ intl, passingGrade }) => {
8484
};
8585

8686
CourseGradeFooter.propTypes = {
87-
intl: intlShape.isRequired,
8887
passingGrade: PropTypes.number.isRequired,
8988
};
9089

91-
export default injectIntl(CourseGradeFooter);
90+
export default CourseGradeFooter;

‎src/course-home/progress-tab/grades/course-grade/CourseGradeHeader.jsx

+4-9
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
1-
import React from 'react';
2-
31
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
42
import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
5-
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
3+
import { useIntl } from '@edx/frontend-platform/i18n';
64
import { Locked } from '@openedx/paragon/icons';
75
import { Button, Icon } from '@openedx/paragon';
86
import { useContextId } from '../../../../data/hooks';
97

108
import { useModel } from '../../../../generic/model-store';
119
import messages from '../messages';
1210

13-
const CourseGradeHeader = ({ intl }) => {
11+
const CourseGradeHeader = () => {
12+
const intl = useIntl();
1413
const courseId = useContextId();
1514
const {
1615
org,
@@ -81,8 +80,4 @@ const CourseGradeHeader = ({ intl }) => {
8180
);
8281
};
8382

84-
CourseGradeHeader.propTypes = {
85-
intl: intlShape.isRequired,
86-
};
87-
88-
export default injectIntl(CourseGradeHeader);
83+
export default CourseGradeHeader;

0 commit comments

Comments
 (0)