feat: Add 'This unit can only be edited from the library' banner (#1860)

src/course-unit/CourseUnit.jsx

@@ -4,6 +4,7 @@ import { useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import {
   Container, Layout, Stack, Button, TransitionReplace,
+  Alert,
 } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
@@ -139,6 +140,24 @@ const CourseUnit = ({ courseId }) => {
               />
             ) : null}
           </TransitionReplace>
+          {courseUnit.upstreamInfo.upstreamLink && (
+            <AlertMessage
+              title={intl.formatMessage(
+                messages.alertLibraryUnitReadOnlyText,
+                {
+                  link: (
+                    <Alert.Link
+                      className="ml-1"
+                      href={courseUnit.upstreamInfo.upstreamLink}
+                    >
+                      {intl.formatMessage(messages.alertLibraryUnitReadOnlyLinkText)}
+                    </Alert.Link>
+                  ),
+                },
+              )}
+              variant="info"
+            />
+          )}
           <SubHeader
             hideBorder
             title={(

src/course-unit/CourseUnit.test.jsx

@@ -2209,10 +2209,13 @@ describe('<CourseUnit />', () => {
         ...courseUnitIndexMock,
         upstreamInfo: {
           upstreamRef: 'lct:org:lib:unit:unit-1',
+          upstreamLink: 'some-link',
         },
       });
     await executeThunk(fetchCourseUnitQuery(courseId), store.dispatch);
 
+    expect(screen.getByText(/this unit can only be edited from the \./i)).toBeInTheDocument();
+
     // Disable the "Edit" button
     const unitHeaderTitle = screen.getByTestId('unit-header-title');
     const editButton = within(unitHeaderTitle).getByRole(

src/course-unit/__mocks__/courseUnitIndex.js

@@ -1120,4 +1120,7 @@ module.exports = {
   has_partition_group_components: false,
   release_date_from: 'Section "Example Week 1: Getting Started"',
   staff_lock_from: null,
+  upstreamInfo: {
+    upstreamLink: undefined,
+  },
 };

src/course-unit/messages.js

@@ -43,6 +43,16 @@ const messages = defineMessages({
     defaultMessage: 'Take me to the new location',
     description: 'Text for the button allowing users to navigate to the new location after an XBlock has been moved',
   },
+  alertLibraryUnitReadOnlyText: {
+    id: 'course-authoring.course-unit.alert.read-only.text',
+    defaultMessage: 'This unit can only be edited from the {link}.',
+    description: 'Text of the alert when the unit is read only because is a library unit',
+  },
+  alertLibraryUnitReadOnlyLinkText: {
+    id: 'course-authoring.course-unit.alert.read-only.link.text',
+    defaultMessage: 'library',
+    description: 'Text of the link in the alert when the unit is read only because is a library unit',
+  },
 });
 
 export default messages;