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

package/src/ui/client/client.ts

@@ -0,0 +1,155 @@
+import { getProjectIdFromApiKey } from '../../tools/decodeApiKey';
+import { paths } from './apiSchema.generated';
+import { GlobalOptions } from './QueryProvider';
+import { RequestParamsType, ResponseContent } from './types';
+
+type Params = {
+  [k: string]: string | string[] | null | undefined | Params;
+};
+
+async function getResObject(r: Response) {
+  const textBody = await r.text();
+  try {
+    return JSON.parse(textBody);
+  } catch (e) {
+    return textBody;
+  }
+}
+
+const flattenParams = (
+  params: Params | null | undefined
+): Record<string, string | string[]> => {
+  if (params) {
+    return Object.entries(params).reduce(
+      (acc, [key, value]) =>
+        Array.isArray(value) || typeof value !== 'object'
+          ? { ...acc, [key]: value }
+          : { ...acc, ...flattenParams(value) },
+      {}
+    );
+  } else {
+    return {};
+  }
+};
+
+function buildQuery(object: { [key: string]: any }): string {
+  return Object.keys(object)
+    .filter((k) => !!object[k])
+    .map((k) => {
+      if (Array.isArray(object[k])) {
+        return object[k]
+          .map((v: any) => encodeURIComponent(k) + '=' + encodeURIComponent(v))
+          .join('&');
+      } else {
+        return encodeURIComponent(k) + '=' + encodeURIComponent(object[k]);
+      }
+    })
+    .join('&');
+}
+
+async function customFetch(
+  input: RequestInfo,
+  options: GlobalOptions,
+  init?: RequestInit
+): Promise<Response> {
+  if (options.apiUrl === undefined) {
+    throw 'Api url not specified';
+  }
+  if (options.apiKey === undefined) {
+    throw 'Api key not specified';
+  }
+
+  init = init || {};
+  init.headers = init.headers || {};
+  init.headers = {
+    ...init.headers,
+    'X-API-Key': options.apiKey,
+  };
+
+  return fetch(options.apiUrl + input, init)
+    .then(async (r) => {
+      if (!r.ok) {
+        const data = await getResObject(r);
+        const message = `${r.status}: ${
+          data?.message || 'Error status code from server'
+        }`;
+        throw new Error(message);
+      }
+      return await getResObject(r);
+    })
+    .catch((e) => {
+      throw e.message || 'Failed to fetch';
+    });
+}
+
+export const addProjectIdToUrl = (url: string) => {
+  return url.replace('/projects/', '/projects/{projectId}/');
+};
+
+export async function client<
+  Url extends keyof Paths,
+  Method extends keyof Paths[Url],
+  Paths = paths
+>(
+  url: Url,
+  method: Method,
+  request: RequestParamsType<Url, Method, Paths>,
+  options: GlobalOptions
+) {
+  const pathParams = (request as any)?.path || {};
+  let urlResult = url as string;
+
+  const projectId = getProjectIdFromApiKey(options.apiKey);
+  if (projectId !== undefined) {
+    pathParams.projectId = projectId;
+    urlResult = addProjectIdToUrl(urlResult);
+  }
+
+  if (pathParams) {
+    Object.entries(pathParams).forEach(([key, value]) => {
+      urlResult = urlResult.replace(`{${key}}`, value as any);
+    });
+  }
+
+  const formData = request?.content?.['multipart/form-data'] as Record<
+    string,
+    unknown
+  >;
+  let body: FormData | undefined = undefined;
+  if (formData) {
+    body = new FormData();
+    Object.entries(formData).forEach(([key, value]) => {
+      if (Array.isArray(value)) {
+        let fileName: undefined | string = undefined;
+        if (Object.prototype.toString.call(value) === '[object File]') {
+          fileName = (value as any as File).name;
+        }
+
+        value.forEach((item) => body?.append(key, item as any, fileName));
+        return;
+      }
+      body?.append(key, value as any);
+    });
+  }
+
+  const jsonBody = JSON.stringify(request?.content?.['application/json']);
+
+  const queryParams = request?.query as any;
+  let queryString = '';
+
+  const params = flattenParams(queryParams);
+  const query = buildQuery(params);
+  if (query) {
+    queryString = '?' + query;
+  }
+
+  return customFetch(urlResult + queryString, options, {
+    method: method as string,
+    body: body || jsonBody,
+    headers: jsonBody
+      ? {
+          'Content-Type': 'application/json',
+        }
+      : undefined,
+  }) as Promise<ResponseContent<Url, Method, Paths>>;
+}

