feat(FR-1539): add keyboard shortcut and tooltip to notification button (#4378)

Author: yomybaby

react/src/components/BAINotificationButton.tsx

@@ -5,11 +5,13 @@ import {
 import ReverseThemeProvider from './ReverseThemeProvider';
 import WEBUINotificationDrawer from './WEBUINotificationDrawer';
 import { BellOutlined } from '@ant-design/icons';
-import { Badge, Button, Typography } from 'antd';
+import { Badge, Button, Tooltip, Typography } from 'antd';
 import type { ButtonProps } from 'antd';
+import { t } from 'i18next';
 import { atom, useAtom } from 'jotai';
 import _ from 'lodash';
 import React, { useEffect } from 'react';
+import useKeyboardShortcut from 'src/hooks/useKeyboardShortcut';
 
 export const isOpenDrawerState = atom(false);
 
@@ -28,6 +30,18 @@ const BAINotificationButton: React.FC<ButtonProps> = ({ ...props }) => {
     };
   }, [upsertNotification]);
 
+  useKeyboardShortcut(
+    (event) => {
+      if (event.key === ']') {
+        event.preventDefault();
+        setIsOpenDrawer((v) => !v);
+      }
+    },
+    {
+      skipShortcutOnMetaKey: true,
+    },
+  );
+
   const hasRunningBackgroundTask = _.some(notifications, (n) => {
     return n.backgroundTask?.status === 'pending';
   });
@@ -36,22 +50,39 @@ const BAINotificationButton: React.FC<ButtonProps> = ({ ...props }) => {
   return (
     <>
       <ReverseThemeProvider>
-        <Button
-          icon={
-            <ReverseThemeProvider>
-              <Badge color="red" dot={hasRunningBackgroundTask}>
-                <ReverseThemeProvider>
-                  <Typography.Text>
-                    <BellOutlined />
-                  </Typography.Text>
-                </ReverseThemeProvider>
-              </Badge>
-            </ReverseThemeProvider>
+        <Tooltip
+          title={
+            <>
+              {t('notification.Notifications')}
+              <Typography.Text
+                keyboard
+                style={{
+                  color: 'inherit',
+                }}
+              >
+                ]
+              </Typography.Text>
+            </>
           }
-          type="text"
-          onClick={() => setIsOpenDrawer((v) => !v)}
-          {...props}
-        />
+          placement="left"
+        >
+          <Button
+            icon={
+              <ReverseThemeProvider>
+                <Badge color="red" dot={hasRunningBackgroundTask}>
+                  <ReverseThemeProvider>
+                    <Typography.Text>
+                      <BellOutlined />
+                    </Typography.Text>
+                  </ReverseThemeProvider>
+                </Badge>
+              </ReverseThemeProvider>
+            }
+            type="text"
+            onClick={() => setIsOpenDrawer((v) => !v)}
+            {...props}
+          />
+        </Tooltip>
       </ReverseThemeProvider>
       <WEBUINotificationDrawer
         open={isOpenDrawer}