feat: add library reuse indicators to all components in course outline [FC-0097] (#2295)

Add library reuse indicator to units, subsections and sections in course outline.

Author: navinkarkera

src/course-outline/card-header/TitleButton.jsx renamed to 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}
         <Truncate.Deprecated lines={1} className={`${namePrefix}-card-title mb-0`}>{title}</Truncate.Deprecated>
       </Button>
     </OverlayTrigger>
   );
 };
 
-TitleButton.propTypes = {
-  title: PropTypes.string.isRequired,
-  isExpanded: PropTypes.bool.isRequired,
-  onTitleClick: PropTypes.func.isRequired,
-  namePrefix: PropTypes.string.isRequired,
-};
-
 export default TitleButton;

src/course-outline/card-header/TitleLink.jsx renamed to 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) => (
   <Button
     as={Link}
     variant="tertiary"
     data-testid={`${namePrefix}-card-header__title-link`}
-    className="item-card-header__title-btn"
+    className="item-card-header__title-btn align-items-end"
     to={titleLink}
   >
+    {prefixIcon}
     <Truncate.Deprecated lines={1} className={`${namePrefix}-card-title mb-0`}>{title}</Truncate.Deprecated>
   </Button>
 );
 
-TitleLink.propTypes = {
-  title: PropTypes.string.isRequired,
-  titleLink: PropTypes.string.isRequired,
-  namePrefix: PropTypes.string.isRequired,
-};
-
 export default TitleLink;

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();

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 && (
+        <Icon src={Newsstand} className="mr-1" />
+      )}
     />
   );
 

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 = {

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 && (
+        <Icon src={Newsstand} className="mr-1" />
+      )}
     />
   );
 

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 && (
+        <Icon src={Newsstand} size="sm" className="mr-1" />
+      )}
     />
   );