You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by yo...@apache.org on 2022/09/03 04:36:30 UTC

[superset] branch add-translation-for-DatePicker created (now 9ebf3c3c00)

This is an automated email from the ASF dual-hosted git repository.

yongjiezhao pushed a change to branch add-translation-for-DatePicker
in repository https://gitbox.apache.org/repos/asf/superset.git


      at 9ebf3c3c00 adding unit test, and get local from Redux store

This branch includes the following new commits:

     new 49b583bef8 fix : add locale to activate french translation for DatePicker component
     new acbe4b708d fix : use list of local to choose the right one in datePicker
     new 33357b99f0 fix : add mapping between locales of superset and antd locales
     new e92c003bcc fix : change import bootstrapData
     new 1483f7c4cf fix : correction fail import
     new a8c2d5dfd4 Fix CI : revert tsconfig.json and add ts-ignore on import
     new 738f78b38b Fix CI : revert tsconfig.json and add ts-ignore on import
     new 9ebf3c3c00 adding unit test, and get local from Redux store

The 8 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.



[superset] 04/08: fix : change import bootstrapData

Posted by yo...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

yongjiezhao pushed a commit to branch add-translation-for-DatePicker
in repository https://gitbox.apache.org/repos/asf/superset.git

commit e92c003bccafc6738914267554b79fd4c33f0fb9
Author: aurelie.ehanno <au...@kosmos.fr>
AuthorDate: Fri May 20 15:50:16 2022 -0400

    fix : change import bootstrapData
---
 .../components/controls/DateFilterControl/components/CustomFrame.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx
index 2d1ad05886..6cf5106f3a 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx
@@ -42,7 +42,7 @@ import {
   FrameComponentProps,
 } from 'src/explore/components/controls/DateFilterControl/types';
 import { locales } from 'antd/dist/antd-with-locales';
