@tolgee/web 4.9.3-rc.04b22e6.0

package/src/tools/extension.ts

@@ -0,0 +1,119 @@
+type Props = {
+  message: string;
+  recievingMessage: string[];
+  data?: any;
+  attempts?: number;
+};
+
+export function listen<T = any>(type: string[], callback: (data?: T) => any) {
+  const handler = (e: MessageEvent) => {
+    if (type.includes(e.data?.type)) {
+      callback(e.data?.data);
+    }
+  };
+  window.addEventListener('message', handler, false);
+  return {
+    unsubscribe: () => {
+      window.removeEventListener('message', handler);
+    },
+  };
+}
+
+export function sendAndRecieve<T>({
+  message,
+  recievingMessage,
+  data,
+  attempts = 1,
+}: Props) {
+  let cancelled = false;
+  const makeAttempt = () =>
+    new Promise<T>((resolve, reject) => {
+      const listener = listen(recievingMessage, handler);
+      window.postMessage({ type: message, data }, window.origin);
+      const timer = setTimeout(timeout, 300);
+
+      function handler(data: any) {
+        clearTimeout(timer);
+        removeEventListener();
+        resolve(data);
+      }
+      function removeEventListener() {
+        listener.unsubscribe();
+      }
+      function timeout() {
+        removeEventListener();
+        reject();
+      }
+    });
+
+  const getData = async (): Promise<T> => {
+    for (let i = 0; i < attempts; i++) {
+      if (cancelled) {
+        return new Promise<T>(() => {});
+      }
+      try {
+        const result = await makeAttempt();
+        return result;
+      } catch (e) {
+        continue;
+      }
+    }
+    if (!cancelled) {
+      throw `Didn't recieve ${recievingMessage.join(' or ')} in time.`;
+    }
+    return new Promise<T>(() => {});
+  };
+
+  return {
+    cancel: () => (cancelled = true),
+    promise: getData(),
+  };
+}
+
+export function takeScreenshot(): Promise<string> {
+  return sendAndRecieve({
+    message: 'TOLGEE_TAKE_SCREENSHOT',
+    recievingMessage: ['TOLGEE_SCREENSHOT_TAKEN'],
+  }).promise as Promise<string>;
+}
+
+export async function detectExtension(): Promise<boolean> {
+  try {
+    await sendAndRecieve({
+      message: 'TOLGEE_PING',
+      recievingMessage: ['TOLGEE_PONG'],
+      attempts: 2,
+    }).promise;
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export type LibConfig = {
+  uiPresent: boolean;
+  uiVersion?: string;
+  mode: 'production' | 'development';
+  config: {
+    apiUrl: string;
+    apiKey: string;
+  };
+};
+
+export function Handshaker() {
+  let cancelLast: undefined | (() => void) = undefined;
+  async function update(data: LibConfig): Promise<boolean> {
+    cancelLast?.();
+    const { cancel, promise } = sendAndRecieve<boolean>({
+      message: 'TOLGEE_READY',
+      recievingMessage: ['TOLGEE_PLUGIN_READY', 'TOLGEE_PLUGIN_UPDATED'],
+      data,
+      attempts: 4,
+    });
+    cancelLast = cancel;
+    return promise;
+  }
+  return {
+    update,
+  };
+}

package/src/typedIndex.ts

@@ -0,0 +1,13 @@
+export { InvisibleObserver } from './InvisibleObserver';
+export { TextObserver } from './TextObserver';
+export { DevBackend } from './DevBackend';
+export { getProjectIdFromApiKey } from './tools/decodeApiKey';
+export { BrowserExtensionPlugin } from './BrowserExtensionPlugin/BrowserExtensionPlugin';
+export { LanguageStorage } from './LanguageStorage';
+export { LanguageDetector } from './LanguageDetector';
+export { BackendFetch } from './BackendFetch';
+
+export * from './types';
+export * from '@tolgee/core';
+// Tolgee with injected browser extension plugin
+export { Tolgee, TolgeeCore } from './WebTolgee';

package/src/types.ts

@@ -0,0 +1,33 @@
+export type NodeLock = {
+  locked?: boolean;
+};
+
+export type TolgeeElement = Element &
+  ElementCSSInlineStyle & {
+    _tolgee?: boolean;
+  };
+
+import type { BackendGetRecordProps, TreeTranslationsData } from '@tolgee/core';
+
+export type BackendOptions = Omit<RequestInit, 'headers'> & {
+  /**
+   * Path prefix (default: '/i18n')
+   */
+  prefix: string;
+  /**
+   * Generate own path based on namespace, language and prefix
+   */
+  getPath: GetPath;
+  /**
+   * Custom headers
+   */
+  headers: Record<string, string>;
+  /**
+   * Extract data from fetch response (default: (r) => r.json())
+   */
+  getData: (r: Response) => Promise<TreeTranslationsData | undefined>;
+};
+
+export type GetPath = (
+  options: BackendGetRecordProps & { prefix: string }
+) => string;

package/src/ui/KeyContextMenu/KeyContextMenu.test.ts

@@ -0,0 +1,51 @@
+import '@testing-library/jest-dom';
+import { UI } from '../index';
+import { sleep } from '../tools/sleep';
+import { screen } from '@testing-library/dom';
+import { DEVTOOLS_ID } from '../../constants';
+
+function getShadowRootElement(testId: string, textContent: string) {
+  const shadowRoot = document.getElementById(DEVTOOLS_ID)!.shadowRoot!;
+
+  return Array.from(
+    shadowRoot.querySelectorAll(`*[data-testid="${testId}"]`)
+  ).find((el) => el.textContent === textContent);
+}
+
+test('it selects the key', async () => {
+  const ui = new UI({
+    apiKey: 'test',
+    apiUrl: 'test',
+    highlight: () => ({ unhighlight: () => {} }),
+    changeTranslation: () => ({ revert: () => {} }),
+  });
+  const mouseEvent = new MouseEvent('click');
+  const keys = new Map([
+    ['key 1', 'Key 1'],
+    ['key 2', 'Key 2'],
+  ]);
+  // open context menu and wait for select
+  const resultPromise = ui.getKey({ openEvent: mouseEvent, keys: keys });
+
+  await sleep(10);
+  const shadowRoot = document.getElementById(DEVTOOLS_ID)!.shadowRoot!;
+
+  Array.from(shadowRoot.children).forEach((child) => {
+    screen.debug(child);
+  });
+
+  keys.forEach((translation, key) => {
+    expect(
+      getShadowRootElement('key_context_menu_translation', translation)
+    ).toBeTruthy();
+    expect(getShadowRootElement('key_context_menu_key', key)).toBeTruthy();
+  });
+
+  getShadowRootElement(
+    'key_context_menu_translation',
+    'Key 2'
+  )!.parentElement!.click();
+
+  const result = await resultPromise;
+  expect(result).toEqual('key 2');
+});

package/src/ui/KeyContextMenu/KeyContextMenu.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import { styled } from '@mui/material/styles';
+
+import { DEVTOOLS_ID, DEVTOOLS_Z_INDEX } from '../../constants';
+import { ThemeProvider } from '../ThemeProvider';
+
+const ScMenuItem = styled(MenuItem)`
+  display: flex;
+  flex-direction: column;
+  height: 50px;
+  justify-content: center;
+  align-items: flex-start;
+`;
+
+const ScTranslation = styled('div')`
+  display: flex;
+  padding: 3px;
+`;
+
+const ScKey = styled('div')`
+  display: flex;
+  margin-top: -5px;
+  padding: 3px;
+  font-weight: bold;
+  font-size: 12px;
+  font-family: Monospace, 'Courier New', Courier;
+`;
+
+export interface KeyContextMenuParams {
+  openEvent: MouseEvent;
+  keys: Map<string, string | undefined>;
+  onSelect: (key: string | undefined) => void;
+}
+
+export type KeyContextMenuState = Partial<KeyContextMenuParams> & {
+  opened: boolean;
+};
+
+export class KeyContextMenu extends React.Component {
+  state: KeyContextMenuState & { opened: boolean } = {
+    opened: false,
+  };
+
+  async show(params: KeyContextMenuParams) {
+    this.setState({ ...params, opened: true });
+  }
+
+  keyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      this.setState((s) => ({ ...s, opened: false }));
+      this.state.onSelect && this.state.onSelect(undefined);
+    }
+  };
+
+  componentDidMount() {
+    document.addEventListener('keydown', this.keyDown);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.keyDown);
+  }
+
+  render() {
+    return (
+      <ThemeProvider>
+        {this.state.opened && (
+          <Menu
+            disablePortal
+            disableEnforceFocus
+            anchorEl={this.state.openEvent?.target as Element}
+            anchorOrigin={{
+              vertical: 'bottom',
+              horizontal: 'center',
+            }}
+            open
+            onClose={() => {
+              this.setState({ opened: false });
+              this.state.onSelect?.(undefined);
+            }}
+            container={document.getElementById(DEVTOOLS_ID)}
+            style={{ zIndex: DEVTOOLS_Z_INDEX }}
+          >
+            {Array.from(this.state.keys || []).map(
+              ([key, translation], index) => (
+                <ScMenuItem
+                  onClick={() => {
+                    this.state.onSelect?.(key);
+                    setTimeout(() => {
+                      this.setState({ opened: false });
+                    });
+                  }}
+                  key={index}
+                >
+                  <ScTranslation data-testid="key_context_menu_translation">
+                    {translation}
+                  </ScTranslation>
+                  <ScKey data-testid="key_context_menu_key">{key}</ScKey>
+                </ScMenuItem>
+              )
+            )}
+          </Menu>
+        )}
+      </ThemeProvider>
+    );
+  }
+}

