refactor(console): rename webhook and webhook log keys

rename webhook and webhook log keys

packages/console/src/consts/webhooks.ts

@@ -4,20 +4,8 @@ import {
   InteractionHookEvent,
   hookEvents,
   type DataHookEvent,
-  type LogKey,
 } from '@logto/schemas';
 
-type HookEventLabel = {
-  // TODO: Implement all hook events
-  [key in InteractionHookEvent]: AdminConsoleKey;
-};
-
-export const hookEventLabel = Object.freeze({
-  [InteractionHookEvent.PostRegister]: 'webhooks.events.post_register',
-  [InteractionHookEvent.PostResetPassword]: 'webhooks.events.post_reset_password',
-  [InteractionHookEvent.PostSignIn]: 'webhooks.events.post_sign_in',
-}) satisfies HookEventLabel;
-
 export const dataHookEventsLabel = Object.freeze({
   [DataHookSchema.User]: 'webhooks.schemas.user',
   [DataHookSchema.Organization]: 'webhooks.schemas.organization',
@@ -27,17 +15,6 @@ export const dataHookEventsLabel = Object.freeze({
   [DataHookSchema.OrganizationScope]: 'webhooks.schemas.organization_scope',
 } satisfies Record<DataHookSchema, AdminConsoleKey>);
 
-type HookEventLogKey = {
-  // TODO: Implement all hook events
-  [key in InteractionHookEvent]: LogKey;
-};
-
-export const hookEventLogKey = Object.freeze({
-  [InteractionHookEvent.PostRegister]: 'TriggerHook.PostRegister',
-  [InteractionHookEvent.PostResetPassword]: 'TriggerHook.PostResetPassword',
-  [InteractionHookEvent.PostSignIn]: 'TriggerHook.PostSignIn',
-}) satisfies HookEventLogKey;
-
 const dataHookEvents: DataHookEvent[] = hookEvents.filter(
   (event): event is DataHookEvent => !(event in InteractionHookEvent)
 );

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

@@ -1,4 +1,5 @@
-import type { Application, User, Log, Hook } from '@logto/schemas';
+/* eslint-disable complexity */
+import type { Application, Hook, Log, User } from '@logto/schemas';
 import { demoAppApplicationId } from '@logto/schemas';
 import { conditional } from '@silverhand/essentials';
 import { useTranslation } from 'react-i18next';
@@ -10,13 +11,13 @@ import DetailsPage from '@/components/DetailsPage';
 import PageMeta from '@/components/PageMeta';
 import UserName from '@/components/UserName';
 import { logEventTitle } from '@/consts/logs';
-import { hookEventLogKey } from '@/consts/webhooks';
 import Card from '@/ds-components/Card';
 import CodeEditor from '@/ds-components/CodeEditor';
 import DangerousRaw from '@/ds-components/DangerousRaw';
 import FormField from '@/ds-components/FormField';
 import TabNav, { TabNavItem } from '@/ds-components/TabNav';
 import type { RequestError } from '@/hooks/use-api';
+import { isWebhookEventLogKey } from '@/pages/WebhookDetails/utils';
 import { getUserTitle } from '@/utils/user';
 
 import EventIcon from './components/EventIcon';
@@ -28,9 +29,6 @@ const getAuditLogDetailsRelatedResourceLink = (pathname: string) =>
 const getDetailsTabNavLink = (logId: string, userId?: string) =>
   userId ? `/users/${userId}/logs/${logId}` : `/audit-logs/${logId}`;
 
-const isWebhookEventLog = (key?: string) =>
-  key && Object.values<string>(hookEventLogKey).includes(key);
-
 function AuditLogDetails() {
   const { appId, userId, hookId, logId } = useParams();
   const { pathname } = useLocation();
@@ -70,7 +68,7 @@ function AuditLogDetails() {
     return null;
   }
 
-  const isWebHookEvent = isWebhookEventLog(data?.key);
+  const isWebHookEvent = isWebhookEventLogKey(data?.key ?? '');
 
   return (
     <DetailsPage
@@ -161,3 +159,4 @@ function AuditLogDetails() {
 }
 
 export default AuditLogDetails;
+/* eslint-enable complexity */

packages/console/src/pages/WebhookDetails/WebhookLogs/index.tsx

@@ -1,4 +1,4 @@
-import { type Log, InteractionHookEvent } from '@logto/schemas';
+import { hookEvents, type Log } from '@logto/schemas';
 import { conditional } from '@silverhand/essentials';
 import { useTranslation } from 'react-i18next';
 import { useOutletContext } from 'react-router-dom';
@@ -8,8 +8,6 @@ import { z } from 'zod';
 import EventSelector from '@/components/AuditLogTable/components/EventSelector';
 import EmptyDataPlaceholder from '@/components/EmptyDataPlaceholder';
 import { defaultPageSize } from '@/consts';
-import { hookEventLabel, hookEventLogKey } from '@/consts/webhooks';
-import DynamicT from '@/ds-components/DynamicT';
 import Table from '@/ds-components/Table';
 import Tag from '@/ds-components/Tag';
 import { type RequestError } from '@/hooks/use-api';
@@ -18,13 +16,13 @@ import useTenantPathname from '@/hooks/use-tenant-pathname';
 import { buildUrl } from '@/utils/url';
 
 import { type WebhookDetailsOutletContext } from '../types';
+import { buildHookEventLogKey, getHookEventKey } from '../utils';
 
 import * as styles from './index.module.scss';
 
-// TODO: Implement all hook events
-const hookLogEventOptions = Object.values(InteractionHookEvent).map((event) => ({
-  title: <DynamicT forKey={hookEventLabel[event]} />,
-  value: hookEventLogKey[event],
+const hookLogEventOptions = hookEvents.map((event) => ({
+  title: event,
+  value: buildHookEventLogKey(event),
 }));
 
 function WebhookLogs() {
@@ -96,13 +94,7 @@ function WebhookLogs() {
           title: t('logs.event'),
           dataIndex: 'event',
           colSpan: 6,
-          render: ({ key }) => {
-            // TODO: Implement all hook events
-            const event = Object.values(InteractionHookEvent).find(
-              (event) => hookEventLogKey[event] === key
-            );
-            return conditional(event && t(hookEventLabel[event])) ?? '-';
-          },
+          render: ({ key }) => getHookEventKey(key),
         },
         {
           title: t('logs.time'),

packages/console/src/pages/WebhookDetails/utils.ts

@@ -1,4 +1,4 @@
-import { type Hook } from '@logto/schemas';
+import { hookEvents, type Hook, type HookEvent, type WebhookLogKey } from '@logto/schemas';
 import { conditional } from '@silverhand/essentials';
 
 import { type WebhookDetailsFormType } from './types';
@@ -47,3 +47,20 @@ export const webhookDetailsParser = {
     };
   },
 };
+
+export const buildHookEventLogKey = (event: HookEvent): WebhookLogKey => `TriggerHook.${event}`;
+
+export const isWebhookEventLogKey = (logKey: string): logKey is WebhookLogKey => {
+  const [prefix, ...events] = logKey.split('.');
+
+  // eslint-disable-next-line no-restricted-syntax
+  return prefix === 'TriggerHook' && hookEvents.includes(events.join('.') as HookEvent);
+};
+
+export const getHookEventKey = (logKey: string) => {
+  if (!isWebhookEventLogKey(logKey)) {
+    return ' - ';
+  }
+
+  return logKey.replace('TriggerHook.', '');
+};

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

@@ -1,4 +1,4 @@
-import { type Hook, Theme, type HookResponse, type InteractionHookEvent } from '@logto/schemas';
+import { Theme, type Hook, type HookResponse } from '@logto/schemas';
 import { conditional } from '@silverhand/essentials';
 import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
@@ -14,7 +14,6 @@ import ItemPreview from '@/components/ItemPreview';
 import ListPage from '@/components/ListPage';
 import SuccessRate from '@/components/SuccessRate';
 import { defaultPageSize } from '@/consts';
-import { hookEventLabel } from '@/consts/webhooks';
 import Button from '@/ds-components/Button';
 import DynamicT from '@/ds-components/DynamicT';
 import TablePlaceholder from '@/ds-components/Table/TablePlaceholder';
@@ -91,14 +90,7 @@ function Webhooks() {
             colSpan: 6,
             render: ({ event, events }) => {
               const eventArray = conditional(events.length > 0 && events) ?? [event];
-              return (
-                eventArray
-                  // TODO: Implement all hook events
-                  // eslint-disable-next-line unicorn/prefer-native-coercion-functions
-                  .filter((_event): _event is InteractionHookEvent => Boolean(_event))
-                  .map((_event) => t(hookEventLabel[_event]))
-                  .join(', ')
-              );
+              return eventArray.join(', ');
             },
           },
           {

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

@@ -4,11 +4,6 @@ const webhooks = {
   subtitle:
     'Erstellen Sie Webhooks, um mühelos Echtzeit-Updates zu bestimmten Ereignissen zu empfangen.',
   create: 'Webhook erstellen',
-  events: {
-    post_register: 'Neuen Account anlegen',
-    post_sign_in: 'Anmelden',
-    post_reset_password: 'Passwort zurücksetzen',
-  },
   schemas: {
     /** UNTRANSLATED */
     interaction: 'User interaction',

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

@@ -3,11 +3,6 @@ const webhooks = {
   title: 'Webhooks',
   subtitle: 'Create webhooks to effortlessly receive real-time updates regarding specific events.',
   create: 'Create Webhook',
-  events: {
-    post_register: 'Create new account',
-    post_sign_in: 'Sign in',
-    post_reset_password: 'Reset password',
-  },
   schemas: {
     interaction: 'User interaction',
     user: 'User',

packages/phrases/src/locales/es/translation/admin-console/webhooks.ts

@@ -4,11 +4,6 @@ const webhooks = {
   subtitle:
     'Crea webhooks para recibir de manera fácil actualizaciones en tiempo real sobre eventos específicos.',
   create: 'Crear Webhook',
-  events: {
-    post_register: 'Crear nueva cuenta',
-    post_sign_in: 'Iniciar sesión',
-    post_reset_password: 'Restablecer contraseña',
-  },
   schemas: {
     /** UNTRANSLATED */
     interaction: 'User interaction',

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

@@ -4,11 +4,6 @@ const webhooks = {
   subtitle:
     'Créez des webhooks pour recevoir sans effort des mises à jour en temps réel concernant des événements spécifiques.',
   create: 'Créer un webhook',
-  events: {
-    post_register: 'Nouveau compte créé',
-    post_sign_in: 'Connectez-vous',
-    post_reset_password: 'Réinitialiser le mot de passe',
-  },
   schemas: {
     /** UNTRANSLATED */
     interaction: 'User interaction',

packages/phrases/src/locales/it/translation/admin-console/webhooks.ts

@@ -4,11 +4,6 @@ const webhooks = {
   subtitle:
     'Crea webhook per ricevere facilmente aggiornamenti in tempo reale relativi a eventi specifici.',
   create: 'Crea Webhook',
-  events: {
-    post_register: 'Crea nuovo account',
-    post_sign_in: 'Accedi',
-    post_reset_password: 'Reimposta password',
-  },
   schemas: {
     /** UNTRANSLATED */
     interaction: 'User interaction',

packages/phrases/src/locales/ja/translation/admin-console/webhooks.ts

@@ -3,11 +3,6 @@ const webhooks = {
   title: 'Webhooks',
   subtitle: '特定のイベントに関するリアルタイムの更新を手軽に受け取るためにWebhookを作成します。',
   create: 'Webhookを作成する',
-  events: {
-    post_register: '新しいアカウントを作成する',
-    post_sign_in: 'サインインする',
-    post_reset_password: 'パスワードをリセットする',
-  },
   schemas: {
     /** UNTRANSLATED */
     interaction: 'User interaction',

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

@@ -3,11 +3,6 @@ const webhooks = {
   title: '웹훅',
   subtitle: '특정 이벤트에 대한 실시간 업데이트를 쉽게 수신할 수 있는 웹훅을 생성하세요.',
   create: '웹훅 생성',
-  events: {
-    post_register: '새 계정 만들기',
-    post_sign_in: '로그인',
-    post_reset_password: '비밀번호 재설정',
-  },
   schemas: {
     /** UNTRANSLATED */
     interaction: 'User interaction',

packages/phrases/src/locales/pl-pl/translation/admin-console/webhooks.ts

@@ -4,11 +4,6 @@ const webhooks = {
   subtitle:
     'Utwórz webhooki, aby bez wysiłku otrzymywać aktualizacje w czasie rzeczywistym dotyczące określonych zdarzeń.',
   create: 'Utwórz webhook',
-  events: {
-    post_register: 'Utwórz nowe konto',
-    post_sign_in: 'Zaloguj się',
-    post_reset_password: 'Zresetuj hasło',
-  },
   schemas: {
     /** UNTRANSLATED */
     interaction: 'User interaction',

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

@@ -4,11 +4,6 @@ const webhooks = {
   subtitle:
     'Crie ganchos da web para receber atualizações em tempo real sobre eventos específicos sem esforço.',
   create: 'Criar Webhook',
-  events: {
-    post_register: 'Criar nova conta',
-    post_sign_in: 'Entrar',
-    post_reset_password: 'Redefinir senha',
-  },
   schemas: {
     /** UNTRANSLATED */
     interaction: 'User interaction',

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

@@ -3,11 +3,6 @@ const webhooks = {
   title: 'Webhooks',
   subtitle: 'Crie webhooks para receber atualizações em tempo real sobre eventos específicos.',
   create: 'Criar Webhook',
-  events: {
-    post_register: 'Criar nova conta',
-    post_sign_in: 'Entrar',
-    post_reset_password: 'Redefinir senha',
-  },
   schemas: {
     /** UNTRANSLATED */
     interaction: 'User interaction',

packages/phrases/src/locales/ru/translation/admin-console/webhooks.ts

@@ -4,11 +4,6 @@ const webhooks = {
   subtitle:
     'Создайте вебхуки, чтобы легко получать обновления в реальном времени относительно определенных событий.',
   create: 'Создать вебхук',
-  events: {
-    post_register: 'Создать новый аккаунт',
-    post_sign_in: 'Войти',
-    post_reset_password: 'Сбросить пароль',
-  },
   schemas: {
     /** UNTRANSLATED */
     interaction: 'User interaction',

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

@@ -4,11 +4,6 @@ const webhooks = {
   subtitle:
     'Belirli olaylarla ilgili gerçek zamanlı güncellemeler almak için webhooklar oluşturun.',
   create: 'Webhook Oluştur',
-  events: {
-    post_register: 'Yeni hesap oluştur',
-    post_sign_in: 'Oturum açın',
-    post_reset_password: 'Parolayı sıfırla',
-  },
   schemas: {
     /** UNTRANSLATED */
     interaction: 'User interaction',

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

@@ -3,11 +3,6 @@ const webhooks = {
   title: 'Webhooks',
   subtitle: '创建 Webhooks 以轻松接收有关特定事件的实时更新。',
   create: '创建 Webhook',
-  events: {
-    post_register: '创建新账户',
-    post_sign_in: '登录',
-    post_reset_password: '重置密码',
-  },
   schemas: {
     /** UNTRANSLATED */
     interaction: 'User interaction',

packages/phrases/src/locales/zh-hk/translation/admin-console/webhooks.ts

@@ -3,11 +3,6 @@ const webhooks = {
   title: 'Webhooks',
   subtitle: '創建 Webhooks，輕鬆地接收有關特定事件的實時更新。',
   create: '創建 Webhook',
-  events: {
-    post_register: '創建新帳戶',
-    post_sign_in: '登錄',
-    post_reset_password: '重置密碼',
-  },
   schemas: {
     /** UNTRANSLATED */
     interaction: 'User interaction',

packages/phrases/src/locales/zh-tw/translation/admin-console/webhooks.ts

@@ -3,11 +3,6 @@ const webhooks = {
   title: 'Webhooks',
   subtitle: '創建 Webhook 以輕鬆收到特定事件的即時更新。',
   create: '創建 Webhook',
-  events: {
-    post_register: '創建新帳戶',
-    post_sign_in: '登錄',
-    post_reset_password: '重置密碼',
-  },
   schemas: {
     /** UNTRANSLATED */
     interaction: 'User interaction',