Switching visibility of email (#1140)

Co-authored-by: Taichiro Suzuki <taichirs@amazon.co.jp>

Author: tbrand

packages/web/public/locales/translation/en.yaml

@@ -728,6 +728,7 @@ setting:
     login_status: Login status
     rag_enabled: RAG (Amazon Kendra) Enabled
     rag_kb_enabled: RAG (Knowledge Base) Enabled
+    show_email: Show Email
     show_tools: Show Tools
     show_use_case_builder: Show Use Case Builder
     typing_animation: Typing Animation

packages/web/public/locales/translation/ja.yaml

@@ -630,6 +630,7 @@ setting:
     login_status: ログイン状態
     rag_enabled: RAG (Amazon Kendra) 有効
     rag_kb_enabled: RAG (Knowledge Base) 有効
+    show_email: メールアドレスの表示
     show_tools: ツールの表示
     show_use_case_builder: ユースケースビルダーの表示
     typing_animation: タイピングアニメーション

packages/web/src/components/DrawerBase.tsx

@@ -6,6 +6,7 @@ import useVersion from '../hooks/useVersion';
 import IconWithDot from './IconWithDot';
 import { PiGear } from 'react-icons/pi';
 import { fetchAuthSession } from 'aws-amplify/auth';
+import useUserSetting from '../hooks/useUserSetting';
 
 type Props = BaseProps & {
   builderMode?: boolean;
@@ -14,6 +15,7 @@ type Props = BaseProps & {
 
 const DrawerBase: React.FC<Props> = (props) => {
   const { getHasUpdate } = useVersion();
+  const { settingShowEmail } = useUserSetting();
 
   // The first argument is not required, but if it is not included, the request will not be made, so 'user' string is entered
   const { data } = useSWR('user', () => {
@@ -36,12 +38,9 @@ const DrawerBase: React.FC<Props> = (props) => {
         className={`bg-aws-squid-ink flex h-screen w-64 flex-col justify-between text-sm text-white  print:hidden`}>
         <div className="flex h-full flex-col">
           {props.children}
-          <div className="flex flex-none items-center justify-between gap-2 border-t border-gray-400 px-3 py-2">
-            <Link
-              to={settingUrl}
-              className="mr-2 overflow-x-hidden hover:brightness-75">
-              <span className="text-sm">{email}</span>
-            </Link>
+          <div className="flex flex-none items-center justify-between gap-x-2 border-t border-gray-400 px-3 py-2">
+            {settingShowEmail && <div className="text-sm">{email}</div>}
+            <div></div>
             <Link to={settingUrl}>
               <IconWithDot showDot={hasUpdate}>
                 <PiGear className="text-lg" />

packages/web/src/hooks/useUserSetting.ts

@@ -9,6 +9,10 @@ const useUserSetting = () => {
     'showTools',
     true
   );
+  const [settingShowEmail, setSettingShowEmail] = useLocalStorageBoolean(
+    'showEmail',
+    true
+  );
 
   return {
     settingTypingAnimation,
@@ -17,6 +21,8 @@ const useUserSetting = () => {
     setSettingShowUseCaseBuilder,
     settingShowTools,
     setSettingShowTools,
+    settingShowEmail,
+    setSettingShowEmail,
   };
 };
 

packages/web/src/pages/Setting.tsx

@@ -63,6 +63,8 @@ const Setting = () => {
     setSettingShowUseCaseBuilder,
     settingShowTools,
     setSettingShowTools,
+    settingShowEmail,
+    setSettingShowEmail,
   } = useUserSetting();
 
   const onClickSignout = useCallback(() => {
@@ -145,6 +147,16 @@ const Setting = () => {
             />
           }></SettingItem>
 
+        <SettingItem
+          name={t('setting.items.show_email')}
+          value={
+            <Switch
+              checked={settingShowEmail}
+              label=""
+              onSwitch={setSettingShowEmail}
+            />
+          }></SettingItem>
+
         <SettingItem
           name={t('setting.items.login_status')}
           value={