search

OpenObservatory / ooni-wui

ooni web ui related assets
BSD 2-Clause "Simplified" License
8 stars 10 forks source link

Wrap all strings that are to be translated in FormattedMessage #31

Closed hellais closed 7 years ago

hellais commented 7 years ago

Now that we are going to add support for translations, all the templates containing strings need to be refactored so that they use the new translation system.

It's actually very easy to do, but to do it on all the template files is actually a lot of work, so if you want to help out that would be super useful!

If you want to help out with this here is what you should do:

  1. Write in the comment to this ticket which files you are going to be editing (see list of files in this ticket)

  2. Look inside of the file for strings that are written in english that need translation.

Check if FormattedMessage is being imported. If it's not add the line:

import { FormattedMessage } from 'react-intl'

This is how you would transform the following string for translation support:

<p>Hello World!</p>
<p>
<FormattedMessage
  id='home.helloWorld'
  defaultMessage='Hello World'
/>
</p>

The id needs to be unique across all the repository. I have been using so far as a naming convention the name of the parent directory . the component name. For example nettests/TcpConnect.js would have id's in the form nettests.tcpConnect.someString. Do not be afraid to add too much text in the id and add too many dots.

For more complicated strings that include also parameters or styling in the text you will have to parametrise them.

Here is an example of how you do that:

<p>
I am a <strong>happy</strong> string!
</p>

Would become:

<p>
<FormattedMessage
  id='home.happyString'
  defaultMessage='I am a {sentiment} string!'
  values={{
    sentiment: <strong>
     <FormattedMessage
         id='home.happyString.sentiment'
         defaultMessage='happy'
        />
    </strong>
  }}
/>
</p>
  1. Push the translations to a new branch based on top of this

For a complete example of how this looks like see: https://github.com/TheTorProject/ooni-wui/blob/16d1f81b85484e21a1c1a29396a00ca19971a243/src/routes/Measurements/components/nettests/WebConnectivity.js (Note: I have not yet finished all the strings in there)

Here is a listing of the files that are currently in need of this:

     182 src/components/Deck/Deck.js
      52 src/components/Deck/DeckContainer.js
      24 src/components/Footer/Footer.js
     101 src/components/Header/Header.js
      54 src/components/Notification/Notification.js
      72 src/components/Settings/SharingOptions.js
     214 src/routes/Dashboard/components/Dashboard.js
     239 src/routes/Dashboard/components/DeckRunner.js
     120 src/routes/Logs/components/Logs.js
     105 src/routes/Measurements/components/MeasurementDetails.js
     167 src/routes/Measurements/components/MeasurementList.js
     110 src/routes/Measurements/components/MeasurementViewer.js
      34 src/routes/Measurements/components/nettests/FacebookMessenger.js
      37 src/routes/Measurements/components/nettests/HttpHeaderFieldManipulation.js
      91 src/routes/Measurements/components/nettests/HttpInvalidRequestLine.js
     228 src/routes/Measurements/components/nettests/Ndt.js
      29 src/routes/Measurements/components/nettests/TcpConnect.js
      55 src/routes/Measurements/components/nettests/VanillaTor.js
     215 src/routes/Measurements/components/nettests/WebConnectivity.js
      75 src/routes/Measurements/components/nettests/Whatsapp.js
     101 src/routes/Onboard/components/OnboardSteps.js
     119 src/routes/Onboard/components/Quiz.js
      47 src/routes/Onboard/components/SetupSharing.js
      59 src/routes/Onboard/components/SetupYourTests.js
      33 src/routes/Onboard/components/StepIndicator.js
      49 src/routes/Onboard/components/UnderstandTheLaws.js
      44 src/routes/Onboard/components/Welcome.js
      28 src/routes/Settings/components/Settings.js

The most high priority ones are those required by the mobile app. These would be:

To make this process less painful I have setup a Live Template in WebStorm that allows me to select the text and wrap it in the <FormattedMessage/>.

This is the content of the Live Template:

<FormattedMessage
  id=''
  defaultMessage='$SELECTION$'
/>

You need to ensure that the context for it is set to JSX HTML and you can then access it by selecting the text and doing CMD-SHIFT-J.

bassosimone commented 7 years ago

Done

Assigned

Unassigned

agrabeli commented 7 years ago

I'll do:

37 src/routes/Measurements/components/nettests/HttpHeaderFieldManipulation.js 91 src/routes/Measurements/components/nettests/HttpInvalidRequestLine.js 55 src/routes/Measurements/components/nettests/VanillaTor.js

bassosimone commented 7 years ago

I assume we can now close this issue, given e4607e7! 🎉