diff --git a/src/course-outline/card-header/TitleButton.jsx b/src/course-outline/card-header/TitleButton.tsx similarity index 82% rename from src/course-outline/card-header/TitleButton.jsx rename to src/course-outline/card-header/TitleButton.tsx index 3413b7464..84e538f36 100644 --- a/src/course-outline/card-header/TitleButton.jsx +++ b/src/course-outline/card-header/TitleButton.tsx @@ -1,4 +1,3 @@ -import PropTypes from 'prop-types'; import { useIntl } from '@edx/frontend-platform/i18n'; import { Button, @@ -12,12 +11,21 @@ import { } from '@openedx/paragon/icons'; import messages from './messages'; +interface TitleButtonProps { + title: string; + prefixIcon?: React.ReactNode; + isExpanded: boolean; + onTitleClick: () => void; + namePrefix: string; +} + const TitleButton = ({ title, + prefixIcon, isExpanded, onTitleClick, namePrefix, -}) => { +}: TitleButtonProps) => { const intl = useIntl(); const titleTooltipMessage = intl.formatMessage(messages.expandTooltip); @@ -39,17 +47,11 @@ const TitleButton = ({ className="item-card-header__title-btn" onClick={onTitleClick} > + {prefixIcon} {title} ); }; -TitleButton.propTypes = { - title: PropTypes.string.isRequired, - isExpanded: PropTypes.bool.isRequired, - onTitleClick: PropTypes.func.isRequired, - namePrefix: PropTypes.string.isRequired, -}; - export default TitleButton; diff --git a/src/course-outline/card-header/TitleLink.jsx b/src/course-outline/card-header/TitleLink.tsx similarity index 64% rename from src/course-outline/card-header/TitleLink.jsx rename to src/course-outline/card-header/TitleLink.tsx index 914f1d50e..b4030c2d5 100644 --- a/src/course-outline/card-header/TitleLink.jsx +++ b/src/course-outline/card-header/TitleLink.tsx @@ -1,27 +1,29 @@ -import PropTypes from 'prop-types'; import { Link } from 'react-router-dom'; import { Button, Truncate } from '@openedx/paragon'; +interface TitleLinkProps { + title: string; + titleLink: string; + namePrefix: string; + prefixIcon?: React.ReactNode; +} + const TitleLink = ({ title, titleLink, namePrefix, -}) => ( + prefixIcon, +}: TitleLinkProps) => ( ); -TitleLink.propTypes = { - title: PropTypes.string.isRequired, - titleLink: PropTypes.string.isRequired, - namePrefix: PropTypes.string.isRequired, -}; - export default TitleLink; diff --git a/src/course-outline/section-card/SectionCard.test.tsx b/src/course-outline/section-card/SectionCard.test.tsx index add4e5518..ca5973b54 100644 --- a/src/course-outline/section-card/SectionCard.test.tsx +++ b/src/course-outline/section-card/SectionCard.test.tsx @@ -64,6 +64,11 @@ const section = { }, }], }, + upstreamInfo: { + readyToSync: true, + upstreamRef: 'lct:org1:lib1:section:1', + versionSynced: 1, + }, } as XBlock; const onEditSectionSubmit = jest.fn(); diff --git a/src/course-outline/section-card/SectionCard.tsx b/src/course-outline/section-card/SectionCard.tsx index 27eb2c99e..7d0abade1 100644 --- a/src/course-outline/section-card/SectionCard.tsx +++ b/src/course-outline/section-card/SectionCard.tsx @@ -4,8 +4,9 @@ import { import { useDispatch } from 'react-redux'; import { useIntl } from '@edx/frontend-platform/i18n'; import { - Bubble, Button, StandardModal, useToggle, + Bubble, Button, Icon, StandardModal, useToggle, } from '@openedx/paragon'; +import { Newsstand } from '@openedx/paragon/icons'; import { useSearchParams } from 'react-router-dom'; import classNames from 'classnames'; @@ -224,6 +225,9 @@ const SectionCard = ({ isExpanded={isExpanded} onTitleClick={handleExpandContent} namePrefix={namePrefix} + prefixIcon={!!section.upstreamInfo?.upstreamRef && ( + + )} /> ); diff --git a/src/course-outline/subsection-card/SubsectionCard.test.tsx b/src/course-outline/subsection-card/SubsectionCard.test.tsx index 836317405..efa429faf 100644 --- a/src/course-outline/subsection-card/SubsectionCard.test.tsx +++ b/src/course-outline/subsection-card/SubsectionCard.test.tsx @@ -67,6 +67,11 @@ const subsection: XBlock = { id: unit.id, }], }, + upstreamInfo: { + readyToSync: true, + upstreamRef: 'lct:org1:lib1:subsection:1', + versionSynced: 1, + }, } as XBlock; const section: XBlock = { diff --git a/src/course-outline/subsection-card/SubsectionCard.tsx b/src/course-outline/subsection-card/SubsectionCard.tsx index f764cfa0a..5d6e04b94 100644 --- a/src/course-outline/subsection-card/SubsectionCard.tsx +++ b/src/course-outline/subsection-card/SubsectionCard.tsx @@ -4,7 +4,8 @@ import React, { import { useDispatch } from 'react-redux'; import { useSearchParams } from 'react-router-dom'; import { useIntl } from '@edx/frontend-platform/i18n'; -import { StandardModal, useToggle } from '@openedx/paragon'; +import { Icon, StandardModal, useToggle } from '@openedx/paragon'; +import { Newsstand } from '@openedx/paragon/icons'; import classNames from 'classnames'; import { isEmpty } from 'lodash'; @@ -170,6 +171,9 @@ const SubsectionCard = ({ isExpanded={isExpanded} onTitleClick={handleExpandContent} namePrefix={namePrefix} + prefixIcon={!!subsection.upstreamInfo?.upstreamRef && ( + + )} /> ); diff --git a/src/course-outline/unit-card/UnitCard.tsx b/src/course-outline/unit-card/UnitCard.tsx index 9b1a1a85d..d602ca4f4 100644 --- a/src/course-outline/unit-card/UnitCard.tsx +++ b/src/course-outline/unit-card/UnitCard.tsx @@ -5,7 +5,8 @@ import { useRef, } from 'react'; import { useDispatch } from 'react-redux'; -import { useToggle } from '@openedx/paragon'; +import { Icon, useToggle } from '@openedx/paragon'; +import { Newsstand } from '@openedx/paragon/icons'; import { isEmpty } from 'lodash'; import { useSearchParams } from 'react-router-dom'; @@ -159,6 +160,9 @@ const UnitCard = ({ title={displayName} titleLink={getTitleLink(id)} namePrefix={namePrefix} + prefixIcon={!!unit.upstreamInfo?.upstreamRef && ( + + )} /> );