feat: [FC-0070] rendering library content in unit page (#1475)

The enables opening a Library Content page within the new Studio unit page. This page displays the xBlocks from the specified library and provides basic configuration options for the library.

src/generic/configure-modal/ConfigureModal.jsx

@@ -166,6 +166,7 @@ const ConfigureModal = ({
         );
         break;
       case COURSE_BLOCK_NAMES.vertical.id:
+      case COURSE_BLOCK_NAMES.libraryContent.id:
       case COURSE_BLOCK_NAMES.component.id:
       // groupAccess should be {partitionId: [group1, group2]} or {} if selectedPartitionIndex === -1
         if (data.selectedPartitionIndex >= 0) {
@@ -242,10 +243,12 @@ const ConfigureModal = ({
           </Tabs>
         );
       case COURSE_BLOCK_NAMES.vertical.id:
+      case COURSE_BLOCK_NAMES.libraryContent.id:
       case COURSE_BLOCK_NAMES.component.id:
         return (
           <UnitTab
-            isXBlockComponent={COURSE_BLOCK_NAMES.component.id === category}
+            isXBlockComponent={isXBlockComponent}
+            isLibraryContent={COURSE_BLOCK_NAMES.libraryContent.id === category}
             values={values}
             setFieldValue={setFieldValue}
             showWarning={visibilityState === VisibilityTypes.STAFF_ONLY && !ancestorHasStaffLock}
@@ -260,6 +263,7 @@ const ConfigureModal = ({
   return (
     <ModalDialog
       className="configure-modal"
+      title={dialogTitle}
       size="lg"
       isOpen={isOpen}
       onClose={onClose}

src/generic/configure-modal/UnitTab.jsx

@@ -11,6 +11,7 @@ import messages from './messages';
 
 const UnitTab = ({
   isXBlockComponent,
+  isLibraryContent,
   values,
   setFieldValue,
   showWarning,
@@ -61,7 +62,9 @@ const UnitTab = ({
       )}
       {userPartitionInfo.selectablePartitions.length > 0 && (
         <Form.Group controlId="groupSelect">
-          <h4 className="mt-3"><FormattedMessage {...messages.unitAccess} /></h4>
+          <h4 className="mt-3">
+            <FormattedMessage {...messages[isLibraryContent ? 'libraryContentAccess' : 'unitAccess']} />
+          </h4>
           <hr />
           <Form.Label as="legend" className="font-weight-bold">
             <FormattedMessage {...messages.restrictAccessTo} />
@@ -146,10 +149,12 @@ const UnitTab = ({
 
 UnitTab.defaultProps = {
   isXBlockComponent: false,
+  isLibraryContent: false,
 };
 
 UnitTab.propTypes = {
   isXBlockComponent: PropTypes.bool,
+  isLibraryContent: PropTypes.bool,
   values: PropTypes.shape({
     isVisibleToStaffOnly: PropTypes.bool.isRequired,
     discussionEnabled: PropTypes.bool.isRequired,
@@ -157,9 +162,7 @@ UnitTab.propTypes = {
       PropTypes.string,
       PropTypes.number,
     ]).isRequired,
-    selectedGroups: PropTypes.oneOfType([
-      PropTypes.string,
-    ]),
+    selectedGroups: PropTypes.arrayOf(PropTypes.string),
   }).isRequired,
   setFieldValue: PropTypes.func.isRequired,
   showWarning: PropTypes.bool.isRequired,

src/generic/configure-modal/messages.js

@@ -46,6 +46,10 @@ const messages = defineMessages({
     id: 'course-authoring.course-outline.configure-modal.visibility-tab.unit-access',
     defaultMessage: 'Unit access',
   },
+  libraryContentAccess: {
+    id: 'course-authoring.course-outline.configure-modal.visibility-tab.lib-content-access',
+    defaultMessage: 'Library content access',
+  },
   discussionEnabledSectionTitle: {
     id: 'course-authoring.course-outline.configure-modal.discussion-enabled.section-title',
     defaultMessage: 'Discussion',