Merge pull request #1358 from merico-dev/1353-integrate-an-i18n-lib-a…

…t-frontend

1353 integrate an i18n lib at frontend

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "12.3.1",
+  "version": "12.4.1",
   "description": "",
   "main": "index.js",
   "scripts": {

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "12.3.1",
+  "version": "12.4.1",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",
@@ -35,13 +35,17 @@
     "@types/chroma-js": "^2.1.4",
     "dom-to-image-more": "3.1.6",
     "file-saver": "2.0.5",
+    "i18next": "^23.10.1",
+    "i18next-browser-languagedetector": "^7.2.0",
+    "intl-pluralrules": "^2.0.1",
     "js-base64": "3.7.5",
     "mathjs": "11.8.0",
     "monaco-editor": "0.36.0",
     "performant-array-to-tree": "1.11.0",
     "popmotion": "^11.0.3",
     "rc-select": "14.1.0",
     "rc-tree-select": "5.5.5",
+    "react-i18next": "^14.1.0",
     "reactflow": "^11.6.0",
     "uuid": "9.0.1"
   },

dashboard/src/components/filter/filter-select/editor.tsx

@@ -18,12 +18,15 @@ import { FilterMetaInstance, FilterSelectConfigInstance } from '~/model';
 import { PickQueryForFilter } from '../pick-query-for-filter';
 import { ExpectedStructureForSelect } from '../pick-query-for-filter/expected-structure-for-select';
 import { CustomDefaultValueEditor } from '../custom-default-value-editor';
