From fd3787760d5b6cc34ee9d543b49c4c7439f33868 Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Thu, 16 Jan 2025 16:17:07 +0900
Subject: [PATCH] =?UTF-8?q?chore:=20Header=E5=86=85=E3=81=ABTenantSwitcher?=
 =?UTF-8?q?=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88?=
 =?UTF-8?q?=E3=82=92=E5=AE=9A=E7=BE=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Header/Header.tsx          | 69 +++++++++++--------
 1 file changed, 39 insertions(+), 30 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Header/Header.tsx b/packages/smarthr-ui/src/components/Header/Header.tsx
index 48028c29de..7eb8347dca 100644
--- a/packages/smarthr-ui/src/components/Header/Header.tsx
+++ b/packages/smarthr-ui/src/components/Header/Header.tsx
@@ -100,15 +100,6 @@ export const Header: React.FC<PropsWithChildren<Props> & ElementProps> = ({
     [logo, enableNew],
   )
 
-  const currentTenantName = useMemo(() => {
-    if (tenants && tenants.length >= 1) {
-      const current = tenants.find(({ id }) => id === currentTenantId)
-      return current ? current.name : tenants[0].name
-    }
-
-    return undefined
-  }, [currentTenantId, tenants])
-
   return (
     <Cluster as="header" justify="space-between" gap={COMMON_GAP} className={styles.wrapper}>
       <Cluster align="center" gap={COMMON_GAP}>
@@ -118,19 +109,12 @@ export const Header: React.FC<PropsWithChildren<Props> & ElementProps> = ({
         {enableNew ? (
           <MemoizedAppLauncher featureName={featureName} apps={apps} enableNew={enableNew} />
         ) : (
-          currentTenantName && (
-            <div className={styles.tenantInfo}>
-              {tenants && tenants.length > 1 ? (
-                <MultiTenantDropdownMenuButton
-                  label={currentTenantName}
-                  tenants={tenants}
-                  onTenantSelect={onTenantSelect}
-                />
-              ) : (
-                <OnlyOneTenant className={styles.tenantNameText}>{currentTenantName}</OnlyOneTenant>
-              )}
-            </div>
-          )
+          <TenantSwitcher
+            currentTenantId={currentTenantId}
+            tenants={tenants}
+            styles={styles}
+            onTenantSelect={onTenantSelect}
+          />
         )}
       </Cluster>
       <Cluster align="center" justify="flex-end" gap={CHILDREN_GAP} className={styles.actions}>
@@ -154,6 +138,39 @@ const MemoizedAppLauncher = React.memo<Pick<Props, 'featureName' | 'apps' | 'ena
   },
 )
 
+const TenantSwitcher = React.memo<
+  Pick<Props, 'currentTenantId' | 'tenants' | 'onTenantSelect'> & {
+    styles: { tenantInfo: string; tenantNameText: string }
+  }
+>(({ currentTenantId, tenants, styles, onTenantSelect }) => {
+  const currentTenantName = useMemo(() => {
+    if (tenants && tenants.length >= 1) {
+      const current = tenants.find(({ id }) => id === currentTenantId)
+      return current ? current.name : tenants[0].name
+    }
+
+    return undefined
+  }, [currentTenantId, tenants])
+
+  return (
+    currentTenantName && (
+      <div className={styles.tenantInfo}>
+        {tenants && tenants.length > 1 ? (
+          <MultiTenantDropdownMenuButton
+            label={currentTenantName}
+            tenants={tenants}
+            onTenantSelect={onTenantSelect}
+          />
+        ) : (
+          <Text color="TEXT_WHITE" className={styles.tenantNameText}>
+            {currentTenantName}
+          </Text>
+        )}
+      </div>
+    )
+  )
+})
+
 const MultiTenantDropdownMenuButton = React.memo<
   Pick<Required<Props>, 'tenants'> & Pick<Props, 'onTenantSelect'> & { label: string }
 >(({ label, tenants, onTenantSelect }) => {
@@ -177,11 +194,3 @@ const MultiTenantDropdownMenuButton = React.memo<
     </HeaderDropdownMenuButton>
   )
 })
-
-const OnlyOneTenant = React.memo<PropsWithChildren<{ className: string }>>(
-  ({ className, children }) => (
-    <Text color="TEXT_WHITE" className={className}>
-      {children}
-    </Text>
-  ),
-)