feat(site): add loading <Spinner /> to AgentRow#24825
Conversation
Adds a `<Spinner />` next to the log count during agent startup. Also, there was some complexity in sizing the spinner because `<Badge />` automatically sizes any `svg`s it contains to `size-icon-xs`. In order to maintain the `svg` sizing inside existing Badges across the site, this introduces a new `svgSize` prop that defaults to `xs`. Existing consumers will still get `[&_svg]:size-icon-xs` regardless of the Badge size, but can now be overridden to `sm` or `lg` (there is no `md`). Also also fixes a tiny spacing issue with the warning triangle :male_detective:
| {healthIssues.length > 0 && ( | ||
| <Badge variant="warning" size="xs" className="ml-1.5"> | ||
| <TriangleAlertIcon /> | ||
| <TriangleAlertIcon className="-ml-0.5" /> |
There was a problem hiding this comment.
once you see it you can't unsee it
| args: { | ||
| agent: { | ||
| ...M.MockWorkspaceAgent, | ||
| ...M.MockWorkspaceAgentReady, |
There was a problem hiding this comment.
several of these stories used MockWorkspaceAgent straight up, which gives them the agent lifecycle value of "starting", which shows the new spinner. in order to minimize the amount of changes to existing stories, I'm making a couple of these show the explicit "ready" lifecycle state. the alternative would be to add actual logs/log_length to these stories and keep them in the "starting" state, but that would blow up the visual diffs. I'm happy to change it though if anyone thinks adding logs to these stories and keeping them in "starting" would be more correct
There was a problem hiding this comment.
Sounds good to me, I am adding some logs in my errors PR so doing it this way probably avoids conflicts with me as well 😆
|
similar to the AgentRow stories, the Workspace stories were affected by this change and exposed some incorrect args. this latest commit (0084fc6) adds explicit agent args and the appropriate lifecycle state |
| args: { | ||
| agent: { | ||
| ...M.MockWorkspaceAgent, | ||
| ...M.MockWorkspaceAgentReady, |
There was a problem hiding this comment.
Sounds good to me, I am adding some logs in my errors PR so doing it this way probably avoids conflicts with me as well 😆
| args: { | ||
| ...Running.args, | ||
| workspace: Mocks.MockStoppedWorkspace, | ||
| workspace: { |
There was a problem hiding this comment.
Could/should we fix the original entities?
There was a problem hiding this comment.
hrm yeah, I thought about that but I settled on this thinking the original entities would be even more visual diff churn, but idk I don't feel strongly about that at all. I can totally do that if you'd prefer!
There was a problem hiding this comment.
I think it might be worth it! My thinking is that if there is visual churn it probably means those tests were also incorrect.
There was a problem hiding this comment.
I have battled the UI Tests and I have prevailed. fixed!
8447c4a to
170bf8e
Compare
…y in health badge Change MockWorkspaceAgent default lifecycle_state from "starting" to "ready", and update Mock*Workspace entities to carry correct agent lifecycle states for their scenario. Also fix AgentRow health issues badge to respect issue severity, using info styling for info-level issues instead of always rendering as warning. Generated by Coder Agent, reviewed by Jeremy Ruppel.
170bf8e to
1803bc5
Compare
Adds a
<Spinner />next to the log count during agent startup.Also, there was some complexity in sizing the spinner because
<Badge />automatically sizes anysvgs it contains tosize-icon-xs. In order to maintain thesvgsizing inside existing Badges across the site, this introduces a newsvgSizeprop that defaults toxs. Existing consumers will still get[&_svg]:size-icon-xsregardless of the Badge size, but can now be overridden tosmorlg(there is nomd).Also also fixes a tiny spacing issue with the warning triangle 🕵️♂️