diff --git a/src/shared/components/EmptyListComponent/EmptyListComponent.tsx b/src/shared/components/EmptyListComponent/EmptyListComponent.tsx index 76b26b28c7..8a75979c34 100644 --- a/src/shared/components/EmptyListComponent/EmptyListComponent.tsx +++ b/src/shared/components/EmptyListComponent/EmptyListComponent.tsx @@ -1,5 +1,5 @@ -import { ReactNode } from 'react'; -import { useTranslation } from 'react-i18next'; +import { ReactNode, useMemo } from 'react'; +import { Trans, useTranslation } from 'react-i18next'; import { Button, IllustratedMessage, Title } from '@ui5/webcomponents-react'; import '@ui5/webcomponents-fiori/dist/illustrations/AllIllustrations'; import { ExternalLink } from 'shared/components/ExternalLink/ExternalLink'; @@ -8,7 +8,7 @@ import './EmptyListComponent.scss'; type EmptyListComponentProps = { titleText: string; - subtitleText: string; + subtitleText: string | ReactNode; showButton?: boolean; buttonText?: string; url: string; @@ -29,6 +29,19 @@ export const EmptyListComponent = ({ }: EmptyListComponentProps) => { const { t } = useTranslation(); + const subtitle = useMemo(() => { + if (!subtitleText) return ''; + if (typeof subtitleText !== 'string') return subtitleText; + + return ( + ]} + /> + ); + }, [subtitleText, url]); + if (showButton === undefined) { showButton = typeof onClick === 'function'; } @@ -48,9 +61,7 @@ export const EmptyListComponent = ({ {titleText} } - subtitle={ - {subtitleText ?? ''} - } + subtitle={{subtitle}} >
{showButton && }