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:
parent
5f5ecab9b9
commit
b317c7c1af
7 changed files with 73 additions and 2 deletions
|
@ -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);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
|
|
|
@ -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);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
|
|
|
@ -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);
|
||||
}
|
|
@ -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;
|
|
@ -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 />
|
||||
</>
|
||||
);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Add table
Reference in a new issue