Merge pull request #1072 from logto-io/charles-log-2881-improve-table-error-display

refactor(console): table error display

packages/console/src/components/Table/TableEmpty.module.scss

@@ -1,8 +1,10 @@
 @use '@/scss/underscore' as _;
 
 .tableEmpty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   padding: _.unit(4) 0;
-  text-align: center;
 
   .title {
     font: var(--font-subhead-2);

packages/console/src/components/Table/TableError.module.scss

@@ -1,22 +1,21 @@
 @use '@/scss/underscore' as _;
 
 .tableError {
-  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 
-  .image {
-    text-align: center;
+  > *:not(:first-child) {
+    margin-top: _.unit(2);
   }
 
   .title {
     text-align: center;
     font: var(--font-subhead-2);
-    margin-bottom: _.unit(2);
   }
 
   .content {
-    text-align: center;
     font: var(--font-body-medium);
     color: var(--color-neutral-50);
-    margin-bottom: _.unit(2);
   }
 }

packages/console/src/components/Table/TableError.tsx

@@ -20,9 +20,7 @@ const TableError = ({ title, content, onRetry, columns }: Props) => {
     <tr>
       <td colSpan={columns}>
         <div className={styles.tableError}>
-          <div className={styles.image}>
-            <img src={ErrorImage} />
-          </div>
+          <img src={ErrorImage} />
           <div className={styles.title}>
             {title ?? t('admin_console.errors.something_went_wrong')}
           </div>

packages/console/src/pages/ApiResources/index.tsx

@@ -73,7 +73,7 @@ const ApiResources = () => {
         </Modal>
       </div>
       <div className={classNames(styles.table, tableStyles.scrollable)}>
-        <table>
+        <table className={classNames(!data && tableStyles.empty)}>
           <colgroup>
             <col className={styles.apiResourceName} />
             <col />

packages/console/src/pages/Applications/index.tsx

@@ -70,7 +70,7 @@ const Applications = () => {
         </Modal>
       </div>
       <div className={classNames(styles.table, tableStyles.scrollable)}>
-        <table>
+        <table className={classNames(!data && tableStyles.empty)}>
           <colgroup>
             <col className={styles.applicationName} />
             <col />

packages/console/src/pages/AuditLogs/index.tsx

@@ -64,7 +64,7 @@ const AuditLogs = () => {
         </div>
       </div>
       <div className={classNames(styles.table, tableStyles.scrollable)}>
-        <table>
+        <table className={classNames(!data && tableStyles.empty)}>
           <colgroup>
             <col className={styles.eventName} />
             <col />

packages/console/src/pages/Connectors/index.tsx

@@ -72,7 +72,7 @@ const Connectors = () => {
           <TabNavItem href="/connectors/social">{t('connectors.tab_social')}</TabNavItem>
         </TabNav>
         <div className={classNames(styles.table, tableStyles.scrollable)}>
-          <table>
+          <table className={classNames(!data && tableStyles.empty)}>
             <colgroup>
               <col className={styles.connectorName} />
               <col />

packages/console/src/pages/Users/index.tsx

@@ -81,7 +81,7 @@ const Users = () => {
         />
       </div>
       <div className={classNames(styles.table, tableStyles.scrollable)}>
-        <table>
+        <table className={classNames(!data && tableStyles.empty)}>
           <colgroup>
             <col className={styles.userName} />
             <col />

packages/console/src/scss/table.module.scss

@@ -31,3 +31,7 @@ tr.clickable {
     }
   }
 }
+
+.empty {
+  height: 100%;
+}