Improve transparency in the MR security widget loading message

Problem to solve

It can take a long time to load the security widget in an MR, sometimes more than 10 minutes, so we should be transparent about why it's taking so long and what's happening on the backend. This should be an easy enough MVC to implement while the team looks into how we might be able to reduce loading time (the more ideal outcome that will almost likely require more work/ time/ resources). See Slack thread for more context and conversation. Attaching SAST labels as this seems to be caused by the SAST jobs.

image

Proposal

Three loading states (for Ultimate):

1. Two loading states within pipeline still running:

a. Pipeline still running; SAST and DAST haven't been parsed yet.

image

b. Pipeline still running; some jobs have completed, some haven't. E.g. we can parse SAST results but not DAST

image

  • When complete, the (reports parsing...) disappears and the loading icon changes to the "!" icon:

image

2. One loading state within pipeline complete:

Pipeline complete; user navigates to MR and widget is loading the information

image

For non-Ultimate:

Remove the Download all reports button until pipeline is complete (i.e., all SAST and Secret Detection jobs, if more than one are applicable, are complete).

This refers to the following Post-MVC design in this epic:

image

@rossfuhrman @theoretick @tmccaslin @andyvolpe @matt_wilson @rdickenson @nmccorrison

Actionable insight

Improving the loading states of the MR security widget was identified as an actionable insight from the UX Department: MRs experience async critique research (insight). The original issue was #283904 (closed).

i18n/l10n

This issue should also help address an existing problem with the UI strings: !46167 (comment 445227230).

Edited by Becka Lippert