Studio: Translate "About Studio" modal

katinthehatsite commented 2 weeks ago

Closes https://github.com/Automattic/dotcom-forge/issues/7522

Proposed Changes

This PR makes the strings in the "About Studio" window translatable.

Testing Instructions

Pull the changes from this branch locally

Before starting the app, modify the language in locale.ts in getPreferredSystemLanguages to return French:

export function getPreferredSystemLanguages() {
if ( process.platform === 'linux' && process.env.NODE_ENV !== 'test' ) {
        .getPreferredSystemLanguages()
        .filter( ( lang ) => supportedLocales.includes( lang ) );
}
return [ 'fr' ];
}

Navigate to src/translations/studio-fr.jed.json
Add the following strings and translations to the file:

            "Demo sites powered by": [
                "Sites de démonstration propulsés par"
            ],
            "Local sites powered by": [
                "Sites locaux propulsés par"
            ],
            "Share Feedback": [
                "Partager des commentaires"
            ],
            "Studio by WordPress.com": [
                "Studio par WordPress.com"
            ],
            "Version": [
                "Version"
            ]

Start the app with nvm use && npm install && npm start
Open the About Studio window
Confirm that the strings are translated to French:

Capture d’écran, le 2024-06-10 à 13 46 09

Notes:

I explored refactoring the HTML file into a React component and then rendering it into this custom window but the solution required modifying the app setup in multiple places. I opted for a more straightforward approach considering that that window is fairly static

Pre-merge Checklist

[ ] Have you checked for TypeScript, React or other console errors?

katinthehatsite commented 2 weeks ago

I suggest adding Sentry or sanitizing the strings with a custom function. My concern is that some translation would include a single quote: ' , which would break the string replacements.

Yeah I think you are right, I tried to break it and it did break. Let me conjure something for this. I will re-request review once I am ready

katinthehatsite commented 2 weeks ago

@sejas I added something simple in https://github.com/Automattic/studio/pull/228/commits/6c1f64f57fe4b160f557c8142d5009734ee10d2b to handle the ' to ensure that it is rendered.

I also found that we have something like https://www.npmjs.com/package/@wordpress/escape-html that we already have available and installed but a single quote breaks when I try to use escapeAtrribute or escapeHMTL. Do you think the fix about would be sufficient for this case in combination with Sentry capture?

Automattic / studio