[web-console] Several connector UI improvements#5851
Conversation
Move transaction state to a separate column Improve connector error description animation Indicate presence of a fatal error in connectors table and connector error list Signed-off-by: Karakatiza666 <bulakh.96@gmail.com>
Signed-off-by: Karakatiza666 <bulakh.96@gmail.com>
b73b520 to
9864237
Compare
| { | ||
| paused?: boolean | ||
| barrier?: boolean | ||
| Pick<InputEndpointStatus, 'paused' | 'barrier' | 'health' | 'fatal_error'> & { |
There was a problem hiding this comment.
Is this 'health' or 'healthy'?
As a value I expected the latter.
There was a problem hiding this comment.
These are names of the fields rather than the field value (healthy), so the strings are correct
| <span data-testid="box-icon-barrier" class="fd fd-construction text-[16px] text-warning-500" | ||
| ></span> | ||
| <Tooltip placement="top">Commit blocked by this input</Tooltip> | ||
| <Tooltip placement="top">Checkpointing is blocked by this connector</Tooltip> |
There was a problem hiding this comment.
This message is very different. I hope this is correct.
There was a problem hiding this comment.
Yes. Requested by Leonid
| data-testid="box-icon-transaction-committed" | ||
| class="fd fd-receipt-text text-[16px] text-success-500" | ||
| ></span> | ||
| <Tooltip placement="top">Ready to commit transaction</Tooltip> |
There was a problem hiding this comment.
I also hope this is correct, I don't recall the conversation.
There was a problem hiding this comment.
Also Leonid's ask
| : {}} | ||
| ></span> | ||
| <Tooltip placement="top">Encode or transport errors occurred — click to view</Tooltip> | ||
| <Tooltip placement="top" |
There was a problem hiding this comment.
I have seen this before, is this a reason to factor it out in a common component?
There was a problem hiding this comment.
Not worth it at this point
| <tr data-testid="box-connector-row-{connector.endpointName}"> | ||
| <td></td> | ||
| <td>{@render connectorNameSnippet(connector, relation, true)}</td> | ||
| {@render connectorNameSnippet(connector, relation, true)} |
There was a problem hiding this comment.
why an empty row before?
Does this generate table rows?
There was a problem hiding this comment.
There is an empty column (cell), this is because the first column is for table name, which is not specified in the per-connector row
|
|
||
| // Click to expand | ||
| await page.getByTestId('box-relation-row-t1').click() | ||
| await page.getByTestId('box-relation-row-t1').click({ position: { x: 1, y: 0 } }) |
There was a problem hiding this comment.
so click does not fall inside the element?
There was a problem hiding this comment.
you should make this a function clickByTestId.
There was a problem hiding this comment.
There seems to be a bug when requesting a click on the HTML element specifically , for some reason you have to specify this tiny offset for it to register, whereas you don't need to for other elements. I decided against moving it into a separate function to avoid introducing indirection, which I believe just makes it harder to read: "why it's .click() everywhere, but a special function here? What happens inside this function?". This parameter is easily copyable when needed.
| }) | ||
| }) | ||
|
|
||
| describe('J. Fatal error icon', () => { |
There was a problem hiding this comment.
Arbitrary letter to group the tests together
|
Tests! Fred will be so happy! |
Move transaction state icon to a separate column
Improve connector error description animation
Indicate presence of a fatal error in connectors table and connector error list
Testing: manually tested new icons location and UX, updated UI tests
Screencast.from.2026-03-18.03-00-33.webm
Screencast.from.2026-03-18.01-28-14.webm