@tolgee/web 4.10.0-rc.578d1d0.0

package/src/ui/KeyContextMenu/KeyContextMenu.tsx

@@ -0,0 +1,106 @@
+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>{translation}</ScTranslation>
+                  <ScKey>{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>
+      )}
+    </>
+  );
+};

package/src/ui/KeyDialog/NewWindow.tsx

@@ -0,0 +1,106 @@
+import React, { FC, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import createCache from '@emotion/cache';
+import { CacheProvider } from '@emotion/react';
+import {
+  useDialogContext,
+  useDialogDispatch,
+} from './TranslationDialogContextProvider';
+
+export const NewWindow: FC = (props) => {
+  const newWindow = useRef<Window>(null);
+  const [popup, setPopup] = useState<Window | null>(null);
+  const dispatch = useDialogDispatch();
+  const container = useDialogContext((c) => c.container);
+
+  const setContainer = (el: Element | undefined) => {
+    dispatch({ type: 'SET_CONTAINER', payload: el });
+  };
+  const onClose = () => {
+    dispatch({ type: 'ON_CLOSE' });
+  };
+
+  useEffect(() => {
+    // Create container element on client-side
+    const div = document.createElement('div');
+    div.style.width = '100vw';
+    div.style.height = '100vh';
+    div.style.position = 'relative';
+    setContainer(div);
+  }, []);
+
+  useEffect(() => {
+    // When container is ready
+    if (container) {
+      // Create window
+      const win = window.open('', '', 'width=600,height=600,left=200,top=200');
+
+      if (!win) {
+        return;
+      }
+
+      win.document.title = 'Tolgee - Translate Text';
+      if (!win.document) {
+        alert('Please allow popups to open new window.');
+      }
+      // @ts-ignore
+      newWindow.current = win;
+      // Append container
+      win.document.body.style.margin = '0px';
+      win.document.body.appendChild(container);
+
+      const onExit = () => {
+        setContainer(undefined);
+        win.close();
+        onClose();
+      };
+
+      win.onbeforeunload = () => {
+        setContainer(undefined);
+        onClose();
+      };
+
+      const onKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') {
+          dispatch({ type: 'ON_CLOSE' });
+        }
+      };
+
+      const onBeforeUnload = () => {
+        onExit();
+      };
+
+      win.document.addEventListener('keydown', onKeyDown, true);
+      window.addEventListener('beforeunload', onBeforeUnload, true);
+      setPopup(win);
+
+      return () => {
+        win.document.removeEventListener('keydown', onKeyDown, true);
+        window.removeEventListener('beforeunload', onBeforeUnload, true);
+        setContainer(undefined);
+        newWindow.current?.close();
+        setPopup(null);
+      };
+    }
+  }, [container]);
+
+  useEffect(() => {
+    popup?.focus();
+  });
+
+  const styleCache = React.useMemo(() => {
+    // styles insertion point in popup head
+    const head = popup?.document.head;
+    return createCache({
+      key: 'external',
+      container: head,
+    });
+  }, [popup]);
+
+  return container
+    ? createPortal(
+        <CacheProvider value={styleCache}>{props.children}</CacheProvider>,
+        container
+      )
+    : null;
+};

package/src/ui/KeyDialog/NsSelect.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { FallbackNSTranslation } from '@tolgee/core';
+
+import FormControl from '@mui/material/FormControl';
+import MenuItem from '@mui/material/MenuItem';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import Select from '@mui/material/Select';
+import ListItemText from '@mui/material/ListItemText';
+import { DEVTOOLS_Z_INDEX } from '../constants';
+import { ScFieldTitle } from '../../ui/common/FieldTitle';
+import { getFallbackArray } from '@tolgee/core';
+
+const getNsName = (ns: string) => {
+  if (!ns) {
+    return 'No namespace';
+  }
+  return ns;
+};
+
+type Props = {
+  options: FallbackNSTranslation;
+  value: string;
+  onChange: (value: string) => void;
+};
+
+export const NsSelect: React.FC<Props> = ({ onChange, options, value }) => {
+  const namespaces = getFallbackArray(options);
+  const namespaceOne = namespaces.length === 1;
+  const namespaceEmpty = namespaceOne && namespaces[0] === '';
+
+  return (
+    <>
+      {!namespaceEmpty && (
+        <>
+          <ScFieldTitle>Namespace</ScFieldTitle>
+          {namespaceOne ? (
+            getNsName(namespaces[0])
+          ) : (
+            <FormControl
+              variant="outlined"
+              size="small"
+              style={{ maxWidth: 250 }}
+            >
+              <Select
+                displayEmpty
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+                input={<OutlinedInput />}
+                renderValue={(value) => getNsName(value)}
+                MenuProps={{
+                  style: { zIndex: DEVTOOLS_Z_INDEX },
+                  disablePortal: true,
+                }}
+              >
+                {namespaces.map((ns) => (
+                  <MenuItem key={ns} value={ns} dense>
+                    <ListItemText>{getNsName(ns)}</ListItemText>
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          )}
+        </>
+      )}
+    </>
+  );
+};