From 3b37da26ac12354939470e4f749e2e1b6fb4160c Mon Sep 17 00:00:00 2001
From: ihor-romaniuk <ihor.romaniuk@raccoongang.com>
Date: Fri, 8 Nov 2024 18:34:20 +0100
Subject: [PATCH] feat: [FC-0070] rendering split test content in unit page

---
 src/constants.js                              |  1 +
 src/course-unit/CourseUnit.jsx                |  9 ++-
 src/course-unit/CourseUnit.scss               |  1 +
 src/course-unit/breadcrumbs/Breadcrumbs.jsx   | 64 +++++++++++--------
 src/course-unit/breadcrumbs/Breadcrumbs.scss  |  2 +-
 src/course-unit/data/thunk.js                 |  2 +
 .../header-navigations/HeaderNavigations.jsx  |  8 +--
 src/course-unit/header-title/HeaderTitle.jsx  | 10 ++-
 src/course-unit/sidebar/Sidebar.scss          | 15 +++++
 .../sidebar/SplitTestSidebarInfo.tsx          | 61 ++++++++++++++++++
 src/course-unit/sidebar/messages.js           | 55 ++++++++++++++++
 .../xblock-container-iframe/index.scss        |  4 ++
 .../xblock-container-iframe/index.tsx         |  3 +-
 .../configure-modal/ConfigureModal.jsx        |  4 +-
 src/generic/configure-modal/UnitTab.jsx       | 20 ++++--
 src/generic/configure-modal/messages.js       |  6 +-
 src/generic/sub-header/SubHeader.jsx          |  6 +-
 src/utils.js                                  |  2 +-
 18 files changed, 226 insertions(+), 47 deletions(-)
 create mode 100644 src/course-unit/sidebar/SplitTestSidebarInfo.tsx
 create mode 100644 src/course-unit/xblock-container-iframe/index.scss

diff --git a/src/constants.js b/src/constants.js
index 9e5c5cc84d..6881547134 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -59,6 +59,7 @@ export const COURSE_BLOCK_NAMES = ({
   sequential: { id: 'sequential', name: 'Subsection' },
   vertical: { id: 'vertical', name: 'Unit' },
   libraryContent: { id: 'library_content', name: 'Library content' },
+  splitTest: { id: 'split_test', name: 'Split Test' },
   component: { id: 'component', name: 'Component' },
 });
 
diff --git a/src/course-unit/CourseUnit.jsx b/src/course-unit/CourseUnit.jsx
index 5392294cdb..0f810961a7 100644
--- a/src/course-unit/CourseUnit.jsx
+++ b/src/course-unit/CourseUnit.jsx
@@ -37,6 +37,7 @@ import TagsSidebarControls from '../content-tags-drawer/tags-sidebar-controls';
 import { PasteNotificationAlert } from './clipboard';
 import XBlockContainerIframe from './xblock-container-iframe';
 import MoveModal from './move-modal';
