From 5599667576a50dd710dc1beda493a1e570900748 Mon Sep 17 00:00:00 2001
From: simeng-li <simeng@silverhand.io>
Date: Mon, 5 Jun 2023 17:27:45 +0800
Subject: [PATCH] fix(console): hide some log headers for webhook event (#3971)

* fix(console): hide some log headers for webhook event

hide some log headers for webhook event

* fix(console): address typo

address typo
---
 .../src/pages/AuditLogDetails/index.tsx       | 72 +++++++++++--------
 packages/schemas/src/types/log/hook.ts        |  2 +-
 2 files changed, 45 insertions(+), 29 deletions(-)

diff --git a/packages/console/src/pages/AuditLogDetails/index.tsx b/packages/console/src/pages/AuditLogDetails/index.tsx
index d96c3acf5..081063623 100644
--- a/packages/console/src/pages/AuditLogDetails/index.tsx
+++ b/packages/console/src/pages/AuditLogDetails/index.tsx
@@ -16,6 +16,7 @@ import PageMeta from '@/components/PageMeta';
 import TabNav, { TabNavItem } from '@/components/TabNav';
 import UserName from '@/components/UserName';
 import { logEventTitle } from '@/consts/logs';
+import { hookEventLogKey } from '@/consts/webhooks';
 import type { RequestError } from '@/hooks/use-api';
 import { getUserTitle } from '@/utils/user';
 
@@ -28,6 +29,9 @@ 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 { userId, hookId, logId } = useParams();
   const { pathname } = useLocation();
@@ -59,6 +63,8 @@ function AuditLogDetails() {
     return null;
   }
 
+  const isWebHookEvent = isWebhookEventLog(data?.key);
+
   return (
     <DetailsPage
       backLink={backLink}
@@ -79,29 +85,37 @@ function AuditLogDetails() {
                   <div className={styles.label}>{t('log_details.event_key')}</div>
                   <div>{data.key}</div>
                 </div>
-                <div className={styles.infoItem}>
-                  <div className={styles.label}>{t('log_details.application')}</div>
-                  <div>
-                    {data.payload.applicationId ? (
-                      <ApplicationName
-                        isLink={data.payload.applicationId !== demoAppApplicationId}
-                        applicationId={data.payload.applicationId}
-                      />
-                    ) : (
-                      '-'
-                    )}
-                  </div>
-                </div>
-                <div className={styles.infoItem}>
-                  <div className={styles.label}>{t('log_details.ip_address')}</div>
-                  <div>{data.payload.ip ?? '-'}</div>
-                </div>
-                <div className={styles.infoItem}>
-                  <div className={styles.label}>{t('log_details.user')}</div>
-                  <div>
-                    {data.payload.userId ? <UserName isLink userId={data.payload.userId} /> : '-'}
-                  </div>
-                </div>
+                {!isWebHookEvent && (
+                  <>
+                    <div className={styles.infoItem}>
+                      <div className={styles.label}>{t('log_details.application')}</div>
+                      <div>
+                        {data.payload.applicationId ? (
+                          <ApplicationName
+                            isLink={data.payload.applicationId !== demoAppApplicationId}
+                            applicationId={data.payload.applicationId}
+                          />
+                        ) : (
+                          '-'
+                        )}
+                      </div>
+                    </div>
+                    <div className={styles.infoItem}>
+                      <div className={styles.label}>{t('log_details.ip_address')}</div>
+                      <div>{data.payload.ip ?? '-'}</div>
+                    </div>
+                    <div className={styles.infoItem}>
+                      <div className={styles.label}>{t('log_details.user')}</div>
+                      <div>
+                        {data.payload.userId ? (
+                          <UserName isLink userId={data.payload.userId} />
+                        ) : (
+                          '-'
+                        )}
+                      </div>
+                    </div>
+                  </>
+                )}
                 <div className={styles.infoItem}>
                   <div className={styles.label}>{t('log_details.log_id')}</div>
                   <div>{data.id}</div>
@@ -111,12 +125,14 @@ function AuditLogDetails() {
                   <div>{new Date(data.createdAt).toLocaleString()}</div>
                 </div>
               </div>
-              <div>
-                <div className={styles.infoItem}>
-                  <div className={styles.label}>{t('log_details.user_agent')}</div>
-                  <div>{data.payload.userAgent}</div>
+              {!isWebHookEvent && (
+                <div>
+                  <div className={styles.infoItem}>
+                    <div className={styles.label}>{t('log_details.user_agent')}</div>
+                    <div>{data.payload.userAgent}</div>
+                  </div>
                 </div>
-              </div>
+              )}
             </div>
           </Card>
           <TabNav>
diff --git a/packages/schemas/src/types/log/hook.ts b/packages/schemas/src/types/log/hook.ts
index 92d328995..4a94a70fe 100644
--- a/packages/schemas/src/types/log/hook.ts
+++ b/packages/schemas/src/types/log/hook.ts
@@ -2,7 +2,7 @@ import type { HookEvent } from '../../foundations/index.js';
 
 /** The type of a hook event. */
 export enum Type {
-  ExchangeTokenBy = 'TriggerHook',
+  TriggerHook = 'TriggerHook',
 }
 
 export type LogKey = `${Type}.${HookEvent}`;