Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-04-14 23:11:31 -05:00
Code Issues Activity

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

Browse source 
* 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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/console/src/cloud/pages/Main/TenantLandingPage/TenantLandingPageContent/index.tsx
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);
}}
/>
</>

2
packages/console/src/components/Topbar/TenantSelector/index.tsx
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);
}}
/>
</>

17
packages/console/src/containers/AppContent/TenantNotificationContainer/CreateProductionTenantBanner/index.module.scss Normal file
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);
}

47
packages/console/src/containers/AppContent/TenantNotificationContainer/CreateProductionTenantBanner/index.tsx Normal file
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;

2
packages/console/src/containers/AppContent/TenantNotificationContainer/index.tsx
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 />
</>
);

1
packages/console/src/ds-components/TextLink/index.module.scss
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);

4
packages/phrases/src/locales/en/translation/admin-console/tenants.ts
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);