UAI dashboard - unenrolled module card changes (#2231)

* hide the context menu on DashboardCard if status is not completed or enrolled

* add new unenrolled status indicator

* fix status indicator test

Author: gumaerc

frontends/main/public/images/icons/course-unenrolled.svg

@@ -305,7 +305,11 @@ describe.each([
       expectedLabel: "Enrolled",
       hiddenImage: true,
     },
-    { status: EnrollmentStatus.NotEnrolled, expectedLabel: "Not Enrolled" },
+    {
+      status: EnrollmentStatus.NotEnrolled,
+      expectedLabel: "Not Enrolled",
+      hiddenImage: true,
+    },
   ])(
     "Enrollment indicator shows meaningful text",
     ({ status, expectedLabel, hiddenImage }) => {
@@ -345,6 +349,10 @@ describe.each([
     "getDefaultContextMenuItems returns correct items",
     async ({ contextMenuItems }) => {
       const course = dashboardCourse()
+      course.enrollment = {
+        status: EnrollmentStatus.Completed,
+        mode: EnrollmentMode.Verified,
+      }
       renderWithProviders(
         <DashboardCard
           dashboardResource={course}
@@ -372,4 +380,31 @@ describe.each([
       }
     },
   )
+
+  test.each([
+    { status: EnrollmentStatus.Completed },
+    { status: EnrollmentStatus.Enrolled },
+    { status: EnrollmentStatus.NotEnrolled },
+    { status: undefined },
+  ])(
+    "Context menu button is not shown when enrollment status is not Completed or Enrolled",
+    ({ status }) => {
+      renderWithProviders(
+        <DashboardCard
+          dashboardResource={dashboardCourse({ enrollment: { status } })}
+        />,
+      )
+      const card = getCard()
+      const expectedVisible =
+        status === EnrollmentStatus.Completed ||
+        status === EnrollmentStatus.Enrolled
+      const contextMenuButton = within(card).queryByRole("button", {
+        name: "More options",
+        hidden: !expectedVisible,
+      })
+      if (expectedVisible) {
+        expect(contextMenuButton).toBeVisible()
+      }
+    },
+  )
 })

frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.test.tsx

@@ -61,14 +61,22 @@ const TitleLink = styled(Link)(({ theme }) => ({
   },
 }))
 
-const MenuButton = styled(ActionButton)(({ theme }) => ({
-  marginLeft: "-8px",
-  [theme.breakpoints.down("md")]: {
-    position: "absolute",
-    top: "0",
-    right: "0",
+const MenuButton = styled(ActionButton)<{
+  status?: EnrollmentStatus
+}>(({ theme, status }) => [
+  {
+    marginLeft: "-8px",
+    [theme.breakpoints.down("md")]: {
+      position: "absolute",
+      top: "0",
+      right: "0",
+    },
   },
-}))
+  status !== EnrollmentStatus.Completed &&
+    status !== EnrollmentStatus.Enrolled && {
+      visibility: "hidden",
+    },
+])
 
 const getDefaultContextMenuItems = (title: string) => {
   return [
@@ -323,7 +331,12 @@ const DashboardCard: React.FC<DashboardCardProps> = ({
     <SimpleMenu
       items={menuItems}
       trigger={
-        <MenuButton size="small" variant="text" aria-label="More options">
+        <MenuButton
+          size="small"
+          variant="text"
+          aria-label="More options"
+          status={enrollment?.status}
+        >
           <RiMore2Line />
         </MenuButton>
       }

frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx

@@ -3,6 +3,7 @@ import Image from "next/image"
 import { styled, VisuallyHidden } from "ol-components"
 import CourseComplete from "@/public/images/icons/course-complete.svg"
 import CourseInProgress from "@/public/images/icons/course-in-progress.svg"
+import CourseUnenrolled from "@/public/images/icons/course-unenrolled.svg"
 import { EnrollmentStatus } from "./types"
 
 const CompletedImage = styled(Image)({
@@ -63,6 +64,12 @@ const EnrollmentStatusIndicator: React.FC<EnrollmentStatusIndicatorProps> = ({
 
   return (
     <Ring data-testid="enrollment-status">
+      <Image
+        src={CourseUnenrolled}
+        alt=""
+        // use VisuallyHidden text for consistency with the non-image case.
+        aria-hidden
+      />
       <VisuallyHidden>Not Enrolled</VisuallyHidden>
     </Ring>
   )