0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-03-24 22:41:28 -05:00

feat(console): show banner when only dev tenant found (#5944)

* feat(console): show banner when only dev tenant found

* refactor(console): use i18n
This commit is contained in:
Gao Sun 2024-05-30 13:59:03 +08:00 committed by GitHub
parent 5f5ecab9b9
commit b317c7c1af
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 73 additions and 2 deletions

View file

@ -54,11 +54,11 @@ function TenantLandingPageContent({ className }: Props) {
<CreateTenantModal
isOpen={isCreateModalOpen}
onClose={async (tenant?: TenantResponse) => {
setIsCreateModalOpen(false);
if (tenant) {
prependTenant(tenant);
navigateTenant(tenant.id);
}
setIsCreateModalOpen(false);
}}
/>
</>

View file

@ -103,11 +103,11 @@ export default function TenantSelector() {
<CreateTenantModal
isOpen={showCreateTenantModal}
onClose={async (tenant?: TenantResponse) => {
setShowCreateTenantModal(false);
if (tenant) {
prependTenant(tenant);
navigateTenant(tenant.id);
}
setShowCreateTenantModal(false);
}}
/>
</>

View file

@ -0,0 +1,17 @@
@use '@/scss/underscore' as _;
.banner {
@include _.z-index(modal);
position: absolute;
left: 50%;
transform: translateX(-50%);
top: _.unit(4);
font: var(--font-label-2);
color: var(--color-text);
display: flex;
align-items: center;
gap: _.unit(2.5);
padding: _.unit(1.5) _.unit(4);
background: var(--color-neutral-variant-90);
border-radius: _.unit(4);
}

View file

@ -0,0 +1,47 @@
import { TenantTag } from '@logto/schemas';
import { useContext, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { type TenantResponse } from '@/cloud/types/router';
import CreateTenantModal from '@/components/CreateTenantModal';
import { TenantsContext } from '@/contexts/TenantsProvider';
import TextLink from '@/ds-components/TextLink';
import * as styles from './index.module.scss';
function CreateProductionTenantBanner() {
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const { tenants, prependTenant, navigateTenant } = useContext(TenantsContext);
const { t } = useTranslation(undefined, {
keyPrefix: 'admin_console.tenants.production_tenant_notification',
});
if (tenants.some((tenant) => tenant.tag === TenantTag.Production)) {
return null;
}
return (
<div className={styles.banner}>
<CreateTenantModal
isOpen={isCreateModalOpen}
onClose={async (tenant?: TenantResponse) => {
setIsCreateModalOpen(false);
if (tenant) {
prependTenant(tenant);
navigateTenant(tenant.id);
}
}}
/>
<span>{t('text')}</span>
<TextLink
onClick={() => {
setIsCreateModalOpen(true);
}}
>
{t('action')}
</TextLink>
</div>
);
}
export default CreateProductionTenantBanner;

View file

@ -5,6 +5,7 @@ import PaymentOverdueModal from '@/components/PaymentOverdueModal';
import { isCloud } from '@/consts/env';
import { TenantsContext } from '@/contexts/TenantsProvider';
import CreateProductionTenantBanner from './CreateProductionTenantBanner';
import TenantEnvMigrationModal from './TenantEnvMigrationModal';
function TenantNotificationContainer() {
@ -24,6 +25,7 @@ function TenantNotificationContainer() {
<PaymentOverdueModal />
</>
)}
<CreateProductionTenantBanner />
<TenantEnvMigrationModal />
</>
);

View file

@ -4,6 +4,7 @@
display: inline-flex;
max-width: fit-content;
text-decoration: none;
user-select: none;
border-color: transparent;
font: var(--font-body-2);
color: var(--color-text-link);

View file

@ -105,6 +105,10 @@ const tenants = {
description_2:
'If you require further clarification, have any concerns, or wish to restore full functionality and unblock your tenants, please do not hesitate to contact us immediately.',
},
production_tenant_notification: {
text: "You're in a dev tenant for free testing. Create a production tenant to go live.",
action: 'Create tenant',
},
};
export default Object.freeze(tenants);