enrollment dashboard mobile layout #2187

gumaerc · 2025-04-08T00:13:30Z

What are the relevant tickets?

https://github.com/mitodl/hq/issues/7042

Description (What does it do?)

This PR implements mobile designs on the enrollments display in the dashboard home page.

Screenshots (if appropriate):

How can this be tested?

Ensure you have Posthog connected to your local instance of mit-learn
In your connected Posthog project, make sure you have added and enabled the enrollment-dashboard feature flag
Visit http://open.odl.local:8062/dashboard and log in (if you are not already logged in)
Ensure nothing has changed with the desktop view of the enrollments display
View the site using your browser's mobile simulator and ensure that it looks and behaves properly

github-actions · 2025-04-08T00:13:46Z

OpenAPI Changes

Show/hide No detectable change.

github-actions · 2025-04-08T15:30:00Z

OpenAPI Changes

Show/hide No detectable change.

github-actions · 2025-04-08T15:30:13Z

OpenAPI Changes

Show/hide No detectable change.

github-actions · 2025-04-08T15:48:02Z

OpenAPI Changes

Show/hide No detectable change.

github-actions · 2025-04-08T16:56:58Z

OpenAPI Changes

Show/hide No detectable change.

github-actions · 2025-04-08T18:20:47Z

OpenAPI Changes

Show/hide No detectable change.

github-actions · 2025-04-08T20:12:34Z

OpenAPI Changes

Show/hide No detectable change.

ChristopherChudzicki

Looks great. One minor suggestion, and one request about tests.

ChristopherChudzicki · 2025-04-09T13:11:25Z

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

        </Stack>
        {run.startDate ? (
          <CourseStartCountdown startDate={run.startDate} />
        ) : null}
      </Stack>
    </CardRoot>
  )
