Added icon to honors sections

autoscheduler/frontend/src/components/SchedulingPage/CourseSelectColumn/CourseSelectCard/ExpandedCourseCard/SectionSelect/SectionSelect.css

@@ -34,6 +34,8 @@
     /* position is sticky by default, which prevents the first instructor name from scrolling 
        with the rest of the SectionSelect */
     position: initial;
+    display: flex;
+    align-items: center;
 }
 
 .gray-text {

autoscheduler/frontend/src/components/SchedulingPage/CourseSelectColumn/CourseSelectCard/ExpandedCourseCard/SectionSelect/SectionSelect.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import {
-  List, ListItemText, ListItem, Checkbox, ListItemIcon, Typography, ListSubheader,
+  List, ListItemText, ListItem, Checkbox, ListItemIcon, Typography, ListSubheader, Tooltip,
 } from '@material-ui/core';
+import HonorsIcon from '@material-ui/icons/School';
 import { useSelector, useDispatch } from 'react-redux';
 import Meeting, { MeetingType } from '../../../../../../types/Meeting';
 import { formatTime } from '../../../../../../timeUtil';
@@ -74,15 +75,23 @@ const SectionSelect: React.FC<SectionSelectProps> = ({ id }): JSX.Element => {
 
   const makeList = (): JSX.Element[] => {
     let lastProf: string = null;
+    let lastHonors = false;
     return sections.map(({ section, selected, meetings }, secIdx) => {
-      const instructorLabel = lastProf !== section.instructor.name
+      const makeNewGroup = lastProf !== section.instructor.name || lastHonors !== section.honors;
+      const instructorLabel = makeNewGroup
         ? (
           <ListSubheader disableGutters className={styles.listSubheaderDense}>
             {section.instructor.name}
+            {section.honors ? (
+              <Tooltip title="Honors" placement="right">
+                <HonorsIcon data-testid="honors" />
+              </Tooltip>
+            ) : null}
           </ListSubheader>
         )
         : null;
       lastProf = section.instructor.name;
+      lastHonors = section.honors;
 
       // get the meetings that match this section
       const sectionDetails = (

autoscheduler/frontend/src/redux/actions/courseCards.ts

@@ -127,6 +127,32 @@ export function parseSectionSelected(arr: any[]): SectionSelected[] {
   });
 }
 
+/**
+ * Groups sections by professor and honors status, then sorts each group by the lowest section
+ * number in the group, with TBA sections getting sorted to the bottom.
+ * @param sections
+ */
+function sortSections(sections: SectionSelected[]): SectionSelected[] {
+  // sort sections by sectionNum
+  const sorted = sections.sort(
+    (a, b) => a.section.sectionNum.localeCompare(b.section.sectionNum),
+  );
+  const sectionsForProfs: Map<string, SectionSelected[]> = new Map();
+  // maps maintain key insertion order, so add all sections to map and remember order of professors
+  const TBASections: SectionSelected[] = [];
+  sorted.forEach((section) => {
+    // H stands for honors, R stands for regular
+    const instructorName = section.section.instructor.name + (section.section.honors ? 'H' : 'R');
+    if (instructorName === 'TBAR') {
+      TBASections.push(section);
+    } else if (sectionsForProfs.has(instructorName)) {
+      sectionsForProfs.get(instructorName).push(section);
+    } else sectionsForProfs.set(instructorName, [section]);
+  });
+  // sections are now grouped by professor and sorted by section num
+  return [].concat(...sectionsForProfs.values(), ...TBASections);
+}
+
 /**
    * Helper function that generates thunk-ified UpdateCourseActions after
    * fetching the new list of sections from the server
@@ -144,12 +170,10 @@ function updateCourseCardAsync(
         (res) => res.json(),
       )
       .then(
-        (arr: any[]) => parseSectionSelected(arr),
+        parseSectionSelected,
       )
       .then(
-        (arr: SectionSelected[]) => arr.sort(
-          (a, b) => a.section.sectionNum.localeCompare(b.section.sectionNum),
-        ),
+        sortSections,
       )
       .then(
         (sections) => {

autoscheduler/frontend/src/tests/ui/ConfigureCard.test.tsx

@@ -49,7 +49,9 @@ describe('ConfigureCard component', () => {
       );
 
       fetchMock.mockImplementation((): Promise<Response> => new Promise(
-        (resolve) => setTimeout(resolve, 500, JSON.stringify([])),
+        (resolve) => setTimeout(resolve, 500, {
+          json: (): any[] => [],
+        }),
       ));
 
       // act