Merge branch 'master' into chris/FAL-3533-delete-taxonomy

.env

@@ -41,3 +41,4 @@ HOTJAR_APP_ID=''
 HOTJAR_VERSION=6
 HOTJAR_DEBUG=false
 INVITE_STUDENTS_EMAIL_TO=''
+AI_TRANSLATIONS_BASE_URL=''

.env.development

@@ -33,7 +33,6 @@ ENABLE_ACCESSIBILITY_PAGE=false
 ENABLE_PROGRESS_GRAPH_SETTINGS=false
 ENABLE_TEAM_TYPE_SETTING=false
 ENABLE_NEW_EDITOR_PAGES=true
-ENABLE_NEW_COURSE_OUTLINE_PAGE = false
 ENABLE_NEW_VIDEO_UPLOAD_PAGE = false
 ENABLE_UNIT_PAGE = false
 ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN = false
@@ -43,3 +42,4 @@ HOTJAR_APP_ID=''
 HOTJAR_VERSION=6
 HOTJAR_DEBUG=true
 INVITE_STUDENTS_EMAIL_TO="[email protected]"
+AI_TRANSLATIONS_BASE_URL='http://localhost:18760'

package.json

@@ -36,10 +36,11 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+    "@edx/frontend-component-ai-translations-edx": "^1.4.1",
     "@edx/frontend-component-footer": "^12.3.0",
     "@edx/frontend-component-header": "^4.7.0",
     "@edx/frontend-enterprise-hotjar": "^2.0.0",
-    "@edx/frontend-lib-content-components": "1.176.0",
+    "@edx/frontend-lib-content-components": "1.177.1",
     "@edx/frontend-platform": "5.6.1",
     "@edx/paragon": "^21.5.6",
     "@fortawesome/fontawesome-svg-core": "1.2.36",

src/CourseAuthoringRoutes.jsx

@@ -11,6 +11,7 @@ import VideoSelectorContainer from './selectors/VideoSelectorContainer';
 import CustomPages from './custom-pages';
 import { FilesPage, VideosPage } from './files-and-videos';
 import { AdvancedSettings } from './advanced-settings';
+import { CourseOutline } from './course-outline';
 import ScheduleAndDetails from './schedule-and-details';
 import { GradingSettings } from './grading-settings';
 import CourseTeam from './course-team/CourseTeam';
