+
diff --git a/src/course-home/progress-tab/ProgressTab.test.jsx b/src/course-home/progress-tab/ProgressTab.test.jsx
index dbde50f2..128e382c 100644
--- a/src/course-home/progress-tab/ProgressTab.test.jsx
+++ b/src/course-home/progress-tab/ProgressTab.test.jsx
@@ -111,6 +111,7 @@ describe('Progress Tab', () => {
assignment_type: 'Homework',
block_key: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@12345',
display_name: 'First subsection',
+ learner_has_access: true,
has_graded_assignment: true,
num_points_earned: 1,
num_points_possible: 2,
@@ -176,6 +177,7 @@ describe('Progress Tab', () => {
assignment_type: 'Homework',
block_key: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@12345',
display_name: 'First subsection',
+ learner_has_access: true,
has_graded_assignment: true,
num_points_earned: 8,
num_points_possible: 10,
@@ -252,6 +254,26 @@ describe('Progress Tab', () => {
sku: 'ABCD1234',
upgrade_url: 'edx.org/upgrade',
},
+ section_scores: [
+ {
+ display_name: 'First section',
+ subsections: [
+ {
+ assignment_type: 'Homework',
+ block_key: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@12345',
+ display_name: 'First subsection',
+ learner_has_access: false,
+ has_graded_assignment: true,
+ num_points_earned: 8,
+ num_points_possible: 10,
+ percent_graded: 1.0,
+ show_correctness: 'always',
+ show_grades: true,
+ url: 'http://learning.edx.org/course/course-v1:edX+Test+run/first_subsection',
+ },
+ ],
+ },
+ ],
});
await fetchAndRender();
expect(screen.getByText('locked feature')).toBeInTheDocument();
@@ -275,6 +297,26 @@ describe('Progress Tab', () => {
sku: 'ABCD1234',
upgrade_url: 'edx.org/upgrade',
},
+ section_scores: [
+ {
+ display_name: 'First section',
+ subsections: [
+ {
+ assignment_type: 'Homework',
+ block_key: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@12345',
+ display_name: 'First subsection',
+ learner_has_access: false,
+ has_graded_assignment: true,
+ num_points_earned: 8,
+ num_points_possible: 10,
+ percent_graded: 1.0,
+ show_correctness: 'always',
+ show_grades: true,
+ url: 'http://learning.edx.org/course/course-v1:edX+Test+run/first_subsection',
+ },
+ ],
+ },
+ ],
});
await fetchAndRender();
expect(screen.getByText('locked feature')).toBeInTheDocument();
@@ -298,6 +340,26 @@ describe('Progress Tab', () => {
incomplete_count: 1,
locked_count: 1,
},
+ section_scores: [
+ {
+ display_name: 'First section',
+ subsections: [
+ {
+ assignment_type: 'Homework',
+ block_key: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@12345',
+ display_name: 'First subsection',
+ learner_has_access: false,
+ has_graded_assignment: true,
+ num_points_earned: 1,
+ num_points_possible: 2,
+ percent_graded: 1.0,
+ show_correctness: 'always',
+ show_grades: true,
+ url: 'http://learning.edx.org/course/course-v1:edX+Test+run/first_subsection',
+ },
+ ],
+ },
+ ],
});
await fetchAndRender();
expect(screen.getByText('locked feature')).toBeInTheDocument();
@@ -309,6 +371,62 @@ describe('Progress Tab', () => {
expect(screen.queryByText('locked feature')).not.toBeInTheDocument();
});
+ it('renders limited feature preview with upgrade button when user has access to some content that would typically be locked', async () => {
+ setTabData({
+ completion_summary: {
+ complete_count: 1,
+ incomplete_count: 1,
+ locked_count: 1,
+ },
+ verified_mode: {
+ access_expiration_date: '2050-01-01T12:00:00',
+ currency: 'USD',
+ currency_symbol: '$',
+ price: 149,
+ sku: 'ABCD1234',
+ upgrade_url: 'edx.org/upgrade',
+ },
+ section_scores: [
+ {
+ display_name: 'First section',
+ subsections: [
+ {
+ assignment_type: 'Homework',
+ block_key: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@123456',
+ display_name: 'First subsection',
+ learner_has_access: false,
+ has_graded_assignment: true,
+ num_points_earned: 8,
+ num_points_possible: 10,
+ percent_graded: 1.0,
+ show_correctness: 'always',
+ show_grades: true,
+ url: 'http://learning.edx.org/course/course-v1:edX+Test+run/first_subsection',
+ },
+ {
+ assignment_type: 'Exam',
+ display_name: 'Second subsection',
+ learner_has_access: true,
+ has_graded_assignment: true,
+ num_points_earned: 1,
+ num_points_possible: 1,
+ percent_graded: 1.0,
+ show_correctness: 'always',
+ show_grades: true,
+ url: 'http://learning.edx.org/course/course-v1:edX+Test+run/second_subsection',
+ },
+ ],
+ },
+ ],
+ });
+ await fetchAndRender();
+ expect(screen.getByText('limited feature')).toBeInTheDocument();
+ expect(screen.getByText('Unlock to work towards a certificate.')).toBeInTheDocument();
+ expect(screen.queryAllByText('You have limited access to graded assignments as part of the audit track in this course.')).toHaveLength(2);
+
+ expect(screen.queryAllByTestId('blocked-icon')).toHaveLength(4);
+ });
+
it('renders correct current grade tooltip when showGrades is false', async () => {
// The learner has a 50% on the first assignment and a 100% on the second, making their grade a 75%
// The second assignment has showGrades set to false, so the grade reflected to the learner should be 50%.
@@ -321,6 +439,7 @@ describe('Progress Tab', () => {
assignment_type: 'Homework',
block_key: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@12345',
display_name: 'First subsection',
+ learner_has_access: true,
has_graded_assignment: true,
num_points_earned: 1,
num_points_possible: 2,
@@ -337,6 +456,7 @@ describe('Progress Tab', () => {
{
assignment_type: 'Homework',
display_name: 'Second subsection',
+ learner_has_access: true,
has_graded_assignment: true,
num_points_earned: 1,
num_points_possible: 1,
@@ -531,6 +651,7 @@ describe('Progress Tab', () => {
{
assignment_type: 'Homework',
display_name: 'Second subsection',
+ learner_has_access: true,
has_graded_assignment: true,
num_points_earned: 1,
num_points_possible: 1,
@@ -554,8 +675,8 @@ describe('Progress Tab', () => {
await fetchAndRender();
expect(screen.getByText('Detailed grades')).toBeInTheDocument();
- expect(screen.getByRole('link', { name: 'First subsection' }));
- expect(screen.getByRole('link', { name: 'Second subsection' }));
+ expect(screen.getByText('First subsection'));
+ expect(screen.getByText('Second subsection'));
});
it('sends event on click of subsection link', async () => {
diff --git a/src/course-home/progress-tab/grades/course-grade/CourseGrade.jsx b/src/course-home/progress-tab/grades/course-grade/CourseGrade.jsx
index 5b113dcf..c350296a 100644
--- a/src/course-home/progress-tab/grades/course-grade/CourseGrade.jsx
+++ b/src/course-home/progress-tab/grades/course-grade/CourseGrade.jsx
@@ -16,7 +16,8 @@ function CourseGrade({ intl }) {
} = useSelector(state => state.courseHome);
const {
- gradesFeatureIsLocked,
+ gradesFeatureIsFullyLocked,
+ gradesFeatureIsPartiallyLocked,
gradingPolicy: {
gradeRange,
},
@@ -24,12 +25,12 @@ function CourseGrade({ intl }) {
const passingGrade = Number((Math.min(...Object.values(gradeRange)) * 100).toFixed(0));
- const applyLockedOverlay = gradesFeatureIsLocked ? 'locked-overlay' : '';
+ const applyLockedOverlay = gradesFeatureIsFullyLocked ? 'locked-overlay' : '';
return (
- {gradesFeatureIsLocked && }
-
+ {(gradesFeatureIsFullyLocked || gradesFeatureIsPartiallyLocked) &&
}
+
{intl.formatMessage(messages.grades)}
diff --git a/src/course-home/progress-tab/grades/course-grade/CourseGradeHeader.jsx b/src/course-home/progress-tab/grades/course-grade/CourseGradeHeader.jsx
index 45128488..79b5b715 100644
--- a/src/course-home/progress-tab/grades/course-grade/CourseGradeHeader.jsx
+++ b/src/course-home/progress-tab/grades/course-grade/CourseGradeHeader.jsx
@@ -19,6 +19,7 @@ function CourseGradeHeader({ intl }) {
} = useModel('courseHomeMeta', courseId);
const {
verifiedMode,
+ gradesFeatureIsFullyLocked,
} = useModel('progress', courseId);
const { administrator } = getAuthenticatedUser();
@@ -29,6 +30,14 @@ function CourseGradeHeader({ intl }) {
is_staff: administrator,
});
};
+ let previewText;
+ if (verifiedMode) {
+ previewText = gradesFeatureIsFullyLocked
+ ? intl.formatMessage(messages.courseGradePreviewUnlockCertificateBody)
+ : intl.formatMessage(messages.courseGradePartialPreviewUnlockCertificateBody);
+ } else {
+ previewText = intl.formatMessage(messages.courseGradePreviewUpgradeDeadlinePassedBody);
+ }
return (
@@ -40,13 +49,14 @@ function CourseGradeHeader({ intl }) {
{intl.formatMessage(messages.courseGradePreviewHeaderAriaHidden)}
- {intl.formatMessage(messages.courseGradePreviewHeader)}
+ {gradesFeatureIsFullyLocked
+ ? intl.formatMessage(messages.courseGradePreviewHeaderLocked)
+ : intl.formatMessage(messages.courseGradePreviewHeaderLimited)}
- {verifiedMode ? intl.formatMessage(messages.courseGradePreviewUnlockCertificateBody)
- : intl.formatMessage(messages.courseGradePreviewUpgradeDeadlinePassedBody)}
+ {previewText}
diff --git a/src/course-home/progress-tab/grades/course-grade/GradeBar.jsx b/src/course-home/progress-tab/grades/course-grade/GradeBar.jsx
index 6f5f2d25..01e5c107 100644
--- a/src/course-home/progress-tab/grades/course-grade/GradeBar.jsx
+++ b/src/course-home/progress-tab/grades/course-grade/GradeBar.jsx
@@ -19,12 +19,12 @@ function GradeBar({ intl, passingGrade }) {
isPassing,
visiblePercent,
},
- gradesFeatureIsLocked,
+ gradesFeatureIsFullyLocked,
} = useModel('progress', courseId);
const currentGrade = Number((visiblePercent * 100).toFixed(0));
- const lockedTooltipClassName = gradesFeatureIsLocked ? 'locked-overlay' : '';
+ const lockedTooltipClassName = gradesFeatureIsFullyLocked ? 'locked-overlay' : '';
return (
diff --git a/src/course-home/progress-tab/grades/course-grade/GradeRangeTooltip.jsx b/src/course-home/progress-tab/grades/course-grade/GradeRangeTooltip.jsx
index e1778572..e983d962 100644
--- a/src/course-home/progress-tab/grades/course-grade/GradeRangeTooltip.jsx
+++ b/src/course-home/progress-tab/grades/course-grade/GradeRangeTooltip.jsx
@@ -17,7 +17,7 @@ function GradeRangeTooltip({ intl, iconButtonClassName, passingGrade }) {
} = useSelector(state => state.courseHome);
const {
- gradesFeatureIsLocked,
+ gradesFeatureIsFullyLocked,
gradingPolicy: {
gradeRange,
},
@@ -68,7 +68,7 @@ function GradeRangeTooltip({ intl, iconButtonClassName, passingGrade }) {
src={InfoOutline}
iconAs={Icon}
size="inline"
- disabled={gradesFeatureIsLocked}
+ disabled={gradesFeatureIsFullyLocked}
/>
);
diff --git a/src/course-home/progress-tab/grades/detailed-grades/DetailedGrades.jsx b/src/course-home/progress-tab/grades/detailed-grades/DetailedGrades.jsx
index 7550d138..9a5a0a5e 100644
--- a/src/course-home/progress-tab/grades/detailed-grades/DetailedGrades.jsx
+++ b/src/course-home/progress-tab/grades/detailed-grades/DetailedGrades.jsx
@@ -5,7 +5,8 @@ import { getConfig } from '@edx/frontend-platform';
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Hyperlink } from '@edx/paragon';
+import { Blocked } from '@edx/paragon/icons';
+import { Icon, Hyperlink } from '@edx/paragon';
import { useModel } from '../../../../generic/model-store';
import DetailedGradesTable from './DetailedGradesTable';
@@ -21,7 +22,8 @@ function DetailedGrades({ intl }) {
org,
} = useModel('courseHomeMeta', courseId);
const {
- gradesFeatureIsLocked,
+ gradesFeatureIsFullyLocked,
+ gradesFeatureIsPartiallyLocked,
sectionScores,
} = useModel('progress', courseId);
@@ -40,7 +42,7 @@ function DetailedGrades({ intl }) {
className="muted-link inline-link"
destination={`${getConfig().LMS_BASE_URL}/courses/${courseId}/course`}
onClick={logOutlineLinkClick}
- tabIndex={gradesFeatureIsLocked ? '-1' : '0'}
+ tabIndex={gradesFeatureIsFullyLocked ? '-1' : '0'}
>
{intl.formatMessage(messages.courseOutline)}
@@ -49,6 +51,12 @@ function DetailedGrades({ intl }) {
return (
{intl.formatMessage(messages.detailedGrades)}
+ {gradesFeatureIsPartiallyLocked && (
+
+
+ {intl.formatMessage(messages.gradeSummaryLimitedAccessExplanation)}
+
+ )}
{hasSectionScores && (
)}
diff --git a/src/course-home/progress-tab/grades/detailed-grades/DetailedGradesTable.jsx b/src/course-home/progress-tab/grades/detailed-grades/DetailedGradesTable.jsx
index f83c618f..e9d5e362 100644
--- a/src/course-home/progress-tab/grades/detailed-grades/DetailedGradesTable.jsx
+++ b/src/course-home/progress-tab/grades/detailed-grades/DetailedGradesTable.jsx
@@ -12,6 +12,7 @@ function DetailedGradesTable({ intl }) {
const {
courseId,
} = useSelector(state => state.courseHome);
+
const {
sectionScores,
} = useModel('progress', courseId);
@@ -31,7 +32,7 @@ function DetailedGradesTable({ intl }) {
const detailedGradesData = subsectionScores.map((subsection) => ({
subsectionTitle: ,
- score: `${subsection.numPointsEarned}/${subsection.numPointsPossible}`,
+ score: {subsection.numPointsEarned}/{subsection.numPointsPossible},
}));
return (
diff --git a/src/course-home/progress-tab/grades/detailed-grades/SubsectionTitleCell.jsx b/src/course-home/progress-tab/grades/detailed-grades/SubsectionTitleCell.jsx
index 4cf780ee..e4cab4e0 100644
--- a/src/course-home/progress-tab/grades/detailed-grades/SubsectionTitleCell.jsx
+++ b/src/course-home/progress-tab/grades/detailed-grades/SubsectionTitleCell.jsx
@@ -6,7 +6,7 @@ import { sendTrackEvent } from '@edx/frontend-platform/analytics';
import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { Collapsible, Icon, Row } from '@edx/paragon';
-import { ArrowDropDown, ArrowDropUp } from '@edx/paragon/icons';
+import { ArrowDropDown, ArrowDropUp, Blocked } from '@edx/paragon/icons';
import messages from '../messages';
import { useModel } from '../../../../generic/model-store';
@@ -20,7 +20,7 @@ function SubsectionTitleCell({ intl, subsection }) {
org,
} = useModel('courseHomeMeta', courseId);
const {
- gradesFeatureIsLocked,
+ gradesFeatureIsFullyLocked,
} = useModel('progress', courseId);
const {
@@ -46,19 +46,22 @@ function SubsectionTitleCell({ intl, subsection }) {
-
- {displayName}
-
+
+ {gradesFeatureIsFullyLocked || subsection.learnerHasAccess ? '' : }
+
+ {displayName}
+
+
diff --git a/src/course-home/progress-tab/grades/grade-summary/AssignmentTypeCell.jsx b/src/course-home/progress-tab/grades/grade-summary/AssignmentTypeCell.jsx
index 064248e4..6a16638a 100644
--- a/src/course-home/progress-tab/grades/grade-summary/AssignmentTypeCell.jsx
+++ b/src/course-home/progress-tab/grades/grade-summary/AssignmentTypeCell.jsx
@@ -1,18 +1,26 @@
import React from 'react';
import { useSelector } from 'react-redux';
import PropTypes from 'prop-types';
+import { Blocked } from '@edx/paragon/icons';
+import { Icon } from '@edx/paragon';
import { useModel } from '../../../../generic/model-store';
-function AssignmentTypeCell({ assignmentType, footnoteMarker, footnoteId }) {
+function AssignmentTypeCell({
+ assignmentType, footnoteMarker, footnoteId, locked,
+}) {
const {
courseId,
} = useSelector(state => state.courseHome);
+
const {
- gradesFeatureIsLocked,
+ gradesFeatureIsFullyLocked,
} = useModel('progress', courseId);
+
+ const lockedIcon = locked ? : '';
+
return (
- {assignmentType}
+
{lockedIcon}{assignmentType}
{footnoteId && footnoteMarker && (
{footnoteMarker}
@@ -34,11 +42,13 @@ AssignmentTypeCell.propTypes = {
assignmentType: PropTypes.string.isRequired,
footnoteId: PropTypes.string,
footnoteMarker: PropTypes.number,
+ locked: PropTypes.bool,
};
AssignmentTypeCell.defaultProps = {
footnoteId: '',
footnoteMarker: null,
+ locked: false,
};
export default AssignmentTypeCell;
diff --git a/src/course-home/progress-tab/grades/grade-summary/DroppableAssignmentFootnote.jsx b/src/course-home/progress-tab/grades/grade-summary/DroppableAssignmentFootnote.jsx
index 660d548d..56d1a739 100644
--- a/src/course-home/progress-tab/grades/grade-summary/DroppableAssignmentFootnote.jsx
+++ b/src/course-home/progress-tab/grades/grade-summary/DroppableAssignmentFootnote.jsx
@@ -12,7 +12,7 @@ function DroppableAssignmentFootnote({ footnotes, intl }) {
courseId,
} = useSelector(state => state.courseHome);
const {
- gradesFeatureIsLocked,
+ gradesFeatureIsFullyLocked,
} = useModel('progress', courseId);
return (
<>
@@ -29,7 +29,7 @@ function DroppableAssignmentFootnote({ footnotes, intl }) {
assignmentType: footnote.assignmentType,
}}
/>
-
+
{intl.formatMessage(messages.backToContent)}
diff --git a/src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.jsx b/src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.jsx
index 4c021a16..e2b355c6 100644
--- a/src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.jsx
+++ b/src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.jsx
@@ -5,7 +5,7 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import {
Icon, IconButton, OverlayTrigger, Popover,
} from '@edx/paragon';
-import { InfoOutline } from '@edx/paragon/icons';
+import { Blocked, InfoOutline } from '@edx/paragon/icons';
import messages from '../messages';
import { useModel } from '../../../../generic/model-store';
@@ -15,7 +15,8 @@ function GradeSummaryHeader({ intl }) {
courseId,
} = useSelector(state => state.courseHome);
const {
- gradesFeatureIsLocked,
+ gradesFeatureIsFullyLocked,
+ gradesFeatureIsPartiallyLocked,
} = useModel('progress', courseId);
const [showTooltip, setShowTooltip] = useState(false);
return (
@@ -41,9 +42,15 @@ function GradeSummaryHeader({ intl }) {
iconAs={Icon}
className="mb-3"
size="sm"
- disabled={gradesFeatureIsLocked}
+ disabled={gradesFeatureIsFullyLocked}
/>
+ {gradesFeatureIsPartiallyLocked && (
+
+
+ {intl.formatMessage(messages.gradeSummaryLimitedAccessExplanation)}
+
+ )}