@tolgee/core 4.7.0 → 4.7.2

package/src/services/TranslationService.ts

@@ -0,0 +1,417 @@
+import { Translations, TreeTranslationsData } from '../types';
+import { Properties } from '../Properties';
+import { CoreService } from './CoreService';
+import { ApiHttpService } from './ApiHttpService';
+import { ApiHttpError } from '../Errors/ApiHttpError';
+import { EventService } from './EventService';
+import { EventEmitterImpl } from './EventEmitter';
+import {
+  ComplexEditKeyDto,
+  CreateKeyDto,
+  KeyWithDataModel,
+  KeyWithTranslationsModel,
+  SetTranslationsResponseModel,
+  SetTranslationsWithKeyDto,
+  TranslationData,
+} from '../types/DTOs';
+
+interface TranslationInterface {
+  text?: string;
+}
+
+interface Key {
+  id?: number;
+  name: string;
+  translations: Record<string, TranslationInterface>;
+}
+
+export class TranslationService {
+  private translationsCache: Map<string, Translations> = new Map<
+    string,
+    Translations
+  >();
+  private fetchPromises: { [key: string]: Promise<any> } = {};
+
+  // we need to distinguish which languages are in cache initially
+  // because we need to refetch them in dev mode
+  private fetchedDev: { [key: string]: boolean } = {};
+
+  constructor(
+    private properties: Properties,
+    private coreService: CoreService,
+    private apiHttpService: ApiHttpService,
+    private eventService: EventService
+  ) {}
+
+  private static translationByValue(message: string, defaultValue?: string) {
+    if (message) {
+      return message;
+    }
+
+    if (defaultValue) {
+      return defaultValue;
+    }
+
+    return undefined;
+  }
+
+  initStatic() {
+    if (typeof this.properties.config?.staticData === 'object') {
+      Object.entries(this.properties.config.staticData).forEach(
+        ([language, data]) => {
+          //if not provider or promise then it is raw data
+          if (typeof data !== 'function') {
+            this.setLanguageData(language, data);
+          }
+        }
+      );
+    }
+  }
+
+  getCachedTranslations() {
+    return this.translationsCache;
+  }
+
+  updateTranslationInCache = async (data: Key) => {
+    const result: Record<string, string> = {};
+    Object.entries(data.translations).forEach(([lang, translation]) => {
+      const cachedData = this.translationsCache.get(lang);
+      if (cachedData) {
+        cachedData[data.name] = translation.text;
+      }
+      result[lang] = translation.text;
+    });
+    await (
+      this.eventService.TRANSLATION_CHANGED as EventEmitterImpl<TranslationData>
+    ).emit(new TranslationData(data.name, result, data.id));
+  };
+
+  async loadTranslations(lang: string = this.properties.currentLanguage) {
+    if (this.isFetchNeeded(lang)) {
+      if (!(this.fetchPromises[lang] instanceof Promise)) {
+        this.fetchPromises[lang] = this.fetchTranslations(lang);
+      }
+      await this.fetchPromises[lang];
+      (this.eventService.LANGUAGE_LOADED as EventEmitterImpl<string>).emit(
+        lang
+      );
+    }
+    this.fetchPromises[lang] = undefined;
+    return this.translationsCache.get(lang);
+  }
+
+  async getTranslation(
+    key: string,
+    lang: string = this.properties.currentLanguage,
+    defaultValue?: string
+  ): Promise<string> {
+    if (this.isFetchNeeded(lang)) {
+      await this.loadTranslations(lang);
+    }
+    let message = this.getFromCache(key, lang);
+
+    if (!message) {
+      // try to get translation from fallback language
+      const fallbackLang = this.properties.config.fallbackLanguage;
+      if (this.isFetchNeeded(fallbackLang)) {
+        await this.loadTranslations(this.properties.config.fallbackLanguage);
+      }
+      message = this.getFromCache(key, this.properties.config.fallbackLanguage);
+    }
+
+    return TranslationService.translationByValue(message, defaultValue);
+  }
+
+  async updateKeyComplex(
+    id: number,
+    data: ComplexEditKeyDto
+  ): Promise<KeyWithDataModel> {
+    this.coreService.checkScope('translations.edit');
+    const result = (await this.apiHttpService.postJson(
+      `v2/projects/keys/${id}/complex-update`,
+      {
+        ...data,
+        screenshotUploadedImageIds: data.screenshotUploadedImageIds?.length
+          ? data.screenshotUploadedImageIds
+          : undefined,
+        screenshotIdsToDelete: data.screenshotIdsToDelete?.length
+          ? data.screenshotIdsToDelete
+          : undefined,
+      },
+      { method: 'put' }
+    )) as KeyWithDataModel;
+
+    await this.updateTranslationInCache(result);
+
+    return result;
+  }
+
+  async createKey(data: CreateKeyDto): Promise<KeyWithDataModel> {
+    this.coreService.checkScope('keys.edit');
+    const result = (await this.apiHttpService.postJson(
+      `v2/projects/keys/create`,
+      {
+        ...data,
+        screenshotUploadedImageIds: data.screenshotUploadedImageIds?.length
+          ? data.screenshotUploadedImageIds
+          : undefined,
+      }
+    )) as KeyWithDataModel;
+
+    await this.updateTranslationInCache(result);
+
+    return result;
+  }
+
+  async setTranslations(
+    translationData: SetTranslationsWithKeyDto
+  ): Promise<SetTranslationsResponseModel> {
+    this.coreService.checkScope('translations.edit');
+    const result = (await this.apiHttpService.postJson(
+      'v2/projects/translations',
+      translationData
+    )) as SetTranslationsResponseModel;
+
+    await this.updateTranslationInCache({
+      id: result.keyId,
+      name: result.keyName,
+      translations: result.translations,
+    });
+
+    return result;
+  }
+
+  /**
+   * Change translations of some keys to some value temporarily.
+   * For screenshot taking with provided values, before actually saving
+   * the values
+   *
+   * @return Returns callback changing affected translations back
+   */
+  async changeTranslations({
+    key,
+    translations,
+  }: TranslationData): Promise<() => void> {
+    const old: Record<string, string> = {};
+
+    Object.entries(translations).forEach(([language, value]) => {
+      const data = this.translationsCache.get(language);
+      if (data) {
+        old[language] = data[key];
+        data[key] = value;
+      }
+    });
+
+    await (
+      this.eventService.TRANSLATION_CHANGED as EventEmitterImpl<TranslationData>
+    ).emit({
+      key,
+      translations,
+    });
+
+    // callback to revert the operation
+    return async () => {
+      Object.entries(old).forEach(([language, value]) => {
+        const data = this.translationsCache.get(language);
+        if (data) {
+          data[key] = value;
+        }
+      });
+      await (
+        this.eventService
+          .TRANSLATION_CHANGED as EventEmitterImpl<TranslationData>
+      ).emit({
+        key,
+        translations: old,
+      });
+    };
+  }
+
+  getFromCacheOrFallback(
+    key: string,
+    lang: string = this.properties.currentLanguage,
+    defaultValue?: string
+  ): string {
+    const fallbackLang = this.properties.config.fallbackLanguage;
+    const message =
+      this.getFromCache(key, lang) || this.getFromCache(key, fallbackLang);
+
+    if (!message && (!this.isLoaded(lang) || !this.isLoaded(fallbackLang))) {
+      return undefined;
+    }
+    return TranslationService.translationByValue(message, defaultValue);
+  }
+
+  getTranslationsOfKey = async (
+    key: string,
+    languages: Set<string> = new Set([this.properties.currentLanguage])
+  ) => {
+    this.coreService.checkScope('translations.view');
+    try {
+      const languagesArray = [...languages];
+      const languagesQuery = languagesArray
+        .map((l) => `languages=${l}`)
+        .join('&');
+      const data = await this.apiHttpService.fetchJson(
+        `v2/projects/translations?${languagesQuery}&filterKeyName=${encodeURIComponent(
+          key
+        )}`
+      );
+
+      const translationData = languagesArray.reduce(
+        (acc, curr) => ({ ...acc, [curr]: '' }),
+        {}
+      );
+
+      const firstItem = data._embedded?.keys?.[0] as
+        | KeyWithTranslationsModel
+        | undefined;
+
+      if (firstItem?.translations) {
+        Object.entries(firstItem.translations).forEach(
+          ([language, translation]) =>
+            (translationData[language] = (translation as any).text)
+        );
+      }
+
+      const langs = data.selectedLanguages?.map((l) => l.tag) as string[];
+
+      return [firstItem, langs] as const;
+    } catch (e) {
+      if (
+        e instanceof ApiHttpError &&
+        e.response.status === 404 &&
+        e.code === 'language_not_found'
+      ) {
+        // only possible reason for this error is, that languages definition
+        // is changed, but the old value is stored in preferred languages
+        this.properties.preferredLanguages =
+          await this.coreService.getLanguages();
+        // eslint-disable-next-line no-console
+        console.error('Requested language not found, refreshing the page!');
+        location.reload();
+      } else {
+        throw e;
+      }
+    }
+  };
+
+  private isFetchNeeded(lang: string) {
+    const isDevMode = this.properties.mode === 'development';
+    const dataPresent = this.translationsCache.get(lang) !== undefined;
+    const devFetched = Boolean(this.fetchedDev[lang]);
+    return (isDevMode && !devFetched) || !dataPresent;
+  }
+
+  private isLoaded(lang: string) {
+    return this.translationsCache.get(lang) !== undefined;
+  }
+
+  private async fetchTranslations(lang: string) {
+    const isDevMode = this.properties.mode === 'development';
+    if (isDevMode) {
+      return await this.fetchTranslationsDevelopment(lang);
+    } else {
+      return await this.fetchTranslationsProduction(lang);
+    }
+  }
+
+  private async fetchTranslationsProduction(language: string) {
+    const langStaticData = this.properties.config?.staticData?.[language];
+
+    if (typeof langStaticData === 'function') {
+      const data = await langStaticData();
+      this.setLanguageData(language, data);
+      return;
+    } else if (langStaticData !== undefined) {
+      this.setLanguageData(language, langStaticData);
+      return;
+    }
+
+    const url = `${
+      this.properties.config.filesUrlPrefix || '/'
+    }${language}.json`;
+    try {
+      const result = await fetch(url);
+      if (result.status >= 400) {
+        //on error set language data as empty object to not break the flow
+        // eslint-disable-next-line no-console
+        console.error(
+          'Server responded with error status while loading localization data.'
+        );
+        this.setLanguageData(language, {});
+        return;
+      }
+      try {
+        const data = await result.json();
+        this.setLanguageData(language, data);
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error(`Error parsing json retrieved from ${url}.`);
+        this.setEmptyLanguageData(language);
+      }
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(`Error fetching localization data from ${url}.`);
+      this.setEmptyLanguageData(language);
+    }
+  }
+
+  private async fetchTranslationsDevelopment(language: string) {
+    await this.coreService.loadApiKeyDetails();
+    this.coreService.checkScope('translations.view');
+    try {
+      const data = await this.apiHttpService.fetchJson(
+        `v2/projects/translations/${language}`
+      );
+      this.fetchedDev[language] = true;
+      this.setLanguageData(language, data[language] || {});
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error('Error while fetching localization data from API.', e);
+      this.setEmptyLanguageData(language);
+      return;
+    }
+  }
+
+  private setEmptyLanguageData(language: string) {
+    this.translationsCache.set(language, {});
+  }
+
+  private setLanguageData(language: string, data: TreeTranslationsData) {
+    // recursively walk the tree and make it flat, when tree data are provided
+    const makeFlat = (data: TreeTranslationsData): Record<string, string> => {
+      const result: Record<string, string> = {};
+      Object.entries(data).forEach(([key, value]) => {
+        // ignore falsy values
+        if (!value) {
+          return;
+        }
+        if (typeof value === 'object') {
+          Object.entries(makeFlat(value)).forEach(([flatKey, flatValue]) => {
+            result[key + '.' + flatKey] = flatValue;
+          });
+          return;
+        }
+        result[key] = value as string;
+      });
+      return result;
+    };
+
+    this.translationsCache.set(language, makeFlat(data));
+  }
+
+  private getFromCache(
+    key: string,
+    lang: string = this.properties.currentLanguage
+  ): string {
+    const root: string | Translations = this.translationsCache.get(lang);
+
+    //if lang is not downloaded or does not exist at all
+    if (root === undefined) {
+      return undefined;
+    }
+
+    return root[key] as string;
+  }
+}

