fix: improve UI dialog behavior when many languages

tolgee · Sep 2, 2022 · 8e5495b · 8e5495b
1 parent dfa152a
commit 8e5495b
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 6 deletions.
diff --git a/packages/core/src/services/CoreService.test.ts b/packages/core/src/services/CoreService.test.ts
@@ -54,7 +54,6 @@ describe('CoreService', () => {
     test('will return languages returned from api http service', async () => {
       expect(await coreService.getLanguages()).toEqual(new Set(dummyLanguages));
       expect(mockedFetchJson).toBeCalledTimes(1);
-      expect(mockedFetchJson).toBeCalledWith(`v2/projects/languages?size=1000`);
     });
 
     test('sets preferred languages of properties', async () => {

diff --git a/packages/core/src/services/CoreService.ts b/packages/core/src/services/CoreService.ts
@@ -18,7 +18,7 @@ export class CoreService {
   async getLanguages(): Promise<Set<string>> {
     if (!(this.languagePromise instanceof Promise)) {
       this.languagePromise = this.apiHttpService.fetchJson(
-        `v2/projects/languages?size=1000`
+        `v2/projects/languages?size=1000&sort=tag`
       );
     }
 

diff --git a/packages/ui/src/KeyDialog/LanguageSelect.tsx b/packages/ui/src/KeyDialog/LanguageSelect.tsx
@@ -45,7 +45,11 @@ export const LanguageSelect: React.FC = () => {
   return (
     <>
       {availableLanguages && (
-        <ScFormControl variant="outlined" size="small">
+        <ScFormControl
+          variant="outlined"
+          size="small"
+          style={{ maxWidth: 250 }}
+        >
           <Select
             multiple
             value={selected.map((o) => o.value)}

diff --git a/packages/ui/src/KeyDialog/TranslationDialogContextProvider.tsx b/packages/ui/src/KeyDialog/TranslationDialogContextProvider.tsx
@@ -5,6 +5,9 @@ import { ComponentDependencies } from './KeyDialog';
 import { sleep } from '../tools/sleep';
 import { createProvider } from '../tools/createProvider';
 import { isLanguagePermitted } from '../tools/isLanguagePermitted';
+import { putBaseLangFirst, putBaseLangFirstTags } from './languageHelpers';
+
+const MAX_LANGUAGES_SELECTED = 5;
 
 export interface ScreenshotInterface {
   id: number;
@@ -347,11 +350,21 @@ export const [DialogProvider, useDialogDispatch, useDialogContext] =
         ? !coreService.isAuthorizedTo('translations.edit')
         : !coreService.isAuthorizedTo('keys.edit'));
 
-    const [availableLanguages, setAvailableLanguages] =
+    const [availableLanguages, _setAvailableLanguages] =
       useState<LanguageModel[]>(undefined);
+    const setAvailableLanguages = (data: LanguageModel[]) => {
+      _setAvailableLanguages(putBaseLangFirst(data));
+    };
+
+    const getInitialLanguages = () => {
+      const langs = Array.from(
+        properties.preferredLanguages || [properties.currentLanguage]
+      );
+      return new Set(langs.slice(0, MAX_LANGUAGES_SELECTED));
+    };
 
     const [selectedLanguages, setSelectedLanguages] = useState(
-      properties.preferredLanguages || new Set([properties.currentLanguage])
+      getInitialLanguages()
     );
 
     // sets the default value for base language if is not stored already
@@ -389,6 +402,8 @@ export const [DialogProvider, useDialogDispatch, useDialogContext] =
       props.defaultValue,
     ]);
 
+    const baseLang = availableLanguages?.find(({ base }) => base);
+
     const contextValue = {
       input: props.input,
       dependencies: props.dependencies,
@@ -398,7 +413,7 @@ export const [DialogProvider, useDialogDispatch, useDialogContext] =
       success,
       error,
       availableLanguages,
-      selectedLanguages,
+      selectedLanguages: putBaseLangFirstTags(selectedLanguages, baseLang?.tag),
       formDisabled,
       translations,
       translationsForm,

diff --git a/packages/ui/src/KeyDialog/languageHelpers.ts b/packages/ui/src/KeyDialog/languageHelpers.ts
@@ -0,0 +1,19 @@
+import { LanguageModel } from '@tolgee/core';
+
+export const putBaseLangFirst = (languages: LanguageModel[] | undefined) => {
+  const base = languages?.find((l) => l.base);
+  if (base) {
+    return [base, ...languages.filter((val) => val !== base)];
+  }
+  return languages;
+};
+
+export const putBaseLangFirstTags = (strings: Set<string>, base?: string) => {
+  if (base && strings.has(base)) {
+    return new Set([
+      base,
+      ...Array.from(strings).filter((val) => val !== base),
+    ]);
+  }
+  return strings;
+};