@tolgee/web 4.9.3-rc.128edeb.0

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>
+          )}
+        </>
+      )}
+    </>
+  );
+};

package/src/ui/KeyDialog/ScreenshotGallery/ExtensionPrompt.tsx

@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from 'react';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import { styled } from '@mui/material/styles';
+
+import { DEVTOOLS_Z_INDEX, CHROME_EXTENSION_LINK } from '../../../constants';
+
+type Props = {
+  onClose: () => void;
+};
+
+const ScTitle = styled('div')`
+  display: flex;
+  margin: 0px 0px 26px 0px;
+  font-size: 19px;
+`;
+
+const ScText = styled('div')`
+  margin: 8px 0px;
+`;
+
+const ScControls = styled('div')`
+  display: flex;
+  justify-content: flex-end;
+  margin: ${({ theme }) => theme.spacing(1)};
+  min-height: 36px;
+`;
+
+export const ExtensionPrompt: React.FC<Props> = ({ onClose }) => {
+  const [installClicked, setInstallClicked] = useState(false);
+
+  const onReload = () => {
+    window.location.reload();
+  };
+
+  useEffect(() => {
+    const handler = () => {
+      setInstallClicked(true);
+    };
+    // act like extension was installed after user returns to this window
+    window.addEventListener('focus', handler);
+    return () => window.removeEventListener('focus', handler);
+  }, []);
+
+  return (
+    <Dialog
+      open={true}
+      disableEnforceFocus
+      disablePortal
+      style={{ zIndex: DEVTOOLS_Z_INDEX }}
+      onClose={onClose}
+    >
+      {installClicked ? (
+        <>
+          <DialogContent>
+            <ScTitle>Browser extension required</ScTitle>
+            <ScText>
+              After installing the extension, you need to reload this page.
+            </ScText>
+          </DialogContent>
+          <ScControls>
+            <Button onClick={onReload} color="primary" variant="contained">
+              Reload
+            </Button>
+          </ScControls>
+        </>
+      ) : (
+        <>
+          <DialogContent>
+            <ScTitle>Browser extension required</ScTitle>
+            <ScText>
+              To make automatic screenshots please install Tolgee browser
+              extension.
+            </ScText>
+          </DialogContent>
+          <ScControls>
+            <Button onClick={onClose} color="secondary">
+              Cancel
+            </Button>
+            <Button
+              component="a"
+              color="primary"
+              variant="contained"
+              style={{ marginLeft: 10 }}
+              href={CHROME_EXTENSION_LINK}
+              rel="noreferrer noopener"
+              target="_blank"
+            >
+              Install
+            </Button>
+          </ScControls>
+        </>
+      )}
+    </Dialog>
+  );
+};

package/src/ui/KeyDialog/ScreenshotGallery/ScreenshotDetail.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import Dialog from '@mui/material/Dialog';
+import { styled } from '@mui/material/styles';
+import { ScreenshotInterface } from '../TranslationDialogContextProvider';
+import { DEVTOOLS_Z_INDEX } from '../../../constants';
+
+const ScImg = styled('img')`
+  width: 80vw;
+  height: 80vh;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+`;
+
+type Props = {
+  screenshot: ScreenshotInterface;
+  onClose: () => void;
+};
+
+export const ScreenshotDetail: React.FC<Props> = ({ screenshot, onClose }) => {
+  return (
+    <Dialog
+      open={true}
+      disablePortal
+      disableEnforceFocus
+      maxWidth="lg"
+      style={{ zIndex: DEVTOOLS_Z_INDEX }}
+      onClose={onClose}
+    >
+      <ScImg src={screenshot.fileUrl} />
+    </Dialog>
+  );
+};

package/src/ui/KeyDialog/ScreenshotGallery/ScreenshotDropzone.tsx

