feat: Adds sync state to upstream link icon

Author: ChrisChV

src/course-outline/card-header/TitleLink.tsx

@@ -14,21 +14,23 @@ const TitleLink = ({
   namePrefix,
   prefixIcon,
 }: TitleLinkProps) => (
-  <Button
-    as={Link}
-    variant="tertiary"
-    data-testid={`${namePrefix}-card-header__title-link`}
-    className="item-card-header__title-btn align-items-end"
-    to={titleLink}
-    title={title}
-  >
-    <div className="mr-2">
+  <>
+    <div className="mr-2 mb-1">
       {prefixIcon}
     </div>
-    <span className={`${namePrefix}-card-title mb-0 truncate-1-line text-left`}>
-      {title}
-    </span>
-  </Button>
+    <Button
+      as={Link}
+      variant="tertiary"
+      data-testid={`${namePrefix}-card-header__title-link`}
+      className="item-card-header__title-btn align-items-end"
+      to={titleLink}
+      title={title}
+    >
+      <span className={`${namePrefix}-card-title mb-0 truncate-1-line text-left`}>
+        {title}
+      </span>
+    </Button>
+  </>
 );
 
 export default TitleLink;

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

@@ -257,7 +257,13 @@ const SectionCard = ({
       isExpanded={isExpanded}
       onTitleClick={handleExpandContent}
       namePrefix={namePrefix}
-      prefixIcon={<UpstreamInfoIcon upstreamInfo={upstreamInfo} size="md" />}
+      prefixIcon={(
+        <UpstreamInfoIcon
+          upstreamInfo={upstreamInfo}
+          size="md"
+          openSyncModal={openSyncModal}
+        />
+      )}
     />
   );
 

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

@@ -205,7 +205,13 @@ const SubsectionCard = ({
       isExpanded={isExpanded}
       onTitleClick={handleExpandContent}
       namePrefix={namePrefix}
-      prefixIcon={<UpstreamInfoIcon upstreamInfo={upstreamInfo} size="sm" />}
+      prefixIcon={(
+        <UpstreamInfoIcon
+          upstreamInfo={upstreamInfo}
+          size="sm"
+          openSyncModal={openSyncModal}
+        />
+      )}
     />
   );
 

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

@@ -170,7 +170,13 @@ const UnitCard = ({
       title={displayName}
       titleLink={getTitleLink(id)}
       namePrefix={namePrefix}
-      prefixIcon={<UpstreamInfoIcon upstreamInfo={upstreamInfo} size="xs" />}
+      prefixIcon={(
+        <UpstreamInfoIcon
+          upstreamInfo={upstreamInfo}
+          size="xs"
+          openSyncModal={openSyncModal}
+        />
+      )}
     />
   );
 

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

@@ -1,37 +1,66 @@
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { render, screen } from '@testing-library/react';
+import {
+  render, screen, fireEvent, waitFor, initializeMocks,
+} from '@src/testUtils';
 import { UpstreamInfoIcon, UpstreamInfoIconProps } from '.';
 
 type UpstreamInfo = UpstreamInfoIconProps['upstreamInfo'];
+const mockOpenSyncModal = jest.fn();
 
 const renderComponent = (upstreamInfo?: UpstreamInfo) => (
   render(
-    <IntlProvider locale="en">
-      <UpstreamInfoIcon upstreamInfo={upstreamInfo} />
-    </IntlProvider>,
+    <UpstreamInfoIcon upstreamInfo={upstreamInfo} openSyncModal={mockOpenSyncModal} />,
   )
 );
 
 describe('<UpstreamInfoIcon>', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
   it('should render with link', () => {
-    renderComponent({ upstreamRef: 'some-ref', errorMessage: null });
+    renderComponent({
+      upstreamRef: 'some-ref',
+      errorMessage: null,
+      readyToSync: false,
+    });
     expect(screen.getByTitle('This item is linked to a library item.')).toBeInTheDocument();
-    expect(screen.queryByTitle('The link to the library item is broken.')).not.toBeInTheDocument();
+    expect(screen.queryByTitle('The referenced library or library object is not available.')).not.toBeInTheDocument();
   });
 
   it('should render with broken link', () => {
-    renderComponent({ upstreamRef: 'some-ref', errorMessage: 'upstream error' });
+    renderComponent({
+      upstreamRef: 'some-ref',
+      errorMessage: 'upstream error',
+      readyToSync: false,
+    });
     expect(screen.getByTitle('This item is linked to a library item.')).toBeInTheDocument();
-    expect(screen.getByTitle('The link to the library item is broken.')).toBeInTheDocument();
+    expect(screen.getByTitle('The referenced library or library object is not available.')).toBeInTheDocument();
+  });
+
+  it('should render with ready to sync link and opens the sync modal', async () => {
+    renderComponent({
+      upstreamRef: 'some-ref',
+      errorMessage: null,
+      readyToSync: true,
+    });
+
+    const icon = screen.getByTitle('This item is linked to a library item.');
+    expect(icon).toBeInTheDocument();
+    expect(screen.getByTitle('The linked library or library object has updates available.')).toBeInTheDocument();
+
+    fireEvent.click(icon);
+    await waitFor(() => expect(mockOpenSyncModal).toHaveBeenCalled());
   });
 
   it('should render null without upstream', () => {
-    const { container } = renderComponent(undefined);
+    renderComponent(undefined);
+    const container = screen.getByTestId('redux-provider');
     expect(container).toBeEmptyDOMElement();
   });
 
   it('should render null without upstreamRf', () => {
-    const { container } = renderComponent({ upstreamRef: null, errorMessage: null });
+    renderComponent({ upstreamRef: null, errorMessage: null });
+    const container = screen.getByTestId('redux-provider');
     expect(container).toBeEmptyDOMElement();
   });
 });

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

@@ -1,31 +1,36 @@
 /* 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 { Button, Icon } from '@openedx/paragon';
+import { LinkOff, Newsstand, Sync } from '@openedx/paragon/icons';
 
 import messages from './messages';
 
 export interface UpstreamInfoIconProps {
   upstreamInfo?: {
     errorMessage?: string | null;
     upstreamRef?: string | null;
+    readyToSync?: boolean | null;
   };
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'inline';
 }
 
-export const UpstreamInfoIcon: React.FC<UpstreamInfoIconProps> = ({ upstreamInfo, size }) => {
+const UpstreamInfoIconContent = ({
+  upstreamInfo,
+  size,
+}: UpstreamInfoIconProps) => {
   const intl = useIntl();
-  if (!upstreamInfo?.upstreamRef) {
-    return null;
-  }
 
   let hasTwoIcons = false;
-  if (upstreamInfo?.errorMessage) {
+  if (upstreamInfo?.errorMessage || upstreamInfo?.readyToSync) {
     hasTwoIcons = true;
   }
 
   return (
-    <div className={`upstream-info-icon size-${hasTwoIcons ? 'two' : 'one'}-${size} box-shadow-centered-1 d-flex justify-content-center`}>
+    <div
+      className={
+        `upstream-info-icon size-${hasTwoIcons ? 'two' : 'one'}-${size} box-shadow-centered-1 d-flex justify-content-center`
+      }
+    >
       <Icon
         title={intl.formatMessage(messages.upstreamLinkOk)}
         aria-label={intl.formatMessage(messages.upstreamLinkOk)}
@@ -40,6 +45,46 @@ export const UpstreamInfoIcon: React.FC<UpstreamInfoIconProps> = ({ upstreamInfo
           size={size}
         />
       )}
+      {upstreamInfo?.readyToSync && (
+        <Icon
+          title={intl.formatMessage(messages.upstreamLinkReadyToSyncAriaLabel)}
+          aria-label={intl.formatMessage(messages.upstreamLinkReadyToSyncAriaLabel)}
+          src={Sync}
+          size={size}
+        />
+      )}
     </div>
   );
 };
+
+export const UpstreamInfoIcon: React.FC<UpstreamInfoIconProps & { openSyncModal: () => void }> = ({
+  upstreamInfo,
+  size,
+  openSyncModal,
+}) => {
+  if (!upstreamInfo?.upstreamRef) {
+    return null;
+  }
+
+  const handleSyncModal = (e) => {
+    e.stopPropagation();
+    openSyncModal();
+  };
+
+  if (upstreamInfo?.readyToSync) {
+    return (
+      <Button
+        variant="tertiary"
+        size="inline"
+        className="px-0"
+        onClick={handleSyncModal}
+      >
+        <UpstreamInfoIconContent upstreamInfo={upstreamInfo} size={size} />
+      </Button>
+    );
+  }
+
+  return (
+    <UpstreamInfoIconContent upstreamInfo={upstreamInfo} size={size} />
+  );
+};

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

@@ -7,10 +7,15 @@ const messages = defineMessages({
     description: 'Hint and aria-label for the upstream icon when the link is valid.',
   },
   upstreamLinkError: {
-    defaultMessage: 'The link to the library item is broken.',
+    defaultMessage: 'The referenced library or library object is not available.',
     id: 'upstream-icon.error',
     description: 'Hint and aria-label for the upstream icon when the link is broken.',
   },
+  upstreamLinkReadyToSyncAriaLabel: {
+    defaultMessage: 'The linked library or library object has updates available.',
+    id: 'upstream-icon.ready-to-sync.aria-label',
+    description: 'Hint and aria-label for the upstream icon when the link is ready to sync.',
+  },
 });
 
 export default messages;