fix(console): joining tenant should navigate user to the new tenant

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);
                   }

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>

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 @@
   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,9 +43,11 @@
         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]);
 
   // No invitation returned, indicating the current signed-in user is not the invitee.
   if (error?.status === 404) {