SonarCloud Quality Info widget for Bitbucket Cloud

Context - Why

Bitbucket Cloud is one of the cloud solution that we target for SonarCloud. We already have authentication for it, and we want to go further. For this, we must discover the extensibility of Bitbucket Cloud, and after a discussion with Atlassian, it turns out that contributing a quality info widget is a first good step.

So this MMF is the first iteration to create a "SonarCloud App" for BitBucket Cloud, and define/understand how it will interact with SonarCloud.

Use Cases - What

As a team using Bitbucket Cloud and analyzing our source code on SonarCloud, I expect to see - on the Overview page, the main indicators of my code quality.

The expected user experience is:

1. I find the SonarCloud application on the BitBucket cloud marketplace and click on "Get it now" button
2. I login to BitBucket (skip this step if I'm already logged in)
3. I have to choose to which team I want to link the SonarCloud widget
4. The extension is installed on BitBucket. I can configure my widget:
   • I can go to the Overview page of one of my repository and see an empty SonarCloud widget.
     • I see a "Connect to SonarCloud with Bitbucket" button and a "More options" link next to it.
     • I can click on this button and connect to SonarCloud with my BitBucket account, or click on "More options" and connect to SonarCloud with GitHub or Microsoft. The options will be displayed in a pop-up.
     • As soon as I'm connected to SonarCloud, the widget will provide a select dropdown where I can search for a SonarCloud project. I can select a project (public or private) that I'm admin of. Once selected, I click on a "Apply" button.
   • I can go to the Settings page of one of my repositories and see a SonarCloud entry on the left menu.
     • From there I can select a project on a dropdown and apply it to the widget (just like I can do from the empty widget on Overview page)
     • From this page I will also be able to change for another SonarCloud project, and deactivate the widget.
5. I can finally see the widget on my Overview page

Widget design

The widget should be almost identical to what we see on SonarCloud projects page.

On smaller screen sizes, the widget width will be narrower due to the responsive design of BitBucket layout. In that case the widget items might be stacked in 2 rows.

Implementation - How

Details still have to be specified:

• The exact interaction when linking the SC org to the Bb team
• How information is stored on SonarCloud side (i.e. the link between a repo and a project)
• ... etc

References

Material about Bitbucket Cloud:

• Video walkthrough: https://www.youtube.com/watch?v=SEWYIQ0iCiA
• Official (Atlassian) Connect documentation: https://developer.atlassian.com/static/connect/docs/latest/index.html
• Dev documentation for BitBucket Cloud: https://developer.atlassian.com/bitbucket/
  • Raw Bitbucket APIs: https://developer.atlassian.com/bitbucket/api/2/reference/
  • Various authentication mechanisms supported by Bitbucket (Cloud): https://developer.atlassian.com/bitbucket/api/2/reference/meta/authentication
• More advanced concepts (video by Chris & Erik): https://www.youtube.com/watch?v=wScU1O0woLQ
• Atlassian design guidelines for UI https://atlassian.design/guidelines/product/overview