package/src/ui/client/types.ts

@@ -0,0 +1,113 @@
+import { paths } from './apiSchema.generated';
+
+type ExcludeAk<T extends Record<string, Record<string, any>>> = Omit<
+  T,
+  'query'
+> & {
+  query?: Omit<T['query'], 'ak'>;
+};
+
+export type RequestParamsType<
+  Url extends keyof Paths,
+  Method extends keyof Paths[Url],
+  Paths = paths
+> = ExcludeAk<
+  // @ts-ignore
+  Omit<OperationSchema<Url, Method, Paths>['parameters'], 'header'>
+> &
+  OperationSchema<Url, Method, Paths>['requestBody'];
+
+export type ResponseContent<
+  Url extends keyof Paths,
+  Method extends keyof Paths[Url],
+  Paths
+> = OperationSchema<
+  Url,
+  Method,
+  Paths
+>['responses'][200] extends NotNullAnyContent
+  ? OperationSchema<Url, Method, Paths>['responses'][200]['content']['*/*']
+  : OperationSchema<
+      Url,
+      Method,
+      Paths
+    >['responses'][200] extends NotNullJsonHalContent
+  ? OperationSchema<
+      Url,
+      Method,
+      Paths
+    >['responses'][200]['content']['application/hal+json']
+  : OperationSchema<
+      Url,
+      Method,
+      Paths
+    >['responses'][200] extends NotNullJsonContent
+  ? OperationSchema<
+      Url,
+      Method,
+      Paths
+    >['responses'][200]['content']['application/json']
+  : OperationSchema<
+      Url,
+      Method,
+      Paths
+    >['responses'][201] extends NotNullAnyContent
+  ? OperationSchema<Url, Method, Paths>['responses'][201]['content']['*/*']
+  : void;
+
+type NotNullAnyContent = {
+  content: {
+    '*/*': any;
+  };
+};
+
+type NotNullJsonHalContent = {
+  content: {
+    'application/hal+json': any;
+  };
+};
+
+type NotNullJsonContent = {
+  content: {
+    'application/json': any;
+  };
+};
+
+type ResponseType = {
+  200?:
+    | {
+        content?: {
+          '*/*'?: any;
+          'application/json'?: any;
+          'application/hal+json'?: any;
+        };
+      }
+    | unknown;
+  201?:
+    | {
+        content?: {
+          '*/*'?: any;
+        };
+      }
+    | unknown;
+};
+
+type OperationSchemaType = {
+  requestBody?: {
+    content?: {
+      'multipart/form-data'?: { [key: string]: any };
+      'application/json'?: any;
+    };
+  };
+  parameters?: {
+    path?: { [key: string]: any };
+    query?: { [key: string]: { [key: string]: any } | any };
+  };
+  responses: ResponseType;
+};
+
+type OperationSchema<
+  Url extends keyof Paths,
+  Method extends keyof Paths[Url],
+  Paths = paths
+> = Paths[Url][Method] extends OperationSchemaType ? Paths[Url][Method] : never;

package/src/ui/client/useQueryApi.ts

