feat: add new help section in course team page

Author: viv-helix

.env

@@ -47,3 +47,4 @@ ENABLE_GRADING_METHOD_IN_PROBLEMS=false
 LIBRARY_UNSUPPORTED_BLOCKS="conditional,step-builder,problem-builder"
 # Fallback in local style files
 PARAGON_THEME_URLS={}
+COURSE_TEAM_SUPPORT_EMAIL=''

.env.development

@@ -50,3 +50,4 @@ ENABLE_GRADING_METHOD_IN_PROBLEMS=false
 LIBRARY_UNSUPPORTED_BLOCKS="conditional,step-builder,problem-builder"
 # Fallback in local style files
 PARAGON_THEME_URLS={}
+COURSE_TEAM_SUPPORT_EMAIL=''

.env.test

@@ -42,3 +42,4 @@ ENABLE_GRADING_METHOD_IN_PROBLEMS=false
 # "Multi-level" blocks are unsupported in libraries
 LIBRARY_UNSUPPORTED_BLOCKS="conditional,step-builder,problem-builder"
 PARAGON_THEME_URLS=
+COURSE_TEAM_SUPPORT_EMAIL='[email protected]'

src/course-team/course-team-sidebar/CourseTeamSideBar.test.jsx

@@ -21,6 +21,20 @@ describe('<CourseTeamSidebar />', () => {
     expect(getByText(messages.sidebarAbout_3.defaultMessage)).toBeInTheDocument();
   });
 
+  it('renders CourseTeamSidebar component based on support email variable', () => {
+    const { getByText } = renderComponent();
+    const courseTeamSupportEmail = process.env.COURSE_TEAM_SUPPORT_EMAIL;
+
+    if (courseTeamSupportEmail) {
+      expect(getByText(messages.helpInfoSidebarTitle.defaultMessage)).toBeInTheDocument();
+      expect(getByText(courseTeamSupportEmail)).toBeInTheDocument();
+      expect(getByText(/to add, remove, or update user access in bulk\./i)).toBeInTheDocument();
+    } else {
+      expect(getByText(messages.helpInfoSidebarTitle.defaultMessage)).not.toBeInTheDocument();
+      expect(getByText(/to add, remove, or update user access in bulk\./i)).not.toBeInTheDocument();
+    }
+  });
+
   it('render CourseTeamSidebar when isOwnershipHint is true', () => {
     const { getByText } = renderComponent({ isOwnershipHint: true });
 

src/course-team/course-team-sidebar/CourseTeamSidebar.jsx

@@ -1,12 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from '@edx/frontend-platform/i18n';
-
+import { Icon, MailtoLink } from '@openedx/paragon';
+import { InfoOutline } from '@openedx/paragon/icons';
 import { HelpSidebar } from '../../generic/help-sidebar';
 import messages from './messages';
 
 const CourseTeamSideBar = ({ courseId, isOwnershipHint, isShowInitialSidebar }) => {
   const intl = useIntl();
+  const courseTeamSupportEmail = process.env.COURSE_TEAM_SUPPORT_EMAIL;
 
   return (
     <div
@@ -30,6 +32,29 @@ const CourseTeamSideBar = ({ courseId, isOwnershipHint, isShowInitialSidebar })
         <p className="help-sidebar-about-descriptions">
           {intl.formatMessage(messages.sidebarAbout_3)}
         </p>
+        {courseTeamSupportEmail && (
+          <>
+            <p className="help-sidebar-other-title">
+              <sub>
+                <Icon
+                  src={InfoOutline}
+                  className="d-inline-block mr-2"
+                  style={{ height: 21, width: 21 }}
+                />
+              </sub>
+              {intl.formatMessage(messages.helpInfoSidebarTitle)}
+            </p>
+            <p className="help-sidebar-about-descriptions">
+              {intl.formatMessage(messages.helpInfoDescription, {
+                email_address: (
+                  <MailtoLink to={courseTeamSupportEmail}>
+                    {courseTeamSupportEmail}
+                  </MailtoLink>
+                ),
+              })}
+            </p>
+          </>
+        )}
       </HelpSidebar>
       {isOwnershipHint && (
         <>

src/course-team/course-team-sidebar/messages.js

@@ -25,6 +25,14 @@ const messages = defineMessages({
     id: 'course-authoring.course-team.sidebar.ownership.description',
     defaultMessage: 'Every course must have an Admin. If you are the Admin and you want to transfer ownership of the course, click {strong} to make another user the Admin, then ask that user to remove you from the Course Team list.',
   },
+  helpInfoSidebarTitle: {
+    id: 'course-authoring.course-team.sidebar.helpInfoSidebarTitle',
+    defaultMessage: 'Need help across multiple courses?',
+  },
+  helpInfoDescription: {
+    id: 'course-authoring.course-team.sidebar.helpInfoDescription',
+    defaultMessage: 'Email {email_address} to add, remove, or update user access in bulk.',
+  },
   addAdminAccess: {
     id: 'course-authoring.course-team.sidebar.ownership.addAdminAccess',
     defaultMessage: 'Add admin access',

src/index.jsx

@@ -173,6 +173,7 @@ initialize({
         ENABLE_CHECKLIST_QUALITY: process.env.ENABLE_CHECKLIST_QUALITY || 'true',
         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,
       }, 'CourseAuthoringConfig');
     },
   },

src/setupTest.js

@@ -49,6 +49,7 @@ mergeConfig({
   LMS_BASE_URL: process.env.LMS_BASE_URL || null,
   LIBRARY_UNSUPPORTED_BLOCKS: (process.env.LIBRARY_UNSUPPORTED_BLOCKS || 'conditional,step-builder,problem-builder').split(','),
   PARAGON_THEME_URLS: process.env.PARAGON_THEME_URLS || null,
+  COURSE_TEAM_SUPPORT_EMAIL: process.env.COURSE_TEAM_SUPPORT_EMAIL || null,
 }, 'CourseAuthoringConfig');
 
 class ResizeObserver {