feat(console, phrases): update the supported webhook events (#5856)

* test(core): add integration tests add integration tests for interaction hooks * chore(test): remove legacy test remove legacy test * feat(console, phrases): update the supported webhook events update the supported webhook events * refactor(console): rename webhook and webhook log keys rename webhook and webhook log keys * fix(test): fix integration test fix integration test * feat(console): add devFeature guard add devFeature guard * chore: add changeset add changeset * chore(console): remove the lint rule disable comment remove the lint rule disable comment * fix(test): fix the integartion tests fix the integration tests * fix(console): refine the code refine the code * chore(console): refine comments refine comments
2025-03-31 22:51:25 -05:00 · 2024-05-15 14:26:52 +08:00 · 2024-05-15 14:26:52 +08:00 · e04d9523a6
commit e04d9523a6
parent c2a8e457c2
30 changed files with 440 additions and 153 deletions
--- a/.changeset/curvy-boxes-hide.md
+++ b/.changeset/curvy-boxes-hide.md
@ -0,0 +1,12 @@
+---
+"@logto/console": patch
+"@logto/phrases": patch
+---
+
+replace the i18n translated hook event label with the hook event value directly in the console
+
+- remove all the legacy interaction hook events i18n phrases
+- replace the translated label with the hook event value directly in the console
+  - `Create new account` -> `PostRegister`
+  - `Sign in` -> `PostSignIn`
+  - `Reset password` -> `PostResetPassword`
--- a/packages/console/src/components/BasicWebhookForm/index.tsx
+++ b/packages/console/src/components/BasicWebhookForm/index.tsx
@ -1,20 +1,39 @@
-import { type HookEvent, type Hook, type HookConfig, InteractionHookEvent } from '@logto/schemas';
+import { type Hook, type HookConfig, type HookEvent } from '@logto/schemas';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';

-import { hookEventLabel } from '@/consts/webhooks';
-import { CheckboxGroup } from '@/ds-components/Checkbox';
+import { isDevFeaturesEnabled } from '@/consts/env';
+import {
+  dataHookEventsLabel,
+  interactionHookEvents,
+  schemaGroupedDataHookEvents,
+} from '@/consts/webhooks';
+import CategorizedCheckboxGroup, {
+  type CheckboxOptionGroup,
+} from '@/ds-components/Checkbox/CategorizedCheckboxGroup';
 import FormField from '@/ds-components/FormField';
 import TextInput from '@/ds-components/TextInput';
 import { uriValidator } from '@/utils/validator';

 import * as styles from './index.module.scss';

-// TODO: Implement all hook events
-const hookEventOptions = Object.values(InteractionHookEvent).map((event) => ({
-  title: hookEventLabel[event],
-  value: event,
-}));
+const hookEventGroups: Array<CheckboxOptionGroup<HookEvent>> = [
+  // TODO: Remove dev feature guard
+  ...(isDevFeaturesEnabled
+    ? schemaGroupedDataHookEvents.map(([schema, events]) => ({
+        title: dataHookEventsLabel[schema],
+        options: events.map((event) => ({
+          value: event,
+        })),
+      }))
+    : []),
+  {
+    title: 'webhooks.schemas.interaction',
+    options: interactionHookEvents.map((event) => ({
+      value: event,
+    })),
+  },
+];

 export type BasicWebhookFormType = {
  name: Hook['name'];
@ -32,24 +51,6 @@ function BasicWebhookForm() {

  return (
    <>
-      <FormField title="webhooks.create_form.events">
-        <div className={styles.formFieldDescription}>
-          {t('webhooks.create_form.events_description')}
-        </div>
-        <Controller
-          name="events"
-          control={control}
-          defaultValue={[]}
-          rules={{
-            validate: (value) =>
-              value.length === 0 ? t('webhooks.create_form.missing_event_error') : true,
-          }}
-          render={({ field: { onChange, value } }) => (
-            <CheckboxGroup options={hookEventOptions} value={value} onChange={onChange} />
-          )}
-        />
-        {errors.events && <div className={styles.errorMessage}>{errors.events.message}</div>}
-      </FormField>
      <FormField isRequired title="webhooks.create_form.name">
        <TextInput
          {...register('name', { required: true })}
@ -71,6 +72,24 @@ function BasicWebhookForm() {
          error={errors.url?.type === 'required' ? true : errors.url?.message}
        />
      </FormField>
+      <FormField
+        title="webhooks.create_form.events"
+        tip={t('webhooks.create_form.events_description')}
+      >
+        <Controller
+          name="events"
+          control={control}
+          defaultValue={[]}
+          rules={{
+            validate: (value) =>
+              value.length === 0 ? t('webhooks.create_form.missing_event_error') : true,
+          }}
+          render={({ field: { onChange, value } }) => (
+            <CategorizedCheckboxGroup value={value} groups={hookEventGroups} onChange={onChange} />
+          )}
+        />
+        {errors.events && <div className={styles.errorMessage}>{errors.events.message}</div>}
+      </FormField>
    </>
  );
 }
--- a/packages/console/src/consts/env.ts
+++ b/packages/console/src/consts/env.ts
@ -3,6 +3,6 @@ import { yes } from '@silverhand/essentials';
 const isProduction = process.env.NODE_ENV === 'production';
 export const isCloud = yes(process.env.IS_CLOUD);
 export const adminEndpoint = process.env.ADMIN_ENDPOINT;
-// eslint-disable-next-line import/no-unused-modules
+
 export const isDevFeaturesEnabled =
  !isProduction || yes(process.env.DEV_FEATURES_ENABLED) || yes(process.env.INTEGRATION_TEST);
--- a/packages/console/src/consts/webhooks.ts
+++ b/packages/console/src/consts/webhooks.ts
@ -1,24 +1,58 @@
 import { type AdminConsoleKey } from '@logto/phrases';
-import { InteractionHookEvent, type LogKey } from '@logto/schemas';
+import {
+  DataHookSchema,
+  InteractionHookEvent,
+  hookEvents,
+  type DataHookEvent,
+} from '@logto/schemas';

-type HookEventLabel = {
-  // TODO: Implement all hook events
-  [key in InteractionHookEvent]: AdminConsoleKey;
+export const dataHookEventsLabel = Object.freeze({
+  [DataHookSchema.User]: 'webhooks.schemas.user',
+  [DataHookSchema.Organization]: 'webhooks.schemas.organization',
+  [DataHookSchema.Role]: 'webhooks.schemas.role',
+  [DataHookSchema.Scope]: 'webhooks.schemas.scope',
+  [DataHookSchema.OrganizationRole]: 'webhooks.schemas.organization_role',
+  [DataHookSchema.OrganizationScope]: 'webhooks.schemas.organization_scope',
+} satisfies Record<DataHookSchema, AdminConsoleKey>);
+
+export const interactionHookEvents = Object.values(InteractionHookEvent);
+
+const dataHookEvents: DataHookEvent[] = hookEvents.filter(
+  // eslint-disable-next-line no-restricted-syntax
+  (event): event is DataHookEvent => !interactionHookEvents.includes(event as InteractionHookEvent)
+);
+
+const isDataHookSchema = (schema: string): schema is DataHookSchema =>
+  // eslint-disable-next-line no-restricted-syntax
+  Object.values(DataHookSchema).includes(schema as DataHookSchema);
+
+// Group DataHook events by schema
+// TODO: Replace this using `groupBy` once Node v22 goes LTS
+const schemaGroupedDataHookEventsMap = dataHookEvents.reduce<Map<DataHookSchema, DataHookEvent[]>>(
+  (eventGroup, event) => {
+    const [schema] = event.split('.');
+
+    if (schema && isDataHookSchema(schema)) {
+      eventGroup.set(schema, [...(eventGroup.get(schema) ?? []), event]);
+    }
+
+    return eventGroup;
+  },
+  new Map()
+);
+
+// Sort the grouped `DataHook` events per console product design
+const hookEventSchemaOrder: {
+  [key in DataHookSchema]: number;
+} = {
+  [DataHookSchema.User]: 0,
+  [DataHookSchema.Organization]: 1,
+  [DataHookSchema.Role]: 2,
+  [DataHookSchema.OrganizationRole]: 3,
+  [DataHookSchema.Scope]: 4,
+  [DataHookSchema.OrganizationScope]: 5,
 };

-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;
-
-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;
+export const schemaGroupedDataHookEvents = Array.from(schemaGroupedDataHookEventsMap.entries())
+  .slice()
+  .sort(([schemaA], [schemaB]) => hookEventSchemaOrder[schemaA] - hookEventSchemaOrder[schemaB]);
--- a/packages/console/src/ds-components/Checkbox/CategorizedCheckboxGroup/index.module.scss
+++ b/packages/console/src/ds-components/Checkbox/CategorizedCheckboxGroup/index.module.scss
@ -0,0 +1,14 @@
+@use '@/scss/underscore' as _;
+
+.groupTitle {
+  font: var(--font-body-2);
+  color: var(--color-text-secondary);
+  margin-bottom: _.unit(2);
+}
+
+.groupList {
+  // Max two columns
+  gap: _.unit(5);
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+}
--- a/packages/console/src/ds-components/Checkbox/CategorizedCheckboxGroup/index.tsx
+++ b/packages/console/src/ds-components/Checkbox/CategorizedCheckboxGroup/index.tsx
@ -0,0 +1,42 @@
+import { type AdminConsoleKey } from '@logto/phrases';
+import classNames from 'classnames';
+
+import DynamicT from '@/ds-components/DynamicT';
+
+import CheckboxGroup, { type Option } from '../CheckboxGroup';
+
+import * as styles from './index.module.scss';
+
+export type CheckboxOptionGroup<T> = {
+  title: AdminConsoleKey;
+  options: Array<Option<T>>;
+};
+
+type Props<T> = {
+  readonly groups: Array<CheckboxOptionGroup<T>>;
+  readonly value: T[];
+  readonly onChange: (value: T[]) => void;
+  readonly className?: string;
+};
+
+function CategorizedCheckboxGroup<T extends string>({
+  groups,
+  value: checkedValues,
+  onChange,
+  className,
+}: Props<T>) {
+  return (
+    <div className={classNames(styles.groupList, className)}>
+      {groups.map(({ title, options }) => (
+        <div key={title}>
+          <div className={styles.groupTitle}>
+            <DynamicT forKey={title} />
+          </div>
+          <CheckboxGroup options={options} value={checkedValues} onChange={onChange} />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default CategorizedCheckboxGroup;
--- a/packages/console/src/ds-components/Checkbox/CheckboxGroup/index.tsx
+++ b/packages/console/src/ds-components/Checkbox/CheckboxGroup/index.tsx
@ -8,8 +8,8 @@ import Checkbox from '../Checkbox';

 import * as styles from './index.module.scss';

-type Option<T> = {
-  title: AdminConsoleKey;
+export type Option<T> = {
+  title?: AdminConsoleKey;
  tag?: ReactNode;
  value: T;
 };
@ -42,7 +42,7 @@ function CheckboxGroup<T extends string>({
          key={value}
          label={
            <>
-              <DynamicT forKey={title} />
+              {title ? <DynamicT forKey={title} /> : value}
              {tag}
            </>
          }
--- a/packages/console/src/pages/AuditLogDetails/index.tsx
+++ b/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 */
--- a/packages/console/src/pages/WebhookDetails/WebhookLogs/index.tsx
+++ b/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,8 @@ 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 { isDevFeaturesEnabled } from '@/consts/env';
+import { interactionHookEvents } from '@/consts/webhooks';
 import Table from '@/ds-components/Table';
 import Tag from '@/ds-components/Tag';
 import { type RequestError } from '@/hooks/use-api';
@ -18,13 +18,16 @@ 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],
+// TODO: Remove dev feature guard
+const webhookEvents = isDevFeaturesEnabled ? hookEvents : interactionHookEvents;
+
+const hookLogEventOptions = webhookEvents.map((event) => ({
+  title: event,
+  value: buildHookEventLogKey(event),
 }));

 function WebhookLogs() {
@ -96,13 +99,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'),
--- a/packages/console/src/pages/WebhookDetails/utils.ts
+++ b/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.', '');
+};
--- a/packages/console/src/pages/Webhooks/index.tsx
+++ b/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(', ');
            },
          },
          {
--- a/packages/integration-tests/src/tests/api/hook/hook.trigger.interaction.test.ts
+++ b/packages/integration-tests/src/tests/api/hook/hook.trigger.interaction.test.ts
@ -24,7 +24,7 @@ import {
  enableAllVerificationCodeSignInMethods,
 } from '#src/helpers/sign-in-experience.js';
 import { UserApiTest, generateNewUserProfile } from '#src/helpers/user.js';
-import { generateEmail, generatePassword } from '#src/utils.js';
+import { generateEmail, generatePassword, waitFor } from '#src/utils.js';

 import WebhookMockServer, { mockHookResponseGuard, verifySignature } from './WebhookMockServer.js';

@ -47,6 +47,9 @@ const assertHookLogResult = async (
    hookPayload?: Record<string, unknown>;
  }
 ) => {
+  //  Since the webhook request is async, we need to wait for a while to ensure the webhook response is received.
+  await waitFor(50);
+
  const logs = await getWebhookRecentLogs(
    hookId,
    new URLSearchParams({ logKey: `TriggerHook.${event}`, page_size: '10' })
--- a/packages/integration-tests/src/tests/console/webhooks/helpers.ts
+++ b/packages/integration-tests/src/tests/console/webhooks/helpers.ts
@ -2,8 +2,8 @@ import { type Page } from 'puppeteer';

 export const expectToCreateWebhook = async (page: Page) => {
  await expect(page).toClick('div[class$=main] div[class$=headline] > button');
-  await expect(page).toClick('span[class$=label]', { text: 'Create new account' });
-  await expect(page).toClick('span[class$=label]', { text: 'Sign in' });
+  await expect(page).toClick('span[class$=label]', { text: 'PostRegister' });
+  await expect(page).toClick('span[class$=label]', { text: 'User.Updated' });
  await expect(page).toFill('input[name=name]', 'hook_name');
  await expect(page).toFill('input[name=url]', 'https://localhost/webhook');
  await expect(page).toClick('button[type=submit]');
--- a/packages/integration-tests/src/tests/console/webhooks/index.test.ts
+++ b/packages/integration-tests/src/tests/console/webhooks/index.test.ts
@ -1,13 +1,13 @@
 import { logtoConsoleUrl as logtoConsoleUrlString } from '#src/constants.js';
 import {
-  goToAdminConsole,
-  expectToSaveChanges,
-  waitForToast,
-  expectToClickModalAction,
-  expectToClickDetailsPageOption,
-  expectModalWithTitle,
  expectConfirmModalAndAct,
  expectMainPageWithTitle,
+  expectModalWithTitle,
+  expectToClickDetailsPageOption,
+  expectToClickModalAction,
+  expectToSaveChanges,
+  goToAdminConsole,
+  waitForToast,
 } from '#src/ui-helpers/index.js';
 import { appendPathname, dcls, expectNavigation } from '#src/utils.js';

@ -63,8 +63,8 @@ describe('webhooks', () => {
    await expectNavigation(page.goto(appendPathname('/console/webhooks', logtoConsoleUrl).href));

    await expect(page).toClick('div[class$=main] div[class$=headline] > button');
-    await expect(page).toClick('span[class$=label]', { text: 'Create new account' });
-    await expect(page).toClick('span[class$=label]', { text: 'Sign in' });
+    await expect(page).toClick('span[class$=label]', { text: 'PostRegister' });
+    await expect(page).toClick('span[class$=label]', { text: 'User.Create' });
    await expect(page).toFill('input[name=name]', 'hook_name');
    await expect(page).toFill('input[name=url]', 'http://localhost/webhook');
    await expect(page).toClick('button[type=submit]');
--- a/packages/phrases/src/locales/de/translation/admin-console/webhooks.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/webhooks.ts
@ -4,10 +4,21 @@ 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',
+    /** UNTRANSLATED */
+    user: 'User',
+    /** UNTRANSLATED */
+    organization: 'Organization',
+    /** UNTRANSLATED */
+    role: 'Role',
+    /** UNTRANSLATED */
+    scope: 'Permission',
+    /** UNTRANSLATED */
+    organization_role: 'Organization role',
+    /** UNTRANSLATED */
+    organization_scope: 'Organization permission',
  },
  table: {
    name: 'Name',
--- a/packages/phrases/src/locales/en/translation/admin-console/webhooks.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/webhooks.ts
@ -3,10 +3,14 @@ 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',
+    organization: 'Organization',
+    role: 'Role',
+    scope: 'Permission',
+    organization_role: 'Organization role',
+    organization_scope: 'Organization permission',
  },
  table: {
    name: 'Name',
--- a/packages/phrases/src/locales/es/translation/admin-console/webhooks.ts
+++ b/packages/phrases/src/locales/es/translation/admin-console/webhooks.ts
@ -4,10 +4,21 @@ 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',
+    /** UNTRANSLATED */
+    user: 'User',
+    /** UNTRANSLATED */
+    organization: 'Organization',
+    /** UNTRANSLATED */
+    role: 'Role',
+    /** UNTRANSLATED */
+    scope: 'Permission',
+    /** UNTRANSLATED */
+    organization_role: 'Organization role',
+    /** UNTRANSLATED */
+    organization_scope: 'Organization permission',
  },
  table: {
    name: 'Nombre',
--- a/packages/phrases/src/locales/fr/translation/admin-console/webhooks.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/webhooks.ts
@ -4,10 +4,21 @@ 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',
+    /** UNTRANSLATED */
+    user: 'User',
+    /** UNTRANSLATED */
+    organization: 'Organization',
+    /** UNTRANSLATED */
+    role: 'Role',
+    /** UNTRANSLATED */
+    scope: 'Permission',
+    /** UNTRANSLATED */
+    organization_role: 'Organization role',
+    /** UNTRANSLATED */
+    organization_scope: 'Organization permission',
  },
  table: {
    name: 'Nom',
--- a/packages/phrases/src/locales/it/translation/admin-console/webhooks.ts
+++ b/packages/phrases/src/locales/it/translation/admin-console/webhooks.ts
@ -4,10 +4,21 @@ 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',
+    /** UNTRANSLATED */
+    user: 'User',
+    /** UNTRANSLATED */
+    organization: 'Organization',
+    /** UNTRANSLATED */
+    role: 'Role',
+    /** UNTRANSLATED */
+    scope: 'Permission',
+    /** UNTRANSLATED */
+    organization_role: 'Organization role',
+    /** UNTRANSLATED */
+    organization_scope: 'Organization permission',
  },
  table: {
    name: 'Nome',
--- a/packages/phrases/src/locales/ja/translation/admin-console/webhooks.ts
+++ b/packages/phrases/src/locales/ja/translation/admin-console/webhooks.ts
@ -3,10 +3,21 @@ const webhooks = {
  title: 'Webhooks',
  subtitle: '特定のイベントに関するリアルタイムの更新を手軽に受け取るためにWebhookを作成します。',
  create: 'Webhookを作成する',
-  events: {
-    post_register: '新しいアカウントを作成する',
-    post_sign_in: 'サインインする',
-    post_reset_password: 'パスワードをリセットする',
+  schemas: {
+    /** UNTRANSLATED */
+    interaction: 'User interaction',
+    /** UNTRANSLATED */
+    user: 'User',
+    /** UNTRANSLATED */
+    organization: 'Organization',
+    /** UNTRANSLATED */
+    role: 'Role',
+    /** UNTRANSLATED */
+    scope: 'Permission',
+    /** UNTRANSLATED */
+    organization_role: 'Organization role',
+    /** UNTRANSLATED */
+    organization_scope: 'Organization permission',
  },
  table: {
    name: '名前',
--- a/packages/phrases/src/locales/ko/translation/admin-console/webhooks.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/webhooks.ts
@ -3,10 +3,21 @@ const webhooks = {
  title: '웹훅',
  subtitle: '특정 이벤트에 대한 실시간 업데이트를 쉽게 수신할 수 있는 웹훅을 생성하세요.',
  create: '웹훅 생성',
-  events: {
-    post_register: '새 계정 만들기',
-    post_sign_in: '로그인',
-    post_reset_password: '비밀번호 재설정',
+  schemas: {
+    /** UNTRANSLATED */
+    interaction: 'User interaction',
+    /** UNTRANSLATED */
+    user: 'User',
+    /** UNTRANSLATED */
+    organization: 'Organization',
+    /** UNTRANSLATED */
+    role: 'Role',
+    /** UNTRANSLATED */
+    scope: 'Permission',
+    /** UNTRANSLATED */
+    organization_role: 'Organization role',
+    /** UNTRANSLATED */
+    organization_scope: 'Organization permission',
  },
  table: {
    name: '이름',
--- a/packages/phrases/src/locales/pl-pl/translation/admin-console/webhooks.ts
+++ b/packages/phrases/src/locales/pl-pl/translation/admin-console/webhooks.ts
@ -4,10 +4,21 @@ 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',
+    /** UNTRANSLATED */
+    user: 'User',
+    /** UNTRANSLATED */
+    organization: 'Organization',
+    /** UNTRANSLATED */
+    role: 'Role',
+    /** UNTRANSLATED */
+    scope: 'Permission',
+    /** UNTRANSLATED */
+    organization_role: 'Organization role',
+    /** UNTRANSLATED */
+    organization_scope: 'Organization permission',
  },
  table: {
    name: 'Nazwa',
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/webhooks.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/webhooks.ts
@ -4,10 +4,21 @@ 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',
+    /** UNTRANSLATED */
+    user: 'User',
+    /** UNTRANSLATED */
+    organization: 'Organization',
+    /** UNTRANSLATED */
+    role: 'Role',
+    /** UNTRANSLATED */
+    scope: 'Permission',
+    /** UNTRANSLATED */
+    organization_role: 'Organization role',
+    /** UNTRANSLATED */
+    organization_scope: 'Organization permission',
  },
  table: {
    name: 'Nome',
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/webhooks.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/webhooks.ts
@ -3,10 +3,21 @@ 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',
+    /** UNTRANSLATED */
+    user: 'User',
+    /** UNTRANSLATED */
+    organization: 'Organization',
+    /** UNTRANSLATED */
+    role: 'Role',
+    /** UNTRANSLATED */
+    scope: 'Permission',
+    /** UNTRANSLATED */
+    organization_role: 'Organization role',
+    /** UNTRANSLATED */
+    organization_scope: 'Organization permission',
  },
  table: {
    name: 'Nome',
--- a/packages/phrases/src/locales/ru/translation/admin-console/webhooks.ts
+++ b/packages/phrases/src/locales/ru/translation/admin-console/webhooks.ts
@ -4,10 +4,21 @@ const webhooks = {
  subtitle:
    'Создайте вебхуки, чтобы легко получать обновления в реальном времени относительно определенных событий.',
  create: 'Создать вебхук',
-  events: {
-    post_register: 'Создать новый аккаунт',
-    post_sign_in: 'Войти',
-    post_reset_password: 'Сбросить пароль',
+  schemas: {
+    /** UNTRANSLATED */
+    interaction: 'User interaction',
+    /** UNTRANSLATED */
+    user: 'User',
+    /** UNTRANSLATED */
+    organization: 'Organization',
+    /** UNTRANSLATED */
+    role: 'Role',
+    /** UNTRANSLATED */
+    scope: 'Permission',
+    /** UNTRANSLATED */
+    organization_role: 'Organization role',
+    /** UNTRANSLATED */
+    organization_scope: 'Organization permission',
  },
  table: {
    name: 'Имя',
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/webhooks.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/webhooks.ts
@ -4,10 +4,21 @@ 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',
+    /** UNTRANSLATED */
+    user: 'User',
+    /** UNTRANSLATED */
+    organization: 'Organization',
+    /** UNTRANSLATED */
+    role: 'Role',
+    /** UNTRANSLATED */
+    scope: 'Permission',
+    /** UNTRANSLATED */
+    organization_role: 'Organization role',
+    /** UNTRANSLATED */
+    organization_scope: 'Organization permission',
  },
  table: {
    name: 'Adı',
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/webhooks.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/webhooks.ts
@ -3,10 +3,21 @@ const webhooks = {
  title: 'Webhooks',
  subtitle: '创建 Webhooks 以轻松接收有关特定事件的实时更新。',
  create: '创建 Webhook',
-  events: {
-    post_register: '创建新账户',
-    post_sign_in: '登录',
-    post_reset_password: '重置密码',
+  schemas: {
+    /** UNTRANSLATED */
+    interaction: 'User interaction',
+    /** UNTRANSLATED */
+    user: 'User',
+    /** UNTRANSLATED */
+    organization: 'Organization',
+    /** UNTRANSLATED */
+    role: 'Role',
+    /** UNTRANSLATED */
+    scope: 'Permission',
+    /** UNTRANSLATED */
+    organization_role: 'Organization role',
+    /** UNTRANSLATED */
+    organization_scope: 'Organization permission',
  },
  table: {
    name: '名称',
--- a/packages/phrases/src/locales/zh-hk/translation/admin-console/webhooks.ts
+++ b/packages/phrases/src/locales/zh-hk/translation/admin-console/webhooks.ts
@ -3,10 +3,21 @@ const webhooks = {
  title: 'Webhooks',
  subtitle: '創建 Webhooks，輕鬆地接收有關特定事件的實時更新。',
  create: '創建 Webhook',
-  events: {
-    post_register: '創建新帳戶',
-    post_sign_in: '登錄',
-    post_reset_password: '重置密碼',
+  schemas: {
+    /** UNTRANSLATED */
+    interaction: 'User interaction',
+    /** UNTRANSLATED */
+    user: 'User',
+    /** UNTRANSLATED */
+    organization: 'Organization',
+    /** UNTRANSLATED */
+    role: 'Role',
+    /** UNTRANSLATED */
+    scope: 'Permission',
+    /** UNTRANSLATED */
+    organization_role: 'Organization role',
+    /** UNTRANSLATED */
+    organization_scope: 'Organization permission',
  },
  table: {
    name: '名稱',
--- a/packages/phrases/src/locales/zh-tw/translation/admin-console/webhooks.ts
+++ b/packages/phrases/src/locales/zh-tw/translation/admin-console/webhooks.ts
@ -3,10 +3,21 @@ const webhooks = {
  title: 'Webhooks',
  subtitle: '創建 Webhook 以輕鬆收到特定事件的即時更新。',
  create: '創建 Webhook',
-  events: {
-    post_register: '創建新帳戶',
-    post_sign_in: '登錄',
-    post_reset_password: '重置密碼',
+  schemas: {
+    /** UNTRANSLATED */
+    interaction: 'User interaction',
+    /** UNTRANSLATED */
+    user: 'User',
+    /** UNTRANSLATED */
+    organization: 'Organization',
+    /** UNTRANSLATED */
+    role: 'Role',
+    /** UNTRANSLATED */
+    scope: 'Permission',
+    /** UNTRANSLATED */
+    organization_role: 'Organization role',
+    /** UNTRANSLATED */
+    organization_scope: 'Organization permission',
  },
  table: {
    name: '名稱',
--- a/packages/schemas/src/foundations/jsonb-types/hooks.ts
+++ b/packages/schemas/src/foundations/jsonb-types/hooks.ts
@ -15,7 +15,7 @@ export enum InteractionHookEvent {
 }

 // DataHookEvent
-enum DataHookSchema {
+export enum DataHookSchema {
  User = 'User',
  Role = 'Role',
  Scope = 'Scope',