fix(portal): Add provider icon to identity/group badges

[jamilbk]

• Makes the group badges a little easier on the eyes, and reduces their size to improve layout flow a bit. Allows to more quickly identity provider adapters at-a-glance.
• Fix group badge wrapping so that long group names don't flow into the next table cell

Fixes #4905

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
firezone	⬜️ Ignored (Inspect)	Visit Preview		May 10, 2024 2:32pm

[github-actions]

Terraform Cloud Plan Output

Plan: 15 to add, 15 to change, 15 to destroy.

Terraform Cloud Plan

[jamilbk]

The icon is not pulled by the with_table_row helper. The provider_icon matcher is tested elsewhere so I thought this was ok to remove.

[github-actions]

Performance Test Results

TCP

Test Name	Received/s	Sent/s	Retransmits
direct-tcp-client2server	242.2 MiB (+3%)	243.4 MiB (+3%)	332 (+68%)
direct-tcp-server2client	241.9 MiB (-2%)	242.8 MiB (-2%)	296 (-54%)
relayed-tcp-client2server	226.9 MiB (+0%)	227.5 MiB (+0%)	203 (-15%)
relayed-tcp-server2client	238.2 MiB (-2%)	238.6 MiB (-2%)	455 (+2%)

UDP

Test Name	Total/s	Jitter	Lost
direct-udp-client2server	500.0 MiB (+0%)	0.03ms (+48%)	41.26% (-18%)
direct-udp-server2client	500.0 MiB (+0%)	0.02ms (+102%)	21.26% (-3%)
relayed-udp-client2server	500.0 MiB (+0%)	0.03ms (-85%)	56.45% (+3%)
relayed-udp-server2client	500.0 MiB (+0%)	0.03ms (+8%)	43.08% (-11%)

[AndrewDryga]

We were discussing this and we can't use icons because an account can have multiple providers of the same type active so you won't be able to tell the difference between them. We also can't just remove the prefix because then in case of name collision you won't be able to tell where that group is coming from.

[bmanifold]

We were discussing this and we can't use icons because an account can have multiple providers of the same type active so you won't be able to tell the difference between them. We also can't just remove the prefix because then in case of name collision you won't be able to tell where that group is coming from.

I understand where you're coming from, but as I think about it there are two things that make me think this would be ok:

1. The likelihood of an account having 2 of the same provider is probably very small (unless there's a use case I'm overlooking)
2. Won't clicking on the icon take you to the correct provider?

[jamilbk]

We were discussing this and we can't use icons because an account can have multiple providers of the same type active so you won't be able to tell the difference between them. We also can't just remove the prefix because then in case of name collision you won't be able to tell where that group is coming from.

I understand where you're coming from, but as I think about it there are two things that make me think this would be ok:

1. The likelihood of an account having 2 of the same provider is probably very small (unless there's a use case I'm overlooking)
2. Won't clicking on the icon take you to the correct provider?

Yeah that was my thinking too. No one has more than one provider of the same type configured, and if they do, hovering over the icon will display the provider name anyhow.

Seems like adding a little bit of ambiguity in the rare case is worth fixing the design issue for everyone.

[AndrewDryga]

@jamilbk @bmanifold I agree that there is an issue but I think we can fix it in other ways that don't sacrifice usability.

For example, we don't allow duplicate provider names, so we can shorten the name to the initials (eg. only keep capital letters) on smaller screens (using media queries). And this will work even if an account has multiple providers because hovering is not a solution - the human brain can't keep more than a few things in short memory.

[bmanifold]

LGTM