feat(console): add deletion confirm for in-used passwordless connectors (#3499)

.changeset-staged/flat-guests-bathe.md

@@ -0,0 +1,6 @@
+---
+"@logto/console": patch
+"@logto/phrases": patch
+---
+
+add deletion confirm for in-used passwordless connectors

packages/console/src/pages/ConnectorDetails/components/DeleteConnectorConfirmModal/index.tsx

@@ -0,0 +1,45 @@
+import type { ConnectorResponse } from '@logto/schemas';
+import { ConnectorType } from '@logto/schemas';
+import { Trans, useTranslation } from 'react-i18next';
+
+import ConfirmModal from '@/components/ConfirmModal';
+import UnnamedTrans from '@/components/UnnamedTrans';
+
+type Props = {
+  data: ConnectorResponse;
+  isOpen: boolean;
+  onCancel: () => void;
+  onConfirm: () => void;
+};
+
+const DeleteConnectorConfirmModal = ({ data, isOpen, onCancel, onConfirm }: Props) => {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const isSocial = data.type === ConnectorType.Social;
+
+  return (
+    <ConfirmModal
+      isOpen={isOpen}
+      confirmButtonText="general.delete"
+      onCancel={onCancel}
+      onConfirm={onConfirm}
+    >
+      {isSocial ? (
+        <Trans
+          t={t}
+          i18nKey="connector_details.in_used_social_deletion_description"
+          components={{ name: <UnnamedTrans resource={data.name} /> }}
+        />
+      ) : (
+        t('connector_details.in_used_passwordless_deletion_description', {
+          name: t(
+            data.type === ConnectorType.Email
+              ? 'connector_details.type_email'
+              : 'connector_details.type_sms'
+          ),
+        })
+      )}
+    </ConfirmModal>
+  );
+};
+
+export default DeleteConnectorConfirmModal;

packages/console/src/pages/ConnectorDetails/index.tsx

@@ -2,7 +2,7 @@ import { ConnectorType } from '@logto/schemas';
 import type { ConnectorFactoryResponse, ConnectorResponse } from '@logto/schemas';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-hot-toast';
-import { Trans, useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import useSWR, { useSWRConfig } from 'swr';
 
@@ -13,7 +13,6 @@ 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 ConnectorLogo from '@/components/ConnectorLogo';
 import CopyToClipboard from '@/components/CopyToClipboard';
 import DetailsSkeleton from '@/components/DetailsSkeleton';
@@ -34,6 +33,7 @@ import CreateForm from '../Connectors/components/CreateForm';
 import ConnectorContent from './components/ConnectorContent';
 import ConnectorTabs from './components/ConnectorTabs';
 import ConnectorTypeName from './components/ConnectorTypeName';
+import DeleteConnectorConfirmModal from './components/DeleteConnectorConfirmModal';
 import * as styles from './index.module.scss';
 
 // TODO: refactor path-related operation utils in both Connectors and ConnectorDetails page
@@ -76,7 +76,7 @@ const ConnectorDetails = () => {
   }, [pathname]);
 
   const onDeleteClick = async () => {
-    if (!isSocial || !inUse) {
+    if (!inUse) {
       await handleDelete();
 
       return;
@@ -221,20 +221,14 @@ const ConnectorDetails = () => {
               void mutate(connector);
             }}
           />
-          <ConfirmModal
+          <DeleteConnectorConfirmModal
+            data={data}
             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>

packages/console/src/pages/Connectors/components/ConnectorDeleteButton/index.tsx

@@ -1,17 +1,15 @@
 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 { 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 DeleteConnectorConfirmModal from '@/pages/ConnectorDetails/components/DeleteConnectorConfirmModal';
 import type { ConnectorGroup } from '@/types/connector';
 
 type Props = {
@@ -25,7 +23,6 @@ const ConnectorDeleteButton = ({ connectorGroup }: Props) => {
   const { isConnectorInUse } = useConnectorInUse();
 
   const firstConnector = connectors[0];
-  const isSocial = firstConnector?.type === ConnectorType.Social;
   const inUse = isConnectorInUse(firstConnector);
 
   const [isDeleteAlertOpen, setIsDeleteAlertOpen] = useState(false);
@@ -33,7 +30,7 @@ const ConnectorDeleteButton = ({ connectorGroup }: Props) => {
   const api = useApi();
 
   const onDeleteClick = async () => {
-    if (!isSocial || !inUse) {
+    if (!inUse) {
       await handleDelete();
 
       return;
@@ -70,20 +67,14 @@ const ConnectorDeleteButton = ({ connectorGroup }: Props) => {
           <Delete />
         </IconButton>
       </Tooltip>
-      <ConfirmModal
+      <DeleteConnectorConfirmModal
+        data={firstConnector}
         isOpen={isDeleteAlertOpen}
-        confirmButtonText="general.delete"
         onCancel={() => {
           setIsDeleteAlertOpen(false);
         }}
         onConfirm={handleDelete}
-      >
-        <Trans
-          t={t}
-          i18nKey="connector_details.in_use_deletion_description"
-          components={{ name: <UnnamedTrans resource={firstConnector.name} /> }}
-        />
-      </ConfirmModal>
+      />
     </>
   );
 };

packages/phrases/src/locales/de/translation/admin-console/connector-details.ts

@@ -23,8 +23,10 @@ const connector_details = {
   type_email: 'E-Mail 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
+  in_used_social_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
+  in_used_passwordless_deletion_description:
+    'This {{name}} is in-use in your sign-in experience. By deleting, your sign-in experience will not work properly until you resolve the conflict.', // UNTRANSLATED
 };
 
 export default connector_details;

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

@@ -23,8 +23,10 @@ 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.',
+  in_used_social_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.',
+  in_used_passwordless_deletion_description:
+    'This {{name}} is in-use in your sign-in experience. By deleting, your sign-in experience will not work properly until you resolve the conflict.',
 };
 
 export default connector_details;

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

@@ -23,8 +23,10 @@ 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
+  in_used_social_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
+  in_used_passwordless_deletion_description:
+    'This {{name}} is in-use in your sign-in experience. By deleting, your sign-in experience will not work properly until you resolve the conflict.', // UNTRANSLATED
 };
 
 export default connector_details;

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

@@ -23,8 +23,10 @@ const connector_details = {
   type_email: '이메일 연동',
   type_sms: 'SMS 연동',
   type_social: '소셜 연동',
-  in_use_deletion_description:
+  in_used_social_deletion_description:
     '이 연동은 로그인 환경에서 사용 중이에요. 삭제 시 로그인 경험 설정에서 <name/> 로그인 경험이 삭제돼요.',
+  in_used_passwordless_deletion_description:
+    'This {{name}} is in-use in your sign-in experience. By deleting, your sign-in experience will not work properly until you resolve the conflict.', // UNTRANSLATED
 };
 
 export default connector_details;

packages/phrases/src/locales/pt-br/translation/admin-console/connector-details.ts

@@ -23,8 +23,10 @@ const connector_details = {
   type_email: 'Conector de e-mail',
   type_sms: 'Conector de SMS',
   type_social: 'Conector social',
-  in_use_deletion_description:
+  in_used_social_deletion_description:
     'Este conector está em uso em sua experiência de entrada. Ao excluir, a experiência de login <name/> será excluída nas configurações da experiência de login.',
+  in_used_passwordless_deletion_description:
+    'This {{name}} is in-use in your sign-in experience. By deleting, your sign-in experience will not work properly until you resolve the conflict.', // UNTRANSLATED
 };
 
 export default connector_details;

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

@@ -23,8 +23,10 @@ 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
+  in_used_social_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
+  in_used_passwordless_deletion_description:
+    'This {{name}} is in-use in your sign-in experience. By deleting, your sign-in experience will not work properly until you resolve the conflict.', // UNTRANSLATED
 };
 
 export default connector_details;

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

@@ -23,8 +23,10 @@ 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
+  in_used_social_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
+  in_used_passwordless_deletion_description:
+    'This {{name}} is in-use in your sign-in experience. By deleting, your sign-in experience will not work properly until you resolve the conflict.', // UNTRANSLATED
 };
 
 export default connector_details;

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

@@ -23,8 +23,10 @@ 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
+  in_used_social_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
+  in_used_passwordless_deletion_description:
+    'This {{name}} is in-use in your sign-in experience. By deleting, your sign-in experience will not work properly until you resolve the conflict.', // UNTRANSLATED
 };
 
 export default connector_details;