diff --git a/packages/console/src/components/Tip/Tooltip/index.module.scss b/packages/console/src/components/Tip/Tooltip/index.module.scss index 0ee9a4a66..6768c7546 100644 --- a/packages/console/src/components/Tip/Tooltip/index.module.scss +++ b/packages/console/src/components/Tip/Tooltip/index.module.scss @@ -1,9 +1,5 @@ @use '@/scss/underscore' as _; -.content { - @include _.multi-line-ellipsis(6); -} - .anchor { display: inline-block; } diff --git a/packages/console/src/components/Tip/Tooltip/index.tsx b/packages/console/src/components/Tip/Tooltip/index.tsx index c54212cb1..240df8e8b 100644 --- a/packages/console/src/components/Tip/Tooltip/index.tsx +++ b/packages/console/src/components/Tip/Tooltip/index.tsx @@ -140,7 +140,7 @@ const Tooltip = ({ horizontalAlignment={positionState.horizontalAlign} isSuccessful={isSuccessful} > -
{content}
+ {content} , tooltipDom )} diff --git a/packages/console/src/consts/connectors.ts b/packages/console/src/consts/connectors.ts index 2a347490b..77a39329b 100644 --- a/packages/console/src/consts/connectors.ts +++ b/packages/console/src/consts/connectors.ts @@ -55,3 +55,8 @@ export const defaultEmailConnectorGroup: ConnectorGroup = { logoDark: null, target: '', }; + +/** + * Note: this feature has not been implemented yet; @xiaoyijun will refactor this once the internal Logto connectors are ready. + */ +export const isDemoConnector = true; diff --git a/packages/console/src/onboarding/pages/SignInExperience/components/SocialSelector/index.tsx b/packages/console/src/onboarding/pages/SignInExperience/components/SocialSelector/index.tsx index 87d28df75..acf870f9a 100644 --- a/packages/console/src/onboarding/pages/SignInExperience/components/SocialSelector/index.tsx +++ b/packages/console/src/onboarding/pages/SignInExperience/components/SocialSelector/index.tsx @@ -30,7 +30,7 @@ const SocialSelector = ({ value, onChange }: Props) => { ), value: item.target, - tag: 'general.trial', + tag: 'general.demo', }; }); diff --git a/packages/console/src/pages/Connectors/components/ConnectorDeleteButton/index.tsx b/packages/console/src/pages/Connectors/components/ConnectorDeleteButton/index.tsx new file mode 100644 index 000000000..20c509574 --- /dev/null +++ b/packages/console/src/pages/Connectors/components/ConnectorDeleteButton/index.tsx @@ -0,0 +1,91 @@ +import type { ConnectorResponse } from '@logto/schemas'; +import { ConnectorType } from '@logto/schemas'; +import { useState } from 'react'; +import { toast } from 'react-hot-toast'; +import { Trans, useTranslation } from 'react-i18next'; +import { useSWRConfig } from 'swr'; + +import Delete from '@/assets/images/delete.svg'; +import ConfirmModal from '@/components/ConfirmModal'; +import IconButton from '@/components/IconButton'; +import { Tooltip } from '@/components/Tip'; +import UnnamedTrans from '@/components/UnnamedTrans'; +import useApi from '@/hooks/use-api'; +import useConnectorInUse from '@/hooks/use-connector-in-use'; +import type { ConnectorGroup } from '@/types/connector'; + +type Props = { + connectorGroup: ConnectorGroup; +}; + +const ConnectorDeleteButton = ({ connectorGroup }: Props) => { + const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + const { mutate: mutateGlobal } = useSWRConfig(); + const { connectors } = connectorGroup; + const { isConnectorInUse } = useConnectorInUse(); + + const firstConnector = connectors[0]; + const isSocial = firstConnector?.type === ConnectorType.Social; + const inUse = isConnectorInUse(firstConnector); + + const [isDeleteAlertOpen, setIsDeleteAlertOpen] = useState(false); + + const api = useApi(); + + const onDeleteClick = async () => { + if (!isSocial || !inUse) { + await handleDelete(); + + return; + } + + setIsDeleteAlertOpen(true); + }; + + const handleDelete = async () => { + if (!firstConnector) { + return; + } + + const { connectors } = connectorGroup; + + await Promise.all( + connectors.map(async (connector) => { + await api.delete(`api/connectors/${connector.id}`).json(); + }) + ); + + toast.success(t('connector_details.connector_deleted')); + await mutateGlobal('api/connectors'); + }; + + if (!firstConnector) { + return null; + } + + return ( + <> + {t('general.delete')}}> + + + + + { + setIsDeleteAlertOpen(false); + }} + onConfirm={handleDelete} + > + }} + /> + + + ); +}; + +export default ConnectorDeleteButton; diff --git a/packages/console/src/pages/Connectors/components/ConnectorName/DemoTag.module.scss b/packages/console/src/pages/Connectors/components/ConnectorName/DemoTag.module.scss new file mode 100644 index 000000000..c28465bd5 --- /dev/null +++ b/packages/console/src/pages/Connectors/components/ConnectorName/DemoTag.module.scss @@ -0,0 +1,9 @@ +@use '@/scss/underscore' as _; + +.tag { + font: var(--font-label-3); + background-color: var(--color-alert-99); + padding: _.unit(0.5) _.unit(1.5); + border-radius: 10px; + user-select: none; +} diff --git a/packages/console/src/pages/Connectors/components/ConnectorName/DemoTag.tsx b/packages/console/src/pages/Connectors/components/ConnectorName/DemoTag.tsx new file mode 100644 index 000000000..bad13d934 --- /dev/null +++ b/packages/console/src/pages/Connectors/components/ConnectorName/DemoTag.tsx @@ -0,0 +1,17 @@ +import { useTranslation } from 'react-i18next'; + +import { Tooltip } from '@/components/Tip'; + +import * as styles from './DemoTag.module.scss'; + +const DemoTag = () => { + const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + + return ( + {t('connectors.demo_tip')}}> +
{t('general.demo')}
+ + ); +}; + +export default DemoTag; diff --git a/packages/console/src/pages/Connectors/components/ConnectorName/index.module.scss b/packages/console/src/pages/Connectors/components/ConnectorName/index.module.scss index ef73c6ba6..092b897cb 100644 --- a/packages/console/src/pages/Connectors/components/ConnectorName/index.module.scss +++ b/packages/console/src/pages/Connectors/components/ConnectorName/index.module.scss @@ -1,5 +1,10 @@ @use '@/scss/underscore' as _; +.container { + display: flex; + align-items: center; +} + .logoContainer { width: 40px; height: 40px; diff --git a/packages/console/src/pages/Connectors/components/ConnectorName/index.tsx b/packages/console/src/pages/Connectors/components/ConnectorName/index.tsx index 1d0d9cfd5..f30472b34 100644 --- a/packages/console/src/pages/Connectors/components/ConnectorName/index.tsx +++ b/packages/console/src/pages/Connectors/components/ConnectorName/index.tsx @@ -15,13 +15,15 @@ import { ConnectorsTabs } from '@/consts/page-tabs'; import ConnectorPlatformIcon from '@/icons/ConnectorPlatformIcon'; import type { ConnectorGroup } from '@/types/connector'; +import DemoTag from './DemoTag'; import * as styles from './index.module.scss'; type Props = { connectorGroup: ConnectorGroup; + isDemo?: boolean; }; -const ConnectorName = ({ connectorGroup }: Props) => { +const ConnectorName = ({ connectorGroup, isDemo = false }: Props) => { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const { type, connectors } = connectorGroup; const connector = connectors[0]; @@ -58,12 +60,12 @@ const ConnectorName = ({ connectorGroup }: Props) => { } return ( - } - subtitle={ - <> - {type !== ConnectorType.Social && connector.id} - {type === ConnectorType.Social && hasNonUniversalConnector && ( +
+ } + subtitle={ + type === ConnectorType.Social && + hasNonUniversalConnector && (
{connectors.map( ({ id, platform }) => @@ -75,16 +77,17 @@ const ConnectorName = ({ connectorGroup }: Props) => { ) )}
- )} - - } - icon={} - to={`/connectors/${ - connector.type === ConnectorType.Social - ? ConnectorsTabs.Social - : ConnectorsTabs.Passwordless - }/${connector.id}`} - /> + ) + } + icon={} + to={`/connectors/${ + connector.type === ConnectorType.Social + ? ConnectorsTabs.Social + : ConnectorsTabs.Passwordless + }/${connector.id}`} + /> + {isDemo && } +
); }; diff --git a/packages/console/src/pages/Connectors/index.tsx b/packages/console/src/pages/Connectors/index.tsx index fd09e0f95..111be6030 100644 --- a/packages/console/src/pages/Connectors/index.tsx +++ b/packages/console/src/pages/Connectors/index.tsx @@ -15,13 +15,14 @@ import CardTitle from '@/components/CardTitle'; import TabNav, { TabNavItem } from '@/components/TabNav'; import Table from '@/components/Table'; import TablePlaceholder from '@/components/Table/TablePlaceholder'; -import { defaultEmailConnectorGroup, defaultSmsConnectorGroup } from '@/consts'; +import { defaultEmailConnectorGroup, defaultSmsConnectorGroup, isDemoConnector } from '@/consts'; 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 * as resourcesStyles from '@/scss/resources.module.scss'; +import ConnectorDeleteButton from './components/ConnectorDeleteButton'; import ConnectorName from './components/ConnectorName'; import ConnectorStatus from './components/ConnectorStatus'; import ConnectorStatusField from './components/ConnectorStatusField'; @@ -126,7 +127,9 @@ const Connectors = () => { title: t('connectors.connector_name'), dataIndex: 'name', colSpan: 6, - render: (connectorGroup) => , + render: (connectorGroup) => ( + + ), }, { title: t('connectors.connector_type'), @@ -137,11 +140,19 @@ const Connectors = () => { { title: , dataIndex: 'status', - colSpan: 5, + colSpan: 4, render: (connectorGroup) => , }, + { + title: null, + dataIndex: 'delete', + colSpan: 1, + render: (connectorGroup) => + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition + isDemoConnector ? : null, + }, ]} - isRowClickable={({ connectors }) => Boolean(connectors[0])} + isRowClickable={({ connectors }) => Boolean(connectors[0]) && !isDemoConnector} rowClickHandler={({ connectors }) => { const firstConnector = connectors[0]; diff --git a/packages/phrases/src/locales/de/translation/admin-console/connectors.ts b/packages/phrases/src/locales/de/translation/admin-console/connectors.ts index ffee0f471..388406295 100644 --- a/packages/phrases/src/locales/de/translation/admin-console/connectors.ts +++ b/packages/phrases/src/locales/de/translation/admin-console/connectors.ts @@ -7,6 +7,8 @@ const connectors = { tab_email_sms: 'E-Mail und SMS Connectoren', tab_social: 'Social Connectoren', connector_name: 'Connectorname', + demo_tip: + 'This connector has been preconfigured for demonstration purposes only. It should not be utilized in a production environment. Once you have completed your testing, be sure to provide your own credentials and set up your own connectors. The one you created will replace the trial version.', // UNTRANSLATED connector_type: 'Typ', connector_status: 'Anmeldeoberfläche', connector_status_in_use: 'In Benutzung', diff --git a/packages/phrases/src/locales/de/translation/admin-console/general.ts b/packages/phrases/src/locales/de/translation/admin-console/general.ts index 5154067ea..f62bcf9f3 100644 --- a/packages/phrases/src/locales/de/translation/admin-console/general.ts +++ b/packages/phrases/src/locales/de/translation/admin-console/general.ts @@ -51,7 +51,7 @@ const general = { try_now: 'Try Now', // UNTRANSLATED multiple_form_field: '(Multiple)', // UNTRANSLATED cap_limit: 'Cap limit', // UNTRANSLATED - trial: 'Trail', // UNTRANSLATED + demo: 'Demo', // UNTRANSLATED }; export default general; diff --git a/packages/phrases/src/locales/en/translation/admin-console/connectors.ts b/packages/phrases/src/locales/en/translation/admin-console/connectors.ts index d05f75943..fc1c5d601 100644 --- a/packages/phrases/src/locales/en/translation/admin-console/connectors.ts +++ b/packages/phrases/src/locales/en/translation/admin-console/connectors.ts @@ -7,6 +7,8 @@ const connectors = { tab_email_sms: 'Email and SMS connectors', tab_social: 'Social connectors', connector_name: 'Connector name', + demo_tip: + 'This connector has been preconfigured for demonstration purposes only. It should not be utilized in a production environment. Once you have completed your testing, be sure to provide your own credentials and set up your own connectors. The one you created will replace the trial version.', connector_type: 'Type', connector_status: 'Sign in Experience', connector_status_in_use: 'In use', diff --git a/packages/phrases/src/locales/en/translation/admin-console/general.ts b/packages/phrases/src/locales/en/translation/admin-console/general.ts index 7518d0d77..9c6c42699 100644 --- a/packages/phrases/src/locales/en/translation/admin-console/general.ts +++ b/packages/phrases/src/locales/en/translation/admin-console/general.ts @@ -50,7 +50,7 @@ const general = { try_now: 'Try Now', multiple_form_field: '(Multiple)', cap_limit: 'Cap limit', - trial: 'Trail', + demo: 'Demo', }; export default general; diff --git a/packages/phrases/src/locales/fr/translation/admin-console/connectors.ts b/packages/phrases/src/locales/fr/translation/admin-console/connectors.ts index 337c0c086..42f819ab1 100644 --- a/packages/phrases/src/locales/fr/translation/admin-console/connectors.ts +++ b/packages/phrases/src/locales/fr/translation/admin-console/connectors.ts @@ -8,6 +8,8 @@ const connectors = { tab_email_sms: 'Connecteurs Email et SMS', tab_social: 'Connecteurs sociaux', connector_name: 'Nom du connecteur', + demo_tip: + 'This connector has been preconfigured for demonstration purposes only. It should not be utilized in a production environment. Once you have completed your testing, be sure to provide your own credentials and set up your own connectors. The one you created will replace the trial version.', // UNTRANSLATED connector_type: 'Type', connector_status: 'Experience de connexion', connector_status_in_use: "En cours d'utilisation", diff --git a/packages/phrases/src/locales/fr/translation/admin-console/general.ts b/packages/phrases/src/locales/fr/translation/admin-console/general.ts index 78527f8ff..7b838fcfe 100644 --- a/packages/phrases/src/locales/fr/translation/admin-console/general.ts +++ b/packages/phrases/src/locales/fr/translation/admin-console/general.ts @@ -51,7 +51,7 @@ const general = { try_now: 'Try Now', // UNTRANSLATED multiple_form_field: '(Multiple)', // UNTRANSLATED cap_limit: 'Cap limit', // UNTRANSLATED - trial: 'Trail', // UNTRANSLATED + demo: 'Demo', // UNTRANSLATED }; export default general; diff --git a/packages/phrases/src/locales/ko/translation/admin-console/connectors.ts b/packages/phrases/src/locales/ko/translation/admin-console/connectors.ts index 044cec4d8..b9fff386e 100644 --- a/packages/phrases/src/locales/ko/translation/admin-console/connectors.ts +++ b/packages/phrases/src/locales/ko/translation/admin-console/connectors.ts @@ -8,6 +8,8 @@ const connectors = { tab_email_sms: '이메일/SMS 연동', tab_social: '소셜 연동', connector_name: '연동 이름', + demo_tip: + 'This connector has been preconfigured for demonstration purposes only. It should not be utilized in a production environment. Once you have completed your testing, be sure to provide your own credentials and set up your own connectors. The one you created will replace the trial version.', // UNTRANSLATED connector_type: '종류', connector_status: '로그인 경험', connector_status_in_use: '사용 중', diff --git a/packages/phrases/src/locales/ko/translation/admin-console/general.ts b/packages/phrases/src/locales/ko/translation/admin-console/general.ts index 5902cbac1..4fc3be2cc 100644 --- a/packages/phrases/src/locales/ko/translation/admin-console/general.ts +++ b/packages/phrases/src/locales/ko/translation/admin-console/general.ts @@ -50,7 +50,7 @@ const general = { try_now: 'Try Now', // UNTRANSLATED multiple_form_field: '(Multiple)', // UNTRANSLATED cap_limit: 'Cap limit', // UNTRANSLATED - trial: 'Trail', // UNTRANSLATED + demo: 'Demo', // UNTRANSLATED }; export default general; diff --git a/packages/phrases/src/locales/pt-br/translation/admin-console/connectors.ts b/packages/phrases/src/locales/pt-br/translation/admin-console/connectors.ts index 8baea7bb4..c3ea1a1d4 100644 --- a/packages/phrases/src/locales/pt-br/translation/admin-console/connectors.ts +++ b/packages/phrases/src/locales/pt-br/translation/admin-console/connectors.ts @@ -8,6 +8,8 @@ const connectors = { tab_email_sms: 'Conectores de e-mail e SMS', tab_social: 'Conectores sociais', connector_name: 'Nome do conector', + demo_tip: + 'This connector has been preconfigured for demonstration purposes only. It should not be utilized in a production environment. Once you have completed your testing, be sure to provide your own credentials and set up your own connectors. The one you created will replace the trial version.', // UNTRANSLATED connector_type: 'Tipo', connector_status: 'Experiência de login', connector_status_in_use: 'Em uso', diff --git a/packages/phrases/src/locales/pt-br/translation/admin-console/general.ts b/packages/phrases/src/locales/pt-br/translation/admin-console/general.ts index 2ecc61281..a5ca5b37c 100644 --- a/packages/phrases/src/locales/pt-br/translation/admin-console/general.ts +++ b/packages/phrases/src/locales/pt-br/translation/admin-console/general.ts @@ -51,7 +51,7 @@ const general = { try_now: 'Try Now', // UNTRANSLATED multiple_form_field: '(Multiple)', // UNTRANSLATED cap_limit: 'Cap limit', // UNTRANSLATED - trial: 'Trail', // UNTRANSLATED + demo: 'Demo', // UNTRANSLATED }; export default general; diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/connectors.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/connectors.ts index 7fbcdc89e..b7491a23d 100644 --- a/packages/phrases/src/locales/pt-pt/translation/admin-console/connectors.ts +++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/connectors.ts @@ -7,6 +7,8 @@ const connectors = { tab_email_sms: 'Conectores de Email e SMS', tab_social: 'Conectores sociais', connector_name: 'Nome do conector', + demo_tip: + 'This connector has been preconfigured for demonstration purposes only. It should not be utilized in a production environment. Once you have completed your testing, be sure to provide your own credentials and set up your own connectors. The one you created will replace the trial version.', // UNTRANSLATED connector_type: 'Tipo', connector_status: 'Experiência de login', connector_status_in_use: 'Em uso', diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/general.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/general.ts index 2d243f607..6188aa18f 100644 --- a/packages/phrases/src/locales/pt-pt/translation/admin-console/general.ts +++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/general.ts @@ -50,7 +50,7 @@ const general = { try_now: 'Try Now', // UNTRANSLATED multiple_form_field: '(Multiple)', // UNTRANSLATED cap_limit: 'Cap limit', // UNTRANSLATED - trial: 'Trail', // UNTRANSLATED + demo: 'Demo', // UNTRANSLATED }; export default general; diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/connectors.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/connectors.ts index 803ee0596..48c590bd9 100644 --- a/packages/phrases/src/locales/tr-tr/translation/admin-console/connectors.ts +++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/connectors.ts @@ -8,6 +8,8 @@ const connectors = { tab_email_sms: 'E-posta ve SMS connectorları', tab_social: 'Social connectorlar', connector_name: 'Connector adı', + demo_tip: + 'This connector has been preconfigured for demonstration purposes only. It should not be utilized in a production environment. Once you have completed your testing, be sure to provide your own credentials and set up your own connectors. The one you created will replace the trial version.', // UNTRANSLATED connector_type: 'Tip', connector_status: 'Oturum açma deneyimi', connector_status_in_use: 'Kullanımda', diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/general.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/general.ts index b310c95af..b087ef0ac 100644 --- a/packages/phrases/src/locales/tr-tr/translation/admin-console/general.ts +++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/general.ts @@ -51,7 +51,7 @@ const general = { try_now: 'Try Now', // UNTRANSLATED multiple_form_field: '(Multiple)', // UNTRANSLATED cap_limit: 'Cap limit', // UNTRANSLATED - trial: 'Trail', // UNTRANSLATED + demo: 'Demo', // UNTRANSLATED }; export default general; diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/connectors.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/connectors.ts index 5300c2bef..842721319 100644 --- a/packages/phrases/src/locales/zh-cn/translation/admin-console/connectors.ts +++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/connectors.ts @@ -7,6 +7,8 @@ const connectors = { tab_email_sms: '短信和邮件连接器', tab_social: '社交连接器', connector_name: '连接器名称', + demo_tip: + 'This connector has been preconfigured for demonstration purposes only. It should not be utilized in a production environment. Once you have completed your testing, be sure to provide your own credentials and set up your own connectors. The one you created will replace the trial version.', // UNTRANSLATED connector_type: '类型', connector_status: '登录体验', connector_status_in_use: '使用中', diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/general.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/general.ts index e95fe69ea..f4abcd0e7 100644 --- a/packages/phrases/src/locales/zh-cn/translation/admin-console/general.ts +++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/general.ts @@ -50,7 +50,7 @@ const general = { try_now: 'Try Now', // UNTRANSLATED multiple_form_field: '(Multiple)', // UNTRANSLATED cap_limit: 'Cap limit', // UNTRANSLATED - trial: 'Trail', // UNTRANSLATED + demo: 'Demo', // UNTRANSLATED }; export default general;