feat: add UpstreamInfoComponent

Author: rpenido

src/course-outline/section-card/SectionCard.tsx

@@ -4,9 +4,8 @@ import {
 import { useDispatch } from 'react-redux';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
-  Bubble, Button, Icon, StandardModal, useToggle,
+  Bubble, Button, StandardModal, useToggle,
 } from '@openedx/paragon';
-import { LinkOff, Newsstand } from '@openedx/paragon/icons';
 import { useSearchParams } from 'react-router-dom';
 import classNames from 'classnames';
 
@@ -23,6 +22,7 @@ import { ContainerType } from '@src/generic/key-utils';
 import { ComponentPicker, SelectedComponent } from '@src/library-authoring';
 import { ContentType } from '@src/library-authoring/routes';
 import { COMPONENT_TYPES } from '@src/generic/block-type-utils/constants';
+import { UpstreamInfoIcon } from '@src/generic/upstream-info-icon';
 import type { XBlock } from '@src/data/types';
 import messages from './messages';
 
@@ -220,17 +220,13 @@ const SectionCard = ({
     }
   }, [savingStatus]);
 
-  const upstreamRefOk = !upstreamInfo?.errorMessage;
-
   const titleComponent = (
     <TitleButton
       title={displayName}
       isExpanded={isExpanded}
       onTitleClick={handleExpandContent}
       namePrefix={namePrefix}
-      prefixIcon={!!upstreamInfo?.upstreamRef && (
-        <Icon src={upstreamRefOk ? Newsstand : LinkOff} className="mr-1" />
-      )}
+      prefixIcon={<UpstreamInfoIcon upstreamInfo={upstreamInfo} />}
     />
   );
 

src/course-outline/subsection-card/SubsectionCard.tsx

@@ -4,8 +4,7 @@ import React, {
 import { useDispatch } from 'react-redux';
 import { useSearchParams } from 'react-router-dom';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Icon, StandardModal, useToggle } from '@openedx/paragon';
-import { LinkOff, Newsstand } from '@openedx/paragon/icons';
+import { StandardModal, useToggle } from '@openedx/paragon';
 import classNames from 'classnames';
 import { isEmpty } from 'lodash';
 
@@ -22,6 +21,7 @@ import { getItemStatus, getItemStatusBorder, scrollToElement } from '@src/course
 import { ComponentPicker, SelectedComponent } from '@src/library-authoring';
 import { COMPONENT_TYPES } from '@src/generic/block-type-utils/constants';
 import { ContainerType } from '@src/generic/key-utils';
+import { UpstreamInfoIcon } from '@src/generic/upstream-info-icon';
 import { ContentType } from '@src/library-authoring/routes';
 import OutlineAddChildButtons from '@src/course-outline/OutlineAddChildButtons';
 import type { XBlock } from '@src/data/types';
