@tolgee/core 4.7.0 → 4.7.2

package/src/highlighter/TranslationHighlighter.test.ts

@@ -0,0 +1,177 @@
+jest.dontMock('./TranslationHighlighter');
+jest.dontMock('../services/DependencyService');
+
+import { TranslationHighlighter } from './TranslationHighlighter';
+import classMock from '@testFixtures/classMock';
+import { getMockedInstance } from '@testFixtures/mocked';
+import { Properties } from '../Properties';
+import { createElement } from '@testFixtures/createElement';
+import { DependencyService } from '../services/DependencyService';
+
+describe('TranslationHighlighter', () => {
+  let translationHighlighter: TranslationHighlighter;
+
+  beforeEach(async () => {
+    const dependencyService = new DependencyService();
+    dependencyService.init({});
+    translationHighlighter = dependencyService.translationHighlighter;
+  });
+
+  afterEach(async () => {
+    jest.clearAllMocks();
+    window['@tolgee/ui'] = undefined;
+  });
+
+  describe('passing UI', () => {
+    const checkIt = async () => {
+      const mockedElement = createElement(20, 20, true);
+      translationHighlighter.listen(mockedElement);
+      await translationHighlighter.translationEdit(openEvent, mockedElement);
+      expect(rendererViewerMock).toBeCalledTimes(1);
+    };
+
+    test('Works when UI is provided using regular provider', async () => {
+      getMockedInstance(Properties).config.ui = getUiClassMock();
+      await checkIt();
+    });
+
+    test('Works when UI is provided using promise provider', async () => {
+      // @ts-ignore
+      getMockedInstance(Properties).config.ui = new Promise((resolve) =>
+        resolve(getUiClassMock())
+      );
+      await checkIt();
+    });
+
+    test('works when UI is provided using window provider', async () => {
+      getMockedInstance(Properties).config.ui = undefined;
+      window['@tolgee/ui'] = {
+        UI: getUiClassMock(),
+      };
+
+      await checkIt();
+    });
+
+    test('works when UI is provided using window constructor', async () => {
+      getMockedInstance(Properties).config.ui = undefined;
+      window['@tolgee/ui'] = getUiClassMock();
+      await checkIt();
+    });
+  });
+
+  describe('key rendering', () => {
+    test('will open renderer key context menu when multiple nodes', async () => {
+      await testNodeCounts(2, 1);
+    });
+
+    test('will open renderer key context menu when multiple keys', async () => {
+      await testNodeCounts(1, 10);
+    });
+
+    test('will open translation dialog when single key', async () => {
+      const mockedElement = createElement(1, 1, true);
+      translationHighlighter.listen(mockedElement);
+      await translationHighlighter.translationEdit(openEvent, mockedElement);
+
+      expect(rendererViewerMock).toBeCalledTimes(1);
+      expect(rendererViewerMock).toBeCalledWith('key', 'default value');
+    });
+
+    test('will open translation dialog when single key multiplied', async () => {
+      const mockedElement = createElement(20, 20, true);
+      translationHighlighter.listen(mockedElement);
+      await translationHighlighter.translationEdit(openEvent, mockedElement);
+
+      expect(rendererViewerMock).toBeCalledTimes(1);
+      expect(rendererViewerMock).toBeCalledWith('key', 'default value');
+    });
+  });
+
+  describe('warnings & errors', () => {
+    test('will print error on no key', async () => {
+      // eslint-disable-next-line no-console
+      console.error = jest.fn();
+      rendererGetKeyMock = jest.fn(async (): Promise<string> => {
+        return;
+      });
+
+      rendererViewerMock = jest.fn();
+
+      getMockedInstance(Properties).config.ui = classMock<any>(
+        () => ({
+          getKey: rendererGetKeyMock,
+        }),
+        function () {
+          return {};
+        } as any
+      );
+
+      const mockedElement = createElement(0, 0);
+      translationHighlighter.listen(mockedElement);
+
+      await translationHighlighter.translationEdit(openEvent, mockedElement);
+
+      // eslint-disable-next-line no-console
+      expect(console.error).toBeCalledTimes(1);
+    });
+
+    test('will print warning when UI not provided', async () => {
+      // eslint-disable-next-line no-console
+      console.warn = jest.fn();
+
+      getMockedInstance(Properties).config.ui = null;
+
+      const mockedElement = createElement(1, 1);
+      translationHighlighter.listen(mockedElement);
+
+      await translationHighlighter.translationEdit(openEvent, mockedElement);
+
+      // eslint-disable-next-line no-console
+      expect(console.warn).toBeCalledTimes(1);
+    });
+  });
+
+  let rendererGetKeyMock: (...args) => Promise<string>;
+  let rendererViewerMock: (...args) => void;
+
+  beforeEach(() => {
+    rendererGetKeyMock = jest.fn(async (): Promise<string> => {
+      return 'test';
+    });
+
+    rendererViewerMock = jest.fn();
+    getMockedInstance(Properties).config.ui = getUiClassMock();
+  });
+
+  const openEvent = new MouseEvent('click');
+
+  const testNodeCounts = async (nodeCount, keyCount) => {
+    const mockedElement = createElement(nodeCount, keyCount);
+    translationHighlighter.listen(mockedElement);
+    await translationHighlighter.translationEdit(openEvent, mockedElement);
+    expect(rendererGetKeyMock).toBeCalledTimes(1);
+
+    const keySet = new Set();
+    for (let i = 0; i < nodeCount * keyCount; i++) {
+      keySet.add(`key ${i}`);
+    }
+
+    expect(rendererGetKeyMock).toBeCalledTimes(1);
+    expect(rendererGetKeyMock).toBeCalledWith({ keys: keySet, openEvent });
+    expect(rendererGetKeyMock).not.toBeCalledWith({
+      keys: new Set(['key 0']),
+      openEvent,
+    });
+  };
+
+  const getUiClassMock = () =>
+    classMock<any>(
+      () => ({
+        getKey: rendererGetKeyMock,
+        renderViewer: rendererViewerMock,
+      }),
+      function () {
+        return {};
+      } as any
+    );
+});

