fix(b2b): show learner email and icon avatar when name is blank

[daniellefrappier18]

What are the relevant tickets?

Follow-up to #3958

Description (What does it do?)

Fix blank learner names on the B2B contract learner directory (/organization/:orgSlug/contract/:contractSlug/learners).

In prod, many rows show a "?" avatar and no name, with only the course title. LearnerRow used row.full_name ?? row.email, and ?? only falls back on null or undefined. A null name would have fallen back to the email, so the blank rows mean full_name is "" or whitespace.

• Treat null, empty, and whitespace-only names as missing (row.full_name?.trim() || null), and skip the name line when there's no name
• Always show the learner's email between the name and the course title
• Show a generic person icon (RiUserLine) instead of "?" when there's no name. "?" reads as an error, and initials taken from an email are wrong for addresses like jdoe@ or x7k2m@. The avatar stays aria-hidden.

Companion PR: mitodl/ol-analytics-api#71 returns blank names as null, so they stop sorting ahead of every real name on page 1.

Implementation details

• The "Unknown learner" fallback is gone. The email now shows in its own line, so there's nothing left to fall back to.
• The commented-out row checkbox's aria-label now falls back to name ?? row.email, so turning that block back on can't produce "Select null".
• A row with neither a name nor an email shows only the icon and the course title.

Screenshots (if appropriate):

• Desktop screenshots
• Mobile width screenshots

BEFORE

AFTER

How can this be tested?

Automated: yarn test frontends/main/src/app-pages/ContractLearnersPage. New tests cover name + email + initials, and null, "", and whitespace-only names (email shown, icon avatar, no "?").

Locally, with the analytics-api stub from mitodl/ol-infrastructure#5788. You don't need mitodl/ol-analytics-api#71: local dev uses the stub in place of the real API, and this change doesn't depend on the sort order.

1. Set up the stub by following the "How to use it" steps in ol-infrastructure#5788. The stub includes three learners with no usable name:

   full_name	Email
   null	x7k2m@example.edu
   ""	jdoe@example.edu
   " "	sso.user.4471@example.edu

2. Open a contract's learner directory at /organization/<orgSlug>/contract/<contractSlug>/learners. The stub answers every contract with the same data.

3. At the top of page 1, the "" and " " rows show a person icon, the email, and the course title. There's no "?" and no empty name line. The null rows show the same way at the end of page 2.

4. Named learners still show initials, name, email, and course title.

5. Search for jdoe or x7k2m to find those rows.

Additional Context

• Until ol-analytics-api#71 ships, blank-name rows still sort to the top of page 1. They now render correctly.

🤖 Generated with Claude Code

[github-actions]

OpenAPI Changes

No changes detected

View full changelog

Unexpected changes? Ensure your branch is up-to-date with main (consider rebasing).

[Copilot]

Copilot review overview

🟢 Approval recommended

The runtime changes are correct and tested; the remaining comment concerns only dormant checkbox code.

Review effort: Balanced
Findings: 1

Open (1)

• Add fallback label for nullable email · New

What changed in this PR

Fixes blank learner identities in the B2B contract learner directory.

Changes:

• Normalizes blank names and shows email separately.
• Uses a generic avatar icon when names are unavailable.
• Adds coverage for null, empty, and whitespace-only names.

File	Description
LearnerRow.tsx	Updates learner identity and avatar rendering.
ContractLearnersPage.test.tsx	Tests named and unnamed learner rows.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[ahtesham-quraish]

LGTM!