@@ -41,8 +42,8 @@ const CourseAuthoringRoutes = () => {
     <CourseAuthoringPage courseId={courseId}>
       <Routes>
         <Route
-          path="outline"
-          element={process.env.ENABLE_NEW_COURSE_OUTLINE_PAGE === 'true' ? <PageWrap><Placeholder /></PageWrap> : null}
+          path="/"
+          element={<PageWrap><CourseOutline courseId={courseId} /></PageWrap>}
         />
         <Route
           path="course_info"

src/content-tags-drawer/ContentTagsCollapsible.jsx

@@ -17,10 +17,79 @@ import ContentTagsDropDownSelector from './ContentTagsDropDownSelector';
 
 import ContentTagsTree from './ContentTagsTree';
 
+import useContentTagsCollapsibleHelper from './ContentTagsCollapsibleHelper';
+
 /**
  * Collapsible component that holds a Taxonomy along with Tags that belong to it.
  * This includes both applied tags and tags that are available to select
  * from a dropdown list.
+ *
+ * This component also handles all the logic with selecting/deselecting tags and keeps track of the
+ * tags tree in the state. That is used to render the Tag bubbgles as well as the populating the
+ * state of the tags in the dropdown selectors.
+ *
+ * The `contentTags` that is passed are consolidated and converted to a tree structure. For example:
+ *
+ * FROM:
+ *
+ * [
+ *   {
+ *     "value": "DNA Sequencing",
+ *     "lineage": [
+ *       "Science and Research",
+ *       "Genetics Subcategory",
+ *       "DNA Sequencing"
+ *     ]
+ *   },
+ *   {
+ *     "value": "Virology",
+ *     "lineage": [
+ *       "Science and Research",
+ *       "Molecular, Cellular, and Microbiology",
+ *       "Virology"
+ *     ]
+ *   }
+ * ]
+ *
+ * TO:
+ *
+ * {
+ *   "Science and Research": {
+ *     explicit: false,
+ *     children: {
+ *       "Genetics Subcategory": {
+ *         explicit: false,
+ *         children: {
+ *           "DNA Sequencing": {
+ *             explicit: true,
+ *             children: {}
+ *           }
+ *         }
+ *       },
+ *       "Molecular, Cellular, and Microbiology": {
+ *         explicit: false,
+ *         children: {
+ *           "Virology": {
+ *             explicit: true,
+ *             children: {}
+ *           }
+ *         }
+ *       }
+ *     }
+ *   }
+ * };
+ *
+ *
+ * It also keeps track of newly added tags as they are selected in the dropdown selectors.
+ * They are store in the same format above, and then merged to one tree that is used as the
+ * source of truth for both the tag bubble and the dropdowns. They keys are order alphabetically.
+ *
+ * In the dropdowns, the value of each SelectableBox is stored along with it's lineage and is URI encoded.
+ * Ths is so we are able to traverse and manipulate different parts of the tree leading to it.
+ * Here is an example of what the value of the "Virology" tag would be:
+ *
+ *  "Science%20and%20Research,Molecular%2C%20Cellular%2C%20and%20Microbiology,Virology"
+ * @param {string} contentId - Id of the content object
  * @param {Object} taxonomyAndTagsData - Object containing Taxonomy meta data along with applied tags
  * @param {number} taxonomyAndTagsData.id - id of Taxonomy
  * @param {string} taxonomyAndTagsData.name - name of Taxonomy
@@ -35,36 +104,46 @@ import ContentTagsTree from './ContentTagsTree';
  * @param {Object[]} taxonomyAndTagsData.contentTags - Array of taxonomy tags that are applied to the content
  * @param {string} taxonomyAndTagsData.contentTags.value - Value of applied Tag
  * @param {string} taxonomyAndTagsData.contentTags.lineage - Array of Tag's ancestors sorted (ancestor -> tag)
+ * @param {boolean} editable - Whether the tags can be edited
  */
-const ContentTagsCollapsible = ({ taxonomyAndTagsData }) => {
+const ContentTagsCollapsible = ({ contentId, taxonomyAndTagsData, editable }) => {
   const intl = useIntl();
+  const { id, name } = taxonomyAndTagsData;
+
   const {
-    id, name, contentTags,
-  } = taxonomyAndTagsData;
+    tagChangeHandler, tagsTree, contentTagsCount, checkedTags,
+  } = useContentTagsCollapsibleHelper(contentId, taxonomyAndTagsData);
 
   const [isOpen, open, close] = useToggle(false);
-  const [target, setTarget] = React.useState(null);
+  const [addTagsButtonRef, setAddTagsButtonRef] = React.useState(null);
+
+  const handleSelectableBoxChange = React.useCallback((e) => {
+    tagChangeHandler(e.target.value, e.target.checked);
+  });
 
   return (
     <div className="d-flex">
       <Collapsible title={name} styling="card-lg" className="taxonomy-tags-collapsible">
         <div key={id}>
-          <ContentTagsTree appliedContentTags={contentTags} />
+          <ContentTagsTree tagsTree={tagsTree} removeTagHandler={tagChangeHandler} editable={editable} />
         </div>
 
         <div className="d-flex taxonomy-tags-selector-menu">
-          <Button
-            ref={setTarget}
-            variant="outline-primary"
-            onClick={open}
-          >
-            <FormattedMessage {...messages.addTagsButtonText} />
-          </Button>
+
+          {editable && (
+            <Button
+              ref={setAddTagsButtonRef}
+              variant="outline-primary"
+              onClick={open}
+            >
+              <FormattedMessage {...messages.addTagsButtonText} />
+            </Button>
+          )}
         </div>
         <ModalPopup
           hasArrow
           placement="bottom"
-          positionRef={target}
+          positionRef={addTagsButtonRef}
           isOpen={isOpen}
           onClose={close}
         >
@@ -76,11 +155,14 @@ const ContentTagsCollapsible = ({ taxonomyAndTagsData }) => {
               columns={1}
               ariaLabel={intl.formatMessage(messages.taxonomyTagsAriaLabel)}
               className="taxonomy-tags-selectable-box-set"
+              onChange={handleSelectableBoxChange}
+              value={checkedTags}
             >
               <ContentTagsDropDownSelector
                 key={`selector-${id}`}
                 taxonomyId={id}
                 level={0}
+                tagsTree={tagsTree}
               />
             </SelectableBox.Set>
           </div>
@@ -92,18 +174,18 @@ const ContentTagsCollapsible = ({ taxonomyAndTagsData }) => {
           variant="light"
           pill
           className={classNames('align-self-start', 'mt-3', {
-            // eslint-disable-next-line quote-props
-            'invisible': contentTags.length === 0,
+            invisible: contentTagsCount === 0,
           })}
         >
-          {contentTags.length}
+          {contentTagsCount}
         </Badge>
       </div>
     </div>
   );
 };
 
 ContentTagsCollapsible.propTypes = {
+  contentId: PropTypes.string.isRequired,
   taxonomyAndTagsData: PropTypes.shape({
     id: PropTypes.number,
     name: PropTypes.string,
@@ -112,6 +194,7 @@ ContentTagsCollapsible.propTypes = {
       lineage: PropTypes.arrayOf(PropTypes.string),
     })),
   }).isRequired,
+  editable: PropTypes.bool.isRequired,
 };
 
 export default ContentTagsCollapsible;

src/content-tags-drawer/ContentTagsCollapsible.scss

@@ -22,3 +22,7 @@
   overflow-y: scroll;
   max-height: 20rem;
 }
+
+.pgn__modal-popup__arrow {
+  visibility: hidden;
+}