Skip excused students option in MSW

closes OUT-6298
flag=message_observers_of_students_who

This allows teachers to remove excused students when
messaging students that have not yet submitted an
assignment

Test Plan:
Automatic:
- Tests are sufficient
  - Note: Tests were added into file that is completely skipped
    for jenkins builds
Manual:
- Enable "Message Observers of Students Who" Site Admin FF
- Go to a course and navigate to the gradebook
- Select a cell in the gradebook corresponding to a student
  and an assignment (Make sure that student has not submitted)
- Open the tray using the button that appears in the cell
- Set the student status to "Excused"
- Refresh the gradebook page
- Open "Message Students Who" for the same assignment
- Select the "Have not yet submitted" option
- Verify that the checkbox renders saying:
  - "Skip excused students when messaging"
- Select the checkbox and verify that the excused student
  does not show in the list of unsibmitted students

Change-Id: I7b7d0435e701c7935c2d9496d3bf1ecc292776b4
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/344899
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Martin Yosifov <martin.yosifov@instructure.com>
QA-Review: Martin Yosifov <martin.yosifov@instructure.com>
Product-Review: Kyle Rosenbaum <krosenbaum@instructure.com>

ui/shared/message-students-dialog/react/MessageStudentsWhoDialog.tsx

@@ -166,6 +166,12 @@ const filterCriteria: FilterCriterion[] = [
     title: I18n.t('Have not yet submitted'),
     value: 'unsubmitted',
   },
+  {
+    requiresCutoff: false,
+    shouldShow: () => false, // Will never show in dropdown, but is used with checkbox on "Have not yet submitted" option
+    title: I18n.t('Have not yet submitted and excused'),
+    value: 'unsubmitted_skip_excused',
+  },
   {
     requiresCutoff: false,
     shouldShow: assignment => assignment !== null,
@@ -234,6 +240,11 @@ function filterStudents(criterion, students, cutoff) {
         }
         break
       case 'unsubmitted':
+        if (!student.submittedAt) {
+          newfilteredStudents.push(student)
+        }
+        break
+      case 'unsubmitted_skip_excused':
         if (!student.submittedAt && !student.excused) {
           newfilteredStudents.push(student)
         }
@@ -527,6 +538,17 @@ const MessageStudentsWhoDialog = ({
     }
   }
 
+  const onExcusedCheckBoxChange = event => {
+    const criteriaValue = event.target.checked ? 'unsubmitted_skip_excused' : 'unsubmitted'
+    const criterion = filterCriteria.find(c => c.value === criteriaValue)
+    if (criterion) {
+      setFilteredStudents(filterStudents(criterion, sortedStudents, cutoff))
+      setObserversDisplayed(
+        observerCount(filterStudents(criterion, sortedStudents, cutoff), observersByStudentID)
+      )
+    }
+  }
+
   const onAddAttachment = addAttachmentsFn(
     setAttachments,
     setPendingUploads,
@@ -709,6 +731,16 @@ const MessageStudentsWhoDialog = ({
               <br />
             </>
           )}
+          {selectedCriterion.value === 'unsubmitted' && (
+            <>
+              <Checkbox
+                onChange={onExcusedCheckBoxChange}
+                data-testid="skip-excused-checkbox"
+                label={<Text>{I18n.t('Skip excused students when messaging')}</Text>}
+              />
+              <br />
+            </>
+          )}
           <Flex>
             <Flex.Item>
               <Text weight="bold">{I18n.t('Send Message To:')}</Text>

ui/shared/message-students-dialog/react/__tests__/MessageStudentsWhoDialog.test.tsx

@@ -601,10 +601,10 @@ describe.skip('MessageStudentsWhoDialog', () => {
       })
     })
 
-    it('"Have not yet submitted" does not display students who are excused', async () => {
+    it('"Have not yet submitted" does not display students who are excused when selecting "skip excused" checkbox', async () => {
       const mocks = await makeMocks()
       students[2].excused = true
-      const {getAllByRole, getByRole, findByLabelText, getByText} = render(
+      const {getAllByRole, getByRole, findByLabelText, getByText, getByTestId} = render(
         <MockedProvider mocks={mocks} cache={createCache()}>
           <MessageStudentsWhoDialog {...makeProps()} />
         </MockedProvider>
@@ -614,6 +614,8 @@ describe.skip('MessageStudentsWhoDialog', () => {
       fireEvent.click(button)
       fireEvent.click(getByText(/Have not yet submitted/))
 
+      fireEvent.click(getByTestId('skip-excused-checkbox'))
+
       fireEvent.click(getByRole('button', {name: 'Show all recipients'}))
       expect(getByRole('table')).toBeInTheDocument()
 
@@ -626,6 +628,32 @@ describe.skip('MessageStudentsWhoDialog', () => {
       expect(studentCells[3]).toHaveTextContent('Dana Smith')
     })
 
+    it('"Have not yet submitted" does display students who are excused when "skip excused" checkbox is not selected', async () => {
+      const mocks = await makeMocks()
+      students[2].excused = true
+      const {getAllByRole, getByRole, findByLabelText, getByText} = render(
+        <MockedProvider mocks={mocks} cache={createCache()}>
+          <MessageStudentsWhoDialog {...makeProps()} />
+        </MockedProvider>
+      )
+
+      const button = await findByLabelText(/For students who/)
+      fireEvent.click(button)
+      fireEvent.click(getByText(/Have not yet submitted/))
+
+      fireEvent.click(getByRole('button', {name: 'Show all recipients'}))
+      expect(getByRole('table')).toBeInTheDocument()
+
+      const tableRows = getAllByRole('row') as HTMLTableRowElement[]
+      const studentCells = tableRows.map(row => row.cells[0])
+      expect(studentCells).toHaveLength(5)
+      expect(studentCells[0]).toHaveTextContent('Students')
+      expect(studentCells[1]).toHaveTextContent('Betty Ford')
+      expect(studentCells[2]).toHaveTextContent('Adam Jones')
+      expect(studentCells[3]).toHaveTextContent('Dana Smith')
+      expect(studentCells[4]).toHaveTextContent('Charlie Xi')
+    })
+
     it('"Have not yet submitted" displays students who have no submitted next to their observers', async () => {
       const mocks = await makeMocks()
       students[2].submittedAt = new Date()