EZQMS-245: Allow to configure available languages per deployment

dev/prod/src/platform.ts

@@ -90,6 +90,7 @@ interface Config {
   GMAIL_URL: string
   CALENDAR_URL: string
   TITLE?: string
+  LANGUAGES?: string
   DEFAULT_LANGUAGE?: string
 }
 
@@ -117,6 +118,9 @@ export async function configurePlatform() {
 
   setMetadata(uiPlugin.metadata.DefaultApplication, login.component.LoginApp)
 
+  const languages = config.LANGUAGES ? (config.LANGUAGES as string).split(',').map((l) => l.trim()) : ['en', 'ru']
+
+  setMetadata(uiPlugin.metadata.Languages, languages)
   setMetadata(
     uiPlugin.metadata.Routes,
     new Map([

packages/ui/src/components/internal/LangSelector.svelte

@@ -14,6 +14,7 @@
 -->
 <script lang="ts">
   import { getContext } from 'svelte'
+  import { getMetadata } from '@hcengineering/platform'
   import { showPopup } from '../..'
   import LangPopup from './LangPopup.svelte'
   import ui from '../../plugin'
@@ -24,15 +25,34 @@
     currentLanguage: string
     setLanguage: (lang: string) => void
   }
+  const uiLangs = new Set(getMetadata(ui.metadata.Languages))
   const langs = [
     { id: 'en', label: ui.string.English },
     { id: 'ru', label: ui.string.Russian }
-  ]
+  ].filter((lang) => uiLangs.has(lang.id))
+
+  if (langs.findIndex((l) => l.id === currentLanguage) < 0 && langs.length !== 0) {
+    setLanguage(langs[0].id)
+  }
+
+  if (langs.length === 0) {
+    console.error(
+      `List of configured UI languages: [${getMetadata(ui.metadata.Languages)?.join(
+        ', '
+      )}] doesn't contain any languages available in the app. Please check you configuration.`
+    )
+  }
+
+  const isSelectable = langs.length > 1
 
   $: selected = langs.find((item) => item.id === currentLanguage)
   let trigger: HTMLElement
 
   const selectLanguage = (): void => {
+    if (!isSelectable) {
+      return
+    }
+
     showPopup(LangPopup, { langs }, trigger, (result) => {
       if (result) {
         selected = langs.find((item) => item.id === result)
@@ -45,7 +65,7 @@
 <Flags />
 {#if selected}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div bind:this={trigger} class="flex-center cursor-pointer" on:click={selectLanguage}>
+  <div bind:this={trigger} class="flex-center {isSelectable ? 'cursor-pointer' : ''}" on:click={selectLanguage}>
     <svg class="svg-16px">
       <use href="#{selected.id}-flag" />
     </svg>

packages/ui/src/components/internal/Root.svelte

@@ -159,7 +159,7 @@
           <div class="clock">
             <Clock />
           </div>
-          <div class="flex-center widget cursor-pointer">
+          <div class="flex-center widget">
             <LangSelector />
           </div>
           <div class="flex-center widget cursor-pointer">

packages/ui/src/plugin.ts

@@ -88,6 +88,7 @@ export const uis = plugin(uiId, {
   metadata: {
     DefaultApplication: '' as Metadata<AnyComponent>,
     Routes: '' as Metadata<Map<string, AnyComponent>>,
+    Languages: '' as Metadata<string[]>,
 
     // Will activate network click button
     ShowNetwork: '' as Metadata<(evt: MouseEvent) => void>

server/front/src/index.ts

@@ -142,6 +142,7 @@ export function start (
     gmailUrl: string
     calendarUrl: string
     title?: string
+    languages: string
     defaultLanguage: string
   },
   port: number,
@@ -182,6 +183,7 @@ export function start (
       GMAIL_URL: config.gmailUrl,
       CALENDAR_URL: config.calendarUrl,
       TITLE: config.title,
+      LANGUAGES: config.languages,
       DEFAULT_LANGUAGE: config.defaultLanguage,
       ...(extraConfig ?? {})
     })

server/front/src/starter.ts

@@ -21,6 +21,7 @@ import { start } from '.'
 
 export function startFront (extraConfig?: Record<string, string>): void {
   const defaultLanguage = process.env.DEFAULT_LANGUAGE ?? 'en'
+  const languages = process.env.LANGUAGES ?? 'en,ru'
   const SERVER_PORT = parseInt(process.env.SERVER_PORT ?? '8080')
 
   const transactorEndpoint = process.env.TRANSACTOR_URL
@@ -132,6 +133,7 @@ export function startFront (extraConfig?: Record<string, string>): void {
     rekoniUrl,
     calendarUrl,
     title,
+    languages,
     defaultLanguage
   }
   console.log('Starting Front service with', config)