feat: Add tooltips to library sync icon

Author: ChrisChV

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

@@ -75,6 +75,7 @@ const section = {
     versionDeclined: null,
     errorMessage: null,
     downstreamCustomized: [] as string[],
+    upstreamName: 'Upstream',
   },
 } satisfies Partial<XBlock> as XBlock;
 

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

@@ -79,6 +79,7 @@ const subsection: XBlock = {
     versionDeclined: null,
     errorMessage: null,
     downstreamCustomized: [] as string[],
+    upstreamName: 'Upstream',
   },
 } satisfies Partial<XBlock> as XBlock;
 

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

@@ -69,6 +69,7 @@ const unit = {
     versionDeclined: null,
     errorMessage: null,
     downstreamCustomized: [] as string[],
+    upstreamName: 'Upstream',
   },
 } satisfies Partial<XBlock> as XBlock;
 

src/data/types.ts

@@ -57,6 +57,7 @@ export interface UpstreamChildrenInfo {
 export interface UpstreamInfo {
   readyToSync: boolean,
   upstreamRef: string,
+  upstreamName: string,
   versionSynced: number,
   versionAvailable: number | null,
   versionDeclined: number | null,

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

@@ -23,6 +23,7 @@ describe('<UpstreamInfoIcon>', () => {
       errorMessage: null,
       readyToSync: false,
       downstreamCustomized: [],
+      upstreamName: 'Upstream',
     });
     expect(screen.getByTitle('This item is linked to a library item.')).toBeInTheDocument();
     expect(screen.queryByTitle('The referenced library or library object is not available.')).not.toBeInTheDocument();
@@ -34,6 +35,7 @@ describe('<UpstreamInfoIcon>', () => {
       errorMessage: 'upstream error',
       readyToSync: false,
       downstreamCustomized: [],
+      upstreamName: 'Upstream',
     });
     expect(screen.getByTitle('This item is linked to a library item.')).toBeInTheDocument();
     expect(screen.getByTitle('The referenced library or library object is not available.')).toBeInTheDocument();
@@ -45,6 +47,7 @@ describe('<UpstreamInfoIcon>', () => {
       errorMessage: null,
       readyToSync: true,
       downstreamCustomized: [],
+      upstreamName: 'Upstream',
     });
 
     const icon = screen.getByTitle('This item is linked to a library item.');
@@ -61,6 +64,7 @@ describe('<UpstreamInfoIcon>', () => {
       errorMessage: null,
       readyToSync: false,
       downstreamCustomized: ['data'],
+      upstreamName: 'Upstream',
     });
 
     expect(screen.getByTitle('This item is linked to a library item.')).toBeInTheDocument();
@@ -73,6 +77,7 @@ describe('<UpstreamInfoIcon>', () => {
       errorMessage: null,
       readyToSync: true,
       downstreamCustomized: ['data'],
+      upstreamName: 'Upstream',
     });
 
     expect(screen.getByTitle('This item is linked to a library item.')).toBeInTheDocument();
@@ -92,6 +97,7 @@ describe('<UpstreamInfoIcon>', () => {
       errorMessage: null,
       readyToSync: false,
       downstreamCustomized: [],
+      upstreamName: 'Upstream',
     });
     const container = screen.getByTestId('redux-provider');
     expect(container).toBeEmptyDOMElement();

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

@@ -1,16 +1,21 @@
 /* eslint-disable react/prop-types */
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Button, Icon } from '@openedx/paragon';
+import {
+  Button, Icon, OverlayTrigger, Tooltip,
+} from '@openedx/paragon';
 import {
   CallSplit, LinkOff, Newsstand, Sync,
 } from '@openedx/paragon/icons';
 
+import { BoldText } from '@src/utils';
+import { ReactNode } from 'react';
 import messages from './messages';
 
 export interface UpstreamInfoIconProps {
   upstreamInfo?: {
     errorMessage?: string | null;
     upstreamRef?: string | null;
+    upstreamName: string;
     readyToSync: boolean;
     downstreamCustomized: string[];
   };
@@ -23,54 +28,81 @@ const UpstreamInfoIconContent = ({
 }: UpstreamInfoIconProps) => {
   const intl = useIntl();
 
+  if (!upstreamInfo) {
+    return null;
+  }
+
   let hasTwoIcons = false;
-  const hasCourseOverrides = (upstreamInfo?.downstreamCustomized.length || 0) > 0;
-  if (upstreamInfo?.errorMessage || upstreamInfo?.readyToSync || hasCourseOverrides) {
+  let secondIconProps = {};
+  let tooltipMessage: string | ReactNode = intl.formatMessage(
+    messages.upstreamLinkTooltip,
+    {
+      upstreamName: upstreamInfo.upstreamName,
+      b: BoldText,
+    },
+  );
+
+  if (upstreamInfo.errorMessage) {
+    hasTwoIcons = true;
+    tooltipMessage = intl.formatMessage(messages.upstreamLinkError);
+    secondIconProps = {
+      title: intl.formatMessage(messages.upstreamLinkError),
+      ariaLabel: intl.formatMessage(messages.upstreamLinkError),
+      src: LinkOff,
+    };
+  } else if (upstreamInfo.readyToSync) {
     hasTwoIcons = true;
+    tooltipMessage = intl.formatMessage(
+      messages.upstreamLinkReadyToSyncTooltip,
+      {
+        upstreamName: upstreamInfo.upstreamName,
+        b: BoldText,
+      },
+    );
+    secondIconProps = {
+      title: intl.formatMessage(messages.upstreamLinkReadyToSyncAriaLabel),
+      ariaLabel: intl.formatMessage(messages.upstreamLinkReadyToSyncAriaLabel),
+      src: Sync,
+    };
+  } else if ((upstreamInfo.downstreamCustomized.length || 0) > 0) {
+    hasTwoIcons = true;
+    tooltipMessage = intl.formatMessage(messages.upstreamLinkOverridesAriaLabel);
+    secondIconProps = {
+      title: intl.formatMessage(messages.upstreamLinkOverridesAriaLabel),
+      ariaLabel: intl.formatMessage(messages.upstreamLinkOverridesAriaLabel),
+      src: CallSplit,
+    };
   }
 
-  const getSecondIconProps = () => {
-    if (upstreamInfo?.errorMessage) {
-      return {
-        title: intl.formatMessage(messages.upstreamLinkError),
-        ariaLabel: intl.formatMessage(messages.upstreamLinkError),
-        src: LinkOff,
-      };
-    } if (upstreamInfo?.readyToSync) {
-      return {
-        title: intl.formatMessage(messages.upstreamLinkReadyToSyncAriaLabel),
-        ariaLabel: intl.formatMessage(messages.upstreamLinkReadyToSyncAriaLabel),
-        src: Sync,
-      };
-    } if (hasCourseOverrides) {
-      return {
-        title: intl.formatMessage(messages.upstreamLinkOverridesAriaLabel),
-        ariaLabel: intl.formatMessage(messages.upstreamLinkOverridesAriaLabel),
-        src: CallSplit,
-      };
-    }
-    return {};
-  };
-
   return (
-    <div
-      className={
-        `upstream-info-icon size-${hasTwoIcons ? 'two' : 'one'}-${size} box-shadow-centered-1 d-flex justify-content-center`
-      }
+    <OverlayTrigger
+      key={`upstream-icon-${upstreamInfo.upstreamRef}`}
+      placement="top"
+      overlay={(
+        <Tooltip id={`upstream-icon-tooltip-${upstreamInfo.upstreamRef}`}>
+          {tooltipMessage}
+        </Tooltip>
+      )}
     >
-      <Icon
-        title={intl.formatMessage(messages.upstreamLinkOk)}
-        aria-label={intl.formatMessage(messages.upstreamLinkOk)}
-        src={Newsstand}
-        size={size}
-      />
-      {hasTwoIcons && (
+      <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)}
+          src={Newsstand}
           size={size}
-          {...getSecondIconProps()}
         />
-      )}
-    </div>
+        {hasTwoIcons && (
+          <Icon
+            size={size}
+            {...secondIconProps}
+          />
+        )}
+      </div>
+    </OverlayTrigger>
   );
 };
 

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

@@ -16,11 +16,21 @@ const messages = defineMessages({
     id: 'upstream-icon.ready-to-sync.aria-label',
     description: 'Hint and aria-label for the upstream icon when the link is ready to sync.',
   },
+  upstreamLinkReadyToSyncTooltip: {
+    defaultMessage: 'The linked <b>{upstreamName}</b> has updates available.',
+    id: 'upstream-icon.ready-to-sync.tooltip',
+    description: 'Tooltip text for the upstream icon when the link is ready to sync.',
+  },
   upstreamLinkOverridesAriaLabel: {
     defaultMessage: 'This library reference has course overrides applied.',
     id: 'upstream-icon.course-overrides.aria-label',
     description: 'Hint and aria-label for the upstream icon when the link has course overrides.',
   },
+  upstreamLinkTooltip: {
+    defaultMessage: 'This is referenced via <b>{upstreamName}</b>',
+    id: 'upstream-icon.ok.tooltip',
+    description: 'Tooltip text for the upstream icon when the link is valid.',
+  },
 });
 
 export default messages;