Skip to content

Commit

Permalink
feat: Add plugin slots for progress page components
Browse files Browse the repository at this point in the history
Adds a slot for different components in the progress tab to allow them to be
overridden with custom components.
  • Loading branch information
xitij2000 committed Dec 10, 2024
1 parent dafdcad commit 5721f77
Show file tree
Hide file tree
Showing 39 changed files with 401 additions and 111 deletions.
2 changes: 1 addition & 1 deletion src/course-home/progress-tab/ProgressHeader.jsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react';
import { useSelector } from 'react-redux';

import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { Button } from '@openedx/paragon';
import { useSelector } from 'react-redux';

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

Expand Down
39 changes: 14 additions & 25 deletions src/course-home/progress-tab/ProgressTab.jsx
Original file line number Diff line number Diff line change
@@ -1,27 +1,20 @@
import React from 'react';
import { useSelector } from 'react-redux';
import { breakpoints, useWindowSize } from '@openedx/paragon';
import { useWindowSize } from '@openedx/paragon';
import { useContextId } from '../../data/hooks';
import ProgressTabCertificateStatusSidePanelSlot from '../../plugin-slots/ProgressTabCertificateStatusSidePanelSlot';

import CertificateStatus from './certificate-status/CertificateStatus';
import CourseCompletion from './course-completion/CourseCompletion';
import CourseGrade from './grades/course-grade/CourseGrade';
import DetailedGrades from './grades/detailed-grades/DetailedGrades';
import GradeSummary from './grades/grade-summary/GradeSummary';
import ProgressHeader from './ProgressHeader';
import RelatedLinks from './related-links/RelatedLinks';

import ProgressTabCertificateStatusMainBodySlot from '../../plugin-slots/ProgressTabCertificateStatusMainBodySlot';
import ProgressTabCourseGradeSlot from '../../plugin-slots/ProgressTabCourseGradeSlot';
import ProgressTabGradeBreakdownSlot from '../../plugin-slots/ProgressTabGradeBreakdownSlot';
import ProgressTabRelatedLinksSlot from '../../plugin-slots/ProgressTabRelatedLinksSlot';
import { useModel } from '../../generic/model-store';