+
+  const mobileLayout = (
+    <CardRoot data-testid="enrollment-card">


Request: I think we should use separate testids for the desktop/mobile versions, and one of them (doesn't matter which) should just be enrolment-card. (Or I guess maybe we should change it to dashboard-card).

The current structure has a few disadvantages, imo:

makes the DashboardCard.test.tsx file awkward. You had change a bunch of things like courseLink to courseLinks, and it's not clear how many courseLinks there are.

The tests for a component that renders a list of dashboard cards now feels weird, too. If the test renders 7 resources, you get 14 cards.

If we use separate testids, then both these problems go away:

the DashboardCard.test.tsx can make all the assertions it wants about both variations,and it's clear there is only one courseLink (per variation).

Other tests see 1 enrollment-card per resource. (And also 1 enrollment-card-mobile per resource, but other tests can ignore that...the equivalence of desktop/mobile versions in terms of logic / meaning is thoroughly tested in Dashboard.test.tsx

I took a quick stab at this in https://github.com/mitodl/mit-learn/compare/cg/enrollment-dashboard-mobile...cg/enrollment-dashboard-mobile-cc-edits?expand=1 (The DashboardCard.test.tsx file passes; some other test file fails because it is expecting 2 cards per resource. I didn't change that one.)

If you look at https://github.com/mitodl/mit-learn/compare/cg/enrollment-dashboard-mobile...cg/enrollment-dashboard-mobile-cc-edits?expand=1 you can see my old man bias against mobile... Could have called them enrollment-card and enrollment-card-desktop 😛

ChristopherChudzicki · 2025-04-09T13:13:59Z

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

+        width="100%"
+      >
+        <Stack direction="column" gap="8px">
+          <Link size="medium" color="black" href={marketingUrl}>


Suggestion: Might be worth styling the Link so that it has a max width slightly less than 100% (Maybe something like calc(100% - 4px).

Else this happens:

github-actions · 2025-04-09T15:52:19Z

OpenAPI Changes

Show/hide No detectable change.

github-actions · 2025-04-09T16:10:01Z

OpenAPI Changes

Show/hide No detectable change.

gumaerc · 2025-04-09T16:10:58Z

@ChristopherChudzicki Thanks, this is ready for another look.

ChristopherChudzicki · 2025-04-09T18:16:50Z

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

+      const upgradeRootDesktop = screen.queryByTestId("upgrade-root-desktop")
+      const upgradeRootMobile = screen.queryByTestId("upgrade-root-mobile")


My preference would be to reduce the number of places we append desktop and mobile and use within instead:

const upgradeRootDesktop = within(scree.getByTestId("enrollment-card-desktop")).queryByTestId("upgrade-root") const upgradeRootMobile = within(scree.getByTestId("enrollment-card-mobile")).queryByTestId("upgrade-root")

…l as borders

github-actions · 2025-04-09T18:18:53Z

OpenAPI Changes

Show/hide No detectable change.

ChristopherChudzicki

👍

github-actions · 2025-04-09T18:37:46Z

OpenAPI Changes

Show/hide No detectable change.

gumaerc added the Work in Progress label Apr 8, 2025

gumaerc changed the title ~~enrollment dashboard mobile layut~~ enrollment dashboard mobile layout Apr 8, 2025

gumaerc force-pushed the cg/enrollment-dashboard-mobile branch from cf4eca8 to b987055 Compare April 8, 2025 15:29

odlbot temporarily deployed to mitopen-cg-enrollment-d-dnx0qa April 8, 2025 15:30 Inactive

gumaerc force-pushed the cg/enrollment-dashboard-mobile branch from d96dcdf to b503241 Compare April 8, 2025 18:20

gumaerc added Needs Review An open Pull Request that is ready for review and removed Work in Progress labels Apr 8, 2025

ChristopherChudzicki mentioned this pull request Apr 9, 2025

UAI Dashboard #2189

Merged

1 task

ChristopherChudzicki requested changes Apr 9, 2025

View reviewed changes

ChristopherChudzicki reviewed Apr 9, 2025

View reviewed changes

gumaerc added 9 commits April 9, 2025 14:18

basic adjustment to the padding / margins outside of the cards as wel…

6f412ca

…l as borders

first pass on mobile layout

b028d4a

align header with figma

e9aecb2

fix border

8f22f8f

fix context menu position

c39e189

fix tests

a2e06e2

fix context menu display on desktop

e71ad52

refactor tests

b2260b1

restrict width of title link on mobile

81f2ae6

gumaerc force-pushed the cg/enrollment-dashboard-mobile branch from 93f1b24 to 81f2ae6 Compare April 9, 2025 18:18

ChristopherChudzicki approved these changes Apr 9, 2025

View reviewed changes

refactor tests again

6664d20

gumaerc merged commit 9b6a0c8 into main Apr 9, 2025
12 checks passed

gumaerc deleted the cg/enrollment-dashboard-mobile branch April 9, 2025 18:45

odlbot mentioned this pull request Apr 10, 2025

Release 0.31.1 #2193

Merged

19 tasks

		const upgradeRootDesktop = screen.queryByTestId("upgrade-root-desktop")
		const upgradeRootMobile = screen.queryByTestId("upgrade-root-mobile")

enrollment dashboard mobile layout #2187

enrollment dashboard mobile layout #2187

Uh oh!

Conversation

gumaerc commented Apr 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What are the relevant tickets?

Description (What does it do?)

Screenshots (if appropriate):

How can this be tested?

Uh oh!

github-actions bot commented Apr 8, 2025

OpenAPI Changes

Uh oh!

github-actions bot commented Apr 8, 2025

OpenAPI Changes

Uh oh!

github-actions bot commented Apr 8, 2025

OpenAPI Changes

Uh oh!

github-actions bot commented Apr 8, 2025

OpenAPI Changes

Uh oh!

github-actions bot commented Apr 8, 2025

OpenAPI Changes

Uh oh!

github-actions bot commented Apr 8, 2025

OpenAPI Changes

Uh oh!

github-actions bot commented Apr 8, 2025

OpenAPI Changes

Uh oh!

ChristopherChudzicki left a comment

Choose a reason for hiding this comment

Uh oh!

ChristopherChudzicki Apr 9, 2025

Choose a reason for hiding this comment

Uh oh!

ChristopherChudzicki Apr 9, 2025

Choose a reason for hiding this comment

Uh oh!

ChristopherChudzicki Apr 9, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Apr 9, 2025

OpenAPI Changes

Uh oh!

github-actions bot commented Apr 9, 2025

OpenAPI Changes

Uh oh!

gumaerc commented Apr 9, 2025

Uh oh!

ChristopherChudzicki Apr 9, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Apr 9, 2025

OpenAPI Changes

Uh oh!

ChristopherChudzicki left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Apr 9, 2025

OpenAPI Changes

Uh oh!

Uh oh!

Uh oh!

gumaerc commented Apr 8, 2025 •

edited

Loading