package/src/highlighter/TranslationHighlighter.ts

@@ -0,0 +1,113 @@
+import { ElementWithMeta } from '../types';
+import { PluginManager } from '../toolsManager/PluginManager';
+import { DependencyService } from '../services/DependencyService';
+
+type KeyWithDefault = { key: string; defaultValue?: string };
+
+export class TranslationHighlighter {
+  public pluginManager: PluginManager;
+  private _renderer: any;
+
+  constructor(private dependencies: DependencyService) {}
+
+  private static getKeyOptions(node: ElementWithMeta): KeyWithDefault[] {
+    const nodes = Array.from(node._tolgee.nodes);
+    return nodes.reduce(
+      (acc, curr) => [
+        ...acc,
+        ...curr._tolgee.keys.map((k) => ({
+          key: k.key,
+          defaultValue: k.defaultValue,
+        })),
+      ],
+      []
+    );
+  }
+
+  listen(element: ElementWithMeta & ElementCSSInlineStyle) {
+    this.dependencies.highlightFunctionInitializer.initFunctions(element);
+  }
+
+  private async getRenderer() {
+    if (this._renderer === undefined) {
+      const possibleProviders = [
+        this.dependencies.properties.config.ui,
+        window['@tolgee/ui'],
+      ];
+      for (const possiblePromise of possibleProviders) {
+        // if dynamic import is used
+        const possibleObject =
+          possiblePromise instanceof Promise
+            ? await possiblePromise
+            : possiblePromise;
+
+        // extract .UI property
+        const possibleProvider =
+          typeof possibleObject === 'object'
+            ? possibleObject?.UI
+            : possibleObject;
+
+        if (typeof possibleProvider === 'function') {
+          this._renderer = new possibleProvider(this.dependencies);
+          break;
+        }
+      }
+      if (this._renderer === undefined) {
+        // eslint-disable-next-line no-console
+        console.warn(
+          'Tolgee UI is not provided. To translate interactively provide tolgee ui constructor to "ui" configuration property. ' +
+            'To disable highlighting use production mode.'
+        );
+      }
+    }
+    return this._renderer;
+  }
+
+  private async getKeyAndDefault(
+    mouseEvent: MouseEvent,
+    element: ElementWithMeta
+  ): Promise<KeyWithDefault> {
+    if (element._tolgee.wrappedWithElementOnlyKey) {
+      return {
+        key: element._tolgee.wrappedWithElementOnlyKey,
+        defaultValue: element._tolgee.wrappedWithElementOnlyDefaultHtml,
+      };
+    }
+    const keysWithDefaults = TranslationHighlighter.getKeyOptions(element);
+
+    // create Set to remove duplicated key values
+    const keySet = new Set(
+      keysWithDefaults.map((keyWithDefault) => keyWithDefault.key)
+    );
+    if (keySet.size > 1) {
+      const renderer = await this.getRenderer();
+      // this opens the popover where user chooses the key
+      const selectedKey = await renderer.getKey({
+        keys: keySet,
+        openEvent: mouseEvent,
+      });
+      // get the key with default
+      const found = keysWithDefaults.find((kwd) => kwd.key === selectedKey);
+      if (found) {
+        return found;
+      }
+    }
+    if (keySet.size === 1) {
+      return keysWithDefaults[0];
+    }
+    // eslint-disable-next-line no-console
+    console.error('No key to translate. This seems like a bug in tolgee.');
+  }
+
+  public translationEdit = async (e: MouseEvent, element: ElementWithMeta) => {
+    const renderer = await this.getRenderer();
+    if (typeof renderer === 'object') {
+      const key = await this.getKeyAndDefault(e, element);
+      if (key) {
+        renderer.renderViewer(key.key, key.defaultValue);
+        return;
+      }
+      return;
+    }
+  };
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+export { Tolgee } from './Tolgee';
+export { TolgeeConfig } from './TolgeeConfig';
+export { ModifierKey } from './Constants/ModifierKey';
+export { TOLGEE_WRAPPED_ONLY_DATA_ATTRIBUTE } from './Constants/Global';
+export * from './modules';
+export * from './types/DTOs';
+export * from './types';
+export * from './Constants/Global';
+export * from './helpers/NodeHelper';
+export * from './helpers/TextHelper';

package/src/internal.ts

@@ -0,0 +1,2 @@
+export { NodeHelper } from './helpers/NodeHelper';
+export { TextHelper } from './helpers/TextHelper';

package/src/modules/IcuFormatter.ts

@@ -0,0 +1,17 @@
+import IntlMessageFormat from 'intl-messageformat';
+import { TolgeeModule } from '../types';
+export const IcuFormatter: TolgeeModule = class {
+  static type = 'formatter' as const;
+
+  cache = new Map<string, IntlMessageFormat>();
+
+  format({ translation, language, params }) {
+    const ignoreTag = !Object.values(params).find(
+      (p) => typeof p === 'function'
+    );
+
+    return new IntlMessageFormat(translation, language, undefined, {
+      ignoreTag,
+    }).format(params) as string;
+  }
+};

package/src/modules/index.ts

@@ -0,0 +1 @@
+export { IcuFormatter } from './IcuFormatter';

package/src/services/ApiHttpService.ts

@@ -0,0 +1,85 @@
+import { Properties } from '../Properties';
+import { ApiHttpError } from '../Errors/ApiHttpError';
+import { ArgumentTypes } from '../helpers/commonTypes';
+
+type FetchArgumentTypes = ArgumentTypes<typeof fetch>;
+
+type Tail<T extends any[]> = ((...args: T) => any) extends (
+  _: infer First,
+  ...rest: infer Rest
+) => any
+  ? T extends any[]
+    ? Rest
+    : ReadonlyArray<Rest[number]>
+  : [];
+
+export class ApiHttpService {
+  constructor(private properties: Properties) {}
+
+  private static async handleErrors(response: Response) {
+    if (response.status >= 400) {
+      const error = new ApiHttpError(response);
+      try {
+        const data = await response.json();
+        error.code = data.code;
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.warn('Tolgee server responded with invalid status code.');
+      }
+      throw error;
+    }
+    return response;
+  }
+
+  async fetch(...args: ArgumentTypes<typeof fetch>) {
+    if (typeof args[0] === 'object') {
+      return fetch({ ...args[0], url: this.getUrl((args[0] as any).url) }).then(
+        (r) => ApiHttpService.handleErrors(r)
+      );
+    }
+    const [url, ...rest] = args;
+    return fetch(this.getUrl(url), ...rest).then((r) =>
+      ApiHttpService.handleErrors(r)
+    );
+  }
+
+  async fetchJson(...args: ArgumentTypes<typeof fetch>) {
+    return this.fetch(...args).then((res) => {
+      return res.json();
+    });
+  }
+
+  async post(
+    url,
+    body,
+    init: FetchArgumentTypes[1] = {},
+    ...rest: Tail<Tail<FetchArgumentTypes>>
+  ) {
+    return this.fetch(
+      url,
+      {
+        body: JSON.stringify(body),
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        ...init,
+      },
+      ...rest
+    );
+  }
+
+  async postJson(
+    url,
+    body,
+    init: FetchArgumentTypes[1] = {},
+    ...rest: Tail<Tail<FetchArgumentTypes>>
+  ) {
+    return this.post(url, body, init, ...rest).then((res) => res.json());
+  }
+
+  private getUrl(path: string) {
+    const querySeparator = path.indexOf('?') < 0 ? '?' : '&';
+    return `${this.properties.config.apiUrl}/${path}${querySeparator}ak=${this.properties.config.apiKey}`;
+  }
+}

package/src/services/CoreService.test.ts

@@ -0,0 +1,142 @@
+jest.dontMock('./CoreService');
+jest.dontMock('./DependencyService');
+
+import '@testing-library/jest-dom/extend-expect';
+import { CoreService } from './CoreService';
+import { getMockedInstance } from '@testFixtures/mocked';
+import { ApiHttpService } from './ApiHttpService';
+import { mocked } from 'ts-jest/utils';
+import { Properties } from '../Properties';
+import { Scope } from '../types';
+import { DependencyService } from './DependencyService';
+
+describe('CoreService', () => {
+  let coreService: CoreService;
+  let mockedFetchJson;
+
+  beforeEach(() => {
+    coreService = new DependencyService().coreService;
+    getMockedInstance(Properties).preferredLanguages = new Set<string>();
+    getMockedInstance(Properties).config = {
+      inputPrefix: '{{',
+      inputSuffix: '}}',
+      restrictedElements: [],
+      tagAttributes: {
+        '*': ['aria-label'],
+      },
+    };
+    mockedFetchJson = mocked(getMockedInstance(ApiHttpService).fetchJson);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('can be created', () => {
+    expect(coreService).not.toBeNull();
+  });
+
+  describe('getLanguages', () => {
+    const dummyLanguages = ['dummyLang1', 'dummyLang2'];
+
+    beforeEach(() => {
+      mockedFetchJson.mockImplementation(async () => {
+        return {
+          _embedded: {
+            languages: dummyLanguages.map((l) => ({
+              tag: l,
+            })),
+          },
+        };
+      });
+    });
+
+    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 () => {
+      getMockedInstance(Properties).preferredLanguages = new Set([
+        dummyLanguages[0],
+      ]);
+      await coreService.getLanguages();
+      expect(getMockedInstance(Properties).preferredLanguages).toEqual(
+        new Set([dummyLanguages[0]])
+      );
+    });
+  });
+
+  describe('getScopes', () => {
+    // eslint-disable-next-line no-console
+    console.error = jest.fn();
+
+    test('will switch to production mode on error', async () => {
+      mocked(mockedFetchJson).mockImplementation(async () => {
+        throw new Error();
+      });
+      await coreService.getApiKeyDetails();
+      expect(getMockedInstance(Properties).mode).toEqual('production');
+      // eslint-disable-next-line no-console
+      expect(console.error).toBeCalledTimes(2);
+    });
+
+    test('will return value from http service', async () => {
+      const mockedReturn = {
+        scopes: ['translations.view', 'translations.edit'],
+      };
+      mocked(mockedFetchJson).mockImplementation(async () => mockedReturn);
+      expect(await coreService.getApiKeyDetails()).toEqual(mockedReturn);
+    });
+  });
+
+  describe('loadApiKeyDetails', () => {
+    beforeEach(() => {
+      const mockedReturn = {
+        scopes: ['translations.edit'],
+        projectId: 0,
+      };
+      mocked(mockedFetchJson).mockImplementation(async () => mockedReturn);
+    });
+
+    test('will set properties.scopes on run in development mode', async () => {
+      const propertiesMock = getMockedInstance(Properties);
+      propertiesMock.mode = 'development';
+      await coreService.loadApiKeyDetails();
+      expect(propertiesMock.scopes).toContain('translations.edit' as Scope);
+      expect(propertiesMock.scopes).not.toContain('translations.view' as Scope);
+    });
+
+    test('will set properties.projectId on run in development mode', async () => {
+      const propertiesMock = getMockedInstance(Properties);
+      propertiesMock.mode = 'development';
+      await coreService.loadApiKeyDetails();
+      expect(propertiesMock.projectId).toEqual(0);
+    });
+  });
+
+  describe('Authorization', () => {
+    test('will return proper value on isAuthorizedTo', () => {
+      getMockedInstance(Properties).scopes = [
+        'translations.edit',
+        'translations.view',
+      ] as Scope[];
+      expect(coreService.isAuthorizedTo('keys.edit')).toBeFalsy();
+      expect(coreService.isAuthorizedTo('translations.view')).toBeTruthy();
+    });
+
+    test('will return proper on checkScopes', () => {
+      getMockedInstance(Properties).scopes = [
+        'translations.edit',
+        'translations.view',
+      ] as Scope[];
+      expect(jest.fn(() => coreService.checkScope('keys.edit'))).toThrowError();
+      const checkMock = jest.fn(() =>
+        coreService.checkScope('translations.view')
+      );
+      checkMock();
+      expect(checkMock).toReturn();
+    });
+  });
+});

package/src/services/CoreService.ts

@@ -0,0 +1,76 @@
+import { Properties } from '../Properties';
+import { ApiHttpService } from './ApiHttpService';
+import { Scope } from '../types';
+import { LanguageModel, PagedModelLanguageModel } from '../types/DTOs';
+import { components } from '../types/apiSchema.generated';
+
+export type ApiKeyWithLanguagesModel =
+  components['schemas']['ApiKeyWithLanguagesModel'];
+
+export class CoreService {
+  private languagePromise: Promise<PagedModelLanguageModel>;
+
+  constructor(
+    private properties: Properties,
+    private apiHttpService: ApiHttpService
+  ) {}
+
+  async getLanguages(): Promise<Set<string>> {
+    if (!(this.languagePromise instanceof Promise)) {
+      this.languagePromise = this.apiHttpService.fetchJson(
+        `v2/projects/languages?size=1000`
+      );
+    }
+
+    const languages = new Set(
+      (await this.languagePromise)._embedded.languages.map((l) => l.tag)
+    );
+    this.properties.preferredLanguages = new Set<string>(
+      Array.from(this.properties.preferredLanguages).filter((l) =>
+        languages.has(l)
+      )
+    );
+    return languages;
+  }
+
+  async getLanguagesFull(): Promise<LanguageModel[]> {
+    this.getLanguages();
+    const languages = await this.languagePromise;
+    return languages._embedded.languages;
+  }
+
+  async getApiKeyDetails(): Promise<ApiKeyWithLanguagesModel> {
+    try {
+      return await this.apiHttpService.fetchJson(`v2/api-keys/current`);
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(e);
+      // eslint-disable-next-line no-console
+      console.error(
+        'Error getting scopes. Trying to switch to production mode!'
+      );
+      this.properties.mode = 'production';
+    }
+  }
+
+  isAuthorizedTo(scope: Scope) {
+    return this.properties.scopes.indexOf(scope) > -1;
+  }
+
+  checkScope(scope: Scope) {
+    if (!this.isAuthorizedTo(scope)) {
+      throw new Error(
+        "Api key not permitted to do this, please add 'translations.view' scope."
+      );
+    }
+  }
+
+  async loadApiKeyDetails() {
+    if (this.properties.scopes === undefined) {
+      const details = await this.getApiKeyDetails();
+      this.properties.scopes = details.scopes as Scope[];
+      this.properties.projectId = details.projectId;
+      this.properties.permittedLanguageIds = details.permittedLanguageIds;
+    }
+  }
+}

package/src/services/DependencyService.test.ts

@@ -0,0 +1,51 @@
+jest.dontMock('./DependencyService');
+jest.dontMock('../TolgeeConfig');
+
+import { getMockedInstance } from '@testFixtures/mocked';
+import { mocked } from 'ts-jest/utils';
+import { InvisibleWrapper } from '../wrappers/invisible/InvisibleWrapper';
+import { TextWrapper } from '../wrappers/text/TextWrapper';
+import { DependencyService } from './DependencyService';
+
+describe('DependecyStore', () => {
+  let dependecyService: DependencyService;
+
+  const config = {
+    apiKey: 'yep',
+  };
+
+  beforeEach(async () => {
+    dependecyService = new DependencyService();
+  });
+
+  afterEach(async () => {
+    jest.clearAllMocks();
+  });
+
+  it('inits translation service', () => {
+    dependecyService.init(config);
+    dependecyService.run();
+    expect(
+      mocked(dependecyService.translationService).initStatic
+    ).toBeCalledTimes(1);
+  });
+
+  it('sets config to properties', () => {
+    dependecyService.init(config);
+    expect(dependecyService.properties.config.apiKey).toEqual(config.apiKey);
+  });
+
+  it('inits text wrapper', () => {
+    dependecyService.init(config);
+    dependecyService.run();
+    expect(dependecyService.wrapper).toEqual(getMockedInstance(TextWrapper));
+  });
+
+  it('inits invisible wrapper', () => {
+    dependecyService.init({ ...config, wrapperMode: 'invisible' });
+    dependecyService.run();
+    expect(dependecyService.wrapper).toEqual(
+      getMockedInstance(InvisibleWrapper)
+    );
+  });
+});