Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-03-31 22:51:25 -05:00
Code Issues Activity

feat(console): in-used connectors deletion alert (#2345)

Browse source
This commit is contained in:
Xiao Yijun 2022-11-08 20:57:57 +08:00 • committed by GitHub
parent 22cb416713
commit 92b93e6e36
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 47 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
packages/console/src/pages/ConnectorDetails/index.tsx
View file

@ -3,7 +3,7 @@ import { AppearanceMode, ConnectorType } from '@logto/schemas';
import classNames from 'classnames';
import { useState } from 'react';
import { toast } from 'react-hot-toast';
import { useTranslation } from 'react-i18next';
import { Trans, useTranslation } from 'react-i18next';
import { useNavigate, useParams } from 'react-router-dom';
import useSWR, { useSWRConfig } from 'swr';
@ -14,6 +14,7 @@ import Reset from '@/assets/images/reset.svg';
import ActionMenu, { ActionMenuItem } from '@/components/ActionMenu';
import Button from '@/components/Button';
import Card from '@/components/Card';
import ConfirmModal from '@/components/ConfirmModal';
import CopyToClipboard from '@/components/CopyToClipboard';
import DetailsSkeleton from '@/components/DetailsSkeleton';
import Drawer from '@/components/Drawer';
@ -49,6 +50,18 @@ const ConnectorDetails = () => {
const api = useApi();
const navigate = useNavigate();
const theme = useTheme();
const isSocial = data?.type === ConnectorType.Social;
const [isDeleteAlertOpen, setIsDeleteAlertOpen] = useState(false);
const onDeleteClick = async () => {
if (!isSocial || !inUse) {
await handleDelete();
return;
}
setIsDeleteAlertOpen(true);
};
const handleDelete = async () => {
if (!connectorId) {
@ -65,7 +78,7 @@ const ConnectorDetails = () => {
await mutateGlobal('/api/connectors');
setIsDeleted(true);
if (data?.type === ConnectorType.Social) {
if (isSocial) {
navigate(`/connectors/social`, { replace: true });
} else {
navigate(`/connectors`, { replace: true });
@ -75,16 +88,14 @@ const ConnectorDetails = () => {
return (
<div className={detailsStyles.container}>
<LinkButton
to={data?.type === ConnectorType.Social ? '/connectors/social' : '/connectors'}
to={isSocial ? '/connectors/social' : '/connectors'}
icon={<Back />}
title="connector_details.back_to_connectors"
className={styles.backLink}
/>
{isLoading && <DetailsSkeleton />}
{!data && error && <div>{`error occurred: ${error.body?.message ?? error.message}`}</div>}
{data?.type === ConnectorType.Social && (
<ConnectorTabs target={data.target} connectorId={data.id} />
)}
{isSocial && <ConnectorTabs target={data.target} connectorId={data.id} />}
{data && (
<Card className={styles.header}>
<div className={styles.logoContainer}>
@ -137,7 +148,7 @@ const ConnectorDetails = () => {
buttonProps={{ icon: <More className={styles.moreIcon} />, size: 'large' }}
title={t('general.more_options')}
>
{data.type !== ConnectorType.Social && (
{!isSocial && (
<ActionMenuItem
icon={<Reset />}
iconClassName={styles.resetIcon}
@ -152,7 +163,7 @@ const ConnectorDetails = () => {
)}
</ActionMenuItem>
)}
<ActionMenuItem icon={<Delete />} type="danger" onClick={handleDelete}>
<ActionMenuItem icon={<Delete />} type="danger" onClick={onDeleteClick}>
{t('general.delete')}
</ActionMenuItem>
</ActionMenu>
@ -183,6 +194,22 @@ const ConnectorDetails = () => {
/>
</Card>
)}
{data && (
<ConfirmModal
isOpen={isDeleteAlertOpen}
confirmButtonText="general.delete"
onCancel={() => {
setIsDeleteAlertOpen(false);
}}
onConfirm={handleDelete}
>
<Trans
t={t}
i18nKey="connector_details.in_use_deletion_description"
components={{ name: <UnnamedTrans resource={data.name} /> }}
/>
</ConfirmModal>
)}
</div>
);
};

2
packages/phrases/src/locales/en/translation/admin-console/connector-details.ts
View file

@ -17,6 +17,8 @@ const connector_details = {
type_email: 'Email connector',
type_sms: 'SMS connector',
type_social: 'Social connector',
in_use_deletion_description:
'This connector is in use in your sign in experience. By deleting, <name/> sign in experience will be deleted in sign in experience settings.',
};
export default connector_details;

2
packages/phrases/src/locales/fr/translation/admin-console/connector-details.ts
View file

@ -17,6 +17,8 @@ const connector_details = {
type_email: 'Connecteur Email',
type_sms: 'Connecteur SMS',
type_social: 'Connecteur Social',
in_use_deletion_description:
'This connector is in use in your sign in experience. By deleting, <name/> sign in experience will be deleted in sign in experience settings.', // UNTRANSLATED
};
export default connector_details;

2
packages/phrases/src/locales/ko/translation/admin-console/connector-details.ts
View file

@ -17,6 +17,8 @@ const connector_details = {
type_email: '이메일 연동',
type_sms: 'SMS 연동',
type_social: '소셜 연동',
in_use_deletion_description:
'This connector is in use in your sign in experience. By deleting, <name/> sign in experience will be deleted in sign in experience settings.', // UNTRANSLATED
};
export default connector_details;

2
packages/phrases/src/locales/pt-pt/translation/admin-console/connector-details.ts
View file

@ -17,6 +17,8 @@ const connector_details = {
type_email: 'Conector de Email',
type_sms: 'Conector de SMS',
type_social: 'Conector Social',
in_use_deletion_description:
'This connector is in use in your sign in experience. By deleting, <name/> sign in experience will be deleted in sign in experience settings.', // UNTRANSLATED
};
export default connector_details;

2
packages/phrases/src/locales/tr-tr/translation/admin-console/connector-details.ts
View file

@ -17,6 +17,8 @@ const connector_details = {
type_email: 'Eposta connectorı',
type_sms: 'SMS connectorı',
type_social: 'Social connector',
in_use_deletion_description:
'This connector is in use in your sign in experience. By deleting, <name/> sign in experience will be deleted in sign in experience settings.', // UNTRANSLATED
};
export default connector_details;

2
packages/phrases/src/locales/zh-cn/translation/admin-console/connector-details.ts
View file

@ -17,6 +17,8 @@ const connector_details = {
type_email: '邮件连接器',
type_sms: '短信连接器',
type_social: '社交连接器',
in_use_deletion_description:
'This connector is in use in your sign in experience. By deleting, <name/> sign in experience will be deleted in sign in experience settings.', // UNTRANSLATED
};
export default connector_details;