From eeb095f9575221c01c0c3a04725a52d71b835051 Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Mon, 1 Apr 2024 22:13:54 +0800
Subject: [PATCH] fix(console): joining tenant should navigate user to the new
 tenant (#5602)

---
 .../src/cloud/pages/Main/InvitationList/index.tsx        | 8 +++++---
 .../TenantInvitationDropdownItem/index.tsx               | 9 ++++++---
 packages/console/src/pages/AcceptInvitation/index.tsx    | 8 +++++---
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/console/src/cloud/pages/Main/InvitationList/index.tsx b/packages/console/src/cloud/pages/Main/InvitationList/index.tsx
index c67f3d19192..1b96bb6415b 100644
--- a/packages/console/src/cloud/pages/Main/InvitationList/index.tsx
+++ b/packages/console/src/cloud/pages/Main/InvitationList/index.tsx
@@ -1,4 +1,4 @@
-import { OrganizationInvitationStatus } from '@logto/schemas';
+import { OrganizationInvitationStatus, getTenantIdFromOrganizationId } from '@logto/schemas';
 import { useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -20,7 +20,7 @@ type Props = {
 function InvitationList({ invitations }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const cloudApi = useCloudApi();
-  const { prependTenant, navigateTenant } = useContext(TenantsContext);
+  const { prependTenant, navigateTenant, resetTenants } = useContext(TenantsContext);
   const [isJoining, setIsJoining] = useState(false);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 
@@ -48,7 +48,9 @@ function InvitationList({ invitations }: Props) {
                       params: { invitationId: id },
                       body: { status: OrganizationInvitationStatus.Accepted },
                     });
-                    navigateTenant(organizationId.slice(2));
+                    const data = await cloudApi.get('/api/tenants');
+                    resetTenants(data);
+                    navigateTenant(getTenantIdFromOrganizationId(organizationId));
                   } finally {
                     setIsJoining(false);
                   }
diff --git a/packages/console/src/components/Topbar/TenantSelector/TenantInvitationDropdownItem/index.tsx b/packages/console/src/components/Topbar/TenantSelector/TenantInvitationDropdownItem/index.tsx
index 0a067bedadc..db01a0a2572 100644
--- a/packages/console/src/components/Topbar/TenantSelector/TenantInvitationDropdownItem/index.tsx
+++ b/packages/console/src/components/Topbar/TenantSelector/TenantInvitationDropdownItem/index.tsx
@@ -1,4 +1,8 @@
-import { OrganizationInvitationStatus, type TenantTag } from '@logto/schemas';
+import {
+  OrganizationInvitationStatus,
+  getTenantIdFromOrganizationId,
+  type TenantTag,
+} from '@logto/schemas';
 import { useContext } from 'react';
 
 import { useCloudApi } from '@/cloud/hooks/use-cloud-api';
@@ -37,10 +41,9 @@ function TenantInvitationDropdownItem({ data }: Props) {
             params: { invitationId: id },
             body: { status: OrganizationInvitationStatus.Accepted },
           });
-          // TODO: @charles, need to fetch only the target tenant instance instead of all.
           const data = await cloudApi.get('/api/tenants');
           resetTenants(data);
-          navigateTenant(organizationId.slice(2));
+          navigateTenant(getTenantIdFromOrganizationId(organizationId));
         }}
       />
     </div>
diff --git a/packages/console/src/pages/AcceptInvitation/index.tsx b/packages/console/src/pages/AcceptInvitation/index.tsx
index c4a73548b7c..849bf9edbd1 100644
--- a/packages/console/src/pages/AcceptInvitation/index.tsx
+++ b/packages/console/src/pages/AcceptInvitation/index.tsx
@@ -1,5 +1,5 @@
 import { useLogto } from '@logto/react';
-import { OrganizationInvitationStatus } from '@logto/schemas';
+import { OrganizationInvitationStatus, getTenantIdFromOrganizationId } from '@logto/schemas';
 import { useContext, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
@@ -21,7 +21,7 @@ function AcceptInvitation() {
   const redirectUri = useRedirectUri();
   const { invitationId = '' } = useParams();
   const cloudApi = useCloudApi();
-  const { navigateTenant } = useContext(TenantsContext);
+  const { navigateTenant, resetTenants } = useContext(TenantsContext);
 
   // The request is only made when the user has signed-in and the invitation ID is available.
   // The response data is returned only when the current user matches the invitee email. Otherwise, it returns 404.
@@ -43,7 +43,9 @@ function AcceptInvitation() {
         body: { status: OrganizationInvitationStatus.Accepted },
       });
 
-      navigateTenant(organizationId.slice(2));
+      const data = await cloudApi.get('/api/tenants');
+      resetTenants(data);
+      navigateTenant(getTenantIdFromOrganizationId(organizationId));
     })();
   }, [cloudApi, error, invitation, navigateTenant, t]);