More info on setup tab 2

[HThuren]

Refine layout and add help icons/text
Now:

And with local build (and dark theme):

Before:

[HThuren]

But not in control with dark theme .-(

[blckmn]

AUTOMERGE: (FAIL)

• github identifies PR as mergeable -> FAIL
• assigned to a milestone -> PASS
• cooling off period lapsed -> PASS
• commit count less or equal to three -> FAIL
• Don't merge label NOT found -> PASS
• at least one RN: label found -> PASS
• Tested label found -> FAIL
• assigned to an approver -> FAIL
• approver count at least three -> FAIL

[HThuren]

Drak theme fixed

[nerdCopter]

sorry, it still needs css work.
if the screen is narrow, items go off.
need to figure out the button style well.

[HThuren]

sorry, it still needs css work. if the screen is narrow, items go off. need to figure out the button style well.

I going to learn more CSS style, was there in 2005, but a lot has happen since :-)
Thank you for the test.

[nerdCopter]

@HThuren , try to re-use existing css if you can, check all the surrounding elements for the text-issue. i hate css, fwiw 😆

[HThuren]

@haslinghuis @nerdCopter, Now more alignment to existing layout, also in dark theme
Ready to go :-)

[haslinghuis]

With no build key:

Should be

Did some testing on it we don't need the MSP call on line 341 and we should check length of buildKey in the first loop.

Proposal:

        const showFirmwareInfo = function() {
            // Firmware info
            msp_api_e.text([FC.CONFIG.apiVersion]);
            build_date_e.text([FC.CONFIG.buildInfo]);

            const buildRoot   = `https://build.betaflight.com/api/builds/${FC.CONFIG.buildKey}`;
            const buildConfig = `<span class="buildInfoBtn" title="${i18n.getMessage('initialSetupInfoBuildInfoConfig')}: ${buildRoot}/json">
                                    <a href="${buildRoot}/json" target="_blank"><strong>${i18n.getMessage('initialSetupInfoBuildInfoConfig')}</a></strong></span>`;
            const buildLog =    `<span class="buildInfoBtn" title="${i18n.getMessage('initialSetupInfoBuildInfoLog')}: ${buildRoot}/log">
                                    <a href="${buildRoot}/log" target="_blank"><strong>${i18n.getMessage('initialSetupInfoBuildInfoLog')}</a></strong></span>`;
            build_info_e.html(`${buildConfig} &nbsp &nbsp ${buildLog}`);

            if (FC.CONFIG.buildKey.length > 1) {
                $('.build-info a').removeClass('disabled');
            } else {
                $('.build-info a').addClass('disabled');
            }

            if (FC.CONFIG.buildOptions.length > 0) {
                let buildOptions = "";
                build_opt_e.text = "";
                for (const buildOption of FC.CONFIG.buildOptions) {
                    buildOptions = `${buildOptions} &nbsp ${buildOption}`;
                }
                build_opt_e.html(`<span class="buildInfoClassOptions" 
                                    title="${i18n.getMessage('initialSetupInfoBuildOptions')}${buildOptions}">
                                    <strong>${i18n.getMessage('initialSetupInfoBuildOptionsList')}</strong></span>`);
            } else {
                build_opt_e.text(i18n.getMessage('initialSetupInfoBuildOptionsEmpty'));
            }
        };

[nerdCopter]

Another option: if the build key variable is undefined|null|empty, then simply hide the entire line (class).

[HThuren]

I have made the disable / enable logic, but not the entire line/class. I think the lines are shown also when they are empty, then user know there existence.

[haslinghuis]

Almost finished

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[github-actions]

Do you want to test this code? Here you have an automated build:
Betaflight-Configurator-Android
Betaflight-Configurator-Linux
Betaflight-Configurator-macOS
Betaflight-Configurator-Windows
WARNING: It may be unstable and result in corrupted configurations or data loss. Use only for testing!

[nerdCopter]

approving

• looks good, light & dark theme. (buttons with build key)
• tested without build key, empty line displays as per author's expectation.