Moves mr widget components into vue files

What does this MR do?

1. Moves mr widget components into vue files
2. Adds i18n
3. Improves test cases

Does this MR meet the acceptance criteria?

• Review
  • Has been reviewed by Frontend
• 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-qa manual pipeline job)

What are the relevant issue numbers?