package/src/ui/KeyDialog/KeyDialog.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { BodyEnd } from '../common/BodyEnd';
+import { DialogProvider } from './TranslationDialogContextProvider';
+import { TranslationDialog } from './TranslationDialog';
+import type { FallbackNSTranslation, UiProps } from '@tolgee/core';
+import { QueryProvider } from '../../ui/client/QueryProvider';
+
+export type ComponentDependencies = UiProps;
+
+export type Props = UiProps;
+
+type State = {
+  key: null | string;
+  defaultValue: undefined | string;
+  dialogOpened: boolean;
+  ns: FallbackNSTranslation;
+};
+
+export class KeyDialog extends React.Component<Props, State> {
+  state = {
+    key: null,
+    defaultValue: undefined,
+    dialogOpened: false,
+    ns: undefined,
+  };
+
+  constructor(props: Props) {
+    super(props);
+  }
+
+  public translationEdit(
+    key: string,
+    defaultValue: string | undefined,
+    ns: FallbackNSTranslation
+  ) {
+    this.setState({
+      ...this.state,
+      dialogOpened: true,
+      defaultValue: defaultValue,
+      key,
+      ns,
+    });
+  }
+
+  public render = () => (
+    <BodyEnd>
+      <QueryProvider apiUrl={this.props.apiUrl} apiKey={this.props.apiKey}>
+        {this.state.dialogOpened && (
+          <DialogProvider
+            uiProps={this.props}
+            defaultValue={this.state.defaultValue || ''}
+            open={this.state.dialogOpened}
+            keyName={this.state.key!}
+            ns={this.state.ns}
+            onClose={this.onClose}
+          >
+            <TranslationDialog />
+          </DialogProvider>
+        )}
+      </QueryProvider>
+    </BodyEnd>
+  );
+
+  private onClose = () => {
+    this.setState({ ...this.state, dialogOpened: false });
+  };
+}

