Webatrice: i18n (#4562)

* implement i18n capability

* reset package.lock file

* remove custom fallback

* fix relative path for i18n files

* check for language support before fetch request

* add LanguageDropdown component, es translation file to prove functionality

* remove boilerplate

* bundle default english translation with app

* add missing file

* rollup component-level i18n files

* cleanup

Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>

webclient/src/components/LanguageDropdown/LanguageDropdown.css

@@ -0,0 +1,19 @@
+.LanguageDropdown {
+}
+
+.LanguageDropdown-item {
+  display: flex;
+  align-items: center;
+}
+
+.LanguageDropdown-item__image {
+  width: 1.5em;
+}
+
+.MuiSelect-root .LanguageDropdown-item__label {
+  display: none;
+}
+
+.MuiListItem-root .LanguageDropdown-item__image {
+  margin-right: 1em;
+}

webclient/src/components/LanguageDropdown/LanguageDropdown.tsx

@@ -0,0 +1,51 @@
+// eslint-disable-next-line
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Select, MenuItem } from '@material-ui/core';
+import FormControl from '@material-ui/core/FormControl';
+import InputLabel from '@material-ui/core/InputLabel';
+
+import { Images } from 'images/Images';
+import { CountryLabel, Language, LanguageCountry } from 'types';
+
+import './LanguageDropdown.css';
+
+const LanguageDropdown = () => {
+  const { i18n } = useTranslation();
+  const [language, setLanguage] = useState(i18n.resolvedLanguage);
+
+  useEffect(() => {
+    if (language !== i18n.resolvedLanguage) {
+      i18n.changeLanguage(language);
+    }
+  }, [language]);
+
+  return (
+    <FormControl variant='outlined' className='LanguageDropdown'>
+      <Select
+        id='LanguageDropdown-select'
+        margin='dense'
+        value={language}
+        fullWidth={true}
+        onChange={e => setLanguage(e.target.value as Language)}
+      >
+        {
+          Object.keys(LanguageCountry).map((lang) => {
+            const country = LanguageCountry[lang];
+
+            return (
+              <MenuItem value={lang} key={lang}>
+                <div className="LanguageDropdown-item">
+                  <img className="LanguageDropdown-item__image" src={Images.Countries[country]} alt={CountryLabel[country]} />
+                  <span className="LanguageDropdown-item__label">{lang}</span>
+                </div>
+              </MenuItem>
+            );
+          })
+        }
+      </Select>
+    </FormControl>
+  )
+};
+
+export default LanguageDropdown;