feat(console): add impersonation tag to audit log (#6267)

logto-io · Jul 19, 2024 · 477d8a7 · 477d8a7
1 parent 2101280
commit 477d8a7
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 1 deletion.
diff --git a/packages/console/src/components/AuditLogTable/components/EventName/index.module.scss b/packages/console/src/components/AuditLogTable/components/EventName/index.module.scss
@@ -4,6 +4,7 @@
   display: flex;
   align-items: center;
   white-space: nowrap;
+  gap: _.unit(2);
 
   .icon {
     flex-shrink: 0;

diff --git a/packages/console/src/components/AuditLogTable/components/EventName/index.tsx b/packages/console/src/components/AuditLogTable/components/EventName/index.tsx
@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import Failed from '@/assets/icons/failed.svg';
 import Success from '@/assets/icons/success.svg';
 import { logEventTitle } from '@/consts/logs';
+import Tag from '@/ds-components/Tag';
 import useTenantPathname from '@/hooks/use-tenant-pathname';
 
 import * as styles from './index.module.scss';
@@ -35,6 +36,7 @@ function EventName({ eventKey, isSuccess, to }: Props) {
         </Link>
       )}
       {!to && <div className={styles.title}>{title}</div>}
+      {eventKey === 'ExchangeTokenBy.TokenExchange' && <Tag status="alert">Impersonation</Tag>}
     </div>
   );
 }

diff --git a/packages/console/src/consts/logs.ts b/packages/console/src/consts/logs.ts
@@ -7,6 +7,7 @@ export const auditLogEventTitle: Record<string, Optional<string>> & {
   'ExchangeTokenBy.AuthorizationCode': 'Exchange token by Code',
   'ExchangeTokenBy.ClientCredentials': 'Exchange token by Client Credentials',
   'ExchangeTokenBy.RefreshToken': 'Exchange token by Refresh Token',
+  'ExchangeTokenBy.TokenExchange': 'Token exchange',
   'Interaction.Create': 'Interaction started',
   'Interaction.End': 'Interaction ended',
   'Interaction.ForgotPassword.Identifier.VerificationCode.Create':

diff --git a/packages/console/src/pages/AuditLogDetails/index.module.scss b/packages/console/src/pages/AuditLogDetails/index.module.scss
@@ -14,6 +14,9 @@
     .eventName {
       color: var(--color-text);
       font: var(--font-title-1);
+      display: flex;
+      align-items: center;
+      gap: _.unit(2);
     }
 
     .basicInfo {

diff --git a/packages/console/src/pages/AuditLogDetails/index.tsx b/packages/console/src/pages/AuditLogDetails/index.tsx
@@ -16,6 +16,7 @@ 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 Tag from '@/ds-components/Tag';
 import type { RequestError } from '@/hooks/use-api';
 import { isWebhookEventLogKey } from '@/pages/WebhookDetails/utils';
 import { getUserTitle } from '@/utils/user';
@@ -84,7 +85,12 @@ function AuditLogDetails() {
           <Card className={styles.header}>
             <EventIcon isSuccess={data.payload.result === 'Success'} />
             <div className={styles.content}>
-              <div className={styles.eventName}>{logEventTitle[data.key]}</div>
+              <div className={styles.eventName}>
+                {logEventTitle[data.key]}
+                {data.key === 'ExchangeTokenBy.TokenExchange' && (
+                  <Tag status="alert">Impersonation</Tag>
+                )}
+              </div>
               <div className={styles.basicInfo}>
                 <div className={styles.infoItem}>
                   <div className={styles.label}>{t('log_details.event_key')}</div>