feat: Add course_revision number as Course Version to the outline…

… page.

Needed a way to apply a version number to a course to ensure that the learner has a specific version of the course.

This was a request from the `Choose Aerospace` administers to ensure that the schools are using the latest version.

Adding this number into the course is found on the Schedule & Details page Course Details section (new field highlighted below).

src/course-home/data/__snapshots__/redux.test.js.snap

@@ -466,6 +466,7 @@ Object {
             "url": "https://example.com/bookmarks",
           },
         ],
+        "courseRevision": "2023.10",
         "datesBannerInfo": Object {
           "contentTypeGatingEnabled": false,
           "missedDeadlines": false,

src/course-home/data/api.js

@@ -375,6 +375,7 @@ export async function getOutlineTabData(courseId) {
   const courseBlocks = data.course_blocks ? normalizeOutlineBlocks(courseId, data.course_blocks.blocks) : {};
   const courseGoals = camelCaseObject(data.course_goals);
   const courseTools = camelCaseObject(data.course_tools);
+  const courseRevision = camelCaseObject(data.course_revision);
   const datesBannerInfo = camelCaseObject(data.dates_banner_info);
   const datesWidget = camelCaseObject(data.dates_widget);
   const enableProctoredExams = data.enable_proctored_exams;
@@ -397,6 +398,7 @@ export async function getOutlineTabData(courseId) {
     courseBlocks,
     courseGoals,
     courseTools,
+    courseRevision,
     datesBannerInfo,
     datesWidget,
     enrollAlert,

src/course-home/outline-tab/OutlineTab.jsx

@@ -9,6 +9,7 @@ import { AlertList } from '../../generic/user-messages';
 
 import CourseDates from './widgets/CourseDates';
 import CourseHandouts from './widgets/CourseHandouts';
+import CourseRevision from './widgets/CourseRevision';
 import StartOrResumeCourseCard from './widgets/StartOrResumeCourseCard';
 import WeeklyLearningGoalCard from './widgets/WeeklyLearningGoalCard';
 import CourseTools from './widgets/CourseTools';
@@ -207,7 +208,12 @@ function OutlineTab({ intl }) {
               /** [MM-P2P] Experiment */
               mmp2p={MMP2P}
             />
-            <CourseHandouts />
+            <CourseHandouts
+              courseId={courseId}
+            />
+            <CourseRevision
+              courseId={courseId}
+            />
           </div>
         )}
       </div>

src/course-home/outline-tab/messages.js

@@ -125,6 +125,10 @@ const messages = defineMessages({
     defaultMessage: 'Resume course',
     description: 'Anchor text for button that would resume course',
   },
+  revision: {
+    id: 'learning.outline.revision',
+    defaultMessage: 'Course Version',
+  },
   setGoal: {
     id: 'learning.outline.setGoal',
     defaultMessage: 'To start, set a course goal by selecting the option below that best describes your learning plan.',

src/course-home/outline-tab/widgets/CourseRevision.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import messages from '../messages';
+import { useModel } from '../../../generic/model-store';
+
+function CourseRevision({ courseId, intl }) {
+  const {
+    courseRevision,
+  } = useModel('outline', courseId);
+
+  if (!courseRevision) {
+    return null;
+  }
+
+  return (
+    <section className="mb-4">
+      <h2 className="h4">{intl.formatMessage(messages.revision)}</h2>
+      <span>{courseRevision}</span>
+    </section>
+  );
+}
+
+CourseRevision.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(CourseRevision);