feat: LocaleNotification supports to trigger reload by pressing the Enter key (#643)

* feat: improve localeNotification

* test: update localeNotification.test.tsx

* feat: respond to pressing Enter by focusing the button

Author: kiwiwong

src/workbench/notification/__tests__/__snapshots__/localeNotification.test.tsx.snap

@@ -5,35 +5,57 @@ exports[`The LocaleNotification Component Match Snapshot 1`] = `
   style={
     Object {
       "lineHeight": "1.5",
-      "textAlign": "left",
-      "width": 350,
+      "textAlign": "right",
+      "width": 420,
     }
   }
 >
-  <p>
-    The current locale has changed to 
-    chinese
-    , click the button to reload the Page and applying the changes.
-  </p>
-  <p
+  <div
     style={
       Object {
-        "fontWeight": "bold",
+        "direction": "ltr",
+        "textAlign": "left",
+        "whiteSpace": "normal",
       }
     }
   >
-    Notice: Reload the Page could lose the data, Please confirm you have saved before.
-  </p>
-  <a
-    className="mo-btn mo-btn--normal"
-    onClick={[Function]}
+    <p>
+      The current locale has changed to 
+      chinese
+      , click the button to reload the Page and applying the changes.
+    </p>
+    <p
+      style={
+        Object {
+          "fontWeight": "bold",
+        }
+      }
+    >
+      Notice: Reload the Page could lose the data, Please confirm you have saved before.
+    </p>
+  </div>
+  <div
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
     style={
       Object {
-        "width": 150,
+        "display": "inline-block",
+        "marginBottom": 2,
       }
     }
+    tabIndex={0}
   >
-    Confirm Reload
-  </a>
+    <a
+      className="mo-btn mo-btn--normal"
+      onClick={[Function]}
+      style={
+        Object {
+          "width": 150,
+        }
+      }
+    >
+      Confirm Reload
+    </a>
+  </div>
 </div>
 `;

src/workbench/notification/__tests__/localeNotification.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 import React from 'react';
 import { create } from 'react-test-renderer';
 import LocaleNotification from '../notificationPane/localeNotification';
@@ -26,4 +26,26 @@ describe('The LocaleNotification Component', () => {
 
         window.location.reload = originalFunction;
     });
+
+    test('Should support to reload by pressing the Enter key.', async () => {
+        const originalFunction = window.location.reload;
+        const mockFn = jest.fn();
+        Reflect.deleteProperty(window, 'location');
+        Object.defineProperty(window, 'location', {
+            writable: true,
+            value: { reload: mockFn },
+        });
+        const { getByText } = render(<LocaleNotification locale="zh-CN" />);
+        const elem = getByText('Confirm Reload');
+
+        await waitFor(() => {
+            fireEvent.keyDown(elem, { key: 'Enter', code: 'Enter' });
+            fireEvent.keyUp(elem, { key: 'Enter', code: 'Enter' });
+
+            expect(jest.isMockFunction(window.location.reload)).toBeTruthy();
+            expect(mockFn).toBeCalled();
+        });
+
+        window.location.reload = originalFunction;
+    });
 });

src/workbench/notification/notificationPane/localeNotification.tsx

@@ -1,5 +1,5 @@
 import { Button } from 'mo/components';
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 
 interface ILocaleNotificationProps {
     locale: string;
@@ -12,25 +12,63 @@ export function LocaleNotification(props: ILocaleNotificationProps) {
         window.location.reload();
     }, []);
 
+    const wrapperRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        // Delay execution to ensure focus on element
+        setTimeout(() => wrapperRef.current?.focus());
+    }, []);
+
+    let isOkToReload = false;
+
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            isOkToReload = true;
+        }
+    };
+
+    const handleKeyUp = (e) => {
+        if (e.key === 'Enter' && isOkToReload) {
+            reload();
+        }
+    };
+
     return (
         <div
             style={{
                 lineHeight: '1.5',
-                width: 350,
-                textAlign: 'left',
+                width: 420,
+                textAlign: 'right',
             }}
         >
-            <p>
-                The current locale has changed to {locale}, click the button to
-                reload the Page and applying the changes.
-            </p>
-            <p style={{ fontWeight: 'bold' }}>
-                Notice: Reload the Page could lose the data, Please confirm you
-                have saved before.
-            </p>
-            <Button style={{ width: 150 }} onClick={reload}>
-                Confirm Reload
-            </Button>
+            <div
+                style={{
+                    direction: 'ltr',
+                    whiteSpace: 'normal',
+                    textAlign: 'left',
+                }}
+            >
+                <p>
+                    The current locale has changed to {locale}, click the button
+                    to reload the Page and applying the changes.
+                </p>
+                <p style={{ fontWeight: 'bold' }}>
+                    Notice: Reload the Page could lose the data, Please confirm
+                    you have saved before.
+                </p>
+            </div>
+            <div
+                ref={wrapperRef}
+                // make it focusable
+                tabIndex={0}
+                onKeyDown={handleKeyDown}
+                onKeyUp={handleKeyUp}
+                style={{ display: 'inline-block', marginBottom: 2 }}
+            >
+                <Button style={{ width: 150 }} onClick={reload}>
+                    Confirm Reload
+                </Button>
+            </div>
         </div>
     );
 }