Link Publish errors to the page + component instance that's causing the error

Setting to NR. e2e fails seem to be random / intermittent / unrelated. Will continue to stop back to rerun until green, but review should be fine unless you see publish-validation.cy.js failing.

This seems critical for usability and accessibility?! 😄 Love it!

(A GIF showing it in action would be nice too. 😇)

@wim-leers

Steps to reproduce the bug I mentioned in https://git.drupalcode.org/project/experience_builder/-/merge_requests/1.... I reproduced this on MR!1360

1. Create the code component below. Text and link required prop.
2. Click add to components.
3. Add two instances of the component on the page (xb_page).
4. Edit the url prop to be empty on both of the instances that are on the page.
5. Publish the xb_page that the 2 components are on.
6. This is the error message i get:

uuid: 6c21e124-4d78-408b-8896-1a26a28bcbdc
langcode: en
status: true
dependencies: {  }
machineName: c1
name: c1
required:
  - text
  - url
props:
  text:
    title: text
    type: string
    examples:
      - hello
  url:
    title: url
    type: string
    examples:
      - 'https://www.hello.com'
    format: uri
slots: {  }
js:
  original: |
    // See https://project.pages.drupalcode.org/experience_builder/ for documentation on how to build a code component

    const Component = ({
      text,
      url,
    }) => {
      return (
        <div className="text-3xl">
          {text}
        <br></br>
          {url}
        </div>
      );
    };

    export default Component;
  compiled: |
    // See https://project.pages.drupalcode.org/experience_builder/ for documentation on how to build a code component
    import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
    const Component = ({ text, url })=>{
        return /*#__PURE__*/ _jsxs("div", {
            className: "text-3xl",
            children: [
                text,
                /*#__PURE__*/ _jsx("br", {}),
                url
            ]
        });
    };
    export default Component;
css:
  original: ''
  compiled: ''

FB Addressed, but in a new MR 3537146-error-links-cleaner-diff

Opened 2 follow-ups.

1. ✨ [PP-1] Navigate to page/component that's causing a publish error within the same tab Active
2. 🐛 source.pointer value from publish error response is inconsistent sometimes Active for #8 📌 Link Publish errors to the page + component instance that's causing the error Active

Merged but assigning back to @bnjmnm to add screenshots/gif