Adds Learners column to Session->Offerings table

[michaelchadwick]

Fixes ilios/ilios#3530

[netlify]

✅ Deploy Preview for ilios-frontend ready!

Name	Link
🔨 Latest commit	be5b1d9
🔍 Latest deploy log	https://app.netlify.com/projects/ilios-frontend/deploys/692f8729d2de2f0008f9bec0
😎 Deploy Preview	https://deploy-preview-8949--ilios-frontend.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[saschaben]

I think we need to suppress/remove the truncation from the learner display, and have all names visible. a key issue is for users to have the ability to rapidly verify the assignees without clicking in further. this will take some clever space organization but let's take a stab at it.

Alternately, we can modify the mouseover display to be more accessible and legible to users.

[jrjohnson]

I'd vote for the better tooltip. Looks like for learner group hover we're using a popper which we can put HTML in. Going with that instead of a title should make this easier to read. I'm not sure we want to do without truncation on this table or it will be really hard to read everything else.

[michaelchadwick]

Here are some paths we could go:

First, adding them as I've done so far, truncated, with the untruncated version as a title:

Second, with all learner names visible:

Third, learner names truncated, but with IliosTooltip at default width (80%):

Fourth, learner names truncated, but with IliosTooltip at narrower width (40%):

[saschaben]

I think of the shown screenshot options, #2 and #4 are the options best suited. I personally would go with #4, but I suspect our users would prefer #2.

[michaelchadwick]

As far as this context goes, showing all Learners but filtered by FadeText seems like a good way to go.

[michaelchadwick]

SessionsGrid currently shows a Learners column like this PR is attempting to add to Session->Offerings, but it uses the @offering.allLearners convenience method, which aggregates individual learners AND all learners in assigned LearnerGroups. Whether these two places should show the same thing or not is now up for discussion.

[michaelchadwick]

For Session->Offering context specifically, add individual learners, if they exist, to each existing "Group Name" cell, and filter by FadeText. Don't add a new column. Rename the existing column to "Learners and Groups".

[michaelchadwick]

I updated the code to reflect our latest discussion.

The above screenshot had all the possibilities I could think of: only learners, only groups, both, or none, and learners list that both needs fading and does not.

[dartajax]

@saschaben and I discussed this. We can deal with the counts and labels later. For now, get rid of the count as shown in screen shot if that's cool with you.

[dartajax]

from my perspective, at least from an initial pass, this looks great - as mentioned we can deal with labels and possibly counts later - good stuff

[stopfstedt]

minor issue on an early return statement in a getter. otherwise good.

[stopfstedt]

empty lists are not falsy, and i'm not seeing a falsy value like null or undefined sneaking through here.

Suggested change

	if (!this.individualLearners) {
	if (!this.individualLearners.length) {

[michaelchadwick]

Fixed

stale review.

[stopfstedt]

LGTM