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 ( -