diff --git a/docs/plugins/multi-tenant.mdx b/docs/plugins/multi-tenant.mdx index c59bb900f..85ee3de10 100644 --- a/docs/plugins/multi-tenant.mdx +++ b/docs/plugins/multi-tenant.mdx @@ -158,6 +158,16 @@ type MultiTenantPluginConfig = { rowFields?: never tenantFieldAccess?: never } + /** + * Customize tenant selector label + * + * Either a string or an object where the keys are locales and the values are the string labels + */ + tenantSelectorLabel?: + | Partial<{ + [key in AcceptedLanguages]?: string + }> + | string /** * The slug for the tenant collection * diff --git a/packages/plugin-multi-tenant/package.json b/packages/plugin-multi-tenant/package.json index def4177d8..634530008 100644 --- a/packages/plugin-multi-tenant/package.json +++ b/packages/plugin-multi-tenant/package.json @@ -78,6 +78,7 @@ }, "devDependencies": { "@payloadcms/eslint-config": "workspace:*", + "@payloadcms/translations": "workspace:*", "@payloadcms/ui": "workspace:*", "payload": "workspace:*" }, diff --git a/packages/plugin-multi-tenant/src/components/TenantSelector/index.tsx b/packages/plugin-multi-tenant/src/components/TenantSelector/index.tsx index 91e9a116c..915b5ff8f 100644 --- a/packages/plugin-multi-tenant/src/components/TenantSelector/index.tsx +++ b/packages/plugin-multi-tenant/src/components/TenantSelector/index.tsx @@ -2,17 +2,17 @@ import type { ReactSelectOption } from '@payloadcms/ui' import type { ViewTypes } from 'payload' -import { SelectInput } from '@payloadcms/ui' - import './index.scss' +import { SelectInput, useTranslation } from '@payloadcms/ui' import React from 'react' import { SELECT_ALL } from '../../constants.js' import { useTenantSelection } from '../../providers/TenantSelectionProvider/index.client.js' -export const TenantSelector = ({ viewType }: { viewType?: ViewTypes }) => { +export const TenantSelector = ({ label, viewType }: { label: string; viewType?: ViewTypes }) => { const { options, selectedTenantID, setTenant } = useTenantSelection() + const { t } = useTranslation() const handleChange = React.useCallback( (option: ReactSelectOption | ReactSelectOption[]) => { @@ -33,7 +33,7 @@ export const TenantSelector = ({ viewType }: { viewType?: ViewTypes }) => {
{ + const locale = _locale as AcceptedLanguages + if (!incomingConfig.i18n) { + incomingConfig.i18n = {} + } + if (!incomingConfig.i18n.translations) { + incomingConfig.i18n.translations = {} + } + if (!incomingConfig.i18n.translations[locale]) { + incomingConfig.i18n.translations[locale] = {} + } + if (!('multiTenant' in incomingConfig.i18n.translations[locale])) { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-expect-error + incomingConfig.i18n.translations[locale].multiTenant = {} + } + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-expect-error + incomingConfig.i18n.translations[locale].multiTenant.selectorLabel = label + tenantSelectorLabel = 'multiTenant:selectorLabel' + }) + } + /** * Add tenants array field to users collection */ @@ -229,7 +261,8 @@ export const multiTenantPlugin = if (pluginConfig.collections[collection.slug]?.useBaseListFilter !== false) { /** - * Collection baseListFilter with selected tenant constraint (if selected) + * Add list filter to enabled collections + * - filters results by selected tenant */ if (!collection.admin) { collection.admin = {} @@ -295,6 +328,9 @@ export const multiTenantPlugin = * Add tenant selector to admin UI */ incomingConfig.admin.components.beforeNavLinks.push({ + clientProps: { + label: tenantSelectorLabel, + }, path: '@payloadcms/plugin-multi-tenant/client#TenantSelector', }) diff --git a/packages/plugin-multi-tenant/src/types.ts b/packages/plugin-multi-tenant/src/types.ts index c3af2ad21..4974e4e49 100644 --- a/packages/plugin-multi-tenant/src/types.ts +++ b/packages/plugin-multi-tenant/src/types.ts @@ -1,3 +1,4 @@ +import type { AcceptedLanguages } from '@payloadcms/translations' import type { ArrayField, CollectionSlug, Field, RelationshipField, User } from 'payload' export type MultiTenantPluginConfig = { @@ -107,6 +108,16 @@ export type MultiTenantPluginConfig = { rowFields?: never tenantFieldAccess?: never } + /** + * Customize tenant selector label + * + * Either a string or an object where the keys are locales and the values are the string labels + */ + tenantSelectorLabel?: + | Partial<{ + [key in AcceptedLanguages]?: string + }> + | string /** * The slug for the tenant collection * diff --git a/packages/plugin-multi-tenant/tsconfig.json b/packages/plugin-multi-tenant/tsconfig.json index 2b41f4df6..b14b853dc 100644 --- a/packages/plugin-multi-tenant/tsconfig.json +++ b/packages/plugin-multi-tenant/tsconfig.json @@ -1,4 +1,4 @@ { "extends": "../../tsconfig.base.json", - "references": [{ "path": "../payload" }, { "path": "../ui"}] + "references": [{ "path": "../payload" }, { "path": "../ui"}, { "path": "../translations"}] } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4bba2b98c..da38c8aff 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1031,6 +1031,9 @@ importers: '@payloadcms/eslint-config': specifier: workspace:* version: link:../eslint-config + '@payloadcms/translations': + specifier: workspace:* + version: link:../translations '@payloadcms/ui': specifier: workspace:* version: link:../ui diff --git a/test/plugin-multi-tenant/config.ts b/test/plugin-multi-tenant/config.ts index 24db527a4..999de7acb 100644 --- a/test/plugin-multi-tenant/config.ts +++ b/test/plugin-multi-tenant/config.ts @@ -41,6 +41,7 @@ export default buildConfigWithDefaults({ isGlobal: true, }, }, + tenantSelectorLabel: 'Sites', }), ], typescript: {