+import SplitTestSidebarInfo from 'CourseAuthoring/course-unit/sidebar/SplitTestSidebarInfo';
 
 const CourseUnit = ({ courseId }) => {
   const { blockId } = useParams();
@@ -72,6 +73,7 @@ const CourseUnit = ({ courseId }) => {
 
   const isUnitVerticalType = unitCategory === COURSE_BLOCK_NAMES.vertical.id;
   const isUnitLibraryType = unitCategory === COURSE_BLOCK_NAMES.libraryContent.id;
+  const isSplitTestType = unitCategory === COURSE_BLOCK_NAMES.splitTest.id;
 
   const unitLayout = [{ span: 12 }, { span: 0 }];
   const defaultLayout = {
@@ -161,7 +163,7 @@ const CourseUnit = ({ courseId }) => {
             )}
             headerActions={(
               <HeaderNavigations
-                unitCategory={unitCategory}
+                category={unitCategory}
                 headerNavigationsActions={headerNavigationsActions}
               />
             )}
@@ -229,6 +231,11 @@ const CourseUnit = ({ courseId }) => {
                     </Sidebar>
                   </>
                 )}
+                {isSplitTestType && (
+                  <Sidebar data-testid="course-split-test-sidebar">
+                    <SplitTestSidebarInfo />
+                  </Sidebar>
+                )}
               </Stack>
             </Layout.Element>
           </Layout>
diff --git a/src/course-unit/CourseUnit.scss b/src/course-unit/CourseUnit.scss
index 6a7c0c72bd..fa96286310 100644
--- a/src/course-unit/CourseUnit.scss
+++ b/src/course-unit/CourseUnit.scss
@@ -4,6 +4,7 @@
 @import "./sidebar/Sidebar";
 @import "./header-title/HeaderTitle";
 @import "./move-modal";
+@import "./xblock-container-iframe";
 
 .course-unit {
   min-width: 900px;
diff --git a/src/course-unit/breadcrumbs/Breadcrumbs.jsx b/src/course-unit/breadcrumbs/Breadcrumbs.jsx
index 8d770fd23b..0bb8280ad2 100644
--- a/src/course-unit/breadcrumbs/Breadcrumbs.jsx
+++ b/src/course-unit/breadcrumbs/Breadcrumbs.jsx
@@ -15,41 +15,51 @@ const Breadcrumbs = ({ courseId, sequenceId }) => {
   const intl = useIntl();
   const { ancestorXblocks = [] } = useSelector(getCourseSectionVertical);
 
+  const hasChildWithUrl = (children = []) => !!children.filter((child) => child.url).length;
+
   return (
-    <nav className="d-flex align-center mb-2.5">
-      <ol className="p-0 m-0 d-flex align-center">
+    <nav className="d-flex align-center">
+      <ol className="p-0 m-0 d-flex align-center flex-wrap">
         {ancestorXblocks.map(({ children, title, isLast }) => (
           <li
-            className="d-flex"
+            className="d-flex mb-2.5"
             key={title}
           >
-            <Dropdown>
-              <Dropdown.Toggle
-                id="breadcrumbs-dropdown-section"
-                variant="link"
-                className="p-0 text-primary small"
-              >
+            {hasChildWithUrl(children) ? (
+              <Dropdown>
+                <Dropdown.Toggle
+                  id="breadcrumbs-dropdown-section"
+                  variant="link"
+                  className="p-0 text-primary small"
+                >
+                  <span className="small text-gray-700">
+                    {title}
+                  </span>
+                  <Icon
+                    src={ArrowDropDownIcon}
+                    className="text-primary ml-1"
+                  />
+                </Dropdown.Toggle>
+                <Dropdown.Menu>
+                  {children.map(({ url, displayName }) => (
+                    <Dropdown.Item
+                      key={url}
+                      href={adoptCourseSectionUrl({ url, courseId, sequenceId })}
+                      className="small"
+                      data-testid="breadcrumbs-section-dropdown-item"
+                    >
+                      {displayName}
+                    </Dropdown.Item>
+                  ))}
+                </Dropdown.Menu>
+              </Dropdown>
+            ) : (
+              <span className="p-0 text-primary small btn btn-link text-decoration-none">
                 <span className="small text-gray-700">
                   {title}
                 </span>
-                <Icon
-                  src={ArrowDropDownIcon}
-                  className="text-primary ml-1"
-                />
-              </Dropdown.Toggle>
-              <Dropdown.Menu>
-                {children.map(({ url, displayName }) => (
-                  <Dropdown.Item
-                    key={url}
-                    href={adoptCourseSectionUrl({ url, courseId, sequenceId })}
-                    className="small"
-                    data-testid="breadcrumbs-section-dropdown-item"
-                  >
-                    {displayName}
-                  </Dropdown.Item>
-                ))}
-              </Dropdown.Menu>
-            </Dropdown>
+              </span>
+            )}
             {!isLast && (
               <Icon
                 src={ChevronRightIcon}
diff --git a/src/course-unit/breadcrumbs/Breadcrumbs.scss b/src/course-unit/breadcrumbs/Breadcrumbs.scss
index d816b76c90..42ba106fca 100644
--- a/src/course-unit/breadcrumbs/Breadcrumbs.scss
+++ b/src/course-unit/breadcrumbs/Breadcrumbs.scss
@@ -3,7 +3,7 @@
     background: transparent;
   }
 
-  .sub-header-title .sub-header-breadcrumbs {
+  .sub-header-breadcrumbs {
     .dropdown-toggle::after {
       display: none;
     }
diff --git a/src/course-unit/data/thunk.js b/src/course-unit/data/thunk.js
index c3f7b956ef..f7f9c24a7c 100644
--- a/src/course-unit/data/thunk.js
+++ b/src/course-unit/data/thunk.js
@@ -284,6 +284,8 @@ export function patchUnitItemQuery({
       dispatch(hideProcessingNotification());
       dispatch(updateCourseOutlineInfo({}));
       dispatch(updateCourseOutlineInfoLoadingStatus({ status: RequestStatus.IN_PROGRESS }));
+      const courseUnit = await getCourseUnitData(currentParentLocator);
+      dispatch(fetchCourseItemSuccess(courseUnit));
       callbackFn();
     } catch (error) {
       handleResponseErrors(error, dispatch, updateSavingStatus);
diff --git a/src/course-unit/header-navigations/HeaderNavigations.jsx b/src/course-unit/header-navigations/HeaderNavigations.jsx
index a934c0c974..5f0d958599 100644
--- a/src/course-unit/header-navigations/HeaderNavigations.jsx
+++ b/src/course-unit/header-navigations/HeaderNavigations.jsx
@@ -6,13 +6,13 @@ import { Edit as EditIcon } from '@openedx/paragon/icons';
 import { COURSE_BLOCK_NAMES } from '../../constants';
 import messages from './messages';
 
-const HeaderNavigations = ({ headerNavigationsActions, unitCategory }) => {
+const HeaderNavigations = ({ headerNavigationsActions, category }) => {
   const intl = useIntl();
   const { handleViewLive, handlePreview, handleEdit } = headerNavigationsActions;
 
   return (
     <nav className="header-navigations ml-auto flex-shrink-0">
-      {unitCategory === COURSE_BLOCK_NAMES.vertical.id && (
+      {category === COURSE_BLOCK_NAMES.vertical.id && (
         <>
           <Button
             variant="outline-primary"
@@ -28,7 +28,7 @@ const HeaderNavigations = ({ headerNavigationsActions, unitCategory }) => {
           </Button>
         </>
       )}
-      {unitCategory === COURSE_BLOCK_NAMES.libraryContent.id && (
+      {[COURSE_BLOCK_NAMES.libraryContent.id, COURSE_BLOCK_NAMES.splitTest.id].includes(category) && (
         <Button
           iconBefore={EditIcon}
           variant="outline-primary"
@@ -47,7 +47,7 @@ HeaderNavigations.propTypes = {
     handlePreview: PropTypes.func.isRequired,
     handleEdit: PropTypes.func.isRequired,
   }).isRequired,
-  unitCategory: PropTypes.string.isRequired,
+  category: PropTypes.string.isRequired,
 };
 
 export default HeaderNavigations;
diff --git a/src/course-unit/header-title/HeaderTitle.jsx b/src/course-unit/header-title/HeaderTitle.jsx
index 2219b467e4..f8ad4d7c7b 100644
--- a/src/course-unit/header-title/HeaderTitle.jsx
+++ b/src/course-unit/header-title/HeaderTitle.jsx
@@ -28,6 +28,12 @@ const HeaderTitle = ({
   const [isConfigureModalOpen, openConfigureModal, closeConfigureModal] = useToggle(false);
   const { selectedPartitionIndex, selectedGroupsLabel } = currentItemData.userPartitionInfo;
 
+  const isXBlockComponent = [
+    COURSE_BLOCK_NAMES.libraryContent.id,
+    COURSE_BLOCK_NAMES.splitTest.id,
+    COURSE_BLOCK_NAMES.component.id,
+  ].includes(currentItemData.category);
+
   const onConfigureSubmit = (...arg) => {
     handleConfigureSubmit(currentItemData.id, ...arg, closeConfigureModal);
   };
@@ -87,9 +93,7 @@ const HeaderTitle = ({
           onConfigureSubmit={onConfigureSubmit}
           currentItemData={currentItemData}
           isSelfPaced={false}
-          isXBlockComponent={
-            [COURSE_BLOCK_NAMES.libraryContent.id, COURSE_BLOCK_NAMES.component.id].includes(currentItemData.category)
-          }
+          isXBlockComponent={isXBlockComponent}
         />
       </div>
       {getVisibilityMessage()}
diff --git a/src/course-unit/sidebar/Sidebar.scss b/src/course-unit/sidebar/Sidebar.scss
index f60bfe0879..3aea46c49a 100644
--- a/src/course-unit/sidebar/Sidebar.scss
+++ b/src/course-unit/sidebar/Sidebar.scss
@@ -81,4 +81,19 @@
       text-decoration: line-through;
     }
   }
+
+  .course-split-test-sidebar {
+    padding: $spacer;
+
+    @extend %base-font-params;
+
+    .course-split-test-sidebar-title {
+      font-size: $font-size-base;
+      line-height: $line-height-base;
+    }
+
+    .course-split-test-sidebar-devider {
+      width: 100%;
+    }
+  }
 }
diff --git a/src/course-unit/sidebar/SplitTestSidebarInfo.tsx b/src/course-unit/sidebar/SplitTestSidebarInfo.tsx
new file mode 100644
index 0000000000..8d09b76d1e
--- /dev/null
+++ b/src/course-unit/sidebar/SplitTestSidebarInfo.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { Card, Stack } from '@openedx/paragon';
+import { Link } from 'react-router-dom';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+
+const SplitTestSidebarInfo = () => {
+  const intl = useIntl();
+  const boldTagWrapper = (chunks: React.ReactNode) => <strong>{chunks}</strong>;
+
+  return (
+    <Card.Body className="course-split-test-sidebar">
+      <Stack>
+        <h3 className="course-split-test-sidebar-title">
+          {intl.formatMessage(messages.sidebarSplitTestAddComponentTitle)}
+        </h3>
+        <p>
+          {intl.formatMessage(messages.sidebarSplitTestSelectComponentType, { bold_tag: boldTagWrapper })}
+        </p>
+        <p>
+          {intl.formatMessage(messages.sidebarSplitTestComponentAdded)}
+        </p>
+        <h3 className="course-split-test-sidebar-title">
+          {intl.formatMessage(messages.sidebarSplitTestEditComponentTitle)}
+        </h3>
+        <p>
+          {intl.formatMessage(messages.sidebarSplitTestEditComponentInstruction, { bold_tag: boldTagWrapper })}
+        </p>
+        <h3 className="course-split-test-sidebar-title">
+          {intl.formatMessage(messages.sidebarSplitTestReorganizeComponentTitle)}
+        </h3>
+        <p>
+          {intl.formatMessage(messages.sidebarSplitTestReorganizeComponentInstruction)}
+        </p>
+        <p>
+          {intl.formatMessage(messages.sidebarSplitTestReorganizeGroupsInstruction)}
+        </p>
+        <h3 className="course-split-test-sidebar-title">
+          {intl.formatMessage(messages.sidebarSplitTestExperimentComponentTitle)}
+        </h3>
+        <p className="mb-0">
+          {intl.formatMessage(messages.sidebarSplitTestExperimentComponentInstruction)}
+        </p>
+        <hr className="course-split-test-sidebar-devider my-4" />
+        <Link
+          to="https://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/course_components.html#components-that-contain-other-components"
+          className="btn btn-outline-primary btn-sm"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {intl.formatMessage(messages.sidebarSplitTestLearnMoreLinkLabel)}
+        </Link>
+      </Stack>
+    </Card.Body>
+  );
+};
+
+SplitTestSidebarInfo.propTypes = {};
+
+export default SplitTestSidebarInfo;
diff --git a/src/course-unit/sidebar/messages.js b/src/course-unit/sidebar/messages.js
index 7d9d161d5c..a0ab9ac39e 100644
--- a/src/course-unit/sidebar/messages.js
+++ b/src/course-unit/sidebar/messages.js
@@ -137,6 +137,61 @@ const messages = defineMessages({
     id: 'course-authoring.course-unit.modal.make-visibility.description',
     defaultMessage: 'If the unit was previously published and released to students, any changes you made to the unit when it was hidden will now be visible to students. Do you want to proceed?',
   },
+  sidebarSplitTestAddComponentTitle: {
+    id: 'course-authoring.course-unit.split-test.sidebar.add-component.title',
+    defaultMessage: 'Adding components',
+    description: 'Title for the section that explains how to add components to a split test',
+  },
+  sidebarSplitTestSelectComponentType: {
+    id: 'course-authoring.course-unit.split-test.sidebar.add-component.select-type',
+    defaultMessage: 'Select a component type under {bold_tag}Add New Component{bold_tag}. Then select a template.',
+    description: 'Instruction text for selecting a component type and template when adding new components',
+  },
+  sidebarSplitTestComponentAdded: {
+    id: 'course-authoring.course-unit.split-test.sidebar.add-component.component-added',
+    defaultMessage: 'The new component is added at the bottom of the page or group. You can then edit and move the component.',
+    description: 'Instruction text indicating that the component has been added and can be moved or edited',
+  },
+  sidebarSplitTestEditComponentTitle: {
+    id: 'course-authoring.course-unit.split-test.sidebar.edit-component.title',
+    defaultMessage: 'Editing components',
+    description: 'Title for the section that explains how to edit components in a split test',
+  },
+  sidebarSplitTestEditComponentInstruction: {
+    id: 'course-authoring.course-unit.split-test.sidebar.edit-component.instruction',
+    defaultMessage: 'Click the {bold_tag}Edit{bold_tag} icon in a component to edit its content.',
+    description: 'Instruction text for editing a component by clicking the edit icon',
+  },
+  sidebarSplitTestReorganizeComponentTitle: {
+    id: 'course-authoring.course-unit.split-test.sidebar.reorganize-component.title',
+    defaultMessage: 'Reorganizing components',
+    description: 'Title for the section that explains how to reorganize components within a split test',
+  },
+  sidebarSplitTestReorganizeComponentInstruction: {
+    id: 'course-authoring.course-unit.split-test.sidebar.reorganize-component.instruction',
+    defaultMessage: 'Drag components to new locations within this component.',
+    description: 'Instruction text for reorganizing components by dragging them to new locations within a split test',
+  },
+  sidebarSplitTestReorganizeGroupsInstruction: {
+    id: 'course-authoring.course-unit.split-test.sidebar.reorganize-component.drag-to-groups',
+    defaultMessage: 'For content experiments, you can drag components to other groups.',
+    description: 'Instruction text for dragging components to other groups for content experiments',
+  },
+  sidebarSplitTestExperimentComponentTitle: {
+    id: 'course-authoring.course-unit.split-test.sidebar.experiment-component.title',
+    defaultMessage: 'Working with content experiments',
+    description: 'Title for the section that explains how to work with content experiments',
+  },
+  sidebarSplitTestExperimentComponentInstruction: {
+    id: 'course-authoring.course-unit.split-test.sidebar.experiment-component.confirm-config',
+    defaultMessage: 'Confirm that you have properly configured content in each of your experiment groups.',
+    description: 'Instruction text reminding users to check content configuration in each experiment group',
+  },
+  sidebarSplitTestLearnMoreLinkLabel: {
+    id: 'course-authoring.course-unit.split-test.sidebar.learn-more-link.label',
+    defaultMessage: 'Learn more about component containers',
+    description: 'Text for a link that directs users to more information about component containers in the split test setup.',
+  },
 });
 
 export default messages;
diff --git a/src/course-unit/xblock-container-iframe/index.scss b/src/course-unit/xblock-container-iframe/index.scss
new file mode 100644
index 0000000000..5624c0e984
--- /dev/null
+++ b/src/course-unit/xblock-container-iframe/index.scss
@@ -0,0 +1,4 @@
+.xblock-container-iframe {
+    width: calc(100% + ($spacer * .3125));
+    margin: 0 (-($spacer * .3125));
+}
diff --git a/src/course-unit/xblock-container-iframe/index.tsx b/src/course-unit/xblock-container-iframe/index.tsx
index 761d637750..76b0673c99 100644
--- a/src/course-unit/xblock-container-iframe/index.tsx
+++ b/src/course-unit/xblock-container-iframe/index.tsx
@@ -43,9 +43,10 @@ const XBlockContainerIframe: FC<XBlockContainerIframeProps> = ({ blockId }) => {
       allow={IFRAME_FEATURE_POLICY}
       allowFullScreen
       loading="lazy"
-      style={{ width: '100%', height: iframeHeight + IFRAME_BOTTOM_OFFSET }}
+      style={{ height: iframeHeight + IFRAME_BOTTOM_OFFSET }}
       scrolling="no"
       referrerPolicy="origin"
+      className="xblock-container-iframe"
     />
   );
 };
diff --git a/src/generic/configure-modal/ConfigureModal.jsx b/src/generic/configure-modal/ConfigureModal.jsx
index 6a4af78153..96ff2425bd 100644
--- a/src/generic/configure-modal/ConfigureModal.jsx
+++ b/src/generic/configure-modal/ConfigureModal.jsx
@@ -167,6 +167,7 @@ const ConfigureModal = ({
         break;
       case COURSE_BLOCK_NAMES.vertical.id:
       case COURSE_BLOCK_NAMES.libraryContent.id:
+      case COURSE_BLOCK_NAMES.splitTest.id:
       case COURSE_BLOCK_NAMES.component.id:
       // groupAccess should be {partitionId: [group1, group2]} or {} if selectedPartitionIndex === -1
         if (data.selectedPartitionIndex >= 0) {
@@ -244,11 +245,12 @@ const ConfigureModal = ({
         );
       case COURSE_BLOCK_NAMES.vertical.id:
       case COURSE_BLOCK_NAMES.libraryContent.id:
+      case COURSE_BLOCK_NAMES.splitTest.id:
       case COURSE_BLOCK_NAMES.component.id:
         return (
           <UnitTab
             isXBlockComponent={isXBlockComponent}
-            isLibraryContent={COURSE_BLOCK_NAMES.libraryContent.id === category}
+            category={category}
             values={values}
             setFieldValue={setFieldValue}
             showWarning={visibilityState === VisibilityTypes.STAFF_ONLY && !ancestorHasStaffLock}
diff --git a/src/generic/configure-modal/UnitTab.jsx b/src/generic/configure-modal/UnitTab.jsx
index 0f65bb19f8..b3587388cf 100644
--- a/src/generic/configure-modal/UnitTab.jsx
+++ b/src/generic/configure-modal/UnitTab.jsx
@@ -8,10 +8,11 @@ import { Field } from 'formik';
 import classNames from 'classnames';
 
 import messages from './messages';
+import { COURSE_BLOCK_NAMES } from 'CourseAuthoring/constants';
 
 const UnitTab = ({
   isXBlockComponent,
-  isLibraryContent,
+  category,
   values,
   setFieldValue,
   showWarning,
@@ -44,6 +45,17 @@ const UnitTab = ({
     return group.deleted && isGroupSelected;
   };
 
+  const getAccessBlockTitle = () => {
+    switch (category) {
+      case COURSE_BLOCK_NAMES.libraryContent.id:
+        return messages.libraryContentAccess;
+      case COURSE_BLOCK_NAMES.splitTest.id:
+        return messages.splitTestAccess;
+      default:
+        return messages.unitAccess;
+    }
+  };
+
   return (
     <>
       {!isXBlockComponent && (
@@ -63,7 +75,7 @@ const UnitTab = ({
       {userPartitionInfo.selectablePartitions.length > 0 && (
         <Form.Group controlId="groupSelect">
           <h4 className="mt-3">
-            <FormattedMessage {...messages[isLibraryContent ? 'libraryContentAccess' : 'unitAccess']} />
+            <FormattedMessage {...getAccessBlockTitle()} />
           </h4>
           <hr />
           <Form.Label as="legend" className="font-weight-bold">
@@ -149,12 +161,12 @@ const UnitTab = ({
 
 UnitTab.defaultProps = {
   isXBlockComponent: false,
-  isLibraryContent: false,
+  category: undefined,
 };
 
 UnitTab.propTypes = {
   isXBlockComponent: PropTypes.bool,
-  isLibraryContent: PropTypes.bool,
+  category: PropTypes.string,
   values: PropTypes.shape({
     isVisibleToStaffOnly: PropTypes.bool.isRequired,
     discussionEnabled: PropTypes.bool.isRequired,
diff --git a/src/generic/configure-modal/messages.js b/src/generic/configure-modal/messages.js
index c7da8ff665..ffdc59d2ff 100644
--- a/src/generic/configure-modal/messages.js
+++ b/src/generic/configure-modal/messages.js
@@ -47,9 +47,13 @@ const messages = defineMessages({
     defaultMessage: 'Unit access',
   },
   libraryContentAccess: {
-    id: 'course-authoring.course-outline.configure-modal.visibility-tab.unit-access',
+    id: 'course-authoring.course-outline.configure-modal.visibility-tab.library-content-access',
     defaultMessage: 'Library content access',
   },
+  splitTestAccess: {
+    id: 'course-authoring.course-outline.configure-modal.visibility-tab.split-test-access',
+    defaultMessage: 'Split Test access',
+  },
   discussionEnabledSectionTitle: {
     id: 'course-authoring.course-outline.configure-modal.discussion-enabled.section-title',
     defaultMessage: 'Discussion',
diff --git a/src/generic/sub-header/SubHeader.jsx b/src/generic/sub-header/SubHeader.jsx
index ffe3606b6c..1cc1a665fb 100644
--- a/src/generic/sub-header/SubHeader.jsx
+++ b/src/generic/sub-header/SubHeader.jsx
@@ -15,12 +15,12 @@ const SubHeader = ({
   withSubHeaderContent,
 }) => (
   <div className={`${!hideBorder && 'border-bottom border-light-400'} mb-3`}>
+    {breadcrumbs && (
+      <div className="sub-header-breadcrumbs">{breadcrumbs}</div>
+    )}
     <header className="sub-header">
       <h2 className="sub-header-title">
         <small className="sub-header-title-subtitle">{subtitle}</small>
-        {breadcrumbs && (
-          <div className="sub-header-breadcrumbs">{breadcrumbs}</div>
-        )}
         {title}
         {titleActions && (
           <ActionRow className="ml-auto mt-2 justify-content-start">
diff --git a/src/utils.js b/src/utils.js
index d4bc8f6ff3..c15092ecc7 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -107,7 +107,7 @@ export const createCorrectInternalRoute = (checkPath) => {
     basePath = basePath.slice(0, -1);
   }
 
-  if (!checkPath.startsWith(basePath)) {
+  if (!checkPath?.startsWith(basePath)) {
     return `${basePath}${checkPath}`;
   }