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

…5602)

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 @@ 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]);