+import { useTranslation } from 'react-i18next';
+import { useMemo } from 'react';
 
 interface IFilterEditorSelect {
   filter: FilterMetaInstance;
 }
 
 export const FilterEditorSelect = observer(function _FilterEditorSelect({ filter }: IFilterEditorSelect) {
+  const { t, i18n } = useTranslation();
   const config = filter.config as FilterSelectConfigInstance;
 
   const addStaticOption = () => {
@@ -35,25 +38,27 @@ export const FilterEditorSelect = observer(function _FilterEditorSelect({ filter
 
   const staticOptionFields = config.static_options;
 
-  const optionsForDefaultValue = [{ label: 'No default selection', value: '' }, ...staticOptionFields];
+  const optionsForDefaultValue = useMemo(() => {
+    return [{ label: t('filter.widget.select.no_default_selection'), value: '' }, ...staticOptionFields];
+  }, [i18n.language, staticOptionFields]);
 
   return (
     <>
       <Group position="apart">
         <Checkbox
           checked={config.required}
           onChange={(e) => config.setRequired(e.currentTarget.checked)}
-          label="Required"
+          label={t('filter.widget.select.required')}
         />
         <CustomDefaultValueEditor filter={filter} />
       </Group>
       <TextInput
-        label="Width"
+        label={t('filter.widget.select.width')}
         value={config.width}
         onChange={(e) => config.setWidth(e.currentTarget.value)}
         placeholder="200px"
       />
-      <Divider label="Configure options" labelPosition="center" />
+      <Divider label={t('filter.widget.select.configure_options')} labelPosition="center" />
       <Stack spacing={10} sx={{ position: 'relative', minHeight: '50px' }}>
         {config.usingQuery && (
           <>
@@ -67,7 +72,7 @@ export const FilterEditorSelect = observer(function _FilterEditorSelect({ filter
         )}
         {staticOptionFields.length > 0 && (
           <Select
-            label="Default Selection"
+            label={t('filter.widget.select.default_selection')}
             data={optionsForDefaultValue}
             value={config.default_value}
             onChange={config.setDefaultValue}
@@ -76,7 +81,7 @@ export const FilterEditorSelect = observer(function _FilterEditorSelect({ filter
         {staticOptionFields.map((_optionField, optionIndex) => (
           <Flex gap={10} key={optionIndex} sx={{ position: 'relative' }} pr="40px">
             <TextInput
-              label="Label"
+              label={t('common.label')}
               required
               value={config.static_options[optionIndex].label}
               onChange={(e) => {
@@ -85,7 +90,7 @@ export const FilterEditorSelect = observer(function _FilterEditorSelect({ filter
               sx={{ flexGrow: 1 }}
             />
             <TextInput
-              label="Value"
+              label={t('common.value')}
               required
               value={config.static_options[optionIndex].value}
               onChange={(e) => {
@@ -111,14 +116,14 @@ export const FilterEditorSelect = observer(function _FilterEditorSelect({ filter
           sx={{ width: '50%' }}
           mx="auto"
         >
-          Add an Option
+          {t('common.actions.add_an_option')}
         </Button>
       </Stack>
-      <Divider label="Or fetch options from database" labelPosition="center" />
+      <Divider label={t('filter.widget.common.or_fetch_options_from_datasource')} labelPosition="center" />
       <Checkbox
         checked={config.default_selection_count === 1}
         onChange={(e) => config.setDefaultSelectionCount(e.currentTarget.checked ? 1 : 0)}
-        label="Select the first option by default"
+        label={t('filter.widget.select.select_first_option_by_default')}
       />
       <PickQueryForFilter value={config.options_query_id} onChange={config.setOptionsQueryID} />
       <ExpectedStructureForSelect />

dashboard/src/components/filter/filter-settings/filter-setting.tsx

@@ -1,6 +1,6 @@
 import { Box, Checkbox, Divider, Group, MultiSelect, NumberInput, Select, Stack, Text, TextInput } from '@mantine/core';
 import { observer } from 'mobx-react-lite';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useEditContentModelContext } from '~/contexts';
 import { FilterMetaInstance } from '~/model';
 import { FilterEditorCheckbox } from '../filter-checkbox/editor';
@@ -10,6 +10,7 @@ import { FilterEditorSelect } from '../filter-select/editor';
 import { FilterEditorTextInput } from '../filter-text-input/editor';
 import { FilterEditorTreeSelect } from '../filter-tree-select/editor';
 import { PreviewFilter } from './preview-filter';
+import { useTranslation } from 'react-i18next';
 
 const editors = {
   select: FilterEditorSelect,
@@ -21,43 +22,46 @@ const editors = {
 };
 
 export const filterTypeNames = {
-  select: 'Select',
-  'multi-select': 'Multi Select',
-  'tree-select': 'Tree Select',
-  'text-input': 'Text Input',
-  checkbox: 'Checkbox',
-  'date-range': 'Date Range',
+  select: 'filter.widget.names.select',
+  'multi-select': 'filter.widget.names.multi_select',
+  'tree-select': 'filter.widget.names.tree_select',
+  'text-input': 'filter.widget.names.text_input',
+  checkbox: 'filter.widget.names.checkbox',
+  'date-range': 'filter.widget.names.date_range',
 };
 
-const filterTypeOptions = [
-  { label: filterTypeNames['select'], value: 'select' },
-  { label: filterTypeNames['multi-select'], value: 'multi-select' },
-  { label: filterTypeNames['tree-select'], value: 'tree-select' },
-  { label: filterTypeNames['text-input'], value: 'text-input' },
-  { label: filterTypeNames['checkbox'], value: 'checkbox' },
-  { label: filterTypeNames['date-range'], value: 'date-range' },
-];
-
 interface IFilterSetting {
   filter: FilterMetaInstance;
 }
 
 export const FilterSetting = observer(function _FilterSetting({ filter }: IFilterSetting) {
+  const { t, i18n } = useTranslation();
   const model = useEditContentModelContext();
   const FilterEditor = React.useMemo(() => {
     return editors[filter.type];
   }, [filter.type]);
 
+  const filterTypeOptions = useMemo(() => {
+    return [
+      { label: t(filterTypeNames['select']), value: 'select' },
+      { label: t(filterTypeNames['multi-select']), value: 'multi-select' },
+      { label: t(filterTypeNames['tree-select']), value: 'tree-select' },
+      { label: t(filterTypeNames['text-input']), value: 'text-input' },
+      { label: t(filterTypeNames['checkbox']), value: 'checkbox' },
+      { label: t(filterTypeNames['date-range']), value: 'date-range' },
+    ];
+  }, [i18n.language]);
+
   return (
     <Group grow spacing={20} align="top">
       <Box sx={{ maxWidth: '600px' }}>
         <Text pb="md" color="gray">
-          Edit
+          {t('common.titles.edit')}
         </Text>
         <Stack>
           <Group noWrap>
             <NumberInput
-              label="Placement Order"
+              label={t('filter.field.order')}
               required
               value={filter.order}
               onChange={filter.setOrder}
@@ -67,52 +71,46 @@ export const FilterSetting = observer(function _FilterSetting({ filter }: IFilte
             />
             {filter.auto_submit_supported && (
               <Checkbox
-                label="Submit automatically"
+                label={t('filter.field.auto_submit')}
                 checked={filter.auto_submit}
                 onChange={(e) => filter.setAutoSubmit(e.currentTarget.checked)}
                 mt={22}
               />
             )}
           </Group>
           <MultiSelect
-            label="Visible in..."
+            label={t('filter.field.visible_in')}
             data={model.views.options}
             value={[...filter.visibleInViewsIDs]}
             onChange={filter.setVisibleInViewsIDs}
           />
           <TextInput
-            label="Key"
-            placeholder="A unique key to refer"
+            label={t('common.key')}
+            placeholder={t('filter.field.key_placeholder')}
             required
             value={filter.key}
             onChange={(e) => {
               filter.setKey(e.currentTarget.value);
             }}
           />
           <TextInput
-            label="Label"
-            placeholder="Label for this field"
+            label={t('common.label')}
+            placeholder={t('filter.field.label_placeholder')}
             required
             value={filter.label}
             onChange={(e) => {
               filter.setLabel(e.currentTarget.value);
             }}
           />
           <Select
-            label="Widget"
+            label={t('filter.field.widget')}
             data={filterTypeOptions}
             required
             value={filter.type}
             onChange={filter.setType}
             maxDropdownHeight={500}
           />
-          <Divider
-            mb={0}
-            mt={10}
-            variant="dashed"
-            label={`${filterTypeNames[filter.type]} Settings`}
-            labelPosition="center"
-          />
+          <Divider mb={0} mt={10} variant="dashed" labelPosition="center" />
 
           <FilterEditor filter={filter} />
         </Stack>

dashboard/src/components/filter/filter-settings/filter-settings.tsx

@@ -7,8 +7,10 @@ import { useEditContentModelContext } from '~/contexts';
 import { DashboardFilterType, FilterMetaInstance, createFilterTextInputConfig } from '~/model';
 import { FilterSetting } from './filter-setting';
 import './filter-settings.css';
+import { useTranslation } from 'react-i18next';
 
 export const FilterSettings = observer(function _FilterSettings() {
+  const { t } = useTranslation();
   const model = useEditContentModelContext();
   const filters = model.filters.current;
 
@@ -30,8 +32,8 @@ export const FilterSettings = observer(function _FilterSettings() {
   const modals = useModals();
   const removeWithConfirmation = (id: string) => {
     modals.openConfirmModal({
-      title: 'Delete this filter?',
-      labels: { confirm: 'Confirm', cancel: 'Cancel' },
+      title: `${t('filter.delete')}?`,
+      labels: { confirm: t('common.actions.confirm'), cancel: t('common.actions.cancel') },
       onCancel: () => console.log('Cancel'),
       onConfirm: () => model.filters.removeByID(id),
       zIndex: 320,
@@ -65,7 +67,7 @@ export const FilterSettings = observer(function _FilterSettings() {
         <Group sx={{ height: '100%' }}>
           <Stack sx={{ height: '100%' }}>
             <Button size="xs" color="blue" leftIcon={<PlaylistAdd size={20} />} onClick={addFilter}>
-              Add a Filter
+              {t('filter.add')}
             </Button>
             <Tabs.List position="left" sx={{ flexGrow: 1, width: '200px' }}>
               {model.filters.current.map((field) => (
@@ -89,7 +91,7 @@ export const FilterSettings = observer(function _FilterSettings() {
                       leftIcon={<Trash size={20} />}
                       onClick={() => removeWithConfirmation(filter.id)}
                     >
-                      Delete this filter
+                      {t('filter.delete')}
                     </Button>
                   </Group>
                 </Stack>

dashboard/src/components/filter/filter-settings/preview-filter.tsx

@@ -4,11 +4,13 @@ import { observer } from 'mobx-react-lite';
 import React from 'react';
 import { FilterMetaInstance } from '~/model';
 import { Filter } from '../filter';
+import { useTranslation } from 'react-i18next';
 
 interface IPreviewFilter {
   filter: FilterMetaInstance;
 }
 export const PreviewFilter = observer(function _PreviewFilter({ filter }: IPreviewFilter) {
+  const { t } = useTranslation();
   // const [value, setValue] = React.useState(filter.plainDefaultValue);
 
   // React.useEffect(() => {
@@ -23,7 +25,7 @@ export const PreviewFilter = observer(function _PreviewFilter({ filter }: IPrevi
       <Filter filter={filter} value={value} onChange={setValue} /> */}
 
       <Text pt="0" pb="md" color="gray">
-        Config
+        {t('common.titles.config')}
       </Text>
       <Prism mt={22} language="json" colorScheme="dark" noCopy>
         {JSON.stringify(filter, null, 4)}

dashboard/src/components/filter/filter-text-input/editor.tsx

@@ -2,18 +2,20 @@ import { Box, Checkbox, Group, TextInput } from '@mantine/core';
 import { observer } from 'mobx-react-lite';
 import { FilterMetaInstance, FilterTextInputConfigInstance } from '~/model';
 import { CustomDefaultValueEditor } from '../custom-default-value-editor';
+import { useTranslation } from 'react-i18next';
 
 interface IFilterEditorTextInput {
   filter: FilterMetaInstance;
 }
 
 export const FilterEditorTextInput = observer(function _FilterEditorTextInput({ filter }: IFilterEditorTextInput) {
+  const { t } = useTranslation();
   const config = filter.config as FilterTextInputConfigInstance;
   return (
     <>
       <Group>
         <TextInput
-          label="Default Value"
+          label={t('filter.widget.text_input.default_value')}
           value={config.default_value}
           onChange={(e) => {
             config.setDefaultValue(e.currentTarget.value);
@@ -27,7 +29,7 @@ export const FilterEditorTextInput = observer(function _FilterEditorTextInput({
       <Checkbox
         checked={config.required}
         onChange={(e) => config.setRequired(e.currentTarget.checked)}
-        label="Required"
+        label={t('filter.widget.text_input.required')}
       />
     </>
   );

dashboard/src/components/filter/index.tsx

@@ -10,8 +10,10 @@ import { FilterMetaInstance, ViewMetaInstance } from '~/model';
 import { Filter } from './filter';
 import { SearchButton } from './search-button';
 import { useUpdateFilterPreviewValues } from './use-update-filter-preview-values';
+import { useTranslation } from 'react-i18next';
 
 const FilterToggler = ({ opened, toggle }: { opened: boolean; toggle: () => void }) => {
+  const { t } = useTranslation();
   return (
     <Group position="right" ml={-4} mt={-4} mb={opened ? 4 : 0}>
       <Button
@@ -22,7 +24,7 @@ const FilterToggler = ({ opened, toggle }: { opened: boolean; toggle: () => void
         leftIcon={opened ? <IconChevronsUp size={14} /> : <IconChevronsDown size={14} />}
         onClick={toggle}
       >
-        {opened ? 'Hide Filters' : 'Show Filters'}
+        {opened ? t('filter.hide_filters') : t('filter.show_filters')}
       </Button>
     </Group>
   );