Resolve "`sha-mismatch` vue component is rendering an empty block"

What does this MR do?

1. Moves mr widget to a vue component
2. Prevents maintainer edit to render a blank div
3. Properly names sha mismatch component

Does this MR meet the acceptance criteria?

• Changelog entry added, if necessary
• Documentation created/updated
• API support added
• Tests added for this feature/bug
• Review
  • Has been reviewed by UX
  • Has been reviewed by Frontend
  • Has been reviewed by Backend
  • Has been reviewed by Database
• Conform by the merge request performance guides
• Conform by the style guides
• Squashed related commits together
• Internationalization required/considered
• End-to-end tests pass (package-and-qa manual pipeline job)

What are the relevant issue numbers?

Closes #45462 (closed)