feat: add course limit warning to admins (#639)

* feat: add course limit warning to admins

* fix: change max course number

* fix: PR requests

src/components/BulkEnrollmentPage/stepper/AddCoursesStep.jsx

@@ -3,25 +3,28 @@ import PropTypes from 'prop-types';
 import algoliasearch from 'algoliasearch/lite';
 import { InstantSearch, Configure } from 'react-instantsearch-dom';
 import { SearchData, SearchHeader } from '@edx/frontend-enterprise-catalog-search';
+import DismissibleCourseWarning from './DismissibleCourseWarning';
 
 import { configuration } from '../../../config';
 import { ADD_COURSES_TITLE, ADD_COURSE_DESCRIPTION } from './constants';
 
 import CourseSearchResults from '../CourseSearchResults';
 
 const currentEpoch = Math.round((new Date()).getTime() / 1000);
+const MAX_COURSES = 7;
 
 const searchClient = algoliasearch(
   configuration.ALGOLIA.APP_ID,
   configuration.ALGOLIA.SEARCH_API_KEY,
 );
 
 const AddCoursesStep = ({
-  enterpriseId, enterpriseSlug, subscription,
+  enterpriseId, enterpriseSlug, subscription, selectedCoursesNum,
 }) => (
   <>
     <p>{ADD_COURSE_DESCRIPTION}</p>
     <h2>{ADD_COURSES_TITLE}</h2>
+    {selectedCoursesNum > MAX_COURSES ? <DismissibleCourseWarning /> : null}
     <SearchData>
       <InstantSearch
         indexName={configuration.ALGOLIA.INDEX_NAME}
@@ -42,13 +45,18 @@ const AddCoursesStep = ({
   </>
 );
 
+AddCoursesStep.defaultProps = {
+  selectedCoursesNum: 0,
+};
+
 AddCoursesStep.propTypes = {
   enterpriseId: PropTypes.string.isRequired,
   enterpriseSlug: PropTypes.string.isRequired,
   subscription: PropTypes.shape({
     uuid: PropTypes.string.isRequired,
     enterpriseCatalogUuid: PropTypes.string.isRequired,
   }).isRequired,
+  selectedCoursesNum: PropTypes.number,
 };
 
 export default AddCoursesStep;

src/components/BulkEnrollmentPage/stepper/AddCoursesStep.test.jsx

@@ -2,7 +2,7 @@ import { screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import React from 'react';
 
-import { ADD_COURSES_TITLE } from './constants';
+import { ADD_COURSES_TITLE, WARNING_ALERT_TITLE_TEXT } from './constants';
 import BulkEnrollContextProvider from '../BulkEnrollmentContext';
 import { TABLE_HEADERS } from '../CourseSearchResults';
 
@@ -15,6 +15,7 @@ const defaultProps = {
   enterpriseSlug: 'sluggy',
   subscription: { uuid: 'foo', enterpriseCatalogUuid: 'bar' },
   enterpriseId: 'fancyEnt',
+  selectedCoursesNum: 8,
 };
 
 const StepperWrapper = (props) => (
@@ -33,4 +34,8 @@ describe('AddCoursesStep', () => {
     expect(screen.getByText(TABLE_HEADERS.courseName)).toBeInTheDocument();
     expect(screen.getByText(TABLE_HEADERS.courseAvailability)).toBeInTheDocument();
   });
+  it('displays that warning dialog text', () => {
+    renderWithRouter(<StepperWrapper {...defaultProps} />);
+    expect(screen.getByText(WARNING_ALERT_TITLE_TEXT)).toBeInTheDocument();
+  });
 });

src/components/BulkEnrollmentPage/stepper/BulkEnrollmentStepper.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import {
   Stepper, Button, Container, Scrollable,
 } from '@edx/paragon';
+
 import AddCoursesStep from './AddCoursesStep';
 import AddLearnersStep from './AddLearnersStep';
 import ReviewStep from './ReviewStep';
@@ -37,6 +38,7 @@ const BulkEnrollmentStepper = ({ subscription, enterpriseSlug, enterpriseId }) =
                 enterpriseId={enterpriseId}
                 enterpriseSlug={enterpriseSlug}
                 subscription={subscription}
+                selectedCoursesNum={selectedCourses.length}
               />
             </Stepper.Step>
 

src/components/BulkEnrollmentPage/stepper/BulkEnrollmentStepper.test.jsx

@@ -8,7 +8,7 @@ import LicenseManagerApiService from '../../../data/services/LicenseManagerAPISe
 import BulkEnrollmentStepper from './BulkEnrollmentStepper';
 import {
   ADD_LEARNERS_TITLE, REVIEW_TITLE, PREV_BUTTON_TEST_ID, NEXT_BUTTON_TEST_ID, FINAL_BUTTON_TEXT,
-  ADD_COURSES_TITLE,
+  ADD_COURSES_TITLE, WARNING_ALERT_TITLE_TEXT,
 } from './constants';
 import BulkEnrollContextProvider from '../BulkEnrollmentContext';
 
@@ -87,6 +87,7 @@ describe('BulkEnrollmentStepper', () => {
 
     const selectAll = screen.getByTestId('selectAll');
     userEvent.click(selectAll);
+    expect(screen.queryByText(WARNING_ALERT_TITLE_TEXT)).not.toBeInTheDocument();
     const checkboxes = screen.getAllByTestId('selectOne');
     checkboxes.forEach((checkbox) => {
       expect(checkbox).toHaveProperty('checked', true);

src/components/BulkEnrollmentPage/stepper/DismissibleCourseWarning.jsx

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+
+import { Alert, WarningFilled } from '@edx/paragon';
+import { WARNING_ALERT_TITLE_TEXT, WARNING_ALERT_BODY_TEXT } from './constants';
+
+/**
+ * Displays simple dismissible banner to remind admins.
+ */
+const DismissibleCourseWarning = () => {
+  const [closed, setClosed] = useState(false);
+
+  if (closed) { return null; }
+
+  return (
+    <Alert
+      variant="warning"
+      dismissible
+      icon={WarningFilled}
+      onClose={() => setClosed(true)}
+    >
+      <Alert.Heading>{WARNING_ALERT_TITLE_TEXT}</Alert.Heading>
+      <p>
+        {WARNING_ALERT_BODY_TEXT}
+      </p>
+    </Alert>
+  );
+};
+
+export default DismissibleCourseWarning;

src/components/BulkEnrollmentPage/stepper/constants.jsx

@@ -28,3 +28,9 @@ export const ADD_COURSE_DESCRIPTION = 'By enrolling your learners in courses, yo
 export const ADD_LEARNERS_DESCRIPTION = 'Select learners with an active or pending subscription '
                                         + 'license to enroll. If you wish to enroll additional '
                                         + 'learners not shown, please first invite them under ';
+export const WARNING_ALERT_TITLE_TEXT = 'Too many courses selected';
+export const WARNING_ALERT_BODY_TEXT = 'We noticed that you are trying to enroll learners in over 7 '
+                                        + 'courses at once - which might be too many for your learners '
+                                        + 'to manage. If this is intentional, please continue with this '
+                                        + 'enrollment process. If not, please go back and modify your '
+                                        + 'course selections.';