Fix empty language section and TypeError when no languages are available (#1228)

Co-authored-by: swissspidy <841956+swissspidy@users.noreply.github.com>
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Pascal Birchler <pascalb@google.com>

Author: Copilot

.github/workflows/e2e-tests.yml

@@ -52,17 +52,9 @@ jobs:
                   chmod -R 767 ./ # TODO: Possibly integrate in wp-env
                   npm run wp-env start
 
-            # Ensure the wp-content/languages folder exists and is writable.
-            # See https://github.com/WordPress/gutenberg/issues/22515
-            # and https://github.com/WordPress/gutenberg/tree/trunk/packages/env#installing-a-plugin-or-theme-on-the-development-instance
             - name: Prepare tests
               run: |
-                  WP_ENV_DIR=$(npm run wp-env install-path --silent 2>&1 | head -1)
-                  cd $WP_ENV_DIR
-                  mkdir -p tests-WordPress/wp-content/languages tests-WordPress/wp-content/upgrade
-                  chmod -R 767 tests-WordPress/wp-content/languages tests-WordPress/wp-content/upgrade
-                  docker compose run --rm -u $(id -u) -e HOME=/tmp tests-cli wp language core install de_CH de_DE es_ES fr_FR it_IT
-                  cd -
+                  npm run wp-env run tests-cli wp language core install de_CH de_DE es_ES fr_FR it_IT
 
             - name: Run tests
               run: npm run test:e2e

.wp-env.json

@@ -4,6 +4,7 @@
 		".",
 		"./tests/e2e/plugins/custom-internationalized-plugin",
 		"./tests/e2e/plugins/merge-translations",
+		"./tests/e2e/plugins/no-languages",
 		"./tests/e2e/plugins/no-merge-translations"
 	]
 }

package-lock.json

@@ -34,6 +34,7 @@
 		"@testing-library/user-event": "^14.6.1",
 		"@types/expect-puppeteer": "^5.0.6",
 		"@types/jest-environment-puppeteer": "^5.0.6",
+		"@wordpress/e2e-test-utils-playwright": "^1.41.0",
 		"@wordpress/env": "^11.1.0",
 		"@wordpress/scripts": "^31.0.0",
 		"@wp-now/wp-now": "^0.1.74",

package.json

@@ -13,6 +13,7 @@ interface ActiveLocalesProps {
 	showOptionSiteDefault?: boolean;
 	setLanguages: ( cb: ( languages: Language[] ) => Language[] ) => void;
 	setSelectedLanguage: ( language: Language ) => void;
+	hasAnyLanguages: boolean;
 }
 
 export function ActiveLocales( {
@@ -21,6 +22,7 @@ export function ActiveLocales( {
 	showOptionSiteDefault = false,
 	selectedLanguage,
 	setSelectedLanguage,
+	hasAnyLanguages,
 }: ActiveLocalesProps ) {
 	const listRef = useRef< HTMLUListElement >();
 
@@ -184,7 +186,12 @@ export function ActiveLocales( {
 		<div className="active-locales wp-clearfix">
 			{ isEmpty && (
 				<div className="active-locales-empty-message">
-					{ __( 'Nothing set.', 'preferred-languages' ) }
+					{ hasAnyLanguages
+						? __( 'Nothing set.', 'preferred-languages' )
+						: __(
+								'No languages available.',
+								'preferred-languages'
+						  ) }
 					<br />
 					{ emptyMessage }
 				</div>

src/components/ActiveLocales.tsx

@@ -157,6 +157,15 @@ function InactiveLocalesSelect( {
 					) }
 				</optgroup>
 			) }
+			{ ! hasItems && (
+				<option
+					key="unavailable"
+					value="unavailable"
+					lang="unavailable"
+				>
+					{ __( 'No languages available.', 'preferred-languages' ) }
+				</option>
+			) }
 		</SelectControl>
 	);
 }

src/components/InactiveLocales.tsx

@@ -138,6 +138,8 @@ function PreferredLanguages( props: PreferredLanguagesProps ) {
 		props.preferredLanguages[ 0 ]
 	);
 
+	const hasAnyLanguages = allLanguages.length > 0;
+
 	const inactiveLocales = allLanguages.filter(
 		( language ) =>
 			! preferredLanguages.find(
@@ -202,6 +204,7 @@ function PreferredLanguages( props: PreferredLanguagesProps ) {
 					showOptionSiteDefault={ showOptionSiteDefault }
 					selectedLanguage={ selectedLanguage }
 					setSelectedLanguage={ setSelectedLanguage }
+					hasAnyLanguages={ hasAnyLanguages }
 				/>
 				<InactiveLocales
 					languages={ inactiveLocales }

src/components/PreferredLanguages.tsx

@@ -171,7 +171,7 @@ describe( 'PreferredLanguages', () => {
 				screen.getByRole( 'option', { name: /Español/ } )
 			).toHaveAttribute( 'aria-selected', 'true' );
 
-			expect( dropdown ).not.toHaveValue();
+			expect( dropdown ).toHaveValue( 'unavailable' );
 			expect( dropdown ).toBeDisabled();
 			expect(
 				screen.getByRole( 'button', { name: /Add/ } )

src/components/test/PreferredLanguages.tsx

@@ -15,17 +15,6 @@ declare global {
 domReady( () => {
 	const props = window.PreferredLanguages;
 
-	// If there are no installed languages and no available translations.
-	if ( ! props.allLanguages.length ) {
-		// Settings -> General.
-		document.querySelector( '.site-preferred-languages-wrap' )?.remove();
-
-		// Network Settings.
-		document.querySelector( '.network-preferred-languages-wrap' )?.remove();
-
-		return;
-	}
-
 	const container = document.querySelector( '#preferred-languages-root' );
 
 	// Replace original language settings with the Preferred Languages UI.

src/preferred-languages.tsx

@@ -0,0 +1,12 @@
+<?php
+/*
+Plugin Name: No Languages
+Plugin URI: https://wordpress.org/
+Description: For testing purposes only. Removes all available languages and translations.
+Version: 1.0.0
+Text Domain: no-languages
+Domain Path: languages/
+*/
+
+add_filter( 'file_mod_allowed', '__return_false' );
+add_filter( 'get_available_languages', '__return_empty_array' );