Description

This PR implements a Clack progress bar renderer for tasks like upload and snapshot. In addition to the core changes, there was a bit of cleanup (moving taskMessageFormatter to a location to be shared by both renderers and renaming renderer.ts to taskLogRenderer.ts, since we now have a progressBarRenderer.ts). These refactorings are in their own commits. As usual, I recommend reviewing commit-by-commit.

progressBarRenderer

At its core, this renderer is a wrapper around Clack's progress function, which returns a progress bar primitive. But there are two complications. The first is that Clack's progress function works in absolutes, rather than percentages, but when we start a renderer, we don't know the total value that drives the progress bar. Because of this, we need to work in percentages, so we initialize the progress bar with total=100 and then convert the progress updates we get into percentages before rendering the bar. Note that this only applies to the bar. The labels around these UI events (i.e., Running X/Y tests or whatever it is) are handled by the UI state components in ui/tasks/*.

The other complication is around the terminal UI states. The progress bar primitive includes a stop and error method, but they don't fit our requirements for success/failure hooks on the renderer. These methods render a hollow glyph (rather than the filled glyph we use elsewhere) and their messages are hardcoded to the terminal, rather than routing through Clack's log primitives like the task log primitive does. Because of this, they clobber the task log gutter, even with our wrapping helper. Thankfully, the progress bar also has a clear method, which handles tearing down the progress bar without writing anything, so we can just call that and then use the regular clack.log primitives for our success/failure messages, and it looks identical to our other tasks.

Storybook rendering changes

Clack's progress bar (and spinner, which will come in another renderer PR and which progress bar is just a subclass of) render their update frames asynchronously. But our captureTask helper that enables rendering Clack in Storybook is synchronous and must stay that way due to how it monkeypatches things. Furthermore, even if we could go async, it would be difficult to get deterministic output because our rendering happens at build time through a Storybook addon, so we can't rely on, e.g., vi.useFakeTimers. So in order to enable capturing the progress bar update states in our Storybook, I added a helper that basically monkeypatches setInterval and clearInterval, which Clack uses to register its frame updating callbacks, saves the callbacks in an array, and then calls them synchronously after the renderer work finishes. Internally, when Clack tears down the progress bar, it clears registered callbacks, so we duplicate that logic as well for our terminal story states.

Manual QA

N/A. It's not wired up yet. The added stories show what the UI will look like though and validate the Storybook rendering changes.

I did run a few builds to confirm that the new stories aren't flaky. See here. Build 10395 is the manually accepted new baseline. The following five builds show no changes.

npm install [email protected]
# or 
yarn add [email protected]