diff --git a/packages/console/src/onboarding/components/DemoConnectorNotice/index.module.scss b/packages/console/src/onboarding/components/DemoConnectorNotice/index.module.scss new file mode 100644 index 000000000..c678541be --- /dev/null +++ b/packages/console/src/onboarding/components/DemoConnectorNotice/index.module.scss @@ -0,0 +1,5 @@ +@use '@/scss/underscore' as _; + +div.notice { + margin: _.unit(4) 0 0; +} diff --git a/packages/console/src/onboarding/components/DemoConnectorNotice/index.tsx b/packages/console/src/onboarding/components/DemoConnectorNotice/index.tsx new file mode 100644 index 000000000..d8713d7ba --- /dev/null +++ b/packages/console/src/onboarding/components/DemoConnectorNotice/index.tsx @@ -0,0 +1,13 @@ +import { useTranslation } from 'react-i18next'; + +import Alert from '@/components/Alert'; + +import * as styles from './index.module.scss'; + +const DemoConnectorNotice = () => { + const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + + return {t('cloud.sie.connectors.notice')}; +}; + +export default DemoConnectorNotice; diff --git a/packages/console/src/pages/Connectors/index.tsx b/packages/console/src/pages/Connectors/index.tsx index 4999434c7..6d44cc6aa 100644 --- a/packages/console/src/pages/Connectors/index.tsx +++ b/packages/console/src/pages/Connectors/index.tsx @@ -20,6 +20,7 @@ import { ConnectorsTabs } from '@/consts/page-tabs'; import type { RequestError } from '@/hooks/use-api'; import useConnectorGroups from '@/hooks/use-connector-groups'; import useDocumentationUrl from '@/hooks/use-documentation-url'; +import DemoConnectorNotice from '@/onboarding/components/DemoConnectorNotice'; import * as resourcesStyles from '@/scss/resources.module.scss'; import ConnectorDeleteButton from './components/ConnectorDeleteButton'; @@ -90,6 +91,8 @@ const Connectors = () => { const connectors = isSocial ? socialConnectors : passwordlessConnectors; + const hasDemoConnector = connectors?.some(({ isDemo }) => isDemo); + const connectorToShowInGuide = useMemo(() => { if (factories && factoryId) { return factories.find(({ id }) => id === factoryId); @@ -118,6 +121,7 @@ const Connectors = () => { {t('connectors.tab_email_sms')} {t('connectors.tab_social')} + {hasDemoConnector && }