feat: UI popup stop closing on save

tolgee · Feb 21, 2022 · 2f08494 · 2f08494
1 parent 18b8420
commit 2f08494
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 22 deletions.
diff --git a/packages/ui/src/KeyDialog/KeyForm.tsx b/packages/ui/src/KeyDialog/KeyForm.tsx
@@ -114,8 +114,6 @@ export const KeyForm = () => {
           id="_tolgee_platform_link"
         >
           <svg
-            width="100%"
-            height="100%"
             viewBox="0 0 200 200"
             xmlns="http://www.w3.org/2000/svg"
             opacity="0.99"
@@ -177,7 +175,7 @@ export const KeyForm = () => {
       {error && <ScError>{error}</ScError>}
       <ScControls>
         <Button onClick={onClose} color="secondary">
-          Cancel
+          {useBrowserWindow ? 'Close' : 'Cancel'}
         </Button>
         <LoadingButton
           loading={saving}

diff --git a/packages/ui/src/KeyDialog/NewWindow.tsx b/packages/ui/src/KeyDialog/NewWindow.tsx
@@ -56,7 +56,7 @@ export const NewWindow: FC = (props) => {
 
       const onKeyDown = (e) => {
         if (e.key === 'Escape') {
-          onExit();
+          dispatch({ type: 'ON_CLOSE' });
         }
       };
 
@@ -78,6 +78,10 @@ export const NewWindow: FC = (props) => {
     }
   }, [container]);
 
+  useEffect(() => {
+    popup?.focus();
+  });
+
   const styleCache = React.useMemo(() => {
     // styles insertion point in popup head
     const head = popup?.document.head;

diff --git a/packages/ui/src/KeyDialog/ScreenshotGallery/ScreenshotGallery.tsx b/packages/ui/src/KeyDialog/ScreenshotGallery/ScreenshotGallery.tsx
@@ -7,7 +7,6 @@ import { ScreenshotThumbnail } from './ScreenshotThumbnail';
 import { MAX_FILE_COUNT } from './utils';
 import { DEVTOOLS_Z_INDEX } from '../../constants';
 import {
-  ScreenshotInterface,
   useDialogContext,
   useDialogDispatch,
 } from '../TranslationDialogContextProvider';
@@ -54,10 +53,10 @@ const ALLOWED_UPLOAD_TYPES = ['image/png', 'image/jpeg', 'image/gif'];
 
 export const ScreenshotGallery: React.FC = () => {
   const fileRef = useRef<HTMLInputElement>(null);
-  const [detail, setDetail] = useState<ScreenshotInterface | null>(null);
   const dispatch = useDialogDispatch();
 
   const screenshots = useDialogContext((c) => c.screenshots);
+  const screenshotDetails = useDialogContext((c) => c.screenshotDetail);
   const pluginAvailable = useDialogContext((c) => c.pluginAvailable);
   const dependencies = useDialogContext((c) => c.dependencies);
   const formDisabled = useDialogContext((c) => c.formDisabled);
@@ -193,7 +192,9 @@ export const ScreenshotGallery: React.FC = () => {
               <ScreenshotThumbnail
                 key={ss.id}
                 data={ss}
-                onClick={() => setDetail(ss)}
+                onClick={() =>
+                  dispatch({ type: 'OPEN_SCREENSHOT_DETAIL', payload: ss })
+                }
                 onDelete={
                   deleteEnabled || ss.justUploaded
                     ? removeScreenshot
@@ -224,8 +225,11 @@ export const ScreenshotGallery: React.FC = () => {
           </ScPlaceholder>
         )}
       </ScreenshotDropzone>
-      {detail && (
-        <ScreenshotDetail screenshot={detail} onClose={() => setDetail(null)} />
+      {screenshotDetails && (
+        <ScreenshotDetail
+          screenshot={screenshotDetails}
+          onClose={() => dispatch({ type: 'CLOSE_SCREENSHOT_DETAIL' })}
+        />
       )}
       {extensionPrompt && (
         <ExtensionPrompt onClose={() => setExtensionPrompt(false)} />

diff --git a/packages/ui/src/KeyDialog/TranslationDialogContextProvider.tsx b/packages/ui/src/KeyDialog/TranslationDialogContextProvider.tsx
@@ -58,7 +58,10 @@ type State =
   | { type: 'ON_SAVE' }
   | { type: 'ON_CLOSE' }
   | { type: 'SET_USE_BROWSER_WINDOW'; payload: boolean }
-  | { type: 'SET_CONTAINER'; payload: Element };
+  | { type: 'SET_CONTAINER'; payload: Element }
+  | { type: 'OPEN_SCREENSHOT_DETAIL'; payload: ScreenshotInterface }
+  | { type: 'CLOSE_SCREENSHOT_DETAIL' }
+  | { type: 'ON_ESCAPE' };
 
 export const [DialogProvider, useDialogDispatch, useDialogContext] =
   createProvider((props: DialogProps) => {
@@ -88,6 +91,8 @@ export const [DialogProvider, useDialogDispatch, useDialogContext] =
     const [useBrowserWindow, setUseBrowserWindow] = useState(false);
     const [screenshots, setScreenshots] = useState<ScreenshotInterface[]>([]);
     const [screenshotsUploading, setScreenshotsUploading] = useState(false);
+    const [screenshotDetail, setScreenshotDetail] =
+      useState<ScreenshotInterface | null>(null);
 
     const dispatch = async (action: State) => {
       switch (action.type) {
@@ -196,10 +201,16 @@ export const [DialogProvider, useDialogDispatch, useDialogContext] =
                 screenshotUploadedImageIds: getJustUploadedScreenshots(),
               });
             }
-            setSuccess(true);
             await sleep(200);
+            setSuccess(true);
             setError(null);
-            props.onClose();
+            if (useBrowserWindow) {
+              setSaving(false);
+              await sleep(2000);
+              setSuccess(false);
+            } else {
+              props.onClose();
+            }
           } catch (e) {
             setError('Unexpected error occurred :(');
             // eslint-disable-next-line no-console
@@ -211,13 +222,17 @@ export const [DialogProvider, useDialogDispatch, useDialogContext] =
         }
 
         case 'ON_CLOSE': {
-          props.onClose();
-          setUseBrowserWindow(false);
-          const uploadedScreenshots = getJustUploadedScreenshots();
-          if (uploadedScreenshots.length) {
-            screenshotService.deleteImages(uploadedScreenshots);
+          if (screenshotDetail) {
+            setScreenshotDetail(null);
+          } else {
+            props.onClose();
+            setUseBrowserWindow(false);
+            const uploadedScreenshots = getJustUploadedScreenshots();
+            if (uploadedScreenshots.length) {
+              screenshotService.deleteImages(uploadedScreenshots);
+            }
+            setScreenshots([]);
           }
-          setScreenshots([]);
           break;
         }
 
@@ -241,13 +256,21 @@ export const [DialogProvider, useDialogDispatch, useDialogContext] =
         case 'SET_USE_BROWSER_WINDOW':
           setUseBrowserWindow(action.payload);
           break;
+
+        case 'OPEN_SCREENSHOT_DETAIL':
+          setScreenshotDetail(action.payload);
+          break;
+
+        case 'CLOSE_SCREENSHOT_DETAIL':
+          setScreenshotDetail(null);
+          break;
       }
     };
 
     useEffect(() => {
       const onKeyDown = (e) => {
         if (e.key === 'Escape') {
-          dispatch({ type: 'ON_CLOSE' });
+          dispatch({ type: 'ON_ESCAPE' });
         }
       };
       if (!useBrowserWindow) {
@@ -367,6 +390,7 @@ export const [DialogProvider, useDialogDispatch, useDialogContext] =
       takingScreenshot,
       screenshotsUploading,
       screenshots,
+      screenshotDetail,
       linkToPlatform,
     };
 

diff --git a/packages/ui/src/KeyDialog/TranslationDialogWrapper.tsx b/packages/ui/src/KeyDialog/TranslationDialogWrapper.tsx
@@ -21,9 +21,7 @@ export const TranslationDialogWrapper: React.FC = ({ children }) => {
   return (
     <>
       {useBrowserWindow ? (
-        open ? (
-          <NewWindow>{children}</NewWindow>
-        ) : null
+        <NewWindow>{children}</NewWindow>
       ) : (
         !takingScreenshot && (
           <Dialog