Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-30 20:33:54 -05:00
Code Issues Activity

fix(console): go to onboarding process on clicking create new tenant button (#5663)

Browse source
This commit is contained in:
Charles Zhao 2024-04-09 17:36:36 +08:00 committed by GitHub
parent 6e980b3b50
commit 59875400c6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 59 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

120
packages/console/src/cloud/pages/Main/InvitationList/index.tsx
View file

@ -4,13 +4,14 @@ import { useTranslation } from 'react-i18next';
import OrganizationIcon from '@/assets/icons/organization-preview.svg'; import OrganizationIcon from '@/assets/icons/organization-preview.svg';
import { useCloudApi } from '@/cloud/hooks/use-cloud-api'; import { useCloudApi } from '@/cloud/hooks/use-cloud-api';
import { type TenantResponse, type InvitationListResponse } from '@/cloud/types/router'; import { type InvitationListResponse } from '@/cloud/types/router';
import CreateTenantModal from '@/components/CreateTenantModal';
import TenantEnvTag from '@/components/TenantEnvTag'; import TenantEnvTag from '@/components/TenantEnvTag';
import ThemedIcon from '@/components/ThemedIcon'; import ThemedIcon from '@/components/ThemedIcon';
import { TenantsContext } from '@/contexts/TenantsProvider'; import { TenantsContext } from '@/contexts/TenantsProvider';
import Button from '@/ds-components/Button'; import Button from '@/ds-components/Button';
import Spacer from '@/ds-components/Spacer'; import Spacer from '@/ds-components/Spacer';
import useTenantPathname from '@/hooks/use-tenant-pathname';
import useUserOnboardingData from '@/onboarding/hooks/use-user-onboarding-data';
import * as styles from './index.module.scss'; import * as styles from './index.module.scss';
@ -21,71 +22,68 @@ type Props = {
function InvitationList({ invitations }: Props) { function InvitationList({ invitations }: Props) {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const cloudApi = useCloudApi(); const cloudApi = useCloudApi();
const { prependTenant, navigateTenant, resetTenants } = useContext(TenantsContext); const { navigateTenant, resetTenants } = useContext(TenantsContext);
const { navigate } = useTenantPathname();
const [isJoining, setIsJoining] = useState(false); const [isJoining, setIsJoining] = useState(false);
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false); const [isUpdatingOnboardingStatus, setIsUpdatingOnboardingStatus] = useState(false);
const { update } = useUserOnboardingData();
return ( return (
<> <div className={styles.container}>
<div className={styles.container}> <div className={styles.wrapper}>
<div className={styles.wrapper}> <div className={styles.title}>{t('invitation.find_your_tenants')}</div>
<div className={styles.title}>{t('invitation.find_your_tenants')}</div> <div className={styles.description}>{t('invitation.find_tenants_description')}</div>
<div className={styles.description}>{t('invitation.find_tenants_description')}</div> {invitations.map(({ id, organizationId, tenantName, tenantTag }) => (
{invitations.map(({ id, organizationId, tenantName, tenantTag }) => ( <div key={id} className={styles.tenant}>
<div key={id} className={styles.tenant}> <ThemedIcon for={OrganizationIcon} size={40} />
<ThemedIcon for={OrganizationIcon} size={40} /> <span className={styles.name}>{tenantName}</span>
<span className={styles.name}>{tenantName}</span> <TenantEnvTag isAbbreviated className={styles.tag} tag={tenantTag} />
<TenantEnvTag isAbbreviated className={styles.tag} tag={tenantTag} /> <Spacer />
<Spacer /> <Button
<Button size="small"
size="small" type="primary"
type="primary" title="general.join"
title="general.join" isLoading={isJoining}
isLoading={isJoining} onClick={async () => {
onClick={async () => { setIsJoining(true);
setIsJoining(true); try {
try { await cloudApi.patch(`/api/invitations/:invitationId/status`, {
await cloudApi.patch(`/api/invitations/:invitationId/status`, { params: { invitationId: id },
params: { invitationId: id }, body: { status: OrganizationInvitationStatus.Accepted },
body: { status: OrganizationInvitationStatus.Accepted }, });
}); const data = await cloudApi.get('/api/tenants');
const data = await cloudApi.get('/api/tenants'); resetTenants(data);
resetTenants(data); navigateTenant(getTenantIdFromOrganizationId(organizationId));
navigateTenant(getTenantIdFromOrganizationId(organizationId)); } finally {
} finally { setIsJoining(false);
setIsJoining(false); }
} }}
}} />
/>
</div>
))}
<div className={styles.separator}>
<hr />
<span>{t('general.or')}</span>
<hr />
</div> </div>
<Button ))}
size="large" <div className={styles.separator}>
type="outline" <hr />
className={styles.createTenantButton} <span>{t('general.or')}</span>
title="invitation.create_new_tenant" <hr />
onClick={() => {
setIsCreateModalOpen(true);
}}
/>
</div> </div>
<Button
size="large"
type="outline"
className={styles.createTenantButton}
isLoading={isUpdatingOnboardingStatus}
title="invitation.create_new_tenant"
onClick={async () => {
setIsUpdatingOnboardingStatus(true);
try {
await update({ isOnboardingDone: false });
navigate('/');
} finally {
setIsUpdatingOnboardingStatus(false);
}
}}
/>
</div> </div>
<CreateTenantModal </div>
isOpen={isCreateModalOpen}
onClose={async (tenant?: TenantResponse) => {
if (tenant) {
prependTenant(tenant);
navigateTenant(tenant.id);
}
setIsCreateModalOpen(false);
}}
/>
</>
); );
} }