Code quality mr widget extension

What does this MR do and why?

This MR is meant to solve: #338280 (closed) In introduces a first Iteration of the Code Quality MR Widget Extension using the MR Widget Extension API.

Design Specs: https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Component-library?node-id=40483%3A44585

Known Issues and their follow up's:

1. adjusted endpoint to support collapsed and uncollapsed state #355390
2. Code Quality Extension does not support non expandable state, when code Quality hasn't changed #354492 (closed)
3. Click handler on expandable chevron has Issues #355044 (closed)
4. Subtext is not supported to be a link only plain text, designs require it to be a link #354495 (closed) UPDATE: partially solved using #354495 (comment 871441410)

Screenshots or screen recordings

before	after

How to set up and validate locally

1. Enable Feature Flag (:refactor_mr_widgets_extensions)
2. Find a Project with the Code Quality Scanner enabled (for example: https://gitlab.com/gitlab-examples/security/security-reports)
3. Open a MR with changes to Code Quality
4. See the Code Quality Widget in action on the MR page

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.