Sonarqube : Create a custom page using react

Question

I would like to create a custom page using react but I cannot find the documentation to do this. On the Sonarqube documentation, there only the way to create a custom page using javascript only and I don’t understand how the example plugin works with react. Can you tell me if there is a documentation that I can use.

Answer 1

Short answer: There isn't. There is barely anyone (no one in fact, as far as I've seen) using custom pages currently.

However, it IS possible. You need to create a react project with Webpack (or a similar JS packager).

I also recommend using Create-React-App. This fixes a lot of the setup for you. After that, in your index.js you use the example code from the SonarQube wiki.

Here is an example:

/*
    PRODUCTION ENTRYPOINT
 */
import React from 'react';
import ReactDOM from 'react-dom';
import Project from './components/Project';
import './main.css';

window.registerExtension('myplugin/coverage', function (options) {

    appendCustomCSS();
    let isDisplayed = true;

    window.SonarRequest.getJSON('/api/measures/component', {
        component: options.component.key,
        metricKeys: 'coverage'
    }).then(function (response) {
        if (isDisplayed) {
            let obj = JSON.parse(response.component.measures[0].value);
            let div = document.createElement('div');
            render(obj, div);
            options.el.appendChild(div);
        }
    });

    return function () {
        isDisplayed = false;
    };
});

function appendCustomCSS() {
    let fileref = document.createElement("link");
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", "/static/myplugin/coverage.css");
    document.head.append(fileref);
}

function render(objectArray, container) {
    ReactDOM.render(<div className="Coverage"><Project objects={objectArray}/></div>, container);
}