add Merge Confidence badges behind pending upgrades on dashboard

[HonkingGoose]

I was looking through a Renovate dashboard for a big project, and I noticed they have a lot of major upgrades pending.
It would be nice if the Renovate bot can tell you on the dashboard about the confidence level of pending upgrades.
So that a team that's behind on upgrades can pick high confidence upgrades first.

I was thinking of adding a badge for all fields, but that would only clutter things up.
I think using the Merge Confidence badge alone is probably enough.

A badge with "low/neutral/high/very high", for a quick at-a-glance feel of whether the upgrade will be "hard" or "easy" to merge.
I don't know how to get different badges for my mock-up, so I'm grabbing them from a Renovate PR.

---

Mockup time:

This issue contains a list of Renovate updates and their statuses.

Pending Approval

These branches will be created by Renovate only once you click their checkbox below.

• build(deps): update dependency aws-sdk to v2.812.0
• build(deps): update dependency ini to v2
• chore(deps): update dependency @types/markdown-it to v12

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to ignore the schedule.

• chore(deps): update mcr.microsoft.com/vscode/devcontainers/typescript-node docker tag to v0.154.0
• chore(deps): lock file maintenance (no badge because of multiple deps)

Pending Status Checks

These updates await pending status checks. To force their creation now, check the box below.

• build(deps): update dependency commander to v6.2.1
• build(deps): update dependency got to v11.8.1
• build(deps): update dependency ini to v1.3.8
• chore(deps): update linters (@typescript-eslint/eslint-plugin, @typescript-eslint/parser, eslint, eslint-plugin-jest) (no badge because of multiple deps)

---

• Check this box to trigger a request for Renovate to run again on this repository

[rarkins]

Is the mockup using an image editor or by editing markdown manually?

[HonkingGoose]

The mockup is made with Markdown only. 😉

Raw code of mockup posted above:

# Mockup time:

This issue contains a list of Renovate updates and their statuses.

## Pending Approval

These branches will be created by Renovate only once you click their checkbox below.

