[Completed courses of students] Display an icon for courses that are …

…in students' HOPS but have no enrollment or completion

services/frontend/src/pages/CompletedCoursesSearch/SearchResults.tsx

@@ -1,10 +1,9 @@
-import { Done as DoneIcon, Remove as RemoveIcon } from '@mui/icons-material'
+import { Done as DoneIcon, Remove as RemoveIcon, CropSquare as SquareIcon } from '@mui/icons-material'
 import { Box, Stack } from '@mui/material'
 import { green, yellow, grey } from '@mui/material/colors'
 import { MaterialReactTable, MRT_ColumnDef, useMaterialReactTable } from 'material-react-table'
 import moment from 'moment'
 import { useEffect, useMemo, useState } from 'react'
-
 import { useLanguage } from '@/components/LanguagePicker/useLanguage'
 import { ExportToExcelDialog } from '@/components/material/ExportToExcelDialog'
 import { RightsNotification } from '@/components/material/RightsNotification'
@@ -24,8 +23,13 @@ const getTotalUnfinished = student => Object.values(student.enrollments).length
 const getCompletion = (student, courseCode, { icon }) => {
   const completion = student.credits.find(credit => credit.courseCode === courseCode && isPassed(credit.creditType))
   const enrollment = student.enrollments[courseCode]
+  const isInStudyPlan = student.coursesInStudyPlan.includes(courseCode)
+
   if (completion === undefined) {
     if (!enrollment) {
+      if (isInStudyPlan) {
+        return <SquareIcon fontSize="small" style={{ color: grey[500] }} />
+      }
       return null
     }
     if (icon) {
@@ -47,7 +51,7 @@ const getCellTitle = (student, courseCode) => {
   const credit = student.credits.find(credit => credit.courseCode === courseCode)
   const enrollment = student.enrollments[courseCode]
   if (!credit && !enrollment) {
-    return ''
+    return 'Student has the course in their primary study plan'
   }
   const title = credit
     ? `Passed on ${moment(credit.date).format(ISO_DATE_FORMAT)}\nCourse code: ${

services/frontend/src/pages/CompletedCoursesSearch/index.tsx

@@ -1,4 +1,4 @@
-import { Done as DoneIcon, Remove as RemoveIcon } from '@mui/icons-material'
+import { Done as DoneIcon, Remove as RemoveIcon, CropSquare as SquareIcon } from '@mui/icons-material'
 import { Alert, Box, Container, Stack } from '@mui/material'
 import { green, yellow, grey } from '@mui/material/colors'
 import { useState } from 'react'
@@ -20,7 +20,8 @@ export const CompletedCourses = () => {
           <Box mb={1}>
             Here you can search by a list of student and course numbers to see whether students have completed certain
             courses yet. The tool will also show if students have enrolled on the course, if they have not yet completed
-            it. Course substitutions are taken into account.
+            it, or if they have the course selected in their primary study plan. Course substitutions are taken into
+            account.
           </Box>
           <Stack direction="row">
             <DoneIcon fontSize="small" style={{ color: green[700] }} />: Student has completed the course with a passing
@@ -34,6 +35,10 @@ export const CompletedCourses = () => {
             <RemoveIcon fontSize="small" style={{ color: grey[700] }} />: Student has not completed the course, but has
             an enrollment from more than 6 months ago.
           </Stack>
+          <Stack direction="row">
+            <SquareIcon fontSize="small" style={{ color: grey[500] }} />: Student has the course in their primary study
+            plan, but has not enrolled to, or completed it.
+          </Stack>
           <b>Empty cell</b>: Student has no completion or enrollment for the course.
         </Alert>
         <SearchModal setValues={setValues} />