implement 'user display' component for conveying name, username, role, and other information consistently

[indirectlylit]

Observed behavior

In a coach report, these are two different users:

In facility users we show:

In class management we show:

related clearinghouse issues:

• https://github.com/learningequality/clearinghouse/issues/185
• https://github.com/learningequality/clearinghouse/issues/299

Expected behavior

Recommend we come up with a consistent, single-column representation of a user that can be used in all tables. This block would contain:

• full name
• username
• user type

It would be responsive to the available space and to the lengths of the values. It could optionally leverage tooltips or advanced ellipsis behaviors to deal with small screens and long names.

As one possible example, we might try something like:

User-facing consequences

Hard to scan and differentiate users

Context

0.12.0 beta 4

[khangmach]

I like this a lot and am on board with placing username under fullname as opposed to its own column. Helps make a clear differentiation between name and the more abstract and fluid username.

However, in your implementation above I think it's much more difficult to:

• scan for role label (super admin/admin/fac. coach/coach) which should be of high value when you're looking for people of specific roles in a long list (for example, enrolling coaches as learners in various contexts).
• tell the difference between username and role label.
• makes it little more difficult to copy/paste username text if you want to reference it for something.

I would advocate for placing the role label in its own column, where username was previously

[indirectlylit]

yeah makes sense. another dimension to possibly play with is the icon... we do this in facility class management:

and we do this in device permission management:

so maybe there's some kind of consistent role-based iconography we could establish that would negate the need for an additional column

[khangmach]

example

[khangmach]

maybe there's some kind of consistent role-based iconography we could establish that would negate the need for an additional column

Yeah, it's a bit of a tricky problem because we strictly use google material icons, but I don't see much issue in swapping a user icon for a key/coach icon. We still convey the concept of "what is a user, and what info is associated with a user" very clearly (albeit repetitively) through tables throughout the app anyways.

[indirectlylit]

just an idea:

[khangmach]

that works to me 👀 thoughts @jtamiace ?

[jtamiace]

Works for me too. We'll just need to find an icon for class coach with this approach (could be an unfilled version of the one above?), and facility admin (and class admin down the line if that's ever a thing)

[indirectlylit]

We'll still need to put a little more thought into a couple things about context... e.g.:

• is it useful/necessary to show device permissions in all contexts?
• do we show icons for the user's role in a class, their user type, or both
• ... others?

[khangmach]

Some solutions based on our discussions over slack. Suggested high level improvements:

• Give key icons their own column and color coordinate them based on permission level
• Separate the role label from the username column and give the role label it's own column
• Introduce admin icon to be consistent with coach icon

[indirectlylit]

this looks great - nice job!

minor clarification: I assume in the table on the right, all "Super admin" users should have gold keys?

[khangmach]

@indirectlylit whoops yes. Adjusted the original image