From b317c7c1afee5cd1fe8556e4ea4390c17812c79d Mon Sep 17 00:00:00 2001 From: Gao Sun Date: Thu, 30 May 2024 13:59:03 +0800 Subject: [PATCH] feat(console): show banner when only dev tenant found (#5944) * feat(console): show banner when only dev tenant found * refactor(console): use i18n --- .../TenantLandingPageContent/index.tsx | 2 +- .../Topbar/TenantSelector/index.tsx | 2 +- .../index.module.scss | 17 +++++++ .../CreateProductionTenantBanner/index.tsx | 47 +++++++++++++++++++ .../TenantNotificationContainer/index.tsx | 2 + .../ds-components/TextLink/index.module.scss | 1 + .../en/translation/admin-console/tenants.ts | 4 ++ 7 files changed, 73 insertions(+), 2 deletions(-) create mode 100644 packages/console/src/containers/AppContent/TenantNotificationContainer/CreateProductionTenantBanner/index.module.scss create mode 100644 packages/console/src/containers/AppContent/TenantNotificationContainer/CreateProductionTenantBanner/index.tsx diff --git a/packages/console/src/cloud/pages/Main/TenantLandingPage/TenantLandingPageContent/index.tsx b/packages/console/src/cloud/pages/Main/TenantLandingPage/TenantLandingPageContent/index.tsx index 0c7f65c97..6978b8993 100644 --- a/packages/console/src/cloud/pages/Main/TenantLandingPage/TenantLandingPageContent/index.tsx +++ b/packages/console/src/cloud/pages/Main/TenantLandingPage/TenantLandingPageContent/index.tsx @@ -54,11 +54,11 @@ function TenantLandingPageContent({ className }: Props) { { + setIsCreateModalOpen(false); if (tenant) { prependTenant(tenant); navigateTenant(tenant.id); } - setIsCreateModalOpen(false); }} /> diff --git a/packages/console/src/components/Topbar/TenantSelector/index.tsx b/packages/console/src/components/Topbar/TenantSelector/index.tsx index 07555f0ef..2116d8004 100644 --- a/packages/console/src/components/Topbar/TenantSelector/index.tsx +++ b/packages/console/src/components/Topbar/TenantSelector/index.tsx @@ -103,11 +103,11 @@ export default function TenantSelector() { { + setShowCreateTenantModal(false); if (tenant) { prependTenant(tenant); navigateTenant(tenant.id); } - setShowCreateTenantModal(false); }} /> diff --git a/packages/console/src/containers/AppContent/TenantNotificationContainer/CreateProductionTenantBanner/index.module.scss b/packages/console/src/containers/AppContent/TenantNotificationContainer/CreateProductionTenantBanner/index.module.scss new file mode 100644 index 000000000..f2bc7dc21 --- /dev/null +++ b/packages/console/src/containers/AppContent/TenantNotificationContainer/CreateProductionTenantBanner/index.module.scss @@ -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); +} diff --git a/packages/console/src/containers/AppContent/TenantNotificationContainer/CreateProductionTenantBanner/index.tsx b/packages/console/src/containers/AppContent/TenantNotificationContainer/CreateProductionTenantBanner/index.tsx new file mode 100644 index 000000000..77f86c6f2 --- /dev/null +++ b/packages/console/src/containers/AppContent/TenantNotificationContainer/CreateProductionTenantBanner/index.tsx @@ -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 ( +
+ { + setIsCreateModalOpen(false); + if (tenant) { + prependTenant(tenant); + navigateTenant(tenant.id); + } + }} + /> + {t('text')} + { + setIsCreateModalOpen(true); + }} + > + {t('action')} + +
+ ); +} + +export default CreateProductionTenantBanner; diff --git a/packages/console/src/containers/AppContent/TenantNotificationContainer/index.tsx b/packages/console/src/containers/AppContent/TenantNotificationContainer/index.tsx index 241111a91..40c201448 100644 --- a/packages/console/src/containers/AppContent/TenantNotificationContainer/index.tsx +++ b/packages/console/src/containers/AppContent/TenantNotificationContainer/index.tsx @@ -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() { )} + ); diff --git a/packages/console/src/ds-components/TextLink/index.module.scss b/packages/console/src/ds-components/TextLink/index.module.scss index b9618c446..703694d9a 100644 --- a/packages/console/src/ds-components/TextLink/index.module.scss +++ b/packages/console/src/ds-components/TextLink/index.module.scss @@ -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); diff --git a/packages/phrases/src/locales/en/translation/admin-console/tenants.ts b/packages/phrases/src/locales/en/translation/admin-console/tenants.ts index 3a4da95f7..3cb49a513 100644 --- a/packages/phrases/src/locales/en/translation/admin-console/tenants.ts +++ b/packages/phrases/src/locales/en/translation/admin-console/tenants.ts @@ -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);