Refactor load performance widget to use extensions

Merged Payton Burdette requested to merge 338287-align-load-performance-with-ux-designs into master

What does this MR do and why?

This MR refactors the load performance widget to utilize MR Widget Extensions

Introduces refactor_mr_widgets_extensions and refactor_mr_widgets_extensions_user feature flags

Widget porting: ee/app/assets/javascripts/reports/load_performance_report/grouped_load_performance_reports_app.vue

Lower level: ee/app/assets/javascripts/vue_merge_request_widget/components/performance_issue_body.vue

Screenshots or screen recordings

Top is the new load performance widget using the extension, bottom is the existing load performance widget implementation.


How to set up and validate locally

Enable refactor_mr_widgets_extensions feature flag in rails console


Follow the docs


Setup the initLoadPerformanceReport loadPerformance property with the format below with two different load performance artifact paths. ee/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js

this.loadPerformance = {
  base_path: '',
  head_path: '',

MR acceptance checklist

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

Related to #338287 (closed)

Edited by Payton Burdette