@@ -0,0 +1,138 @@
+import clsx from 'clsx';
+import React, { FunctionComponent, useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { green, red } from '@mui/material/colors';
+import Backup from '@mui/icons-material/Backup';
+import HighlightOff from '@mui/icons-material/HighlightOff';
+import { MAX_FILE_COUNT } from './utils';
+import { dataTransferItemsToArray } from './utils';
+
+export interface ScreenshotDropzoneProps {
+  validateAndUpload: (files: File[]) => void;
+  enabled: boolean;
+}
+
+const ScContainer = styled('div')`
+  position: relative;
+  display: flex;
+  overflow: visible;
+  flex-wrap: wrap;
+`;
+
+const ScDropZoneValidation = styled('div')`
+  border: 1px dashed lightgrey;
+  z-index: 2;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.2s;
+  &.valid {
+    backdrop-filter: blur(5px);
+    border: 1px solid ${green[200]};
+    background-color: ${green[50]};
+    opacity: 0.9;
+  }
+  &.invalid {
+    border: 1px solid ${red[200]};
+    opacity: 0.9;
+    background-color: ${red[50]};
+    backdrop-filter: blur(5px);
+  }
+`;
+
+const ScValidIcon = styled(Backup)`
+  filter: drop-shadow(1px 1px 0px ${green[200]})
+    drop-shadow(-1px 1px 0px ${green[200]})
+    drop-shadow(1px -1px 0px ${green[200]})
+    drop-shadow(-1px -1px 0px ${green[200]});
+  font-size: 100;
+  color: ${({ theme }) => theme.palette.common.white};
+`;
+
+const ScInvalidIcon = styled(HighlightOff)`
+  filter: drop-shadow(1px 1px 0px ${red[200]})
+    drop-shadow(-1px 1px 0px ${red[200]}) drop-shadow(1px -1px 0px ${red[200]})
+    drop-shadow(-1px -1px 0px ${red[200]});
+  font-size: 100;
+  color: ${({ theme }) => theme.palette.common.white};
+`;
+
+export const ScreenshotDropzone: FunctionComponent<ScreenshotDropzoneProps> = ({
+  validateAndUpload,
+  enabled,
+  ...props
+}) => {
+  const [dragOver, setDragOver] = useState(null as null | 'valid' | 'invalid');
+  const [dragEnterTarget, setDragEnterTarget] = useState(
+    null as EventTarget | null
+  );
+
+  const onDragEnter = (e: React.DragEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+    setDragEnterTarget(e.target);
+    if (e.dataTransfer.items) {
+      const files = dataTransferItemsToArray(e.dataTransfer.items);
+      if (files.length > MAX_FILE_COUNT) {
+        setDragOver('invalid');
+        return;
+      }
+      setDragOver('valid');
+    }
+  };
+
+  const onDragOver = (e: React.DragEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+  };
+
+  const onDragLeave = (e: React.DragEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (e.target === dragEnterTarget) {
+      setDragOver(null);
+    }
+  };
+
+  const onDrop = async (e: React.DragEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (e.dataTransfer.items) {
+      const files = dataTransferItemsToArray(e.dataTransfer.items);
+      validateAndUpload(files);
+    }
+    setDragOver(null);
+  };
+
+  let dropZoneAllowedProps = {} as any;
+  if (enabled) {
+    dropZoneAllowedProps = {
+      onDrop,
+      onDragEnter,
+      onDragLeave,
+      onDragOver,
+    };
+  }
+
+  return (
+    <>
+      <ScContainer {...dropZoneAllowedProps} data-cy="dropzone">
+        <ScDropZoneValidation
+          className={clsx({
+            valid: dragOver === 'valid',
+            invalid: dragOver === 'invalid',
+          })}
+        >
+          {dragOver === 'valid' && <ScValidIcon />}
+          {dragOver === 'invalid' && <ScInvalidIcon />}
+        </ScDropZoneValidation>
+        {props.children}
+      </ScContainer>
+    </>
+  );
+};

package/src/ui/KeyDialog/ScreenshotGallery/ScreenshotGallery.tsx

@@ -0,0 +1,240 @@
+import React, { useRef, useState } from 'react';
+import CircularProgress from '@mui/material/CircularProgress';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import { styled } from '@mui/material/styles';
+import CameraAlt from '@mui/icons-material/CameraAlt';
+import AddCircleOutline from '@mui/icons-material/AddCircleOutline';
+import { ScreenshotDropzone } from './ScreenshotDropzone';
+import { ScreenshotThumbnail } from './ScreenshotThumbnail';
+import { isAuthorizedTo, MAX_FILE_COUNT } from './utils';
+import { DEVTOOLS_Z_INDEX } from '../../../constants';
+import {
+  useDialogContext,
+  useDialogDispatch,
+} from '../TranslationDialogContextProvider';
+import { ScreenshotDetail } from './ScreenshotDetail';
+import { ScFieldTitle } from '../../common/FieldTitle';
+import { ExtensionPrompt } from './ExtensionPrompt';
+
+const ScPlaceholder = styled('div')`
+  display: flex;
+  flex-direction: column;
+  height: 100px;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  flex-grow: 1;
+  border: 1px dashed lightgrey;
+`;
+
+const ScScreenshotDummy = styled('div')`
+  display: flex;
+  width: 100px;
+  height: 100px;
+  align-items: center;
+  justify-content: center;
+  margin: 1px;
+`;
+
+const ScHeading = styled('div')`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+`;
+
+const ScControls = styled('div')`
+  display: flex;
+`;
+
+const ScText = styled('div')`
+  color: ${({ theme }) => theme.palette.text.secondary};
+`;
+
+const ALLOWED_UPLOAD_TYPES = ['image/png', 'image/jpeg', 'image/gif'];
+
+export const ScreenshotGallery: React.FC = () => {
+  const fileRef = useRef<HTMLInputElement>(null);
+  const dispatch = useDialogDispatch();
+
+  const screenshots = useDialogContext((c) => c.screenshots);
+  const screenshotDetails = useDialogContext((c) => c.screenshotDetail);
+  const pluginAvailable = useDialogContext((c) => c.pluginAvailable);
+  const formDisabled = useDialogContext((c) => c.formDisabled);
+  const screenshotsUploading = useDialogContext((c) => c.screenshotsUploading);
+  const scopes = useDialogContext((c) => c.scopes);
+
+  const uploadImages = (files: File[]) => {
+    dispatch({ type: 'HANDLE_UPLOAD_IMAGES', payload: { files } });
+  };
+
+  const removeScreenshot = (id: number) => {
+    dispatch({ type: 'HANDLE_REMOVE_SCREENSHOT', payload: { id } });
+  };
+
+  const takeScreenshot = () => {
+    dispatch({ type: 'HANDLE_TAKE_SCREENSHOT' });
+  };
+
+  const [extensionPrompt, setExtensionPrompt] = useState(false);
+
+  const uploadEnabled =
+    isAuthorizedTo('screenshots.upload', scopes) && !formDisabled;
+  const deleteEnabled =
+    isAuthorizedTo('screenshots.delete', scopes) && !formDisabled;
+
+  function onFileSelected(e: React.SyntheticEvent) {
+    const files = (e.target as HTMLInputElement).files;
+    if (!files) {
+      return;
+    }
+    const toUpload: File[] = [];
+    for (let i = 0; i < files.length; i++) {
+      const item = files.item(i);
+      if (item) {
+        toUpload.push(item);
+      }
+    }
+    validateAndUpload(toUpload);
+  }
+  const validate = (files: File[]) => {
+    const errors: string[] = [];
+
+    if (files.length > MAX_FILE_COUNT) {
+      errors.push('Too many files');
+    }
+
+    files.forEach((file) => {
+      if (ALLOWED_UPLOAD_TYPES.indexOf(file.type) < 0) {
+        errors.push(`${file.name}: unsupported format`);
+      }
+    });
+
+    const valid = errors.length === 0;
+
+    return { errors, valid };
+  };
+
+  const validateAndUpload = (files: File[]) => {
+    const { valid } = validate(files);
+    if (valid) {
+      uploadImages(files);
+    }
+  };
+
+  const onFileSelect = () => {
+    fileRef.current?.dispatchEvent(new MouseEvent('click'));
+  };
+
+  const ableToTakeScreenshot = pluginAvailable;
+
+  // @ts-ignore
+  const isChrome = Boolean(window.chrome);
+
+  return (
+    <>
+      <input
+        type="file"
+        style={{ display: 'none' }}
+        ref={fileRef}
+        onChange={(e) => onFileSelected(e)}
+        multiple
+        accept={ALLOWED_UPLOAD_TYPES.join(',')}
+      />
+
+      <ScHeading>
+        <ScFieldTitle>Screenshots</ScFieldTitle>
+        <ScControls>
+          {uploadEnabled && (
+            <>
+              {(isChrome || ableToTakeScreenshot) && (
+                <Tooltip
+                  title="Take screenshot"
+                  PopperProps={{
+                    disablePortal: true,
+                    style: { zIndex: DEVTOOLS_Z_INDEX },
+                  }}
+                >
+                  <IconButton
+                    onClick={
+                      ableToTakeScreenshot
+                        ? takeScreenshot
+                        : () => setExtensionPrompt(true)
+                    }
+                  >
+                    <CameraAlt />
+                  </IconButton>
+                </Tooltip>
+              )}
+
+              <Tooltip
+                title="Add image"
+                PopperProps={{
+                  disablePortal: true,
+                  style: { zIndex: DEVTOOLS_Z_INDEX },
+                }}
+              >
+                <IconButton onClick={onFileSelect}>
+                  <AddCircleOutline />
+                </IconButton>
+              </Tooltip>
+            </>
+          )}
+        </ScControls>
+      </ScHeading>
+
+      <ScreenshotDropzone
+        validateAndUpload={validateAndUpload}
+        enabled={uploadEnabled}
+      >
+        {screenshots.length
+          ? screenshots.map((ss) => (
+              <ScreenshotThumbnail
+                key={ss.id}
+                data={ss}
+                onClick={() =>
+                  dispatch({ type: 'OPEN_SCREENSHOT_DETAIL', payload: ss })
+                }
+                onDelete={
+                  deleteEnabled || ss.justUploaded
+                    ? removeScreenshot
+                    : undefined
+                }
+              />
+            ))
+          : null}
+        {screenshotsUploading && (
+          <ScScreenshotDummy>
+            <CircularProgress />
+          </ScScreenshotDummy>
+        )}
+        {!screenshots.length && !screenshotsUploading && (
+          <ScPlaceholder
+            style={{ cursor: uploadEnabled ? 'pointer' : 'default' }}
+            onClick={uploadEnabled ? onFileSelect : undefined}
+          >
+            <ScText>
+              There are no screenshots.
+              {ableToTakeScreenshot &&
+                uploadEnabled &&
+                ' Take screenshot by camera icon.'}
+            </ScText>
+            {uploadEnabled && (
+              <ScText>Add some by dropping or clicking on plus.</ScText>
+            )}
+          </ScPlaceholder>
+        )}
+      </ScreenshotDropzone>
+      {screenshotDetails && (
+        <ScreenshotDetail
+          screenshot={screenshotDetails}
+          onClose={() => dispatch({ type: 'CLOSE_SCREENSHOT_DETAIL' })}
+        />
+      )}
+      {extensionPrompt && (
+        <ExtensionPrompt onClose={() => setExtensionPrompt(false)} />
+      )}
+    </>
+  );
+};