Skip to content

Retry button if there are failed status checks - Frontend

This is a followup from the discussion in this thread &8516 (comment 1173353507)

I feel like we should have a way to force a re-check without having to make a change. Like a button beside the check to re-run the check. We currently use something like that for site validation for DAST profiles. As a first iteration, that would make this a lot more useable when the checks are blocking an MR.

Yes, we will need backend work. Outside of the 3 actions mentioned in the doc, we currently have no way of triggering the webhook that informs the external service to run a check, so we need a new API endpoint for it.

Here is the figma link to the designs

Regarding the Retry button, we'll need to work with Foundations to make sure we're using the merge report framework correctly. For example, would you expect to see Retry on each individual failed check (the GitBot example posted above), or should it only be on the top level (ie 2 failed status checks - Retry all failed checks)

This will require a button to call the retry API from the MR widget

Here is a screenshot with the updated copy on the tooltip: Retry status check

Status_checks_tooltip

Implementation plan

frontend 2️⃣

Plan to deliver via two MRs - first up:

  1. Modify the status check MR widget:(app/assets/javascripts/vue_merge_request_widget/extensions/status_checks/index.js) such that failed checks get an additional actions property added, with an onClick wired up to a new retry method on the component.
  2. retry will use the new endpoint developed in Retry api for failed status checks (!106401 - merged), passing the project id, MR id and statusCheck id. Pass this URL from backend to Vue.
  3. Additionally the loading and disabled properties of the failed status check action will be set.
  4. After triggering retry, we'll remove the status check from failed array and move it to pending.
  5. Update GitLab docs on Status Checks.

Second MR:

  1. Updates to the shared MR widget action buttons component: (app/assets/javascripts/vue_merge_request_widget/components/widget/action_buttons.vue) to allow passing through button customisations at mobile to match what can be done at larger sizes, e.g. loading, disabled, icon. Additionally allow setting aria-label on the GLButton.
  2. Modify the action buttons at mobile such that when there is a single, icon-only action, this is rendered directly and not put into a dropdown.
  3. Update Pajamas documentation for the MR widget.
Edited by Elwyn Benson