Init custom translations (#8790)

changelog/unreleased/enhancement-custom-translations

@@ -0,0 +1,7 @@
+Enhancement: Custom translations
+
+We have added the possibility to include own translations to override existing translations.
+To inject custom translations add the following property to your `config.json`, `"customTranslation": [{ "url": "https://localhost:9200/translations.json" }]`.
+
+https://github.com/owncloud/web/pull/8790
+https://github.com/owncloud/web/issues/8791

docs/getting-started.md

@@ -40,6 +40,8 @@ Please refer to the [build documentation for Web]({{< ref "./building.md" >}}).
 
 Depending on the backend you are using, there are sample config files provided in the [config folder](https://github.com/owncloud/web/tree/master/config) of the ownCloud Web git repository. See below for available backends. Also, find some of the configuration details below.
 
+- `customTranslations` You can specify one or multiple files to overwrite existing translations. For example set this option to `[{url: "https://localhost:9200/customTranslations.json"}]`.
+
 #### Options
 - `options.homeFolder` You can specify a folder that is used when the user navigates `home`. Navigating home gets triggered by clicking on the `All files`
 menu item. The user will not be jailed in that directory. It simply serves as a default location. You can either provide a static location, or you can use

packages/web-pkg/src/configuration/manager.ts

@@ -1,4 +1,5 @@
 import {
+  CustomTranslation,
   OAuth2Configuration,
   OIDCConfiguration,
   OptionsConfiguration,
@@ -14,6 +15,7 @@ export interface RawConfig {
   auth?: any
   openIdConnect?: any
   options?: OptionsConfiguration
+  customTranslations?: Array<CustomTranslation>
 }
 
 export class ConfigurationManager {
@@ -35,6 +37,7 @@ export class ConfigurationManager {
       ? (rawConfig.openIdConnect as OIDCConfiguration)
       : null
     this.logoutUrl = rawConfig.options?.logoutUrl
+    this.customTranslations = rawConfig.customTranslations
   }
 
   set logoutUrl(url: string) {
@@ -56,6 +59,13 @@ export class ConfigurationManager {
     return this.runtimeConfiguration.serverUrl
   }
 
+  set customTranslations(customTranslations: Array<CustomTranslation>) {
+    this.runtimeConfiguration.customTranslations = customTranslations || []
+  }
+  get customTranslations(): Array<CustomTranslation> {
+    return this.runtimeConfiguration.customTranslations
+  }
+
   get isOAuth2(): boolean {
     return !isNil(this.oAuth2Configuration)
   }

packages/web-pkg/src/configuration/types.ts

@@ -1,5 +1,9 @@
+export interface CustomTranslation {
+  url: string
+}
 export interface RuntimeConfiguration {
   serverUrl: string
+  customTranslations?: Array<CustomTranslation>
 }
 
 export interface RoutingOptionsConfiguration {

packages/web-runtime/src/helpers/customTranslations.ts

@@ -0,0 +1,29 @@
+import { ConfigurationManager } from 'web-pkg'
+import { v4 as uuidV4 } from 'uuid'
+import merge from 'lodash-es/merge'
+
+export const loadCustomTranslations = async ({
+  configurationManager
+}: {
+  configurationManager: ConfigurationManager
+}): Promise<unknown> => {
+  const customTranslations = {}
+  for (const customTranslation of configurationManager.customTranslations) {
+    const customTranslationResponse = await fetch(customTranslation.url, {
+      headers: { 'X-Request-ID': uuidV4() }
+    })
+    if (customTranslationResponse.status !== 200) {
+      console.error(
+        `translation file ${customTranslation} could not be loaded. HTTP status-code ${customTranslationResponse.status}`
+      )
+      continue
+    }
+    try {
+      const customTranslationJSON = await customTranslationResponse.json()
+      merge(customTranslations, customTranslationJSON)
+    } catch (e) {
+      console.error(`translation file ${customTranslation} could not be parsed. ${e}`)
+    }
+  }
+  return customTranslations
+}

packages/web-runtime/src/index.ts

@@ -4,6 +4,7 @@ import { configurationManager } from 'web-pkg/src/configuration'
 import { createHead } from '@vueuse/head'
 import { abilitiesPlugin } from '@casl/vue'
 import { createMongoAbility } from '@casl/ability'
+import merge from 'lodash-es/merge'
 
 import {
   announceConfiguration,
@@ -32,6 +33,7 @@ import {
   isPublicSpaceResource,
   Resource
 } from 'web-client/src/helpers'
+import { loadCustomTranslations } from 'web-runtime/src/helpers/customTranslations'
 import { WebDAV } from 'web-client/src/webdav'
 import { DavProperty } from 'web-client/src/webdav/constants'
 import { createApp } from 'vue'
@@ -49,7 +51,7 @@ export const bootstrapApp = async (configurationPath: string): Promise<void> =>
   const store = await announceStore({ runtimeConfiguration })
   app.use(abilitiesPlugin, createMongoAbility([]), { useGlobalProperties: true })
 
-  const applicationsPromise = await initializeApplications({
+  const applicationsPromise = initializeApplications({
     app,
     runtimeConfiguration,
     configurationManager,
@@ -58,10 +60,19 @@ export const bootstrapApp = async (configurationPath: string): Promise<void> =>
     router,
     translations
   })
+  const customTranslationsPromise = loadCustomTranslations({ configurationManager })
   const themePromise = announceTheme({ store, app, designSystem, runtimeConfiguration })
-  await Promise.all([applicationsPromise, themePromise])
+  const [customTranslations] = await Promise.all([
+    customTranslationsPromise,
+    applicationsPromise,
+    themePromise
+  ])
 
-  announceTranslations({ app, availableLanguages: supportedLanguages, translations })
+  announceTranslations({
+    app,
+    availableLanguages: supportedLanguages,
+    translations: merge(translations, customTranslations)
+  })
   announceClientService({ app, runtimeConfiguration, configurationManager, store })
   announceUppyService({ app })
   announceLoadingService({ app })