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={}
+BULK_ROLE_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={}
+BULK_ROLE_SUPPORT_EMAIL='[email protected]'

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

@@ -19,6 +19,8 @@ describe('<CourseTeamSidebar />', () => {
     expect(getByText(messages.sidebarAbout_1.defaultMessage)).toBeInTheDocument();
     expect(getByText(messages.sidebarAbout_2.defaultMessage)).toBeInTheDocument();
     expect(getByText(messages.sidebarAbout_3.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.helpInfoSidebarTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(/to add, remove, or update user access in bulk\./i)).toBeInTheDocument();
   });
 
   it('render CourseTeamSidebar when isOwnershipHint is true', () => {

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

@@ -1,7 +1,8 @@
 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';
 
@@ -30,6 +31,23 @@ const CourseTeamSideBar = ({ courseId, isOwnershipHint, isShowInitialSidebar })
         <p className="help-sidebar-about-descriptions">
           {intl.formatMessage(messages.sidebarAbout_3)}
         </p>
+        <p className="help-sidebar-other-title">
+          <sub>
+            <Icon
+              src={InfoOutline}
+              className="d-inline-block mr-2"
+              style={{ height: '21px', width: '21px' }}
+            />
+          </sub>
+          {intl.formatMessage(messages.helpInfoSidebarTitle)}
+        </p>
+        <p className="help-sidebar-about-descriptions">
+          {intl.formatMessage(messages.helpInfoDescription, {
+            email_address: (
+              <MailtoLink to={process.env.BULK_ROLE_SUPPORT_EMAIL}>{process.env.BULK_ROLE_SUPPORT_EMAIL}</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(','),
+        BULK_ROLE_SUPPORT_EMAIL: process.env.BULK_ROLE_SUPPORT_EMAIL || null,
       }, 'CourseAuthoringConfig');
     },
   },