Skip to content

Improve changeset creation errors

Administrator requested to merge better-changeset-creation-errors into master

Created by: felixfbecker

I noticed in @unknwon's excellent write-up that the error display could be better.

screenshot

Here's what I noticed:

  • The entire error being monospace is making it harder to read, and makes it feel like these are some "raw" errors from outside of our system that are not actionable. This makes me trust the system less, and it is inconsistent with error display elsewhere. In reality, these errors come from our system, and the output actually hints at how to fix the error (403 means something is wrong with the authorization). I think we should display in a normal non-small font, to encourage and ease reading them.
  • There are escaped newlines in the output, which stem from the command and output being embedded in a key=value style. It would be more readable if we could actually display the newlines. We already treat error messages as markdownish, so I took an approach of combining command and output into a code block, and prefixing the command with $ to mirror a shell command. I think this should give enough of a distinction so that we don't need the key=value style. Since markdown is designed to be plaintext-human-readable, I think this doesn't make the error worse for any non-web-UI environments (for example, it would look great in the CLI too imo!)
  • The link incorrectly includes the trailing single quote. This is not easily fixable as it is done by marked. The link is not particularly useful here though because it is a git clone URL, not necessarily a browser URL, and if we use the code block approach the link won't be linkified, so I think this is a nice solution from that perspective too.

To allow easier testing of such components now and in the future, I added a storybook (and fixed storybooks in general). This allows testing without having to create any campaigns, with toggling different states. I hope this will also be useful especially to non-engineers!

After:

image

@sourcegraph/campaigns-core please check if my Go is correct 🙈

Merge request reports

Loading