@@ -0,0 +1,121 @@
+import { RequestOptions } from 'https';
+import { useCallback, useContext } from 'react';
+import {
+  UseQueryOptions,
+  useQuery,
+  useQueryClient,
+  useMutation,
+  Query,
+  QueryClient,
+  UseMutationOptions,
+  MutationOptions,
+} from 'react-query';
+import { paths } from './apiSchema.generated';
+import { client } from './client';
+import { QueryContext } from './QueryProvider';
+import { RequestParamsType, ResponseContent } from './types';
+
+export type QueryProps<
+  Url extends keyof Paths,
+  Method extends keyof Paths[Url],
+  Paths = paths
+> = {
+  url: Url;
+  method: Method;
+  fetchOptions?: RequestOptions;
+  options?: UseQueryOptions<ResponseContent<Url, Method, Paths>>;
+} & RequestParamsType<Url, Method, Paths>;
+
+export const useApiQuery = <
+  Url extends keyof Paths,
+  Method extends keyof Paths[Url],
+  Paths = paths
+>(
+  props: QueryProps<Url, Method, Paths>
+) => {
+  const { url, method, options, ...request } = props;
+
+  const globalOptions = useContext(QueryContext);
+
+  return useQuery<ResponseContent<Url, Method, Paths>, any>(
+    [url, (request as any)?.path, (request as any)?.query],
+    () => client(url, method, request as any, globalOptions),
+    options
+  );
+};
+
+export type MutationProps<
+  Url extends keyof Paths,
+  Method extends keyof Paths[Url],
+  Paths = paths
+> = {
+  url: Url;
+  method: Method;
+  fetchOptions?: RequestOptions;
+  options?: UseMutationOptions<
+    ResponseContent<Url, Method, Paths>,
+    any,
+    RequestParamsType<Url, Method, Paths>
+  >;
+  invalidatePrefix?: string;
+};
+
+export const useApiMutation = <
+  Url extends keyof Paths,
+  Method extends keyof Paths[Url],
+  Paths = paths
+>(
+  props: MutationProps<Url, Method, Paths>
+) => {
+  const queryClient = useQueryClient();
+  const { url, method, options, invalidatePrefix } = props;
+  const globalOptions = useContext(QueryContext);
+  const mutation = useMutation<
+    ResponseContent<Url, Method, Paths>,
+    any,
+    RequestParamsType<Url, Method, Paths>
+  >(
+    (request) =>
+      client<Url, Method, Paths>(url, method, request, globalOptions),
+    options
+  );
+
+  // inject custom onSuccess
+  const customOptions = (options: MutationOptions<any, any, any, any>) => ({
+    ...options,
+    onSuccess: (...args: any) => {
+      if (invalidatePrefix !== undefined) {
+        invalidateUrlPrefix(queryClient, invalidatePrefix);
+      }
+      // @ts-ignore
+      options?.onSuccess?.(...args);
+    },
+  });
+
+  const mutate = useCallback<typeof mutation.mutate>(
+    (variables, options) => {
+      return mutation.mutate(variables, customOptions(options as any));
+    },
+    [mutation.mutate]
+  );
+
+  const mutateAsync = useCallback<typeof mutation.mutateAsync>(
+    (variables, options) => {
+      return mutation.mutateAsync(variables, customOptions(options as any));
+    },
+    [mutation.mutateAsync]
+  );
+
+  return { ...mutation, mutate, mutateAsync };
+};
+
+export const matchUrlPrefix = (prefix: string) => {
+  return {
+    predicate: (query: Query) => {
+      return (query.queryKey[0] as string)?.startsWith(prefix);
+    },
+  };
+};
+
+export const invalidateUrlPrefix = (queryClient: QueryClient, prefix: string) =>
+  queryClient.invalidateQueries(matchUrlPrefix(prefix));

package/src/ui/common/BodyEnd.tsx