@@ -168,17 +168,13 @@ const SubsectionCard = ({
   const handleNewButtonClick = () => onNewUnitSubmit(id);
   const handlePasteButtonClick = () => onPasteClick(id, section.id);
 
-  const upstreamRefOk = !upstreamInfo?.errorMessage;
-
   const titleComponent = (
     <TitleButton
       title={displayName}
       isExpanded={isExpanded}
       onTitleClick={handleExpandContent}
       namePrefix={namePrefix}
-      prefixIcon={!!upstreamInfo?.upstreamRef && (
-        <Icon src={upstreamRefOk ? Newsstand : LinkOff} className="mr-1" />
-      )}
+      prefixIcon={<UpstreamInfoIcon upstreamInfo={upstreamInfo} />}
     />
   );
 

src/course-outline/unit-card/UnitCard.tsx

@@ -5,8 +5,7 @@ import {
   useRef,
 } from 'react';
 import { useDispatch } from 'react-redux';
-import { Icon, useToggle } from '@openedx/paragon';
-import { LinkOff, Newsstand } from '@openedx/paragon/icons';
+import { useToggle } from '@openedx/paragon';
 import { isEmpty } from 'lodash';
 import { useSearchParams } from 'react-router-dom';
 
@@ -21,6 +20,7 @@ import TitleLink from '@src/course-outline/card-header/TitleLink';
 import XBlockStatus from '@src/course-outline/xblock-status/XBlockStatus';
 import { getItemStatus, getItemStatusBorder, scrollToElement } from '@src/course-outline/utils';
 import { useClipboard } from '@src/generic/clipboard';
+import { UpstreamInfoIcon } from '@src/generic/upstream-info-icon';
 import { PreviewLibraryXBlockChanges } from '@src/course-unit/preview-changes';
 import type { XBlock } from '@src/data/types';
 
@@ -157,16 +157,12 @@ const UnitCard = ({
     dispatch(fetchCourseSectionQuery([section.id]));
   }, [dispatch, section]);
 
-  const upstreamRefOk = !upstreamInfo?.errorMessage;
-
   const titleComponent = (
     <TitleLink
       title={displayName}
       titleLink={getTitleLink(id)}
       namePrefix={namePrefix}
-      prefixIcon={!!upstreamInfo?.upstreamRef && (
-        <Icon src={upstreamRefOk ? Newsstand : LinkOff} size="sm" className="mr-1" />
-      )}
+      prefixIcon={<UpstreamInfoIcon upstreamInfo={upstreamInfo} size="sm" />}
     />
   );
 

src/generic/upstream-info-icon/UpstreamInfoIcon.test.tsx

@@ -0,0 +1,35 @@
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { render, screen } from '@testing-library/react';
+import { UpstreamInfoIcon, UpstreamInfoIconProps } from '.';
+
+type UpstreamInfo = UpstreamInfoIconProps['upstreamInfo'];
+
+const renderComponent = (upstreamInfo?: UpstreamInfo) => (
+  render(
+    <IntlProvider locale="en">
+      <UpstreamInfoIcon upstreamInfo={upstreamInfo} />
+    </IntlProvider>,
+  )
+);
+
+describe('<UpstreamInfoIcon>', () => {
+  it('should render with link', () => {
+    renderComponent({ upstreamRef: 'some-ref', errorMessage: null });
+    expect(screen.getByTitle('This item is linked to a library item.')).toBeInTheDocument();
+  });
+
+  it('should render with broken link', () => {
+    renderComponent({ upstreamRef: 'some-ref', errorMessage: 'upstream error' });
+    expect(screen.getByTitle('The link to the library item is broken.')).toBeInTheDocument();
+  });
+
+  it('should render null without upstream', () => {
+    const { container } = renderComponent(undefined);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('should render null without upstreamRf', () => {
+    const { container } = renderComponent({ upstreamRef: null, errorMessage: null });
+    expect(container).toBeEmptyDOMElement();
+  });
+});

src/generic/upstream-info-icon/index.tsx

@@ -0,0 +1,41 @@
+/* eslint-disable react/prop-types */
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Icon } from '@openedx/paragon';
+import { LinkOff, Newsstand } from '@openedx/paragon/icons';
+
+import messages from './messages';
+
+export interface UpstreamInfoIconProps {
+  upstreamInfo?: {
+    errorMessage?: string | null;
+    upstreamRef?: string | null;
+  };
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'inline';
+}
+
+export const UpstreamInfoIcon: React.FC<UpstreamInfoIconProps> = ({ upstreamInfo, size }) => {
+  const intl = useIntl();
+  if (!upstreamInfo?.upstreamRef) {
+    return null;
+  }
+
+  const iconProps = !upstreamInfo?.errorMessage
+    ? {
+      title: intl.formatMessage(messages.upstreamLinkOk),
+      ariaLabel: intl.formatMessage(messages.upstreamLinkOk),
+      src: Newsstand,
+    }
+    : {
+      title: intl.formatMessage(messages.upstreamLinkError),
+      ariaLabel: intl.formatMessage(messages.upstreamLinkError),
+      src: LinkOff,
+    };
+
+  return (
+    <Icon
+      {...iconProps}
+      size={size}
+      className="mr-1"
+    />
+  );
+};

src/generic/upstream-info-icon/messages.ts

@@ -0,0 +1,16 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  upstreamLinkOk: {
+    defaultMessage: 'This item is linked to a library item.',
+    id: 'upstream-icon.ok',
+    description: 'Hint and aria-label for the upstream icon when the link is valid.',
+  },
+  upstreamLinkError: {
+    defaultMessage: 'The link to the library item is broken.',
+    id: 'upstream-icon.error',
+    description: 'Hint and aria-label for the upstream icon when the link is broken.',
+  },
+});
+
+export default messages;