Improve merge confidence display on Bitbucket platform (avoid huge empty margins)

[Bananeweizen]

Tell us more.

The merge confidence displayed in Bitbucket looks very different than all the screenshots describing that feature (probably for the GitHub platform). Every cell for a badge is 160*120 pixels, creating a huge empty margin around the actual badge.

Screenshot with web inspector overlay:

This seems to be a default minimum size for images in Bitbucket markdown. However this can be improved by adding width and height tags to the markdown. This specifies 100*25 px size, see https://confluence.atlassian.com/bitbucketserver/markdown-syntax-guide-776639995.html for the Bitbucket markdown reference:

The resulting PR display is

which looks much more nice. I therefore suggest to always add the width and height when generating markdown for Bitbucket.

[viceice]

you can override the column definition

renovate/lib/config/options/index.ts

Lines 2743 to 2749 in d0832f7

	Age: "{{#if newVersion}}[](https://docs.renovatebot.com/merge-confidence/){{/if}}",
	Adoption:
	"{{#if newVersion}}[](https://docs.renovatebot.com/merge-confidence/){{/if}}",
	Passing:
	"{{#if newVersion}}[](https://docs.renovatebot.com/merge-confidence/){{/if}}",
	Confidence:
	"{{#if newVersion}}[](https://docs.renovatebot.com/merge-confidence/){{/if}}",

[Bananeweizen]

Thanks, that has been working well for my local installation. Still I'm wondering, if that would be useful for all users, but I guess it might be hard to have some default configuration that works for all supported platforms, right?

[starwarsfan]

Same here, a lot of wasted space.

Five lines of text in this example but the badges waste very much space which reduces usability.

I'm not the maintainer of our BB instance, so I can't modify the column definition as suggested above. I suggest to remove the boxes around the badges entirely or at least reduce them to the same height of the badges.

[Bananeweizen]

https://docs.renovatebot.com/configuration-options/#prbodydefinitions is what you need to configure. Copy/paste the source values from the above linked ts file and change to your needs.

[starwarsfan]

I don't get it too. There is nothing on the documentation on how to modify such things like the cell or row height.

• https://docs.renovatebot.com/configuration-options/#prbodycolumns defines which columns should be displayed
• https://docs.renovatebot.com/configuration-options/#prbodydefinitions defines the content in the sense of which version or whatever

So how to set the cell height? Where is an example how to modify the layout, not the content?

[Churro]

prBodyDefinitions specifies Markdown definitions that work with any platform. There is no standard in Markdown to resize images, so if you want BitBucket DC/Server to resize the images, you need to use Atlassian's syntax ![text](/url.png){width=640 height=480} and override the column you want to show differently e.g. with height=20:

"prBodyDefinitions": {
    "Age": "{{#if newVersion}}![age](https://developer.mend.io/api/mc/badges/age/{{datasource}}/{{replace '/' '%2f' packageName}}/{{{newVersion}}}?slim=true){height=20}{{/if}}"
}

Notice: Untested, could be that { and } need escaping, if it doesn't work out of the box.

IMHO it could make sense to extend massageMarkdown for Bitbucket Server and set height=20 for mend.io badges automatically. Somewhat like this: if /(!\[.+?\]\(https:\/\/developer\.mend\.io\/api\/mc\/badges\/.+?\))/g then massage to $1{height=20}.
I'd open to providing a PR, if this approach is deemed acceptable.

EDIT: Just tried it with a BB installation. Looks nice with height=20. Also removes the ugly border boxes around the images.

[RahulGautamSingh]

Thanks! for looking into this @Churro. A PR would be welcome here.

[starwarsfan]

Works like a charm! I've used this snippet within renovate.json:

  "prBodyDefinitions": {
    "Age": "{{#if newVersion}}![age](https://developer.mend.io/api/mc/badges/age/{{datasource}}/{{replace '/' '%2f' packageName}}/{{{newVersion}}}?slim=true){height=20}{{/if}}",
    "Confidence": "{{#if newVersion}}![confidence](https://developer.mend.io/api/mc/badges/confidence/{{datasource}}/{{replace '/' '%2f' packageName}}/{{{currentVersion}}}/{{{newVersion}}}?slim=true){height=20}{{/if}}"
  }

Result:

[jamietanna]

Thanks @Churro for introducing this by default in #39795 🚀