Revert hopefully unnecessary changes

Signed-off-by: Olga Bulat <obulat@gmail.com>

Author: obulat

documentation/frontend/reference/i18n.md

@@ -69,8 +69,7 @@ line arguments. There are three main modes of operation:
     empty, written to `untranslated-locales.json`.
 
 - Pass the fallback locale mappings to the underlying Vue i18n plugin. This is
-  configured in the plugin configuration file,
-  `frontend/src/plugins/i18n.config.ts`.
+  configured in the plugin configuration file, `frontend/src/i18n/vue-i18n.ts`.
 
 ## Test locales
 

frontend/i18n/scripts/metadata.mjs

@@ -200,7 +200,7 @@ export const getWpLocalesMetadata = async (
  * Some locales have custom pluralization rules that differ from the default
  * rules provided by Vue i18n. This function extracts the pluralization rules
  * from the locales metadata and logs them in a format that can be copied to
- * the `i18n.config.ts` settings file.
+ * the `vue-i18n.ts` settings file.
  * There shouldn't be a need to update it often, but it's here for reference.
  * @param {import('./types').RawI18nLocaleProps[]} locales
  */

frontend/i18n/scripts/types.d.ts

@@ -19,7 +19,7 @@ export interface RawI18nLocalePropsWithPlurals
   extends Omit<RawI18nLocaleProps, "nplurals" | "pluralExpression"> {
   nplurals: number
   /**
-   * The plural expression used for custom pluralization, ee the `i18n.config.ts` settings file
+   * The plural expression used for custom pluralization, ee the `vue-i18n.ts` settings file
    */
   pluralExpression: string
 }

frontend/i18n/i18n.config.ts renamed to frontend/i18n/vue-i18n.ts

@@ -1,6 +1,6 @@
 import { defineI18nConfig } from "#imports"
 
-import localeFallback from "~~/i18n/locale-fallback.json"
+import localeFallback from "./locale-fallback.json"
 
 import type { Locale } from "@intlify/core-base"
 
@@ -20,9 +20,7 @@ const custom5Rule = (n: number): number =>
 export default defineI18nConfig(() => ({
   globalInjection: true,
   fallbackLocale: localeFallback as { [x: string]: Locale[] },
-  fallbackWarn: true,
-  missingWarn: true,
-  formatFallbackMessages: true,
+  silentFallbackWarn: true,
   pluralizationRules: {
     ar: custom5Rule,
     arq: custom5Rule,

frontend/nuxt.config.ts

@@ -128,6 +128,7 @@ export default defineNuxtConfig({
      * */
     detectBrowserLanguage: false,
     trailingSlash: false,
+    vueI18n: "./vue-i18n",
   },
   sentry: {
     sourceMapsUploadOptions: {

frontend/src/app.vue

@@ -3,7 +3,6 @@ import {
   computed,
   onMounted,
   useHead,
-  useI18n,
   useLocaleHead,
   useRuntimeConfig,
 } from "#imports"
@@ -67,21 +66,6 @@ useHead({
 onMounted(() => {
   updateBreakpoint()
   featureFlagStore.syncAnalyticsWithLocalStorage()
-  console.log("i18n")
-  const i18n = useI18n({ useScope: "global" })
-  console.log(i18n)
-  console.log(
-    "available locales",
-    i18n.availableLocales,
-    JSON.stringify(i18n.availableLocales)
-  )
-  console.log("locale properties", i18n.localeProperties.value)
-  console.log("locale", i18n.locale.value)
-  console.log(
-    "fallbackLocale",
-    i18n.fallbackLocale.value,
-    JSON.stringify(i18n.fallbackLocale.value)
-  )
 })
 </script>
 

frontend/src/components/meta/CustomButtonComponents.stories.ts

@@ -1,4 +1,3 @@
-import { useI18n } from "#imports"
 import { h } from "vue"
 
 import VLoadMore from "~/components/VLoadMore.vue"
@@ -9,11 +8,6 @@ const Template: Story = {
   render: (args) => ({
     components: { VLoadMore },
     setup() {
-      const i18n = useI18n({ useScope: "global" })
-      console.log(i18n)
-      console.log("locale properties", i18n.localeProperties.value)
-      console.log("locale", i18n.locale.value)
-      console.log("fallbackLocale", i18n.fallbackLocale.value)
       return () =>
         h("div", { class: "flex p-4", id: "wrapper" }, [
           h(VLoadMore, {

frontend/test/locales/ar.json

@@ -557,6 +557,5 @@
   "collection.resultCountLabel.tag.audio.countMore": "Top {count} audio files with the selected tag",
   "collection.resultCountLabel.tag.image.zero": "لا صور مع العلامة المختارة",
   "collection.resultCountLabel.tag.image.count": "{count} {count} الصور مع علامة مختارة",
-  "collection.resultCountLabel.tag.image.countMore": "Top {count} images with the selected tag",
-  "theme.theme": "Theme"
+  "collection.resultCountLabel.tag.image.countMore": "Top {count} images with the selected tag"
 }

frontend/test/playwright/e2e/translation-banner.spec.ts

@@ -4,7 +4,6 @@ import {
   goToSearchTerm,
   preparePageForTests,
 } from "~~/test/playwright/utils/navigation"
-import { getLanguageSelect } from "~~/test/playwright/utils/components"
 
 // Do not use one of the test locales, as those all have "complete" generated translations
 const locale = "ru"
@@ -16,10 +15,9 @@ test.describe("translation banner", () => {
   test("Can see the translation banner and go to the correct link", async ({
     page,
   }) => {
-    await goToSearchTerm(page, "dog")
-    await getLanguageSelect(page).selectOption("ru")
-
-    await expect(page.locator("text= 100")).toBeVisible()
+    await goToSearchTerm(page, "dog", { mode: "SSR", locale })
+    await page.goto(localeSearchPath)
+    await expect(page.locator("text= 100")).toBeVisible({ timeout: 500 })
 
     await page.click("text=contributing a translation")
     await expect(page).toHaveURL(
@@ -32,14 +30,14 @@ test.describe("translation banner", () => {
   }) => {
     await preparePageForTests(page, "xl", { dismissBanners: true })
 
-    await page.goto(localeSearchPath)
+    await goToSearchTerm(page, "dog", { mode: "SSR", locale })
     await expect(page.locator('[data-testid="banner-translation"]')).toBeHidden(
       { timeout: 500 }
     )
   })
 
   test("Can close the translation banner", async ({ page }) => {
-    await page.goto(localeSearchPath)
+    await goToSearchTerm(page, "dog", { mode: "SSR", locale })
     await page.click('[data-testid="banner-translation"] button:visible')
 
     const banner = page.locator('.span:has-text("Help us get to 100 percent")')

frontend/test/playwright/utils/expect-snapshot.ts

@@ -1,5 +1,5 @@
 import { expect } from "@playwright/test"
-import type { LanguageDirection } from "~~/test/playwright/utils/i18n"
+import { type LanguageDirection, t } from "~~/test/playwright/utils/i18n"
 import { sleep } from "~~/test/playwright/utils/navigation"
 import { getThemeSwitcher } from "~~/test/playwright/utils/components"
 
@@ -34,10 +34,12 @@ export type ExpectScreenshotAreaSnapshot = (
 ) => Promise<void>
 
 type EffectiveColorMode = "dark" | "light"
+const themeOption = (colorMode: EffectiveColorMode, dir: LanguageDirection) =>
+  t(`theme.choices.${colorMode}`, dir)
 
 export const turnOnDarkMode = async (page: Page, dir: LanguageDirection) => {
   const themeSwitcher = getThemeSwitcher(page, dir)
-  await themeSwitcher.selectOption("dark")
+  await themeSwitcher.selectOption(themeOption("dark", dir))
   await expect(themeSwitcher).toHaveValue("dark")
 }