diff --git a/superset-frontend/src/components/Menu/LanguagePicker.test.tsx b/superset-frontend/src/components/Menu/LanguagePicker.test.tsx
index c82cd50698..6fa5fe26eb 100644
--- a/superset-frontend/src/components/Menu/LanguagePicker.test.tsx
+++ b/superset-frontend/src/components/Menu/LanguagePicker.test.tsx
@@ -19,6 +19,7 @@
import React from 'react';
import { render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
+import { MainNav as Menu } from 'src/common/components';
import LanguagePicker from './LanguagePicker';
const mockedProps = {
@@ -38,18 +39,30 @@ const mockedProps = {
};
test('should render', () => {
- const { container } = render();
+ const { container } = render(
+
,
+ );
expect(container).toBeInTheDocument();
});
-test('should render the combobox', () => {
- render();
- expect(screen.getByRole('combobox')).toBeInTheDocument();
+test('should render the language picker', () => {
+ render(
+ ,
+ );
+ expect(screen.getByLabelText('Languages')).toBeInTheDocument();
});
test('should render the items', async () => {
- render();
- userEvent.click(screen.getByRole('combobox'));
+ render(
+ ,
+ );
+ userEvent.hover(screen.getByRole('button'));
expect(await screen.findByText('English')).toBeInTheDocument();
expect(await screen.findByText('Italian')).toBeInTheDocument();
});
diff --git a/superset-frontend/src/components/Menu/LanguagePicker.tsx b/superset-frontend/src/components/Menu/LanguagePicker.tsx
index ec271d064a..1f0f49d9bb 100644
--- a/superset-frontend/src/components/Menu/LanguagePicker.tsx
+++ b/superset-frontend/src/components/Menu/LanguagePicker.tsx
@@ -16,10 +16,12 @@
* specific language governing permissions and limitations
* under the License.
*/
-import React, { useState } from 'react';
-import { Select } from 'src/common/components';
-import { styled, useTheme } from '@superset-ui/core';
-import Icons from 'src/components/Icons';
+import React from 'react';
+import { MainNav as Menu } from 'src/common/components';
+import { styled } from '@superset-ui/core';
+import Icon from 'src/components/Icon';
+
+const { SubMenu } = Menu;
export interface Languages {
[key: string]: {
@@ -34,81 +36,50 @@ interface LanguagePickerProps {
languages: Languages;
}
-const dropdownWidth = 150;
-
const StyledLabel = styled.div`
display: flex;
align-items: center;
& i {
- margin-right: ${({ theme }) => theme.gridUnit}px;
+ margin-right: ${({ theme }) => theme.gridUnit * 2}px;
}
- & span {
+ & a {
display: block;
- width: ${dropdownWidth}px;
+ width: 150px;
word-wrap: break-word;
- white-space: normal;
+ text-decoration: none;
}
`;
-const StyledFlag = styled.div`
+const StyledFlag = styled.i`
margin-top: 2px;
`;
-const StyledIcon = styled(Icons.TriangleDown)`
- ${({ theme }) => `
- margin-top: -${theme.gridUnit}px;
- margin-left: -${theme.gridUnit * 2}px;
- `}
-`;
-
-export default function LanguagePicker({
- locale,
- languages,
-}: LanguagePickerProps) {
- const theme = useTheme();
- const [open, setOpen] = useState(false);
-
- const options = Object.keys(languages).map(langKey => ({
- label: (
-
- {' '}
- {languages[langKey].name}
-
- ),
- value: langKey,
- flag: (
-
-
-
- ),
- }));
-
+export default function LanguagePicker(props: LanguagePickerProps) {
+ const { locale, languages, ...rest } = props;
return (
-