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.

Screen_Shot_2021-10-01_at_9.27.20_AM

How to set up and validate locally

Enable refactor_mr_widgets_extensions feature flag in rails console

Feature.enable(:refactor_mr_widgets_extensions)

Follow the docs https://docs.gitlab.com/ee/user/project/merge_requests/load_performance_testing.html#configure-the-load-performance-testing-job

OR

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