refactor(console): align empty image to vertical center (#2980)

packages/console/src/components/RoleScopesTransfer/components/SourceScopesBox/index.tsx

@@ -1,6 +1,7 @@
 import type { ResourceResponse, Scope, ScopeResponse } from '@logto/schemas';
 import { managementResourceScopeId } from '@logto/schemas';
 import { conditional } from '@silverhand/essentials';
+import classNames from 'classnames';
 import type { ChangeEvent } from 'react';
 import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -119,6 +120,8 @@ const SourceScopesBox = ({ roleId, selectedScopes, onChange }: Props) => {
     );
   }, [keyword, resources]);
 
+  const isEmpty = !isLoading && !hasError && dataSource.length === 0;
+
   return (
     <div className={transferLayout.box}>
       <div className={transferLayout.boxTopBar}>
@@ -129,14 +132,15 @@ const SourceScopesBox = ({ roleId, selectedScopes, onChange }: Props) => {
           onChange={handleSearchInput}
         />
       </div>
-      <div className={transferLayout.boxContent}>
-        {!isLoading && !hasError && dataSource.length === 0 && (
+      <div
+        className={classNames(transferLayout.boxContent, isEmpty && transferLayout.emptyBoxContent)}
+      >
+        {isEmpty ? (
           <DataEmpty
             imageClassName={styles.emptyImage}
             title={t('role_details.permission.empty')}
           />
-        )}
-        {dataSource.length > 0 &&
+        ) : (
           dataSource.map((resource) => (
             <ResourceItem
               key={resource.id}
@@ -145,7 +149,8 @@ const SourceScopesBox = ({ roleId, selectedScopes, onChange }: Props) => {
               onSelectResource={onSelectResource}
               onSelectScope={onSelectScope}
             />
-          ))}
+          ))
+        )}
       </div>
     </div>
   );

packages/console/src/components/RoleUsersTransfer/components/SourceUsersBox/index.tsx

@@ -1,5 +1,6 @@
 import type { User } from '@logto/schemas';
 import { conditional } from '@silverhand/essentials';
+import classNames from 'classnames';
 import type { ChangeEvent } from 'react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -56,6 +57,8 @@ const SourceUsersBox = ({ roleId, selectedUsers, onChange }: Props) => {
 
   const isUserAdded = (user: User) => selectedUsers.findIndex(({ id }) => id === user.id) >= 0;
 
+  const isEmpty = !isLoading && !error && dataSource.length === 0;
+
   return (
     <div className={transferLayout.box}>
       <div className={transferLayout.boxTopBar}>
@@ -66,11 +69,12 @@ const SourceUsersBox = ({ roleId, selectedUsers, onChange }: Props) => {
           onChange={handleSearchInput}
         />
       </div>
-      <div className={transferLayout.boxContent}>
-        {!isLoading && !error && dataSource.length === 0 && (
+      <div
+        className={classNames(transferLayout.boxContent, isEmpty && transferLayout.emptyBoxContent)}
+      >
+        {isEmpty ? (
           <DataEmpty imageClassName={styles.emptyImage} title={t('role_details.users.empty')} />
-        )}
-        {dataSource.length > 0 &&
+        ) : (
           dataSource.map((user) => {
             const isSelected = isUserAdded(user);
 
@@ -88,7 +92,8 @@ const SourceUsersBox = ({ roleId, selectedUsers, onChange }: Props) => {
                 }}
               />
             );
-          })}
+          })
+        )}
       </div>
       <Pagination
         mode="pico"

packages/console/src/components/UserRolesTransfer/components/SourceRolesBox/index.tsx

@@ -1,5 +1,6 @@
 import type { RoleResponse } from '@logto/schemas';
 import { conditional } from '@silverhand/essentials';
+import classNames from 'classnames';
 import type { ChangeEvent } from 'react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -57,6 +58,8 @@ const SourceRolesBox = ({ userId, selectedRoles, onChange }: Props) => {
     }, searchDelay);
   };
 
+  const isEmpty = !isLoading && !error && dataSource.length === 0;
+
   return (
     <div className={transferLayout.box}>
       <div className={transferLayout.boxTopBar}>
@@ -67,11 +70,12 @@ const SourceRolesBox = ({ userId, selectedRoles, onChange }: Props) => {
           onChange={handleSearchInput}
         />
       </div>
-      <div className={transferLayout.boxContent}>
-        {!isLoading && !error && dataSource.length === 0 && (
+      <div
+        className={classNames(transferLayout.boxContent, isEmpty && transferLayout.emptyBoxContent)}
+      >
+        {isEmpty ? (
           <DataEmpty imageClassName={styles.emptyImage} title={t('user_details.roles.empty')} />
-        )}
-        {dataSource.length > 0 &&
+        ) : (
           dataSource.map((role) => {
             const isSelected = isRoleSelected(role);
 
@@ -89,7 +93,8 @@ const SourceRolesBox = ({ userId, selectedRoles, onChange }: Props) => {
                 }}
               />
             );
-          })}
+          })
+        )}
       </div>
       <Pagination
         mode="pico"

packages/console/src/scss/transfer.module.scss

@@ -28,6 +28,12 @@
   overflow-y: auto;
 }
 
+.emptyBoxContent {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
 .boxPagination {
   height: 40px;
   padding-right: _.unit(4);