UAI Dashboard #2189

ChristopherChudzicki · 2025-04-09T00:46:38Z

What are the relevant tickets?

Closes https://github.com/mitodl/hq/issues/7004

Description (What does it do?)

This adds the Universal AI org-level dashboard.

It does NOT include:

mobile layout (This will mostly be covered by enrollment dashboard mobile layout #2187)
Loading states (Let's handle this separately. PR has gotten big enough)

Forthcoming APIs This PR makes some assumptions about forthcoming APIs, based on conversations with @jkachel. It would be good to document these assumptions somewhere. In particular, the assumptions are:

https://api.learn.mit.edu/api/v0/users/me/ will include an array of organizations for each user, { id, name, logo }.
http://mitxonline.mit.edu/api/v2/programs/ and http://mitxonline.mit.edu/api/enrollments will both have a new org_id filter. (Or orgId once camelized by our api client generator.)

Screenshots (if appropriate):

How can this be tested?

With posthog feature flag mitlearn-organization-dashboard OFF:
- you should see no changes to the dashboard, even if you have the enrollment-dashboard flag on
With posthog feature flag mitlearn-organization-dashboard ON:
- you should see two new tabs, one for Organization X and one for Organization Y
- Orgs X and Y are static for now

Before Merging

document the assumptions about APIs somewhere.
- it's here https://github.com/mitodl/hq/discussions/7084

github-actions · 2025-04-09T00:46:56Z

OpenAPI Changes

Show/hide No detectable change.

github-actions · 2025-04-09T01:06:48Z

OpenAPI Changes

Show/hide No detectable change.

github-actions · 2025-04-09T11:58:35Z

OpenAPI Changes

Show/hide No detectable change.

github-actions · 2025-04-09T19:51:44Z

OpenAPI Changes

Show/hide No detectable change.

github-actions · 2025-04-09T20:00:22Z

OpenAPI Changes

Show/hide No detectable change.

ChristopherChudzicki · 2025-04-09T20:05:47Z

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

      <Stack
        direction="row"
        justifyContent="space-between"
        alignItems="stretch"
        flex={1}
        width="100%"
      >
-        <Stack direction="column" gap="8px">
+        <Stack direction="column" gap="8px" flex={1}>


This is to address an odd issue i noticed on the mobile cards.

Before:

Now:

I don't entirely understand why the "Before" behavior was wrapping that way, though.

ChristopherChudzicki · 2025-04-09T20:07:25Z

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

+    <CardRoot
+      screenSize="desktop"
+      data-testid="enrollment-card-desktop"
+      as={Component}
+      className={className}
+    >


@gumaerc I moved the desktop-only / mobile-only behavior to CardRoot.

My motivation was:

I want Component to be the root component (So that if we nest cards in a list, we can specify Component="li"

Classname should similarly apply to the root component.

Alternatively, could have moved classname, testid, and Component onto DesktopOnly / MobileOnly. Not sure what's more preferable.

ChristopherChudzicki · 2025-04-09T20:08:58Z

frontends/main/src/app-pages/ChannelPage/ChannelPage.test.tsx

@@ -33,7 +33,7 @@ const someAncestor = (el: HTMLElement, cb: (el: HTMLElement) => boolean) => {
 }

 const setupApis = (
-  channelPatch?: Partial<Channel>,
+  channelPatch: Partial<Channel> = {},


This is related to the change to PartialFactory that I made. Since PartialFactory now accepts an array of overrides, explicitly passing undefined is no longer allowed. I.e.,

partialFactory() OK ✅

partialFactory(undefined) ❌ not ok

ChristopherChudzicki · 2025-04-09T20:12:01Z

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

+describe.each([
+  { display: "desktop", testId: "enrollment-card-desktop" },
+  { display: "mobile", testId: "enrollment-card-mobile" },
+])("EnrollmentCard $display", ({ testId }) => {


@gumaerc I did decide to parameterize the desktop vs mobile testing. I'm worried without this we'll forget to test both cases in the future.

(Not that the possibility of forgetting is gone now. You could still ignore the parameterized testId.)

ChristopherChudzicki · 2025-04-09T20:13:05Z

frontends/ol-test-utilities/src/querify.ts

+ *
+ * The query string is sorted by key.
+ */
+const queryify = (params: unknown, { explode = true } = {}) => {


This function is moved from api/src/test-utils/index.ts. The only change was addition of explode option, since mitxonline does not explode query parameters.

ChristopherChudzicki · 2025-04-09T20:14:49Z

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

-    const mobileCards = await screen.findAllByTestId("enrollment-card-mobile")
-    expect(desktopCards.length).toBe(7)
-    expect(mobileCards.length).toBe(7)
+    const cards = await screen.findAllByTestId("enrollment-card-desktop")


Removed the desktop / mobile distinction, since that seems like an implementation detail of DashboardCard to me.

gumaerc

👍 LGTM

I just noticed a few typos in some comments:

gumaerc · 2025-04-10T16:10:19Z

frontends/main/src/app-pages/DashboardPage/OrganizationContent.tsx

+      <ImageContainer>
+        <Image
+          width={72}
+          // NextJS Image component requires width and height to avoid loayout shift.


"layout shift"

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

frontends/main/src/app-pages/DashboardPage/OrganizationContent.tsx

+          // NextJS Image component requires width and height to avoid loayout shift.
+          // These are supposed to be the intrinsic sizes of the image file.
+          // That said, it's not particularly relevant here since the parent is
+          // reserving spae for the image anyway. Using next/image still gets us


github-actions · 2025-04-10T16:29:38Z

OpenAPI Changes

Show/hide No detectable change.

ChristopherChudzicki added the Needs Review An open Pull Request that is ready for review label Apr 9, 2025

ChristopherChudzicki marked this pull request as ready for review April 9, 2025 01:06

ChristopherChudzicki changed the title ~~Cc/uai dashboard~~ UAI Dashboard Apr 9, 2025

ChristopherChudzicki added 16 commits April 9, 2025 15:02

better types on expectProps

e94cd30

remove old mockAxios

47b3cce

add org tabs

93125ad

mock apis

ddcb6b5

add cards for organizations programs

74b6306

tmp

6b53f5b

add org header

9a587c5

tmp

a6bc377

add more data factories

dd460ac

update mitxonline enrollment factories

aefd24d

add offerUpgrade and courseNoun props to dashboard cards

18a18fb

add tests and enrolled indicator

d155a9d

fix a few ts errors

d989b71

update spec

e1a5212

tmp

3d3fe9c

fix tests

00388cc

ChristopherChudzicki force-pushed the cc/uai-dashboard branch from 19e058f to 00388cc Compare April 9, 2025 19:51

fix a mobile title issue

63f52aa

ChristopherChudzicki commented Apr 9, 2025

View reviewed changes

ChristopherChudzicki requested a review from gumaerc April 9, 2025 22:04

gumaerc self-assigned this Apr 9, 2025

gumaerc approved these changes Apr 10, 2025

View reviewed changes

fix two typos

1d4addc

ChristopherChudzicki merged commit fab0c32 into main Apr 10, 2025
12 checks passed

ChristopherChudzicki deleted the cc/uai-dashboard branch April 10, 2025 17:30

This was referenced Apr 29, 2025

Release 0.32.0 #2218

Closed

Release 0.32.0 #2227

Closed

Release 0.32.0 #2228

Closed

Release 0.31.2 #2229

Closed

This was referenced May 9, 2025

Release 0.31.2 #2243

Closed

Release 0.31.3 #2244

Merged

UAI Dashboard #2189

UAI Dashboard #2189

Uh oh!

Conversation

ChristopherChudzicki commented Apr 9, 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?

Before Merging

Uh oh!

github-actions bot commented Apr 9, 2025

OpenAPI Changes

Uh oh!

github-actions bot commented Apr 9, 2025

OpenAPI Changes

Uh oh!

github-actions bot commented Apr 9, 2025

OpenAPI Changes

Uh oh!

github-actions bot commented Apr 9, 2025

OpenAPI Changes

Uh oh!

github-actions bot commented Apr 9, 2025

OpenAPI Changes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gumaerc left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Apr 10, 2025

OpenAPI Changes

Uh oh!

Uh oh!

Uh oh!

ChristopherChudzicki commented Apr 9, 2025 •

edited

Loading