@@ -0,0 +1,44 @@
+import { DEVTOOLS_ID } from '../../constants';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+export class BodyEnd extends React.PureComponent<{ document?: Document }> {
+  _popup = null as HTMLElement | null;
+
+  get document() {
+    return this.props.document || document;
+  }
+
+  get devTools() {
+    return (
+      this.document.getElementById(DEVTOOLS_ID)?.shadowRoot ||
+      this.document.body
+    );
+  }
+
+  componentDidMount() {
+    this._popup = this.document.createElement('div')!;
+
+    this.devTools.appendChild(this._popup);
+    this._render();
+  }
+
+  componentDidUpdate() {
+    this._render();
+  }
+
+  componentWillUnmount() {
+    if (this._popup) {
+      ReactDOM.unmountComponentAtNode(this._popup);
+      this.devTools.removeChild(this._popup);
+    }
+  }
+
+  _render() {
+    ReactDOM.render(<>{this.props.children}</>, this._popup);
+  }
+
+  render() {
+    return null;
+  }
+}

package/src/ui/common/FieldTitle.tsx

@@ -0,0 +1,9 @@
+import { styled } from '@mui/material/styles';
+
+export const ScFieldTitle = styled('div')`
+  display: flex;
+  margin-top: 16px;
+  margin-bottom: 4px;
+  font-size: 14px;
+  color: ${({ theme }) => theme.palette.text.secondary};
+`;