- [ ] build(deps): update dependency aws-sdk to v2.812.0 [![confidence](https://badges.renovateapi.com/packages/npm/sharp/0.26.3/confidence-slim/0.25.4)](https://docs.renovatebot.com/merge-confidence/)
- [ ] build(deps): update dependency ini to v2 [![confidence](https://badges.renovateapi.com/packages/npm/sharp/0.26.3/confidence-slim/0.25.4)](https://docs.renovatebot.com/merge-confidence/)
- [ ] chore(deps): update dependency @types/markdown-it to v12 [![confidence](https://badges.renovateapi.com/packages/npm/sharp/0.26.3/confidence-slim/0.25.4)](https://docs.renovatebot.com/merge-confidence/)

## Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to ignore the schedule.

- [ ] chore(deps): update mcr.microsoft.com/vscode/devcontainers/typescript-node docker tag to v0.154.0 [![confidence](https://badges.renovateapi.com/packages/npm/sharp/0.26.3/confidence-slim/0.25.4)](https://docs.renovatebot.com/merge-confidence/)
- [ ] chore(deps): lock file maintenance (no badge because of multiple deps)

## Pending Status Checks

These updates await pending status checks. To force their creation now, check the box below.

- [ ] build(deps): update dependency commander to v6.2.1 [![confidence](https://badges.renovateapi.com/packages/npm/sharp/0.26.3/confidence-slim/0.25.4)](https://docs.renovatebot.com/merge-confidence/)
- [ ] build(deps): update dependency got to v11.8.1 [![confidence](https://badges.renovateapi.com/packages/npm/sharp/0.26.3/confidence-slim/0.25.4)](https://docs.renovatebot.com/merge-confidence/)
- [ ] build(deps): update dependency ini to v1.3.8 [![confidence](https://badges.renovateapi.com/packages/npm/sharp/0.26.3/confidence-slim/0.25.4)](https://docs.renovatebot.com/merge-confidence/)
- [ ] chore(deps): update linters (@typescript-eslint/eslint-plugin, @typescript-eslint/parser, eslint, eslint-plugin-jest) (no badge because of multiple deps)

---

- [ ] Check this box to trigger a request for Renovate to run again on this repository

[rarkins]

Great, that confirms that at least GitHub at least is fine with displaying an image inline with a checklist. The vertical alignment kind of annoys me, but maybe I'm being too picky?

IIRC I originally tried using tables to contain these dashboard lists but the result looked even worse. Also from memory I checkboxes and tables didn't mix.

[rarkins]

One (kind of big) problem: the dashboard lists the PRs that are pending. But each PR can have multiple updates within it, with potentially different confidence levels. Currently the badge API only supports single-dependency confidences and not the concept of a "combined" badge.

Possible options:

• Only display a badge if the branch contains a single dependency
• Add an API that allows a combined query.. but that URL might be very long. We also need to decide how the combined confidence should be computed, e.g. the minimum of the confidence levels?

[HonkingGoose]

Response to first post from @rarkins

Great, that confirms that at least GitHub at least is fine with displaying an image inline with a checklist.

That's nice, huh. 😄

The vertical alignment kind of annoys me, but maybe I'm being too picky?

I agree, it looks wonky. The fix would probably be to make the badges for the Renovate dashboard a bit smaller, but then you need to have an API for 2 separate style of badges, so that increases the risks of accidents and unnecessary duplication, I think?
You'd have to remember as a programmer: does this badge go on a normal PR, or on the dashboard, and remember to pick the correct one.

IIRC I originally tried using tables to contain these dashboard lists but the result looked even worse. Also from memory I checkboxes and tables didn't mix.

That was my first instinct as well, but it doesn't work, the checkboxes are nonfunctional.

Live markdown preview of table with checkboxes:

Checkbox	Update name	Badge
- [ ]	build(deps): update dependency aws-sdk to v2.812.0

---

Response to second post from @rarkins:

Currently the badge API only supports single-dependency confidences and not the concept of a "combined" badge.

I figured as much, so I only added badges in the mock-up to single-dependency updates, and not to multiple dependency updates.

Response to options:

Only display a badge if the branch contains a single dependency

This would be the easiest thing to get working I think.
This also allows you to get feedback from a lot of users earlier than if you go bunker down to do a multiple-dependency API.

Add an API that allows a combined query

Is a long URL a problem? Users are not really supposed to manually edit the Markdown from the Renovate dashboard top post anyways. Long URLs get "hidden" by the badge anyways.

The badge for combined confidence should show the lowest tier confidence badge out of the multi-dependency upgrades.
Say you have a combined linter update:

• ESLint 7.1.0 -> 7.1.1 (High confidence)
• Prettier 1.0.0 -> 2.0.0 (low confidence, breaks test due to new formatting)

Then you would see a "low confidence" badge.

[HonkingGoose]

If we're stuck on dealing with the badges shrinking/not displaying properly, we could maybe get around that by just using plain text instead of the badges. 😉

I think even a stripped down version of this feature on the Renovate Dependency Dashboard can be really valuable for maintainers with a lot of dependencies.

Let me know if you like/hate this idea. 😉

If you want me to shut up, also let me know. 😉

---

Proposal for reduced scope implementation

• GitHub platform only, Renovate app installed into GitHub account only
• Use plain text instead of badge
• Only display the text if the branch contains a single dependency

By reducing the scope you can:

• Try out the feature yourself ("dogfooding").
• Get feedback from real users sooner.
• Use a platform you know well to develop the feature.
• Skip the headache of shrinking badges.
• Skip the headache of dealing with multi-dependency Merge Confidence algorithms.

Text to use behind dependency name on dashboard:

• Merge Confidence: low
• Merge Confidence: neutral
• Merge Confidence: high
• Merge Confidence: very high

[HonkingGoose]

@rarkins Do you still care about or want this feature? It's been three years and we haven't gone further than mocking up the interface yet. 🙂