feat(webapp): surface all connection error counts

[nalanj]

Show total error connection counts including sync errors and then show new

Working from this design:

https://www.figma.com/design/X9f9i3bKiQ3gaRhoNTUbXp/Error-Reporting?node-id=4248-1376&t=XPt5fHDj37pclTO8-4

Bastien and I discussed removing the red bar because it felt a little too heavy handed. We also discussed having a 3rd state, the x icon, instead of two icons, when a connection has both types of error happening. And the copy icon shown in the drawing here got removed in favor of just using the connection id copy icon that's already there on hover.

Some screenshots!

Hover state for the error counts, displaying error breakdown

Tooltip showing a connection that has both sync and authentication errors

Tooltip showing a connection that has only sync errors

Tooltip showing a connection that has only auth errors

Issue ticket number and link

https://linear.app/nango/issue/NAN-2168/surface-integrationsconnections-errors-in-nango-ui

How I tested it

• Get connections into a bad state
  • To get a Slack connection into a bad auth state I updated the integration config to make the client id incorrect, and then hit refresh on the token
  • To get an Unauthenticated connection into a bad sync state I just used a script that threw
• Once you have that connection in a bad state you have a count you can play with for some of the display logic. I ended up editing the errorCounts variable on line 53 to test various states a little more directly without having to break connections manually

[linear[bot]]

NAN-2168 Surface integrations/connections errors in Nango UI