Prettify Alert Mapping Builder
The following discussion from !47019 (merged) should be addressed:
Sure thing, @ohoral! Here are a couple of things I spotted:
- Alignment - it looks like the payload alert key dropdowns are a tiny bit below the GitLab alert key dropdown fields. The arrow also looks like it's not quite centered with the text, so it might need to come up a couple pixels, if possible:
- Button spacing - all the buttons should have 8px of space between them. It looks like there's a bit more than that between the cancel and test buttons, and a bit less between the test and the save buttons:
- With the edit/submit payload button - ideally this would be 8px below the payload field. I think I remember there's a reason why there's a larger space than expected but, just wanted to see if it's possible to update this now that the form format has changed a bit?
- The border on the name field seems to be a darker grey than all the other fields. Is this because of the component that's being used here?
- Table width - I just noticed that the table is a bit narrower than the rest of the content on the page. I wonder if it should be the same width as everything else? I also wonder if "actions" should be a little further to the right so it feels like we're taking advantage of the full width of the table:
- Error text - I spotted this error when testing. I'm not entirely sure what it means
😅 , but it feels like it should perhaps be reworded:
Maybe it could say something like:
Error: the variable <type ID> has an invalid value. Please update your selection.
I'm not sure if that's right yet but, if there's a way to simplify this message a bit, I think it would help.
Also, definitely feel free to break these up as you'd like! No pressure to do them as part of this MR. Just flagging what I've noticed :)