From c5595ee7d32f1cd5785d5e4939621f9fdc8d2d63 Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Thu, 24 Nov 2022 13:38:04 +0800
Subject: [PATCH] refactor(console): user logs (#2512)

---
 .../src/components/AuditLogTable/index.module.scss       | 9 +++++++++
 packages/console/src/components/AuditLogTable/index.tsx  | 7 +++----
 packages/console/src/pages/AuditLogs/index.tsx           | 4 +++-
 .../pages/UserDetails/components/UserLogs.module.scss    | 6 ++----
 .../src/pages/UserDetails/components/UserLogs.tsx        | 5 ++---
 packages/console/src/pages/UserDetails/index.module.scss | 4 ++++
 packages/console/src/pages/UserDetails/index.tsx         | 3 ++-
 7 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/packages/console/src/components/AuditLogTable/index.module.scss b/packages/console/src/components/AuditLogTable/index.module.scss
index 27cfacd5d..b546281db 100644
--- a/packages/console/src/components/AuditLogTable/index.module.scss
+++ b/packages/console/src/components/AuditLogTable/index.module.scss
@@ -1,5 +1,11 @@
 @use '@/scss/underscore' as _;
 
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
 .filter {
   display: flex;
   justify-content: flex-end;
@@ -28,6 +34,9 @@
 .tableLayout {
   display: flex;
   flex-direction: column;
+  max-height: 100%;
+  overflow-y: auto;
+  flex: 1;
 
   .tableContainer {
     border-top-left-radius: 0;
diff --git a/packages/console/src/components/AuditLogTable/index.tsx b/packages/console/src/components/AuditLogTable/index.tsx
index 2c3857d74..a92ad4d49 100644
--- a/packages/console/src/components/AuditLogTable/index.tsx
+++ b/packages/console/src/components/AuditLogTable/index.tsx
@@ -13,7 +13,6 @@ import TableError from '@/components/Table/TableError';
 import TableLoading from '@/components/Table/TableLoading';
 import UserName from '@/components/UserName';
 import type { RequestError } from '@/hooks/use-api';
-import * as resourcesStyles from '@/scss/resources.module.scss';
 import * as tableStyles from '@/scss/table.module.scss';
 
 import ApplicationSelector from './components/ApplicationSelector';
@@ -69,8 +68,8 @@ const AuditLogTable = ({ userId }: Props) => {
   };
 
   return (
-    <>
-      <div className={classNames(resourcesStyles.table, styles.tableLayout)}>
+    <div className={styles.container}>
+      <div className={styles.tableLayout}>
         <div className={styles.filter}>
           <div className={styles.title}>{t('logs.filter_by')}</div>
           <div className={styles.eventSelector}>
@@ -153,7 +152,7 @@ const AuditLogTable = ({ userId }: Props) => {
           updateQuery('page', String(page));
         }}
       />
-    </>
+    </div>
   );
 };
 
diff --git a/packages/console/src/pages/AuditLogs/index.tsx b/packages/console/src/pages/AuditLogs/index.tsx
index 4a2d63e9e..d5bdc11bf 100644
--- a/packages/console/src/pages/AuditLogs/index.tsx
+++ b/packages/console/src/pages/AuditLogs/index.tsx
@@ -8,7 +8,9 @@ const AuditLogs = () => {
       <div className={resourcesStyles.headline}>
         <CardTitle title="logs.title" subtitle="logs.subtitle" />
       </div>
-      <AuditLogTable />
+      <div className={resourcesStyles.table}>
+        <AuditLogTable />
+      </div>
     </div>
   );
 };
diff --git a/packages/console/src/pages/UserDetails/components/UserLogs.module.scss b/packages/console/src/pages/UserDetails/components/UserLogs.module.scss
index 90a7cf852..8994f64b6 100644
--- a/packages/console/src/pages/UserDetails/components/UserLogs.module.scss
+++ b/packages/console/src/pages/UserDetails/components/UserLogs.module.scss
@@ -1,9 +1,7 @@
 @use '@/scss/underscore' as _;
 
 .logs {
+  flex: 1;
   margin-bottom: _.unit(6);
-
-  >:not(:first-child) {
-    margin-top: _.unit(3);
-  }
+  overflow-y: auto;
 }
diff --git a/packages/console/src/pages/UserDetails/components/UserLogs.tsx b/packages/console/src/pages/UserDetails/components/UserLogs.tsx
index cea9f2001..f0a233300 100644
--- a/packages/console/src/pages/UserDetails/components/UserLogs.tsx
+++ b/packages/console/src/pages/UserDetails/components/UserLogs.tsx
@@ -1,5 +1,4 @@
 import AuditLogTable from '@/components/AuditLogTable';
-import Card from '@/components/Card';
 
 import * as styles from './UserLogs.module.scss';
 
@@ -9,9 +8,9 @@ type Props = {
 
 const UserLogs = ({ userId }: Props) => {
   return (
-    <Card className={styles.logs}>
+    <div className={styles.logs}>
       <AuditLogTable userId={userId} />
-    </Card>
+    </div>
   );
 };
 
diff --git a/packages/console/src/pages/UserDetails/index.module.scss b/packages/console/src/pages/UserDetails/index.module.scss
index d0331f00a..90984203a 100644
--- a/packages/console/src/pages/UserDetails/index.module.scss
+++ b/packages/console/src/pages/UserDetails/index.module.scss
@@ -4,6 +4,10 @@
   margin: _.unit(1) 0 0 _.unit(1);
 }
 
+.resourceLayout {
+  height: 100%;
+}
+
 .header {
   padding: _.unit(6);
   display: flex;
diff --git a/packages/console/src/pages/UserDetails/index.tsx b/packages/console/src/pages/UserDetails/index.tsx
index c567edc9f..f0a5cce3d 100644
--- a/packages/console/src/pages/UserDetails/index.tsx
+++ b/packages/console/src/pages/UserDetails/index.tsx
@@ -1,4 +1,5 @@
 import type { User } from '@logto/schemas';
+import classNames from 'classnames';
 import { useMemo, useState } from 'react';
 import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
@@ -78,7 +79,7 @@ const UserDetails = () => {
   };
 
   return (
-    <div className={detailsStyles.container}>
+    <div className={classNames(detailsStyles.container, isLogs && styles.resourceLayout)}>
       <LinkButton
         to="/users"
         icon={<Back />}