-import { bootstrapData } from '../../../../../preamble';
+import { bootstrapData } from 'src/preamble';
 
 const languages = {
   en: 'en_US',


[superset] 06/08: Fix CI : revert tsconfig.json and add ts-ignore on import

Posted by yo...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

yongjiezhao pushed a commit to branch add-translation-for-DatePicker
in repository https://gitbox.apache.org/repos/asf/superset.git

commit a8c2d5dfd45bcfe7fa9163d6fa2a405dff9c2888
Author: Kevin Dethelot <ke...@kosmos.fr>
AuthorDate: Thu Sep 1 14:19:45 2022 -0400

    Fix CI : revert tsconfig.json and add ts-ignore on import
---
 .../components/controls/DateFilterControl/components/CustomFrame.tsx   | 3 ++-
 superset-frontend/tsconfig.json                                        | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx
index 6cf5106f3a..b24ab70268 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx
@@ -41,7 +41,8 @@ import {
   CustomRangeKey,
   FrameComponentProps,
 } from 'src/explore/components/controls/DateFilterControl/types';
-import { locales } from 'antd/dist/antd-with-locales';
+// @ts-ignore
+import locales from 'antd/dist/antd-with-locales';
 import { bootstrapData } from 'src/preamble';
 
 const languages = {
diff --git a/superset-frontend/tsconfig.json b/superset-frontend/tsconfig.json
index 7ba09344ab..9dba1c3f89 100644
--- a/superset-frontend/tsconfig.json
+++ b/superset-frontend/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     /* Type Checking */
-    "noImplicitAny": false,
+    "noImplicitAny": true,
     "noImplicitReturns": true,
     "noImplicitThis": true,
     "noUnusedLocals": true,


[superset] 07/08: Fix CI : revert tsconfig.json and add ts-ignore on import

Posted by yo...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

yongjiezhao pushed a commit to branch add-translation-for-DatePicker
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 738f78b38b539f058574eaf378cefb8bff148a4a
Author: Kevin Dethelot <ke...@kosmos.fr>
AuthorDate: Fri Sep 2 09:28:20 2022 -0400

    Fix CI : revert tsconfig.json and add ts-ignore on import
---
 .../components/controls/DateFilterControl/components/CustomFrame.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx
index b24ab70268..e55d3ad779 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx
@@ -42,7 +42,7 @@ import {
   FrameComponentProps,
 } from 'src/explore/components/controls/DateFilterControl/types';
 // @ts-ignore
-import locales from 'antd/dist/antd-with-locales';
+import { locales } from 'antd/dist/antd-with-locales';
 import { bootstrapData } from 'src/preamble';
 
 const languages = {


[superset] 03/08: fix : add mapping between locales of superset and antd locales

Posted by yo...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

yongjiezhao pushed a commit to branch add-translation-for-DatePicker
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 33357b99f0e4b0bd38a6cd2d2a8ab54a8bf39ad7
Author: aurelie.ehanno <au...@kosmos.fr>
AuthorDate: Fri May 20 15:47:47 2022 -0400

    fix : add mapping between locales of superset and antd locales
---
 .../DateFilterControl/components/CustomFrame.tsx   | 34 ++++++++++++++--------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx
index edcecc5069..2d1ad05886 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx
@@ -44,20 +44,30 @@ import {
 import { locales } from 'antd/dist/antd-with-locales';
 import { bootstrapData } from '../../../../../preamble';
 
+const languages = {
+  en: 'en_US',
+  fr: 'fr_FR',
+  es: 'es_ES',
+  it: 'it_IT',
+  zh: 'zh_CN',
+  ja: 'ja_JP',
+  de: 'de_DE',
+  pt: 'pt_PT',
+  pt_BR: 'pt_BR',
+  ru: 'ru_RU',
+  ko: 'ko_KR',
+  sk: 'sk_SK',
+  sl: 'sl_SI',
+  nl: 'nl_NL',
+};
+
 export function CustomFrame(props: FrameComponentProps) {
-  let localeFiltrer = locales.en_US;
-  // There are two locale with 'fr', one for France and one for Belgium so for the moment by default we take France
-  // TODO : Once the correction is done on antd, we have to remove the if
-  if (bootstrapData.common.locale === 'fr') {
-    localeFiltrer = locales.fr_FR.DatePicker;
-  } else {
-    for (const locale in locales) {
-      if (locales[locale].locale === bootstrapData.common.locale) {
-        localeFiltrer = locales[locale].DatePicker;
-        break;
-      }
-    }
+  let localLanguage = languages[bootstrapData.common.locale];
+  if (localLanguage == null) {
+    localLanguage = 'en_US';
   }
+  const localeFiltrer = locales[localLanguage].DatePicker;
+
   const { customRange, matchedFlag } = customTimeRangeDecode(props.value);
   if (!matchedFlag) {
     props.onChange(customTimeRangeEncode(customRange));


[superset] 01/08: fix : add locale to activate french translation for DatePicker component

Posted by yo...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

yongjiezhao pushed a commit to branch add-translation-for-DatePicker
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 49b583bef8e0a65a9c940517252bcfee94dd6310
Author: aurelie.ehanno <au...@kosmos.fr>
AuthorDate: Fri May 13 15:13:19 2022 -0400

    fix : add locale to activate french translation for DatePicker component
---
 .../controls/DateFilterControl/components/CustomFrame.tsx      | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx
index 48637f36e3..c457ccfc3c 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx
@@ -41,9 +41,16 @@ import {
   CustomRangeKey,
   FrameComponentProps,
 } from 'src/explore/components/controls/DateFilterControl/types';
+import { bootstrapData } from 'src/preamble';
+import localeFR from 'antd/es/date-picker/locale/fr_FR';
+import localeEN from 'antd/es/date-picker/locale/en_US';
 
 export function CustomFrame(props: FrameComponentProps) {
   const { customRange, matchedFlag } = customTimeRangeDecode(props.value);
+  let locale = localeEN;
+  if (bootstrapData.common.locale === 'fr') {
+    locale = localeFR;
+  }
   if (!matchedFlag) {
     props.onChange(customTimeRangeEncode(customRange));
   }
@@ -132,6 +139,7 @@ export function CustomFrame(props: FrameComponentProps) {
                   onChange('sinceDatetime', datetime.format(MOMENT_FORMAT))
                 }
                 allowClear={false}
+                locale={locale}
               />
             </Row>
           )}
@@ -184,6 +192,7 @@ export function CustomFrame(props: FrameComponentProps) {
                   onChange('untilDatetime', datetime.format(MOMENT_FORMAT))
                 }
                 allowClear={false}
+                locale={locale}
               />
             </Row>
           )}
@@ -241,6 +250,7 @@ export function CustomFrame(props: FrameComponentProps) {
                   }
                   allowClear={false}
                   className="control-anchor-to-datetime"
+                  locale={locale}
                 />
               </Col>
             )}


[superset] 05/08: fix : correction fail import

Posted by yo...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

yongjiezhao pushed a commit to branch add-translation-for-DatePicker
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 1483f7c4cf62d1431b5947bf5a1f6be67dc1bf4c
Author: aurelie.ehanno <au...@kosmos.fr>
AuthorDate: Thu Jul 7 15:07:32 2022 -0400

    fix : correction fail import
---
 superset-frontend/tsconfig.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/superset-frontend/tsconfig.json b/superset-frontend/tsconfig.json
index 9dba1c3f89..7ba09344ab 100644
--- a/superset-frontend/tsconfig.json
+++ b/superset-frontend/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     /* Type Checking */
-    "noImplicitAny": true,
+    "noImplicitAny": false,
     "noImplicitReturns": true,
     "noImplicitThis": true,
     "noUnusedLocals": true,


[superset] 08/08: adding unit test, and get local from Redux store

Posted by yo...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

yongjiezhao pushed a commit to branch add-translation-for-DatePicker
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 9ebf3c3c00ecc80aa4747e9113a055423d47ffa3
Author: Yongjie Zhao <yo...@gmail.com>
AuthorDate: Sat Sep 3 12:24:57 2022 +0800

    adding unit test, and get local from Redux store
---
 .../components/CustomFrame.test.tsx                | 101 ++++++++++++++++++---
 .../DateFilterControl/components/CustomFrame.tsx   |  41 +++------
 .../controls/DateFilterControl/utils/constants.ts  |  17 ++++
 superset-frontend/src/explore/types.ts             |   1 +
 4 files changed, 119 insertions(+), 41 deletions(-)

diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.test.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.test.tsx
index 6cb5c4f56c..aa7da5fedf 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.test.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.test.tsx
@@ -17,6 +17,9 @@
  * under the License.
  */
 import React from 'react';
+import thunk from 'redux-thunk';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
 import { render, screen } from 'spec/helpers/testing-library';
 import userEvent from '@testing-library/user-event';
 import { CustomFrame } from '.';
@@ -29,8 +32,17 @@ const specificValue = '2021-03-16T00:00:00 : 2021-03-17T00:00:00';
 const relativeNowValue = `DATEADD(DATETIME("now"), -7, day) : DATEADD(DATETIME("now"), 7, day)`;
 const relativeTodayValue = `DATEADD(DATETIME("today"), -7, day) : DATEADD(DATETIME("today"), 7, day)`;
 
+const mockStore = configureStore([thunk]);
+const store = mockStore({
+  common: { locale: 'en' },
+});
+
 test('renders with default props', () => {
-  render(<CustomFrame onChange={jest.fn()} value={emptyValue} />);
+  render(
+    <Provider store={store}>
+      <CustomFrame onChange={jest.fn()} value={emptyValue} />
+    </Provider>,
+  );
   expect(screen.getByText('Configure custom time range')).toBeInTheDocument();
   expect(screen.getByText('Relative Date/Time')).toBeInTheDocument();
   expect(screen.getByRole('spinbutton')).toBeInTheDocument();
@@ -40,13 +52,21 @@ test('renders with default props', () => {
 });
 
 test('renders since and until with specific date/time', () => {
-  render(<CustomFrame onChange={jest.fn()} value={specificValue} />);
+  render(
+    <Provider store={store}>
+      <CustomFrame onChange={jest.fn()} value={specificValue} />
+    </Provider>,
+  );
   expect(screen.getAllByText('Specific Date/Time').length).toBe(2);
   expect(screen.getAllByRole('img', { name: 'calendar' }).length).toBe(2);
 });
 
 test('renders since and until with relative date/time', () => {
-  render(<CustomFrame onChange={jest.fn()} value={relativeNowValue} />);
+  render(
+    <Provider store={store}>
+      <CustomFrame onChange={jest.fn()} value={relativeNowValue} />
+    </Provider>,
+  );
   expect(screen.getAllByText('Relative Date/Time').length).toBe(2);
   expect(screen.getAllByRole('spinbutton').length).toBe(2);
   expect(screen.getByText('Days Before')).toBeInTheDocument();
@@ -54,17 +74,29 @@ test('renders since and until with relative date/time', () => {
 });
 
 test('renders since and until with Now option', () => {
-  render(<CustomFrame onChange={jest.fn()} value={nowValue} />);
+  render(
+    <Provider store={store}>
+      <CustomFrame onChange={jest.fn()} value={nowValue} />
+    </Provider>,
+  );
   expect(screen.getAllByText('Now').length).toBe(2);
 });
 
 test('renders since and until with Midnight option', () => {
-  render(<CustomFrame onChange={jest.fn()} value={todayValue} />);
+  render(
+    <Provider store={store}>
+      <CustomFrame onChange={jest.fn()} value={todayValue} />
+    </Provider>,
+  );
   expect(screen.getAllByText('Midnight').length).toBe(2);
 });
 
 test('renders anchor with now option', () => {
-  render(<CustomFrame onChange={jest.fn()} value={relativeNowValue} />);
+  render(
+    <Provider store={store}>
+      <CustomFrame onChange={jest.fn()} value={relativeNowValue} />
+    </Provider>,
+  );
   expect(screen.getByText('Anchor to')).toBeInTheDocument();
   expect(screen.getByRole('radio', { name: 'NOW' })).toBeInTheDocument();
   expect(screen.getByRole('radio', { name: 'Date/Time' })).toBeInTheDocument();
@@ -72,7 +104,11 @@ test('renders anchor with now option', () => {
 });
 
 test('renders anchor with date/time option', () => {
-  render(<CustomFrame onChange={jest.fn()} value={relativeTodayValue} />);
+  render(
+    <Provider store={store}>
+      <CustomFrame onChange={jest.fn()} value={relativeTodayValue} />
+    </Provider>,
+  );
   expect(screen.getByText('Anchor to')).toBeInTheDocument();
   expect(screen.getByRole('radio', { name: 'NOW' })).toBeInTheDocument();
   expect(screen.getByRole('radio', { name: 'Date/Time' })).toBeInTheDocument();
@@ -81,21 +117,33 @@ test('renders anchor with date/time option', () => {
 
 test('triggers onChange when the anchor changes', () => {
   const onChange = jest.fn();
-  render(<CustomFrame onChange={onChange} value={relativeNowValue} />);
+  render(
+    <Provider store={store}>
+      <CustomFrame onChange={onChange} value={relativeNowValue} />
+    </Provider>,
+  );
   userEvent.click(screen.getByRole('radio', { name: 'Date/Time' }));
   expect(onChange).toHaveBeenCalled();
 });
 
 test('triggers onChange when the value changes', () => {
   const onChange = jest.fn();
-  render(<CustomFrame onChange={onChange} value={emptyValue} />);
+  render(
+    <Provider store={store}>
+      <CustomFrame onChange={onChange} value={emptyValue} />
+    </Provider>,
+  );
   userEvent.click(screen.getByRole('img', { name: 'up' }));
   expect(onChange).toHaveBeenCalled();
 });
 
 test('triggers onChange when the mode changes', () => {
   const onChange = jest.fn();
-  render(<CustomFrame onChange={onChange} value={todayNowValue} />);
+  render(
+    <Provider store={store}>
+      <CustomFrame onChange={onChange} value={todayNowValue} />
+    </Provider>,
+  );
   userEvent.click(screen.getByTitle('Midnight'));
   userEvent.click(screen.getByTitle('Relative Date/Time'));
   userEvent.click(screen.getAllByTitle('Now')[1]);
@@ -105,7 +153,11 @@ test('triggers onChange when the mode changes', () => {
 
 test('triggers onChange when the grain changes', async () => {
   const onChange = jest.fn();
-  render(<CustomFrame onChange={onChange} value={relativeNowValue} />);
+  render(
+    <Provider store={store}>
+      <CustomFrame onChange={onChange} value={relativeNowValue} />
+    </Provider>,
+  );
   userEvent.click(screen.getByText('Days Before'));
   userEvent.click(screen.getByText('Weeks Before'));
   userEvent.click(screen.getByText('Days After'));
@@ -115,7 +167,11 @@ test('triggers onChange when the grain changes', async () => {
 
 test('triggers onChange when the date changes', async () => {
   const onChange = jest.fn();
-  render(<CustomFrame onChange={onChange} value={specificValue} />);
+  render(
+    <Provider store={store}>
+      <CustomFrame onChange={onChange} value={specificValue} />
+    </Provider>,
+  );
   const inputs = screen.getAllByPlaceholderText('Select date');
   userEvent.click(inputs[0]);
   userEvent.click(screen.getAllByText('Now')[0]);
@@ -123,3 +179,24 @@ test('triggers onChange when the date changes', async () => {
   userEvent.click(screen.getAllByText('Now')[1]);
   expect(onChange).toHaveBeenCalledTimes(2);
 });
+
+test('should translate Date Picker', () => {
+  const onChange = jest.fn();
+  const store = mockStore({
+    common: { locale: 'fr' },
+  });
+  render(
+    <Provider store={store}>
+      <CustomFrame onChange={onChange} value={specificValue} />
+    </Provider>,
+  );
+  userEvent.click(screen.getAllByRole('img', { name: 'calendar' })[0]);
+  expect(screen.getByText('2021')).toBeInTheDocument();
+  expect(screen.getByText('lu')).toBeInTheDocument();
+  expect(screen.getByText('ma')).toBeInTheDocument();
+  expect(screen.getByText('me')).toBeInTheDocument();
+  expect(screen.getByText('je')).toBeInTheDocument();
+  expect(screen.getByText('ve')).toBeInTheDocument();
+  expect(screen.getByText('sa')).toBeInTheDocument();
+  expect(screen.getByText('di')).toBeInTheDocument();
+});
diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx
index e55d3ad779..7f22125945 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx
@@ -17,9 +17,12 @@
  * under the License.
  */
 import React from 'react';
+import { useSelector } from 'react-redux';
 import { t } from '@superset-ui/core';
 import { Moment } from 'moment';
 import { isInteger } from 'lodash';
+// @ts-ignore
+import { locales } from 'antd/dist/antd-with-locales';
 import { Col, Row } from 'src/components';
 import { InputNumber } from 'src/components/Input';
 import { DatePicker } from 'src/components/DatePicker';
@@ -36,39 +39,15 @@ import {
   customTimeRangeDecode,
   customTimeRangeEncode,
   dttmToMoment,
+  LOCALE_MAPPING,
 } from 'src/explore/components/controls/DateFilterControl/utils';
 import {
   CustomRangeKey,
   FrameComponentProps,
 } from 'src/explore/components/controls/DateFilterControl/types';
-// @ts-ignore
-import { locales } from 'antd/dist/antd-with-locales';
-import { bootstrapData } from 'src/preamble';
-
-const languages = {
-  en: 'en_US',
-  fr: 'fr_FR',
-  es: 'es_ES',
-  it: 'it_IT',
-  zh: 'zh_CN',
-  ja: 'ja_JP',
-  de: 'de_DE',
-  pt: 'pt_PT',
-  pt_BR: 'pt_BR',
-  ru: 'ru_RU',
-  ko: 'ko_KR',
-  sk: 'sk_SK',
-  sl: 'sl_SI',
-  nl: 'nl_NL',
-};
+import { ExplorePageState } from 'src/explore/types';
 
 export function CustomFrame(props: FrameComponentProps) {
-  let localLanguage = languages[bootstrapData.common.locale];
-  if (localLanguage == null) {
-    localLanguage = 'en_US';
-  }
-  const localeFiltrer = locales[localLanguage].DatePicker;
-
   const { customRange, matchedFlag } = customTimeRangeDecode(props.value);
   if (!matchedFlag) {
     props.onChange(customTimeRangeEncode(customRange));
@@ -131,6 +110,10 @@ export function CustomFrame(props: FrameComponentProps) {
     }
   }
 
+  const localFromFlaskBabel =
+    useSelector((state: ExplorePageState) => state.common.locale) || 'en';
+  const currentLocale = locales[LOCALE_MAPPING[localFromFlaskBabel]].DatePicker;
+
   return (
     <div data-test="custom-frame">
       <div className="section-title">{t('Configure custom time range')}</div>
@@ -158,7 +141,7 @@ export function CustomFrame(props: FrameComponentProps) {
                   onChange('sinceDatetime', datetime.format(MOMENT_FORMAT))
                 }
                 allowClear={false}
-                locale={localeFiltrer}
+                locale={currentLocale}
               />
             </Row>
           )}
@@ -211,7 +194,7 @@ export function CustomFrame(props: FrameComponentProps) {
                   onChange('untilDatetime', datetime.format(MOMENT_FORMAT))
                 }
                 allowClear={false}
-                locale={localeFiltrer}
+                locale={currentLocale}
               />
             </Row>
           )}
@@ -269,7 +252,7 @@ export function CustomFrame(props: FrameComponentProps) {
                   }
                   allowClear={false}
                   className="control-anchor-to-datetime"
-                  locale={localeFiltrer}
+                  locale={currentLocale}
                 />
               </Col>
             )}
diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/utils/constants.ts b/superset-frontend/src/explore/components/controls/DateFilterControl/utils/constants.ts
index 99dac1bdbe..ca4a1f344d 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/utils/constants.ts
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/utils/constants.ts
@@ -114,3 +114,20 @@ export const SEVEN_DAYS_AGO = moment()
   .subtract(7, 'days')
   .format(MOMENT_FORMAT);
 export const MIDNIGHT = moment().utc().startOf('day').format(MOMENT_FORMAT);
+
+export const LOCALE_MAPPING = {
+  en: 'en_US',
+  fr: 'fr_FR',
+  es: 'es_ES',
+  it: 'it_IT',
+  zh: 'zh_CN',
+  ja: 'ja_JP',
+  de: 'de_DE',
+  pt: 'pt_PT',
+  pt_BR: 'pt_BR',
+  ru: 'ru_RU',
+  ko: 'ko_KR',
+  sk: 'sk_SK',
+  sl: 'sl_SI',
+  nl: 'nl_NL',
+};
diff --git a/superset-frontend/src/explore/types.ts b/superset-frontend/src/explore/types.ts
index 8518f51097..ec92a0c1ea 100644
--- a/superset-frontend/src/explore/types.ts
+++ b/superset-frontend/src/explore/types.ts
@@ -83,6 +83,7 @@ export interface ExplorePageState {
   common: {
     flash_messages: string[];
     conf: JsonObject;
+    locale: string;
   };
   charts: { [key: number]: ChartState };
   datasources: { [key: string]: Dataset };


[superset] 02/08: fix : use list of local to choose the right one in datePicker

Posted by yo...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

yongjiezhao pushed a commit to branch add-translation-for-DatePicker
in repository https://gitbox.apache.org/repos/asf/superset.git

commit acbe4b708d65c02d433c3ee62594f308f115b3fd
Author: aurelie.ehanno <au...@kosmos.fr>
AuthorDate: Wed May 18 14:33:09 2022 -0400

    fix : use list of local to choose the right one in datePicker
---
 .../DateFilterControl/components/CustomFrame.tsx   | 26 ++++++++++++++--------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx
index c457ccfc3c..edcecc5069 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx
@@ -41,16 +41,24 @@ import {
   CustomRangeKey,
   FrameComponentProps,
 } from 'src/explore/components/controls/DateFilterControl/types';
-import { bootstrapData } from 'src/preamble';
-import localeFR from 'antd/es/date-picker/locale/fr_FR';
-import localeEN from 'antd/es/date-picker/locale/en_US';
+import { locales } from 'antd/dist/antd-with-locales';
+import { bootstrapData } from '../../../../../preamble';
 
 export function CustomFrame(props: FrameComponentProps) {
-  const { customRange, matchedFlag } = customTimeRangeDecode(props.value);
-  let locale = localeEN;
+  let localeFiltrer = locales.en_US;
+  // There are two locale with 'fr', one for France and one for Belgium so for the moment by default we take France
+  // TODO : Once the correction is done on antd, we have to remove the if
   if (bootstrapData.common.locale === 'fr') {
-    locale = localeFR;
+    localeFiltrer = locales.fr_FR.DatePicker;
+  } else {
+    for (const locale in locales) {
+      if (locales[locale].locale === bootstrapData.common.locale) {
+        localeFiltrer = locales[locale].DatePicker;
+        break;
+      }
+    }
   }
+  const { customRange, matchedFlag } = customTimeRangeDecode(props.value);
   if (!matchedFlag) {
     props.onChange(customTimeRangeEncode(customRange));
   }
@@ -139,7 +147,7 @@ export function CustomFrame(props: FrameComponentProps) {
                   onChange('sinceDatetime', datetime.format(MOMENT_FORMAT))
                 }
                 allowClear={false}
-                locale={locale}
+                locale={localeFiltrer}
               />
             </Row>
           )}
@@ -192,7 +200,7 @@ export function CustomFrame(props: FrameComponentProps) {
                   onChange('untilDatetime', datetime.format(MOMENT_FORMAT))
                 }
                 allowClear={false}
-                locale={locale}
+                locale={localeFiltrer}
               />
             </Row>
           )}
@@ -250,7 +258,7 @@ export function CustomFrame(props: FrameComponentProps) {
                   }
                   allowClear={false}
                   className="control-anchor-to-datetime"
-                  locale={locale}
+                  locale={localeFiltrer}
                 />
               </Col>
             )}