diff --git a/packages/pxweb2-ui/src/lib/shared-types/pxTableMetadata.ts b/packages/pxweb2-ui/src/lib/shared-types/pxTableMetadata.ts index c8e3351d8..007838933 100644 --- a/packages/pxweb2-ui/src/lib/shared-types/pxTableMetadata.ts +++ b/packages/pxweb2-ui/src/lib/shared-types/pxTableMetadata.ts @@ -16,6 +16,10 @@ export type PxTableMetadata = { * Table language. */ language: string; + /** + * The available languages for the table. + */ + availableLanguages: string[]; /** * A title for the table that describes the content of it. */ diff --git a/packages/pxweb2/src/app/components/LanguageSwitcher/LanguageSwitcher.spec.tsx b/packages/pxweb2/src/app/components/LanguageSwitcher/LanguageSwitcher.spec.tsx index ff0f34b3a..2bc158145 100644 --- a/packages/pxweb2/src/app/components/LanguageSwitcher/LanguageSwitcher.spec.tsx +++ b/packages/pxweb2/src/app/components/LanguageSwitcher/LanguageSwitcher.spec.tsx @@ -11,6 +11,7 @@ import classes from './LanguageSwitcher.module.scss'; let currentPathname = '/en/tables'; const navigateMock = vi.fn(); let isMobile = false; +let appLanguageFilter: string[] = []; let mockI18nLanguage = 'en'; const changeLanguageMock = vi.fn(); @@ -43,7 +44,7 @@ vi.mock('@pxweb2/pxweb2-ui', () => ({ })); vi.mock('../../context/useApp', () => ({ - default: () => ({ isMobile }), + default: () => ({ isMobile, languageFilter: appLanguageFilter }), })); // Override the global i18n mock for this test file to add controllable behavior @@ -64,6 +65,7 @@ describe('LanguageSwitcher', () => { changeLanguageMock.mockClear(); currentPathname = '/en/tables'; isMobile = false; + appLanguageFilter = []; mockI18nLanguage = 'en'; }); @@ -256,4 +258,32 @@ describe('LanguageSwitcher', () => { expect(select.value).toBe('sv'); }); + + it('enables all languages when app language filter is empty', () => { + appLanguageFilter = []; + + render(); + + const options = screen.getAllByRole('option') as HTMLOptionElement[]; + + expect(options).toHaveLength(4); + expect(options.every((option) => !option.disabled)).toBe(true); + }); + + it('only displays filtered languages when app language filter has values', () => { + appLanguageFilter = ['en', 'sv']; + + render(); + + const options = screen.getAllByRole('option') as HTMLOptionElement[]; + const optionByValue = Object.fromEntries( + options.map((option) => [option.value, option]), + ); + + expect(options).toHaveLength(2); + expect(optionByValue.en).toBeDefined(); + expect(optionByValue.sv).toBeDefined(); + expect(optionByValue.no).toBeUndefined(); + expect(optionByValue.ar).toBeUndefined(); + }); }); diff --git a/packages/pxweb2/src/app/components/LanguageSwitcher/LanguageSwitcher.tsx b/packages/pxweb2/src/app/components/LanguageSwitcher/LanguageSwitcher.tsx index e516388eb..0aabfe691 100644 --- a/packages/pxweb2/src/app/components/LanguageSwitcher/LanguageSwitcher.tsx +++ b/packages/pxweb2/src/app/components/LanguageSwitcher/LanguageSwitcher.tsx @@ -11,7 +11,7 @@ import classes from './LanguageSwitcher.module.scss'; export const LanguageSwitcher = () => { const { t, i18n } = useTranslation(); - const isMobile = useApp().isMobile; + const { isMobile, languageFilter: appLanguageFilter = [] } = useApp(); const config = getConfig(); const navigate = useNavigate(); const location = useLocation(); @@ -26,6 +26,13 @@ export const LanguageSwitcher = () => { setCurrentLang(i18n.language); }, [location.pathname, i18n.language]); + const hasLanguageFilter = appLanguageFilter.length > 0; + const languageOptions = hasLanguageFilter + ? config.language.supportedLanguages.filter((language) => + appLanguageFilter.includes(language.shorthand), + ) + : config.language.supportedLanguages; + const handleLanguageChange = ( event: React.ChangeEvent, ) => { @@ -108,7 +115,7 @@ export const LanguageSwitcher = () => { }} onChange={(event) => handleLanguageChange(event)} > - {config.language.supportedLanguages.map((language) => ( + {languageOptions.map((language) => (