refactor(console): audit log table (#2485)

packages/console/src/components/AuditLogTable/index.module.scss

@@ -2,8 +2,12 @@
 
 .filter {
   display: flex;
-  justify-content: right;
+  justify-content: flex-end;
   align-items: center;
+  padding: _.unit(3);
+  border-bottom: 1px solid var(--color-divider);
+  background-color: var(--color-layer-1);
+  border-radius: 12px 12px 0 0;
 
   .title {
     color: var(--color-text-secondary);
@@ -21,6 +25,15 @@
   }
 }
 
+.tableLayout {
+  display: flex;
+  flex-direction: column;
+
+  .tableContainer {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+}
 
 .pagination {
   margin-top: _.unit(4);

packages/console/src/components/AuditLogTable/index.tsx

@@ -1,6 +1,6 @@
 import type { LogDto } from '@logto/schemas';
 import { LogResult } from '@logto/schemas';
-import { conditionalString } from '@silverhand/essentials';
+import { conditional, conditionalString } from '@silverhand/essentials';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
@@ -27,6 +27,8 @@ type Props = {
   userId?: string;
 };
 
+const defaultTableColumn = 4;
+
 const AuditLogTable = ({ userId }: Props) => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { pathname } = useLocation();
@@ -50,6 +52,7 @@ const AuditLogTable = ({ userId }: Props) => {
   const navigate = useNavigate();
   const [logs, totalCount] = data ?? [];
   const showUserColumn = !userId;
+  const tableColumnCount = showUserColumn ? defaultTableColumn : defaultTableColumn - 1;
 
   const updateQuery = (key: string, value: string) => {
     const queries: Record<string, string> = {};
@@ -67,28 +70,28 @@ const AuditLogTable = ({ userId }: Props) => {
 
   return (
     <>
-      <div className={styles.filter}>
-        <div className={styles.title}>{t('logs.filter_by')}</div>
-        <div className={styles.eventSelector}>
-          <EventSelector
-            value={event ?? undefined}
-            onChange={(value) => {
-              updateQuery('event', value ?? '');
-            }}
-          />
+      <div className={classNames(resourcesStyles.table, styles.tableLayout)}>
+        <div className={styles.filter}>
+          <div className={styles.title}>{t('logs.filter_by')}</div>
+          <div className={styles.eventSelector}>
+            <EventSelector
+              value={event ?? undefined}
+              onChange={(value) => {
+                updateQuery('event', value ?? '');
+              }}
+            />
+          </div>
+          <div className={styles.applicationSelector}>
+            <ApplicationSelector
+              value={applicationId ?? undefined}
+              onChange={(value) => {
+                updateQuery('applicationId', value ?? '');
+              }}
+            />
+          </div>
         </div>
-        <div className={styles.applicationSelector}>
-          <ApplicationSelector
-            value={applicationId ?? undefined}
-            onChange={(value) => {
-              updateQuery('applicationId', value ?? '');
-            }}
-          />
-        </div>
-      </div>
-      <div className={resourcesStyles.table}>
-        <div className={tableStyles.scrollable}>
-          <table className={classNames(logs?.length === 0 && tableStyles.empty)}>
+        <div className={classNames(tableStyles.scrollable, styles.tableContainer)}>
+          <table className={conditional(logs?.length === 0 && tableStyles.empty)}>
             <colgroup>
               <col className={styles.eventName} />
               {showUserColumn && <col />}
@@ -106,13 +109,13 @@ const AuditLogTable = ({ userId }: Props) => {
             <tbody>
               {!data && error && (
                 <TableError
-                  columns={4}
+                  columns={tableColumnCount}
                   content={error.body?.message ?? error.message}
                   onRetry={async () => mutate(undefined, true)}
                 />
               )}
-              {isLoading && <TableLoading columns={4} />}
-              {logs?.length === 0 && <TableEmpty columns={4} />}
+              {isLoading && <TableLoading columns={tableColumnCount} />}
+              {logs?.length === 0 && <TableEmpty columns={tableColumnCount} />}
               {logs?.map(({ type, payload, createdAt, id }) => (
                 <tr
                   key={id}