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 && (
+
+ )}
/>
);