add translation keys (#246)

* Fix i18n tsc issue

"t" can return null by default.
This was already disabled in the config, but it had no effect on tsc.

* Fix translation in "DefaultNavBar"

key was missing and since this is a constant the translation wouldn't update in case the language got changed after first load.

* Enable typing for i18n translation keys

* Add translation keys

src/components/sourceConfiguration/EditTextPreference.tsx

@@ -16,8 +16,11 @@ import DialogActions from '@mui/material/DialogActions';
 import TextField from '@mui/material/TextField';
 import Button from '@mui/material/Button';
 import { EditTextPreferenceProps } from 'typings';
+import { useTranslation } from 'react-i18next';
 
 export default function EditTextPreference(props: EditTextPreferenceProps) {
+    const { t } = useTranslation();
+
     const { title, summary, dialogTitle, dialogMessage, currentValue, updateValue } = props;
 
     const [internalCurrentValue, setInternalCurrentValue] = useState<string>(currentValue);
@@ -57,10 +60,10 @@ export default function EditTextPreference(props: EditTextPreferenceProps) {
                 </DialogContent>
                 <DialogActions>
                     <Button onClick={handleDialogCancel} color="primary">
-                        Cancel
+                        {t('global.button.cancel')}
                     </Button>
                     <Button onClick={handleDialogSubmit} color="primary">
-                        OK
+                        {t('global.button.ok')}
                     </Button>
                 </DialogActions>
             </Dialog>

src/components/sourceConfiguration/ListPreference.tsx

@@ -17,6 +17,7 @@ import Radio from '@mui/material/Radio';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Button from '@mui/material/Button';
 import { ListPreferenceProps } from 'typings';
+import { useTranslation } from 'react-i18next';
 
 interface IListDialogProps {
     value: string;
@@ -27,6 +28,8 @@ interface IListDialogProps {
 }
 
 function ListDialog(props: IListDialogProps) {
+    const { t } = useTranslation();
+
     const { value: valueProp, open, onClose, options, title } = props;
     const [value, setValue] = React.useState(valueProp);
     const radioGroupRef = React.useRef<HTMLDivElement>(null);
@@ -72,9 +75,9 @@ function ListDialog(props: IListDialogProps) {
             </DialogContent>
             <DialogActions>
                 <Button autoFocus onClick={handleCancel}>
-                    Cancel
+                    {t('global.button.cancel')}
                 </Button>
-                <Button onClick={handleOk}>Ok</Button>
+                <Button onClick={handleOk}>{t('global.button.ok')}</Button>
             </DialogActions>
         </Dialog>
     );

src/components/sourceConfiguration/MultiSelectListPreference.tsx

@@ -18,6 +18,7 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import Button from '@mui/material/Button';
 import cloneObject from 'util/cloneObject';
 import { MultiSelectListPreferenceProps } from 'typings';
+import { useTranslation } from 'react-i18next';
 
 interface IListDialogProps {
     selectedValues: string[];
@@ -28,6 +29,8 @@ interface IListDialogProps {
 }
 
 function ListDialog(props: IListDialogProps) {
+    const { t } = useTranslation();
+
     const { selectedValues: selectedValuesProp, open, onClose, values, title } = props;
     const [selectedValues, setSelectedValues] = React.useState(selectedValuesProp);
 
@@ -86,9 +89,9 @@ function ListDialog(props: IListDialogProps) {
             </DialogContent>
             <DialogActions>
                 <Button autoFocus onClick={handleCancel}>
-                    Cancel
+                    {t('global.button.cancel')}
                 </Button>
-                <Button onClick={handleOk}>Ok</Button>
+                <Button onClick={handleOk}>{t('global.button.ok')}</Button>
             </DialogActions>
         </Dialog>
     );