Step 1 MR Refactor (FE): Add info/error messages to security widget summary

Why are we doing this work

Currently for a MR, after the pipeline for the MR completes, a security report summary is shown on the MR page:

We want to add descriptive information/error messages to give the user better info on what's going on with the security summary and steps they can take to fix any issues with it.

Relevant links

Mocks B5 - B6

• B5. Use cases: Non-error states
• B6. Use cases: Error States

Non-functional requirements

• Documentation: will need to be updated to cover the new messages that can be displayed

Decisions

• Hold off on implementing the resolved alert for now. This has been extracted to #329910.
• De-nest the message display logic for showing the base report is out of date / the source branch is behind the target branch.
• Implement the failed jobs alert as-is, using a GraphQL query to determine if any failed.
• Keep using the existing base_report_out_of_date returned from the scanner comparison endpoints, rather than switching to the new MergeRequest.securityReportsUpToDateOnTargetBranch GraphQL field.
• Expose securityReportsUpToDateOnTargetBranch to the MR widget in order to display the widget in the case that scanners were enabled after the source branch was created.
• Keep using the existing enabled_reports field rather than the new MergeRequest.hasSecurityReports GraphQL field.
• Keep using the existing diverged_commits_count field rather than the new MergeRequest.divergedFromTargetBranch GraphQL field.
• Improving/implementating loading states is tracked in #287706.
• Improving the l18n/l10n strings will be handled in #287706, since they are related to the loading state(s).

Implementation plan (likely out of date, see #267504 (comment 607944913))

Note that some of the unchecked items below have been drafted in a PoC MR !64608 (closed).

frontend

• One or more security jobs failed (see PoC MR !64608 (closed))
  • The design/appearance of this alert is currently under discussion, and may still change. See this thread).
  • Design
  • Expose/consume failures_project_pipeline_path for link to job failures
  • Add apollo query for getting security jobs' statuses. If any job has detailedStatus.text === 'failed', show the alert.
  • Probably need to add a new slot to ReportSection component between the .media element and before the body slot containing element to contain the alert
• User's source branch is behind the target branch
  • De-nest the message display logic for showing the base report is out of date / the source branch is behind the target branch. (see !64090 (merged))
• User enabled security scanners after source branch was created (see PoC MR !64608 (closed))
  • Expose security_reports_up_to_date? method on MergeRequestPollWidgetEntity
  • Render security widget if there are any enabled_reports or if security_reports_up_to_date? is false.
  • Ensure widget displays message Security scanning detected no results for the source branch only and shows the error status rather than success status. Might require some Vuex work.