package/src/services/__mocks__/CoreService.ts

@@ -0,0 +1,17 @@
+import * as Module from '../CoreService';
+import classMock from '@testFixtures/classMock';
+import { Scope } from '../../types';
+
+const moduleMock = jest.genMockFromModule('../CoreService');
+
+export const CoreService = classMock<Module.CoreService>(
+  () => ({
+    getApiKeyDetails: jest.fn(async () => {
+      return {
+        scopes: ['translations.edit', 'keys.edit'] as Scope[],
+        projectId: 0,
+      } as Module.ApiKeyWithLanguagesModel;
+    }),
+  }),
+  (moduleMock as typeof Module).CoreService
+);

package/src/toolsManager/Messages.test.ts

@@ -0,0 +1,79 @@
+jest.dontMock('./Messages');
+jest.dontMock('../services/DependencyService');
+
+import { Messages } from './Messages';
+import { DependencyService } from '../services/DependencyService';
+
+describe('Messages', () => {
+  let messages: Messages;
+  let windowAddEventListenerSpy;
+  let windowRemoveEventListenerSpy;
+
+  beforeEach(async () => {
+    messages = new DependencyService().messages;
+    windowAddEventListenerSpy = jest.spyOn(window, 'addEventListener');
+    windowRemoveEventListenerSpy = jest.spyOn(window, 'removeEventListener');
+    messages.startListening();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('Can be created', () => {
+    expect(messages).toBeInstanceOf(Messages);
+  });
+
+  describe('starListening method', () => {
+    test('adds event listener to window', () => {
+      expect(windowAddEventListenerSpy).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('listening', () => {
+    let resolve;
+    const promise = new Promise((r) => (resolve = r));
+    const callbackMock = jest.fn(() => {
+      resolve();
+    });
+    const data = {};
+    let removeListener;
+    const sendMessage = () =>
+      window.dispatchEvent(
+        new MessageEvent('message', {
+          data: { type: 'TEST_EVENT', data },
+          source: window,
+          origin: window.origin,
+        })
+      );
+
+    beforeEach(async () => {
+      removeListener = messages.listen('TEST_EVENT', callbackMock);
+      sendMessage();
+      await promise;
+    });
+
+    test('listens to event', async () => {
+      expect(callbackMock).toHaveBeenCalledTimes(1);
+      expect(callbackMock).toHaveBeenCalledWith(data);
+    });
+
+    test('returns callback to remove listener', () => {
+      expect((messages as any).listeners).toHaveLength(1);
+      removeListener();
+      expect((messages as any).listeners).toHaveLength(0);
+    });
+  });
+
+  describe('stopListening method', () => {
+    test('stopsListening', () => {
+      messages.stopListening();
+      expect(windowRemoveEventListenerSpy).toHaveBeenCalledTimes(1);
+      expect(windowRemoveEventListenerSpy).toHaveBeenCalledWith(
+        windowAddEventListenerSpy.mock.calls[0][0],
+        windowAddEventListenerSpy.mock.calls[0][1],
+        windowAddEventListenerSpy.mock.calls[0][2]
+      );
+    });
+  });
+});

package/src/toolsManager/Messages.ts

@@ -0,0 +1,60 @@
+type Listener = {
+  type: string;
+  callback: (data) => void;
+};
+
+type Message = {
+  data: any;
+  type: string;
+};
+
+type TolgeeEvent = {
+  data: Message;
+} & MessageEvent;
+
+export class Messages {
+  private listeners: Listener[] = [];
+  private _stopListening: () => void;
+
+  readonly startListening = () => {
+    const receiveMessage = (event: TolgeeEvent) => {
+      if (event.source != window) {
+        return;
+      }
+      this.listeners.forEach((listener) => {
+        if (listener.type == event.data.type) {
+          listener.callback(event.data.data);
+        }
+      });
+    };
+
+    window.addEventListener('message', receiveMessage, false);
+
+    typeof this._stopListening === 'function' && this._stopListening();
+    this._stopListening = () => {
+      window.removeEventListener('message', receiveMessage, false);
+    };
+  };
+
+  public stopListening() {
+    this._stopListening();
+  }
+
+  readonly listen = (type: string, callback: (data) => void) => {
+    const listenerInfo = { type, callback };
+    this.listeners.push(listenerInfo);
+    // return callback to remove the listener
+    return () => {
+      this.listeners.splice(this.listeners.indexOf(listenerInfo), 1);
+    };
+  };
+
+  readonly send = (type: string, data?: any) => {
+    try {
+      window.postMessage({ type, data }, window.origin);
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.warn('Cannot send message.', e);
+    }
+  };
+}

package/src/toolsManager/PluginManager.test.ts

@@ -0,0 +1,108 @@
+jest.dontMock('./PluginManager');
+jest.dontMock('../services/DependencyService');
+
+import { ElementWithMeta } from '../types';
+import { ElementRegistrar } from '../services/ElementRegistrar';
+import { getMockedInstance } from '@testFixtures/mocked';
+import { PluginManager } from './PluginManager';
+import { DependencyService } from '../services/DependencyService';
+import { TranslationService } from '../services/TranslationService';
+import { Messages } from './Messages';
+
+describe('PluginManager', () => {
+  let pluginManager: PluginManager;
+
+  beforeEach(async () => {
+    pluginManager = new DependencyService().pluginManager;
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('Can be created', () => {
+    expect(pluginManager).toBeInstanceOf(PluginManager);
+  });
+
+  describe('take screenshot methods', () => {
+    const data = {
+      key: 'test_key',
+      translations: { en: 'English!' },
+    };
+
+    let resolve;
+    const highlightMock = jest.fn();
+    const unHighlightMock = jest.fn();
+    let listenCallback;
+    const cancelMock = jest.fn();
+    const revertMock = jest.fn();
+
+    beforeEach(async () => {
+      getMockedInstance(TranslationService).changeTranslations = jest.fn(
+        () =>
+          new Promise((r) => {
+            resolve = r;
+          })
+      );
+
+      getMockedInstance(ElementRegistrar).findAllByKey = jest.fn(() => {
+        const element = document.createElement(
+          'span'
+        ) as any as ElementWithMeta;
+        element._tolgee = {
+          highlight: highlightMock,
+          unhighlight: unHighlightMock,
+        } as any;
+
+        return [element];
+      });
+
+      (getMockedInstance(Messages) as any).send = jest.fn();
+
+      (getMockedInstance(Messages) as any).listen = jest.fn((_, callback) => {
+        listenCallback = callback;
+        return cancelMock;
+      });
+
+      pluginManager.takeScreenshot(data);
+      resolve(revertMock);
+    });
+
+    test('calls change translation', () => {
+      expect(
+        getMockedInstance(TranslationService).changeTranslations
+      ).toHaveBeenCalledWith(data);
+    });
+
+    test('sends the message to take screenshots', () => {
+      expect((getMockedInstance(Messages) as any).send).toHaveBeenCalledTimes(
+        1
+      );
+    });
+
+    test('highlights all', () => {
+      expect(
+        getMockedInstance(ElementRegistrar).findAllByKey
+      ).toHaveBeenCalledWith(data.key);
+      expect(
+        getMockedInstance(ElementRegistrar).findAllByKey
+      ).toHaveBeenCalledTimes(1);
+      expect(highlightMock).toHaveBeenCalledTimes(1);
+    });
+
+    test('unhighlights all after', () => {
+      listenCallback();
+      expect(unHighlightMock).toHaveBeenCalledTimes(1);
+    });
+
+    test('reverts the translation change', () => {
+      listenCallback();
+      expect(revertMock).toHaveBeenCalledTimes(1);
+    });
+
+    test('cancels the listening', () => {
+      listenCallback();
+      expect(cancelMock).toHaveBeenCalledTimes(1);
+    });
+  });
+});