package/src/ui/KeyDialog/KeyForm.tsx

@@ -0,0 +1,208 @@
+import React from 'react';
+import { RESTRICTED_ASCENDANT_ATTRIBUTE } from '@tolgee/core';
+
+import IconButton from '@mui/material/IconButton';
+import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+import OpenInNew from '@mui/icons-material/OpenInNew';
+
+import { TranslationFields } from './TranslationFields';
+import { LanguageSelect } from './LanguageSelect';
+import { LoadingButton } from '../common/LoadingButton';
+import { ScreenshotGallery } from './ScreenshotGallery/ScreenshotGallery';
+import { ScFieldTitle } from '../common/FieldTitle';
+import {
+  useDialogContext,
+  useDialogDispatch,
+} from './TranslationDialogContextProvider';
+import { isAuthorizedTo } from './ScreenshotGallery/utils';
+import { NsSelect } from './NsSelect';
+
+const ScContainer = styled('div')`
+  font-family: Rubik, Roboto, Arial;
+  padding: 20px;
+  box-sizing: border-box;
+  max-width: 100%;
+  width: 700px;
+  display: flex;
+  flex-direction: column;
+`;
+
+const ScHeading = styled('div')`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;
+
+const ScHeadingTitle = styled('div')`
+  display: flex;
+  margin: 0px;
+  font-size: 19px;
+`;
+
+const ScHeadingRight = styled('div')`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex-grow: 1;
+`;
+
+const ScKey = styled('p')`
+  margin: 0px;
+`;
+
+const ScKeyHint = styled('span')`
+  color: grey;
+`;
+
+const ScFieldsWrapper = styled('div')`
+  margin-top: 20px;
+`;
+
+const ScGalleryWrapper = styled('div')`
+  margin-top: 10px;
+`;
+
+const ScControls = styled('div')`
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+  min-height: 36px;
+`;
+
+const ScRestriction = styled('div')`
+  margin-top: 8px;
+  color: ${({ theme }) => theme.palette.text.secondary};
+`;
+
+const ScError = styled('div')`
+  color: red;
+`;
+
+export const KeyForm = () => {
+  const dispatch = useDialogDispatch();
+
+  const linkToPlatform = useDialogContext((c) => c.linkToPlatform);
+  const useBrowserWindow = useDialogContext((c) => c.useBrowserWindow);
+  const input = useDialogContext((c) => c.input);
+  const translations = useDialogContext((c) => c.translations);
+  const formDisabled = useDialogContext((c) => c.formDisabled);
+  const loading = useDialogContext((c) => c.loading);
+  const error = useDialogContext((c) => c.error);
+  const saving = useDialogContext((c) => c.saving);
+  const success = useDialogContext((c) => c.success);
+  const keyExists = useDialogContext((c) => c.keyExists);
+  const scopes = useDialogContext((c) => c.scopes);
+  const ns = useDialogContext((c) => c.ns);
+  const selectedNs = useDialogContext((c) => c.selectedNs);
+
+  const screenshotsView = isAuthorizedTo('screenshots.view', scopes);
+
+  const setUseBrowserWindow = (value: boolean) => {
+    dispatch({ type: 'SET_USE_BROWSER_WINDOW', payload: value });
+  };
+
+  const onClose = () => {
+    dispatch({ type: 'ON_CLOSE' });
+  };
+
+  const onSave = () => {
+    dispatch({ type: 'ON_SAVE' });
+  };
+
+  const onNamespaceChange = (ns: string) => {
+    dispatch({ type: 'SELECTED_NS_CHANGE', payload: { ns } });
+  };
+
+  const ready = !loading && !error;
+
+  return (
+    <ScContainer {...{ [RESTRICTED_ASCENDANT_ATTRIBUTE]: 'true' }}>
+      <ScHeading>
+        <a
+          href={linkToPlatform}
+          target="_blank"
+          rel="noreferrer noopener"
+          id="_tolgee_platform_link"
+        >
+          <svg
+            viewBox="0 0 200 200"
+            xmlns="http://www.w3.org/2000/svg"
+            opacity="0.99"
+            fill="#822B55"
+            style={{
+              fillRule: 'evenodd',
+              clipRule: 'evenodd',
+              strokeLinejoin: 'round',
+              strokeMiterlimit: 2,
+              height: 23,
+            }}
+          >
+            <path d="M97.16,7.27a16.94,16.94,0,0,0-1.9,24.47,16.36,16.36,0,0,0,5,3.83,3.23,3.23,0,0,1-2.9,5.77,23.14,23.14,0,0,1-11.41-13C73.83,31.1,63.46,37.09,52.82,46.51c-27.44,24.3-34.35,61.74-16.38,85.26-4.57,5.79-8,12.22-8.9,18.69a20.88,20.88,0,0,0,5.62,18c9.18,9.61,21.42,7.13,31.26,5.14,6.58-1.34,12.8-2.6,16.5-.23,3.22,2.07,3.47,3.87,3.61,4.45,2.1,9.32-5.79,13.89-7.67,16.27a1.48,1.48,0,0,0,1.13,2.4c3.48,0,9-1.18,12.34-4.08s7.16-7.9,5.89-16.32c-.08-.5-.18-1-.32-1.58-.86-3.35-3.1-7.57-8.61-11.09-7.72-4.95-17-3.07-25.22-1.41-9.76,2-16,2.85-20.37-1.71a9.13,9.13,0,0,1-2.46-8.19c.54-3.77,2.65-7.89,5.62-11.86,21.71,16.89,56.87,13.47,82.67-9.39a75.34,75.34,0,0,0,20.81-28.09A23.14,23.14,0,0,1,134.8,89a3.23,3.23,0,0,1,6.08-2.19,16.37,16.37,0,0,0,3.2,5.39,16.85,16.85,0,1,0,11.48-28,3.23,3.23,0,0,1-.51-6.44,23.41,23.41,0,0,1,12.88,2.69c2.6-14.08,3.34-31.41-2.06-37.51-4.08-4.61-20.62-8-35.18-7.76A23.48,23.48,0,0,1,130.8,25a3.23,3.23,0,0,1-6.33-1.28A16.94,16.94,0,0,0,97.16,7.27Zm63.25,21a5.29,5.29,0,0,1-.57,6.19c-1.29,1.14-2.72-.51-4.1-2.06s-3.1-3.42-1.81-4.56A5.74,5.74,0,0,1,160.41,28.27Z"></path>
+          </svg>
+        </a>
+
+        <ScHeadingTitle>Quick translation</ScHeadingTitle>
+
+        {!useBrowserWindow && (
+          <IconButton
+            title="Open in new window"
+            onClick={() => setUseBrowserWindow(true)}
+            color="inherit"
+            size="small"
+          >
+            <OpenInNew fontSize="small" />
+          </IconButton>
+        )}
+        <ScHeadingRight>{!loading && <LanguageSelect />}</ScHeadingRight>
+      </ScHeading>
+
+      <ScFieldTitle>Key</ScFieldTitle>
+      <ScKey>
+        {input}
+        <ScKeyHint>
+          {!keyExists && ready && " (key doesn't exist yet)"}
+        </ScKeyHint>
+      </ScKey>
+
+      <NsSelect options={ns} value={selectedNs} onChange={onNamespaceChange} />
+
+      <ScFieldsWrapper>
+        <TranslationFields />
+      </ScFieldsWrapper>
+
+      {screenshotsView && ready && (
+        <ScGalleryWrapper>
+          <ScreenshotGallery />
+        </ScGalleryWrapper>
+      )}
+
+      {formDisabled && ready && (
+        <ScRestriction>{`Modification is restricted due to missing ${
+          translations?.keyId !== undefined ? 'translations.edit' : 'keys.edit'
+        } scope in current api key settings.`}</ScRestriction>
+      )}
+
+      {error && <ScError>{error}</ScError>}
+      <ScControls>
+        <Button onClick={onClose} color="secondary">
+          {useBrowserWindow ? 'Close' : 'Cancel'}
+        </Button>
+        <LoadingButton
+          loading={saving}
+          disabled={saving || formDisabled}
+          onClick={onSave}
+          color="primary"
+          variant="contained"
+          style={{ marginLeft: '10px' }}
+        >
+          {success
+            ? 'Saved! ✓'
+            : translations?.keyId === undefined
+            ? 'Create'
+            : 'Update'}
+        </LoadingButton>
+      </ScControls>
+    </ScContainer>
+  );
+};

package/src/ui/KeyDialog/LanguageSelect.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import Checkbox from '@mui/material/Checkbox';
+import ListItemText from '@mui/material/ListItemText';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import FormControl from '@mui/material/FormControl';
+import { styled } from '@mui/material/styles';
+
+import { DEVTOOLS_Z_INDEX } from '../../constants';
+import {
+  useDialogContext,
+  useDialogDispatch,
+} from './TranslationDialogContextProvider';
+
+const ScFormControl = styled(FormControl)`
+  min-width: 200px;
+`;
+
+export const LanguageSelect: React.FC = () => {
+  const dispatch = useDialogDispatch();
+  const availableLanguages = useDialogContext((c) => c.availableLanguages);
+  const selectedLanguages = useDialogContext((c) => c.selectedLanguages);
+
+  const options = availableLanguages
+    ? [...availableLanguages].map((lang) => ({
+        label: lang.name,
+        value: lang.tag,
+      }))
+    : [];
+
+  const selected = options.filter((o) => selectedLanguages.includes(o.value));
+  const onChange = (e: SelectChangeEvent<string[]>) => {
+    const value = e.target.value;
+    const languages = typeof value === 'string' ? value.split(',') : value;
+    dispatch({
+      type: 'ON_SELECTED_LANGUAGES_CHANGE',
+      payload: { languages },
+    });
+  };
+
+  return (
+    <>
+      {availableLanguages && (
+        <ScFormControl
+          variant="outlined"
+          size="small"
+          style={{ maxWidth: 250 }}
+        >
+          <Select
+            multiple
+            value={selected.map((o) => o.value)}
+            onChange={(value) => onChange(value)}
+            input={<OutlinedInput />}
+            renderValue={(selected) => selected.join(', ')}
+            MenuProps={{
+              style: { zIndex: DEVTOOLS_Z_INDEX },
+              disablePortal: true,
+            }}
+          >
+            {options.map((option) => (
+              <MenuItem key={option.value} value={option.value} dense>
+                <Checkbox
+                  size="small"
+                  checked={Boolean(
+                    selected.find((o) => o.value === option.value)
+                  )}
+                />
+                <ListItemText>{option.label}</ListItemText>
+              </MenuItem>
+            ))}
+          </Select>
+        </ScFormControl>
+      )}
+    </>
+  );
+};