feat: add release notes banner

src/course-outline/CourseOutline.tsx

@@ -2,14 +2,18 @@ import { useState, useEffect, useCallback } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Container,
+  Hyperlink,
+  Icon,
   Layout,
+  PageBanner,
   Row,
   TransitionReplace,
   Toast,
   StandardModal,
 } from '@openedx/paragon';
+import { ArrowForward, CheckCircle as CheckCircleIcon } from '@openedx/paragon/icons';
+import { getConfig } from '@edx/frontend-platform';
 import { Helmet } from 'react-helmet';
-import { CheckCircle as CheckCircleIcon } from '@openedx/paragon/icons';
 import { useSelector } from 'react-redux';
 import {
   arrayMove,
@@ -60,6 +64,7 @@ import {
 } from './drag-helper/utils';
 import { useCourseOutline } from './hooks';
 import messages from './messages';
+import releaseNotesMessages from '../release-notes/messages';
 import { getTagsExportFile } from './data/api';
 import OutlineAddChildButtons from './OutlineAddChildButtons';
 
@@ -70,6 +75,7 @@ interface CourseOutlineProps {
 const CourseOutline = ({ courseId }: CourseOutlineProps) => {
   const intl = useIntl();
   const location = useLocation();
+  const [showPageBanner, setShowPageBanner] = useState(getConfig().ENABLE_RELEASE_NOTES_BANNER);
 
   const {
     courseUsageKey,
@@ -282,6 +288,25 @@ const CourseOutline = ({ courseId }: CourseOutlineProps) => {
 
   return (
     <>
+      {showPageBanner
+        && (
+        <PageBanner
+          show={showPageBanner}
+          variant="accentA"
+          dismissible
+          onDismiss={() => setShowPageBanner(false)}
+        >
+          🎉 {intl.formatMessage(releaseNotesMessages.releaseNotesBannerText)}
+          <Hyperlink
+            destination={`${getConfig().BASE_URL}/release-notes`}
+            target="_blank"
+            className="ml-2"
+          >
+            {intl.formatMessage(releaseNotesMessages.releaseNotesBannerLinkText)}
+            <Icon className="ml-1" src={ArrowForward} />
+          </Hyperlink>
+        </PageBanner>
+        )}
       <Helmet>
         <title>{getPageHeadTitle(courseName, intl.formatMessage(messages.headingTitle))}</title>
       </Helmet>

src/index.jsx

@@ -24,6 +24,7 @@ import {
 } from './library-authoring';
 import initializeStore from './store';
 import CourseAuthoringRoutes from './CourseAuthoringRoutes';
+import ReleaseNotes from './release-notes/ReleaseNotes';
 import Head from './head/Head';
 import { StudioHome } from './studio-home';
 import CourseRerun from './course-rerun';
@@ -91,6 +92,7 @@ const App = () => {
         <Route path="/legacy/preview-changes/:usageKey" element={<PreviewChangesEmbed />} />
         <Route path="/course/:courseId/*" element={<CourseAuthoringRoutes />} />
         <Route path="/course_rerun/:courseId" element={<CourseRerun />} />
+        <Route path="/release-notes" element={<ReleaseNotes />} />
         {getConfig().ENABLE_ACCESSIBILITY_PAGE === 'true' && (
           <Route path="/accessibility" element={<AccessibilityPage />} />
         )}
@@ -177,6 +179,7 @@ initialize({
         ENABLE_GRADING_METHOD_IN_PROBLEMS: process.env.ENABLE_GRADING_METHOD_IN_PROBLEMS === 'true',
         LIBRARY_UNSUPPORTED_BLOCKS: (process.env.LIBRARY_UNSUPPORTED_BLOCKS || 'conditional,step-builder,problem-builder').split(','),
         COURSE_TEAM_SUPPORT_EMAIL: process.env.COURSE_TEAM_SUPPORT_EMAIL || null,
+        ENABLE_RELEASE_NOTES_BANNER: process.env.ENABLE_RELEASE_NOTES_BANNER || null,
       }, 'CourseAuthoringConfig');
     },
   },

src/index.scss

@@ -31,6 +31,7 @@
 @import "group-configurations/GroupConfigurations";
 @import "optimizer-page/scan-results/ScanResults";
 @import "legacy-libraries-migration/";
+@import "release-notes/ReleaseNotes.scss";
 
 // To apply the glow effect to the selected Section/Subsection, in the Course Outline
 div.row:has(> div > div.highlight) {

src/release-notes/ReleaseNotes.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const ReleaseNotes = () => <h1>Welcome to release-notes!</h1>;
+
+export default ReleaseNotes;

src/release-notes/ReleaseNotes.scss

@@ -0,0 +1,32 @@
+.pgn__pageBanner__accentA {
+    background-color: #5DE3BF;
+    color: #000000;
+    text-align: center;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+
+    a {
+        color: #000000;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 20px;
+        text-decoration-line: underline;
+        text-decoration-style: solid;
+        text-decoration-skip-ink: auto;
+        text-decoration-thickness: auto;
+        text-underline-offset: auto;
+        text-underline-position: from-font;
+    }
+
+    .pgn__icon {
+        height: 16px !important;
+        width: 16px !important;
+    }
+
+    .pgn__hyperlink__external-icon {
+        display: none;
+    }
+}

src/release-notes/messages.js

@@ -0,0 +1,14 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  releaseNotesBannerText: {
+    id: 'release-notes.page.banner.text',
+    defaultMessage: 'Introducing edX Release Notes! See what\'s new and what\'s coming.',
+  },
+  releaseNotesBannerLinkText: {
+    id: 'release-notes.page.banner.link.text',
+    defaultMessage: 'Explore release notes',
+  },
+});
+
+export default messages;