UI prematurely reporting a connection is successful

[sherifnada]

Current Behavior

I cretaed a new connection and started a sync. The sync will run for a long time. But when I clicked "connections" on the left side of the UI the connecton has a checkmark next to it:

This made me think the sync succeeded

However when I clicked through, the sync is still running:

seeing as no sync was previously successful, it was confusing to see the green checkmark

Expected Behavior

I would prefer that there is a buffering icon or something similar if a connection had never succeeded its first sync

[octavia-squidington-iii]

cc @airbytehq/frontend

[timroes]

I agree. Currently this icon only shows if a connection is paused, never ran, or in all other cases successfull. I think it would make sense to better represent the state of the latest sync that has happened (or is still running) in this view.

@misteryeo Do you remember any reason why we shouldn't show the "current"/"last" state in the connection overview, but just this simplified version? If not, I'd suggest we change it as Sherif mentioned.

An implementation note: when we fix this we should also cleanup the StatusIcon component. It's currently using 4 booleans to represent a single available enum state. This makes it easier to potentially misuse this component in an unintended way.

[misteryeo]

Nope, I don't have context on this actually. May have been created before my time but I agree with Sherif's suggestion here.

[andyjih]

It sounds like we need some new status icons. After digging through with Edmundo a bit, here's what we need:

current
no recent run yet => Empty (white 🚫 on yellow bg)
most recent run failed => Failed (white ❌ on red bg)
most recent run succeeded => Active (:white_check_mark:)

proposal
most recent run cancelled -> same as failed (white ❌ on red bg)
most recent run pending | running -> something new (@Upmitt - have any thoughts?). A very quick fix would be to show an ellipsis ... in a circle.

[timroes]

For pending | running I'd suggest we simply make the icon a loading spinner instead, which imho indicates best this is still in progress. That way we can also better have a loading spinner in front of the actual current run when looking at a specific connection.

[Upmitt]

Figma is updated, with missing icon > https://www.figma.com/file/etaOkOsnXMoKwbfhCD71kw/WEB-APP?node-id=33424%3A159804 . I join the animated svg for pending/running

[sherifnada]

agreed w tim, the proposed icon 🚫 makes it seem like something is wrong

[Upmitt]

Agreed with tim and sherif - What about this kind of icon suggestion ?