function showValidationUI(validationErrors) {
    const checkSVG = `
    <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" fill="white" class="bi bi-check" viewBox="0 0 16 16">
      <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
    </svg>
    `;

    let s = `
    <div style="text-align: center; color: white;">
        <div style="margin: 20px;">
            ${checkSVG}
        </div>
        All good. No validation errors
    </div>
    `;

    if (!validationErrors.ok) {
        s = `
        <div style="text-align: center; color: white;">
            <p>Please fix these errors to run tests</p>
            <table class="validation-ui-table">
                <tr>
                    <th><b>Identifier</b></th>
                    <th><b>Error</b></th>
                </tr>
        `;

        validationErrors.invalids.forEach((vError) => {
            s += `
                <tr>
                    <td>${vError.identifier}</td>
                    <td>${vError.message}</td>
                </tr>
            `;
        });

        s += '</table></div>';
    }

    $('#testbenchValidate').dialog({
        resizable: false,
        width: 'auto',
        buttons: [
            {
                text: 'Ok',
                click() {
                    $(this).dialog('close');
                },
            },
            {
                text: 'Auto Fix',
                click() {
                    const fixes = validationAutoFix(validationErrors);
                    showMessage(`Testbench: Auto fixed ${fixes} errors`);
                    $(this).dialog('close');
                },
            },
        ],
    });

    $('#testbenchValidate').empty();
    $('#testbenchValidate').append(s);
}
UI Function
Shows validation UI
@param {Object} validationErrors - Object with errors returned by validate()