package/src/ui/common/LoadingButton.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import Button, { ButtonProps } from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
+
+import { styled } from '@mui/material/styles';
+
+const StyledButton = styled(Button)`
+  position: 'relative';
+`;
+
+const LoadingWrapper = styled('div')`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+type Props = ButtonProps & {
+  loading?: boolean;
+};
+
+export const LoadingButton: React.FC<Props> = ({
+  children,
+  loading,
+  disabled,
+  ...props
+}) => {
+  const isDisabled = loading || disabled;
+
+  return (
+    <StyledButton {...props} disabled={isDisabled}>
+      {loading && (
+        <LoadingWrapper>
+          <CircularProgress size={25} />
+        </LoadingWrapper>
+      )}
+      {children}
+    </StyledButton>
+  );
+};

package/src/ui/index.ts

@@ -0,0 +1,88 @@
+import { createElement } from 'react';
+import * as ReactDOM from 'react-dom';
+import type {
+  FallbackNSTranslation,
+  UiProps,
+  UiInterface,
+  UiKeyOption,
+} from '@tolgee/core';
+
+import { KeyDialog } from './KeyDialog/KeyDialog';
+import { KeyContextMenu } from './KeyContextMenu/KeyContextMenu';
+import { DEVTOOLS_ID } from '../constants';
+
+export class UI implements UiInterface {
+  private viewerComponent: KeyDialog;
+  private keyContextMenu: KeyContextMenu;
+
+  constructor(private props: UiProps) {
+    let rootElement = document.getElementById(DEVTOOLS_ID);
+    if (!rootElement) {
+      rootElement = document.createElement('div');
+      rootElement.id = DEVTOOLS_ID;
+      rootElement.attachShadow({ mode: 'open' });
+      document.body.appendChild(rootElement);
+    }
+    const devTools = rootElement.shadowRoot!;
+
+    const tolgeeModalContainer = document.createElement('div');
+    devTools.appendChild(tolgeeModalContainer);
+
+    const contextMenuContainer = document.createElement('div');
+    devTools.appendChild(contextMenuContainer);
+
+    const viewerElement = createElement(KeyDialog, {
+      ...this.props,
+    });
+
+    this.viewerComponent = ReactDOM.render(viewerElement, tolgeeModalContainer);
+
+    this.keyContextMenu = ReactDOM.render(
+      createElement(KeyContextMenu),
+      contextMenuContainer
+    );
+  }
+
+  public renderViewer(
+    key: string,
+    defaultValue: string | undefined,
+    ns: FallbackNSTranslation
+  ) {
+    this.viewerComponent.translationEdit(key, defaultValue, ns);
+  }
+
+  public async getKey(props: {
+    openEvent: MouseEvent;
+    keys: Map<string, string | undefined>;
+  }): Promise<string | undefined> {
+    return await new Promise<string | undefined>((resolve) => {
+      this.keyContextMenu.show({
+        ...props,
+        onSelect: (key) => resolve(key),
+      });
+    });
+  }
+
+  public async handleElementClick(
+    event: MouseEvent,
+    keysAndDefaults: UiKeyOption[]
+  ) {
+    let key = keysAndDefaults[0].key as string | undefined;
+    if (keysAndDefaults.length > 1) {
+      const keys = new Map(
+        keysAndDefaults.map(({ key, translation, defaultValue }) => [
+          key,
+          translation || defaultValue,
+        ])
+      );
+      key = await this.getKey({
+        openEvent: event,
+        keys,
+      });
+    }
+    if (key) {
+      const value = keysAndDefaults.find((val) => val.key === key)!;
+      this?.renderViewer(key, value.defaultValue, value.ns);
+    }
+  }
+}

package/src/ui/screenshots/ScreenshotPreview.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+const Img = styled.img`
+  width: 100px;
+  height: 100px;
+  object-fit: contain;
+  padding: 2px;
+  box-sizing: 'border-box';
+`;
+
+type Props = {
+  url: string;
+};
+
+export const ScreenshotPreview: React.FC<Props> = ({ url }) => {
+  return <Img src={url} />;
+};

package/src/ui/tools/createProvider.tsx

@@ -0,0 +1,54 @@
+import React, { useCallback, useRef } from 'react';
+import { createContext, useContextSelector } from 'use-context-selector';
+
+type DispatchType<ActionType, DispatchReturn> = (
+  action: ActionType
+) => DispatchReturn;
+
+type SelectorType<StateType, ReturnType> = (state: StateType) => ReturnType;
+
+export const createProvider = <
+  StateType,
+  ActionType,
+  DispatchReturn,
+  ProviderProps
+>(
+  body: (
+    props: ProviderProps
+  ) => [state: StateType, dispatch: DispatchType<ActionType, DispatchReturn>]
+) => {
+  const StateContext = createContext<StateType>(null as any);
+  const DispatchContext = React.createContext<
+    DispatchType<ActionType, DispatchReturn>
+  >(null as any);
+
+  const Provider: React.FC<ProviderProps> = ({ children, ...props }) => {
+    const [state, _dispatch] = body(props as any);
+    const dispatchRef = useRef(_dispatch);
+
+    dispatchRef.current = _dispatch;
+
+    // stable dispatch function
+    const dispatch = useCallback(
+      (action: ActionType) => dispatchRef.current?.(action),
+      [dispatchRef]
+    );
+
+    return (
+      <StateContext.Provider value={state}>
+        <DispatchContext.Provider value={dispatch}>
+          {children}
+        </DispatchContext.Provider>
+      </StateContext.Provider>
+    );
+  };
+
+  const useDispatch = () => React.useContext(DispatchContext);
+  const useStateContext = function <SelectorReturn>(
+    selector: SelectorType<StateType, SelectorReturn>
+  ) {
+    return useContextSelector(StateContext, selector);
+  };
+
+  return [Provider, useDispatch, useStateContext] as const;
+};

package/src/ui/tools/isLanguagePermitted.ts

@@ -0,0 +1,14 @@
+export const isLanguagePermitted = (
+  language: string,
+  permittedLanguages: number[] | undefined,
+  allLanguages?: any[]
+) => {
+  if (!permittedLanguages?.length) {
+    return true;
+  }
+  const languageId = allLanguages?.find((l) => l.tag === language)?.id;
+  if (languageId === undefined) {
+    return true;
+  }
+  return permittedLanguages.includes(languageId as number);
+};

package/src/ui/tools/sleep.ts

@@ -0,0 +1,2 @@
+export const sleep = (ms: number) =>
+  new Promise((resolve) => setTimeout(resolve, ms));

package/types/index.d.ts

@@ -0,0 +1,9 @@
+import type { TolgeePlugin, DevCredentials } from '@tolgee/core';
+
+export declare const ContextUi: () => TolgeePlugin;
+export declare const InContextTools: (
+  overrideCredentials?: DevCredentials
+) => TolgeePlugin;
+export declare const DevTools: typeof InContextTools;
+
+export * from '../lib/typedIndex';