FireEdge Sunstone Translations

FireEdge Sunstone Translations

Every text used in FireEdge should be added to the file src/client/constants/translates.js so the app could translate it to any language that is defined in src/client/assets/languages.

The only exceptions to that rule will be texts that has not translation like the hypervisors (KVM, LXD,...) or technical words like x86, swap, ...

Translation map

The file src/client/constants/translates.js contains a JSON object (called T) with key pair values, where the key is a code and the value it is the text, in English, that we want to associate to that key. For example, if we have the following keys:

{
  VirtualMachineCreated: 'Virtual machine succesfully created',
  HostsList: 'List of hosts'
}

We can use T.HostsList with Translation functions wherever we want to show 'List of hosts' to the user.

Translation functions

The file src/client/components/HOC/Translate.js contains some functions to translate any text defined in the T object.

• Tr: This function translate a word or a phrase and returns the string translation.
• Translate: Same as Tr function but returns the translation as a component (<>translation</>)

Both functions use translateString function that works as follows:

const translateString = (word = '', values) => {

  // Get the translation context so hash will be the map with the language that is using the user
  const { hash = {} } = useContext(TranslateContext)

  // Look for the key thas has the value equal to word in the T object
  const key = findKey(T, (value) => value === word)

  // Using the key from the previous step, get the translated word in the language map
  const { [key]: wordVal } = hash

  // If there is no word, use the original
  const ensuredWord = wordVal || word
  if (!ensuredWord || !values) return ensuredWord

  // Return translation
  try {
    return sprintf(ensuredWord, ...values)
  } catch {
    return word
  }
}

Important

It's important to understand that we are looking for a translation using the value and not the key so we cannot have two equal values in the T object. { Host: 'Host', AnotherHost: 'Host' } -> That's wrong!

So, we can use Tr or Translate depending on the case. For example, if we define a Typography element:

<Typography variant="h6" zIndex={2} noWrap>
  <Translate word={T.KeyToTranslate} />
</Typography>

<Typography variant="h6" zIndex={2} noWrap>
  {Tr(T.KeyToTranslate)}
</Typography>

Both pieces of code will work.

Important

Using only T object will not translate the word: <Typography variant="h6" zIndex={2} noWrap> T.KeyToTranslate </Typography> -> That's wrong!

Important

If you are using a component defined in the App by the OpenNebula team could be that inside the component the texts are being translated, so in this case, you have to use T object in the definition of the component instead Tr(T).