From 6d7a23eebb92ba799f657b25f5f3d6e8e4408db8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Eduardo=20Sanz=20Garc=C3=ADa?= <esanz-garcia@gitlab.com>
Date: Wed, 31 Jan 2024 18:24:12 +0000
Subject: [PATCH] Default to English the language switcher
Instead of crashing the language switcher componte when the cookie
doesn't contain a `preferred_language`, now it defaults to English.
Defensive programming.
---
.../javascripts/language_switcher/components/app.vue | 4 ++--
app/assets/javascripts/language_switcher/constants.js | 6 ++++++
app/assets/javascripts/language_switcher/index.js | 10 ++++++----
spec/frontend/language_switcher/components/app_spec.js | 9 +++++----
spec/frontend/language_switcher/mock_data.js | 5 +----
5 files changed, 20 insertions(+), 14 deletions(-)
diff --git a/app/assets/javascripts/language_switcher/components/app.vue b/app/assets/javascripts/language_switcher/components/app.vue
index f00290d0e466..22b0aeb98358 100644
--- a/app/assets/javascripts/language_switcher/components/app.vue
+++ b/app/assets/javascripts/language_switcher/components/app.vue
@@ -3,7 +3,7 @@ import { GlCollapsibleListbox, GlLink } from '@gitlab/ui';
import { __ } from '~/locale';
import { setCookie } from '~/lib/utils/common_utils';
import { helpPagePath } from '~/helpers/help_page_helper';
-import { PREFERRED_LANGUAGE_COOKIE_KEY } from '../constants';
+import { PREFERRED_LANGUAGE_COOKIE_KEY, EN } from '../constants';
const HELP_TRANSLATE_MSG = __('Help translate to your language');
const HELP_TRANSLATE_HREF = helpPagePath('/development/i18n/translation.md');
@@ -18,7 +18,7 @@ export default {
default: [],
},
preferredLocale: {
- default: {},
+ default: EN,
},
},
data() {
diff --git a/app/assets/javascripts/language_switcher/constants.js b/app/assets/javascripts/language_switcher/constants.js
index b5c0613ac018..83f5d79510fe 100644
--- a/app/assets/javascripts/language_switcher/constants.js
+++ b/app/assets/javascripts/language_switcher/constants.js
@@ -1 +1,7 @@
export const PREFERRED_LANGUAGE_COOKIE_KEY = 'preferred_language';
+
+export const EN = {
+ value: 'en',
+ // eslint-disable-next-line @gitlab/require-i18n-strings
+ text: 'English',
+};
diff --git a/app/assets/javascripts/language_switcher/index.js b/app/assets/javascripts/language_switcher/index.js
index b224e2510bbd..adb032701fb0 100644
--- a/app/assets/javascripts/language_switcher/index.js
+++ b/app/assets/javascripts/language_switcher/index.js
@@ -10,12 +10,14 @@ export const initLanguageSwitcher = () => {
const preferredLangCode = getCookie(PREFERRED_LANGUAGE_COOKIE_KEY);
const preferredLocale = locales.find((locale) => locale.value === preferredLangCode);
+ const provide = { locales };
+ if (preferredLocale) {
+ provide.preferredLocale = preferredLocale;
+ }
+
return new Vue({
el,
- provide: {
- locales,
- preferredLocale,
- },
+ provide,
render(createElement) {
return createElement(LanguageSwitcher);
},
diff --git a/spec/frontend/language_switcher/components/app_spec.js b/spec/frontend/language_switcher/components/app_spec.js
index 036ff55fef70..ca8c6c90bf12 100644
--- a/spec/frontend/language_switcher/components/app_spec.js
+++ b/spec/frontend/language_switcher/components/app_spec.js
@@ -1,9 +1,9 @@
import { GlLink } from '@gitlab/ui';
import { mountExtended } from 'helpers/vue_test_utils_helper';
import LanguageSwitcherApp from '~/language_switcher/components/app.vue';
-import { PREFERRED_LANGUAGE_COOKIE_KEY } from '~/language_switcher/constants';
+import { PREFERRED_LANGUAGE_COOKIE_KEY, EN } from '~/language_switcher/constants';
import * as utils from '~/lib/utils/common_utils';
-import { locales, ES, EN } from '../mock_data';
+import { locales, ES } from '../mock_data';
jest.mock('~/lib/utils/common_utils');
@@ -14,7 +14,6 @@ describe('<LanguageSwitcher />', () => {
wrapper = mountExtended(LanguageSwitcherApp, {
provide: {
locales,
- preferredLocale: EN,
...props,
},
});
@@ -28,9 +27,11 @@ describe('<LanguageSwitcher />', () => {
const findLanguageDropdownItem = (code) => wrapper.findByTestId(`language_switcher_lang_${code}`);
const findFooter = () => wrapper.findByTestId('footer');
- it('preferred language', () => {
+ it('sets English as preferred language by default', () => {
expect(getPreferredLanguage()).toBe(EN.text);
+ });
+ it('sets preferred locale when provided', () => {
createComponent({
preferredLocale: ES,
});
diff --git a/spec/frontend/language_switcher/mock_data.js b/spec/frontend/language_switcher/mock_data.js
index 548bddf01738..70bcb225fe38 100644
--- a/spec/frontend/language_switcher/mock_data.js
+++ b/spec/frontend/language_switcher/mock_data.js
@@ -1,7 +1,4 @@
-export const EN = {
- value: 'en',
- text: 'English',
-};
+import { EN } from '~/language_switcher/constants';
export const ZH_CN = {
value: 'zh_CN',
--
GitLab