const ProgressTab = () => {
const {
courseId,
} = useSelector(state => state.courseHome);

const {
gradesFeatureIsFullyLocked, disableProgressGraph,
} = useModel('progress', courseId);

const applyLockedOverlay = gradesFeatureIsFullyLocked ? 'locked-overlay' : '';
const courseId = useContextId();
const { disableProgressGraph } = useModel('progress', courseId);

const windowWidth = useWindowSize().width;
if (windowWidth === undefined) {
Expand All @@ -31,26 +24,22 @@ const ProgressTab = () => {
return null;
}

const wideScreen = windowWidth >= breakpoints.large.minWidth;
return (
<>
<ProgressHeader />
<div className="row w-100 m-0">
{/* Main body */}
<div className="col-12 col-md-8 p-0">
{!disableProgressGraph && <CourseCompletion />}
{!wideScreen && <CertificateStatus />}
<CourseGrade />
<div className={`grades my-4 p-4 rounded raised-card ${applyLockedOverlay}`} aria-hidden={gradesFeatureIsFullyLocked}>
<GradeSummary />
<DetailedGrades />
</div>
<ProgressTabCertificateStatusMainBodySlot />
<ProgressTabCourseGradeSlot />
<ProgressTabGradeBreakdownSlot />
</div>

{/* Side panel */}
<div className="col-12 col-md-4 p-0 px-md-4">
{wideScreen && <CertificateStatus />}
<RelatedLinks />
<ProgressTabCertificateStatusSidePanelSlot />
<ProgressTabRelatedLinksSlot />
</div>
</div>
</>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useDispatch } from 'react-redux';
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
import {
FormattedDate, FormattedMessage, injectIntl, intlShape,
FormattedDate, FormattedMessage, useIntl,
} from '@edx/frontend-platform/i18n';

import { Button, Card } from '@openedx/paragon';
import { getConfig } from '@edx/frontend-platform';
import { useContextId } from '../../../data/hooks';
import { useModel } from '../../../generic/model-store';
import { COURSE_EXIT_MODES, getCourseExitMode } from '../../../courseware/course/course-exit/utils';
import { DashboardLink, IdVerificationSupportLink, ProfileLink } from '../../../shared/links';
import { requestCert } from '../../data/thunks';
import messages from './messages';

const CertificateStatus = ({ intl }) => {
const {
courseId,
} = useSelector(state => state.courseHome);
const CertificateStatus = () => {
const intl = useIntl();
const courseId = useContextId();

const {
entranceExamData,
Expand Down Expand Up @@ -267,8 +267,6 @@ const CertificateStatus = ({ intl }) => {
);
};

CertificateStatus.propTypes = {
intl: intlShape.isRequired,
};
CertificateStatus.propTypes = {};

export default injectIntl(CertificateStatus);
export default CertificateStatus;
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from 'react';
import { useSelector } from 'react-redux';
import {
getLocale, injectIntl, intlShape, isRtl,
} from '@edx/frontend-platform/i18n';
import { useContextId } from '../../../data/hooks';
import { useModel } from '../../../generic/model-store';

import CompleteDonutSegment from './CompleteDonutSegment';
Expand All @@ -11,9 +11,7 @@ import LockedDonutSegment from './LockedDonutSegment';
import messages from './messages';

const CompletionDonutChart = ({ intl }) => {
const {
courseId,
} = useSelector(state => state.courseHome);
const courseId = useContextId();

const {
completionSummary: {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,19 +1,17 @@
import React from 'react';
import { useSelector } from 'react-redux';
import { getConfig } from '@edx/frontend-platform';
import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { CheckCircle, WarningFilled, WatchFilled } from '@openedx/paragon/icons';
import { Hyperlink, Icon } from '@openedx/paragon';
import { useContextId } from '../../../data/hooks';

import { useModel } from '../../../generic/model-store';
import { DashboardLink } from '../../../shared/links';

import messages from './messages';

const CreditInformation = ({ intl }) => {
const {
courseId,
} = useSelector(state => state.courseHome);
const courseId = useContextId();

const {
creditCourseRequirements,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { useSelector } from 'react-redux';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { useContextId } from '../../../../data/hooks';

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

Expand All @@ -12,9 +12,7 @@ import CreditInformation from '../../credit-information/CreditInformation';
import messages from '../messages';

const CourseGrade = ({ intl }) => {
const {
courseId,
} = useSelector(state => state.courseHome);
const courseId = useContextId();

const {
creditCourseRequirements,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,19 +1,17 @@
import React from 'react';
import { useSelector } from 'react-redux';
import PropTypes from 'prop-types';

import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { CheckCircle, WarningFilled } from '@openedx/paragon/icons';
import { breakpoints, Icon, useWindowSize } from '@openedx/paragon';
import { useContextId } from '../../../../data/hooks';
import { useModel } from '../../../../generic/model-store';

import GradeRangeTooltip from './GradeRangeTooltip';
import messages from '../messages';

const CourseGradeFooter = ({ intl, passingGrade }) => {
const {
courseId,
} = useSelector(state => state.courseHome);
const courseId = useContextId();

const {
courseGrade: {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,19 +1,17 @@
import React from 'react';
import { useSelector } from 'react-redux';

import { sendTrackEvent } from '@edx/frontend-platform/analytics';
import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { Locked } from '@openedx/paragon/icons';
import { Button, Icon } from '@openedx/paragon';
import { useContextId } from '../../../../data/hooks';

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

const CourseGradeHeader = ({ intl }) => {
const {
courseId,
} = useSelector(state => state.courseHome);
const courseId = useContextId();
const {
org,
} = useModel('courseHomeMeta', courseId);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,20 +1,18 @@
import React from 'react';
import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';

import {
getLocale, injectIntl, intlShape, isRtl,
} from '@edx/frontend-platform/i18n';
import { OverlayTrigger, Popover } from '@openedx/paragon';
import { useContextId } from '../../../../data/hooks';

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

import messages from '../messages';

const CurrentGradeTooltip = ({ intl, tooltipClassName }) => {
const {
courseId,
} = useSelector(state => state.courseHome);
const courseId = useContextId();

const {
courseGrade: {
Expand Down
6 changes: 2 additions & 4 deletions src/course-home/progress-tab/grades/course-grade/GradeBar.jsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,18 @@
import React from 'react';
import { useSelector } from 'react-redux';
import PropTypes from 'prop-types';

import {
getLocale, injectIntl, intlShape, isRtl,
} from '@edx/frontend-platform/i18n';
import { useContextId } from '../../../../data/hooks';
import { useModel } from '../../../../generic/model-store';
import CurrentGradeTooltip from './CurrentGradeTooltip';
import PassingGradeTooltip from './PassingGradeTooltip';

import messages from '../messages';

const GradeBar = ({ intl, passingGrade }) => {
const {
courseId,
} = useSelector(state => state.courseHome);
const courseId = useContextId();

const {
courseGrade: {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,20 +1,18 @@
import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import PropTypes from 'prop-types';

import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { InfoOutline } from '@openedx/paragon/icons';
import {
Icon, IconButton, OverlayTrigger, Popover,
} from '@openedx/paragon';
import { useContextId } from '../../../../data/hooks';
import { useModel } from '../../../../generic/model-store';

import messages from '../messages';

const GradeRangeTooltip = ({ intl, iconButtonClassName, passingGrade }) => {
const {
courseId,
} = useSelector(state => state.courseHome);
const courseId = useContextId();

const {
gradesFeatureIsFullyLocked,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React from 'react';
import { useSelector } from 'react-redux';

import { sendTrackEvent } from '@edx/frontend-platform/analytics';
import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { Blocked } from '@openedx/paragon/icons';
import { Icon, Hyperlink } from '@openedx/paragon';
import { useContextId } from '../../../../data/hooks';
import { useModel } from '../../../../generic/model-store';
import { showUngradedAssignments } from '../../utils';

Expand All @@ -15,9 +15,7 @@ import messages from '../messages';

const DetailedGrades = ({ intl }) => {
const { administrator } = getAuthenticatedUser();
const {
courseId,
} = useSelector(state => state.courseHome);
const courseId = useContextId();
const {
org,
tabs,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,20 +1,18 @@
import React from 'react';
import { useSelector } from 'react-redux';

import {
getLocale, injectIntl, intlShape, isRtl,
} from '@edx/frontend-platform/i18n';
import { DataTable } from '@openedx/paragon';
import { useContextId } from '../../../../data/hooks';

import { useModel } from '../../../../generic/model-store';
import messages from '../messages';
import SubsectionTitleCell from './SubsectionTitleCell';
import { showUngradedAssignments } from '../../utils';

const DetailedGradesTable = ({ intl }) => {
const {
courseId,
} = useSelector(state => state.courseHome);
const courseId = useContextId();

const {
sectionScores,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React from 'react';
import { useSelector } from 'react-redux';
import PropTypes from 'prop-types';

import { sendTrackEvent } from '@edx/frontend-platform/analytics';
Expand All @@ -9,15 +8,14 @@ import { Collapsible, Icon, Row } from '@openedx/paragon';
import {
ArrowDropDown, ArrowDropUp, Blocked, Info,
} from '@openedx/paragon/icons';
import { useContextId } from '../../../../data/hooks';

import messages from '../messages';
import { useModel } from '../../../../generic/model-store';
import ProblemScoreDrawer from './ProblemScoreDrawer';

const SubsectionTitleCell = ({ intl, subsection }) => {
const {
courseId,
} = useSelector(state => state.courseHome);
const courseId = useContextId();
const {
org,
} = useModel('courseHomeMeta', courseId);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,18 +1,16 @@
import React from 'react';
import { useSelector } from 'react-redux';
import PropTypes from 'prop-types';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { Blocked } from '@openedx/paragon/icons';
import { Icon } from '@openedx/paragon';
import { useContextId } from '../../../../data/hooks';
import { useModel } from '../../../../generic/model-store';
import messages from '../messages';

const AssignmentTypeCell = ({
intl, assignmentType, footnoteMarker, footnoteId, locked,
}) => {
const {
courseId,
} = useSelector(state => state.courseHome);
const courseId = useContextId();

const {
gradesFeatureIsFullyLocked,
Expand Down
Loading

0 comments on commit 5721f77

Please sign in to comment.