From 5f2140eb0fff9ba5af39eb6c683d339946072d06 Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Tue, 17 Jan 2023 12:30:25 +0800
Subject: [PATCH] refactor(console): add empty state to transfers (#2956)

---
 .../components/DataEmpty/index.module.scss    | 19 +++++++
 .../src/components/DataEmpty/index.tsx        | 39 +++++++++++++++
 .../SourceScopesBox/index.module.scss         |  5 ++
 .../components/SourceScopesBox/index.tsx      | 49 ++++++++++++++-----
 .../SourceUsersBox/index.module.scss          |  5 ++
 .../components/SourceUsersBox/index.tsx       | 43 +++++++++-------
 .../components/Table/TableEmpty.module.scss   | 20 --------
 .../src/components/Table/TableEmpty.tsx       | 39 ++++-----------
 .../SourceRolesBox/index.module.scss          |  5 ++
 .../components/SourceRolesBox/index.tsx       | 44 ++++++++++-------
 .../translation/admin-console/role-details.ts |  2 +
 .../translation/admin-console/user-details.ts |  1 +
 .../translation/admin-console/role-details.ts |  2 +
 .../translation/admin-console/user-details.ts |  1 +
 .../translation/admin-console/role-details.ts |  2 +
 .../translation/admin-console/user-details.ts |  1 +
 .../translation/admin-console/role-details.ts |  2 +
 .../translation/admin-console/user-details.ts |  1 +
 .../translation/admin-console/role-details.ts |  2 +
 .../translation/admin-console/user-details.ts |  1 +
 .../translation/admin-console/role-details.ts |  2 +
 .../translation/admin-console/user-details.ts |  1 +
 .../translation/admin-console/role-details.ts |  2 +
 .../translation/admin-console/user-details.ts |  1 +
 .../translation/admin-console/role-details.ts |  2 +
 .../translation/admin-console/user-details.ts |  1 +
 26 files changed, 195 insertions(+), 97 deletions(-)
 create mode 100644 packages/console/src/components/DataEmpty/index.module.scss
 create mode 100644 packages/console/src/components/DataEmpty/index.tsx

diff --git a/packages/console/src/components/DataEmpty/index.module.scss b/packages/console/src/components/DataEmpty/index.module.scss
new file mode 100644
index 000000000..534df66cc
--- /dev/null
+++ b/packages/console/src/components/DataEmpty/index.module.scss
@@ -0,0 +1,19 @@
+@use '@/scss/underscore' as _;
+
+.empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: _.unit(4) 0;
+
+  .title {
+    font: var(--font-subhead-2);
+    margin-bottom: _.unit(2);
+  }
+
+  .description {
+    font: var(--font-body-medium);
+    color: var(--color-neutral-50);
+    margin-bottom: _.unit(2);
+  }
+}
diff --git a/packages/console/src/components/DataEmpty/index.tsx b/packages/console/src/components/DataEmpty/index.tsx
new file mode 100644
index 000000000..949cbf84e
--- /dev/null
+++ b/packages/console/src/components/DataEmpty/index.tsx
@@ -0,0 +1,39 @@
+import { AppearanceMode } from '@logto/schemas';
+import type { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import EmptyDark from '@/assets/images/table-empty-dark.svg';
+import Empty from '@/assets/images/table-empty.svg';
+import { useTheme } from '@/hooks/use-theme';
+
+import * as styles from './index.module.scss';
+
+export type Props = {
+  title?: string;
+  description?: string;
+  image?: ReactNode;
+  children?: ReactNode;
+  imageClassName?: string;
+};
+
+const DataEmpty = ({ title, description, image, imageClassName, children }: Props) => {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
+  const theme = useTheme();
+
+  return (
+    <div className={styles.empty}>
+      {image ??
+        (theme === AppearanceMode.LightMode ? (
+          <Empty className={imageClassName} />
+        ) : (
+          <EmptyDark className={imageClassName} />
+        ))}
+      <div className={styles.title}>{title ?? t('errors.empty')}</div>
+      {description && <div className={styles.description}>{description}</div>}
+      {children}
+    </div>
+  );
+};
+
+export default DataEmpty;
diff --git a/packages/console/src/components/RoleScopesTransfer/components/SourceScopesBox/index.module.scss b/packages/console/src/components/RoleScopesTransfer/components/SourceScopesBox/index.module.scss
index b6084458b..622fdba2e 100644
--- a/packages/console/src/components/RoleScopesTransfer/components/SourceScopesBox/index.module.scss
+++ b/packages/console/src/components/RoleScopesTransfer/components/SourceScopesBox/index.module.scss
@@ -5,3 +5,8 @@
 .icon {
   color: var(--color-text-secondary);
 }
+
+.emptyImage {
+  width: 128px;
+  height: 128px;
+}
diff --git a/packages/console/src/components/RoleScopesTransfer/components/SourceScopesBox/index.tsx b/packages/console/src/components/RoleScopesTransfer/components/SourceScopesBox/index.tsx
index d706cb477..16fe9d8e4 100644
--- a/packages/console/src/components/RoleScopesTransfer/components/SourceScopesBox/index.tsx
+++ b/packages/console/src/components/RoleScopesTransfer/components/SourceScopesBox/index.tsx
@@ -6,8 +6,10 @@ import { useTranslation } from 'react-i18next';
 import useSWR from 'swr';
 
 import Search from '@/assets/images/search.svg';
+import DataEmpty from '@/components/DataEmpty';
 import type { DetailedResourceResponse } from '@/components/RoleScopesTransfer/types';
 import TextInput from '@/components/TextInput';
+import type { RequestError } from '@/hooks/use-api';
 import * as transferLayout from '@/scss/transfer.module.scss';
 
 import ResourceItem from '../ResourceItem';
@@ -21,8 +23,20 @@ type Props = {
 
 const SourceScopesBox = ({ roleId, selectedScopes, onChange }: Props) => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-  const { data = [] } = useSWR<ResourceResponse[]>('/api/resources?includeScopes=true');
-  const { data: roleScopes = [] } = useSWR<Scope[]>(roleId && `/api/roles/${roleId}/scopes`);
+
+  const { data: allResources, error: fetchAllResourcesError } = useSWR<
+    ResourceResponse[],
+    RequestError
+  >('/api/resources?includeScopes=true');
+
+  const { data: roleScopes, error: fetchRoleScopesError } = useSWR<Scope[], RequestError>(
+    roleId && `/api/roles/${roleId}/scopes`
+  );
+
+  const isLoading =
+    (!allResources && !fetchAllResourcesError) || (!roleScopes && !fetchRoleScopesError);
+
+  const hasError = Boolean(fetchAllResourcesError) || Boolean(fetchRoleScopesError);
 
   const [keyword, setKeyword] = useState('');
 
@@ -58,9 +72,13 @@ const SourceScopesBox = ({ roleId, selectedScopes, onChange }: Props) => {
     scopes.filter((scope) => selectedScopes.findIndex(({ id }) => id === scope.id) >= 0);
 
   const resources: DetailedResourceResponse[] = useMemo(() => {
+    if (!allResources || !roleScopes) {
+      return [];
+    }
+
     const excludeScopeIds = new Set(roleScopes.map(({ id }) => id));
 
-    return data
+    return allResources
       .filter(({ scopes }) => scopes.some(({ id }) => !excludeScopeIds.has(id)))
       .map(({ scopes, ...resource }) => ({
         ...resource,
@@ -71,7 +89,7 @@ const SourceScopesBox = ({ roleId, selectedScopes, onChange }: Props) => {
             resource,
           })),
       }));
-  }, [data, roleScopes]);
+  }, [allResources, roleScopes]);
 
   const dataSource = useMemo(() => {
     const lowerCasedKeyword = keyword.toLowerCase();
@@ -110,15 +128,22 @@ const SourceScopesBox = ({ roleId, selectedScopes, onChange }: Props) => {
         />
       </div>
       <div className={transferLayout.boxContent}>
-        {dataSource.map((resource) => (
-          <ResourceItem
-            key={resource.id}
-            resource={resource}
-            selectedScopes={getResourceSelectedScopes(resource)}
-            onSelectResource={onSelectResource}
-            onSelectScope={onSelectScope}
+        {!isLoading && !hasError && dataSource.length === 0 && (
+          <DataEmpty
+            imageClassName={styles.emptyImage}
+            title={t('role_details.permission.empty')}
           />
-        ))}
+        )}
+        {dataSource.length > 0 &&
+          dataSource.map((resource) => (
+            <ResourceItem
+              key={resource.id}
+              resource={resource}
+              selectedScopes={getResourceSelectedScopes(resource)}
+              onSelectResource={onSelectResource}
+              onSelectScope={onSelectScope}
+            />
+          ))}
       </div>
     </div>
   );
diff --git a/packages/console/src/components/RoleUsersTransfer/components/SourceUsersBox/index.module.scss b/packages/console/src/components/RoleUsersTransfer/components/SourceUsersBox/index.module.scss
index b6084458b..622fdba2e 100644
--- a/packages/console/src/components/RoleUsersTransfer/components/SourceUsersBox/index.module.scss
+++ b/packages/console/src/components/RoleUsersTransfer/components/SourceUsersBox/index.module.scss
@@ -5,3 +5,8 @@
 .icon {
   color: var(--color-text-secondary);
 }
+
+.emptyImage {
+  width: 128px;
+  height: 128px;
+}
diff --git a/packages/console/src/components/RoleUsersTransfer/components/SourceUsersBox/index.tsx b/packages/console/src/components/RoleUsersTransfer/components/SourceUsersBox/index.tsx
index 2d446e4ea..a26fd2132 100644
--- a/packages/console/src/components/RoleUsersTransfer/components/SourceUsersBox/index.tsx
+++ b/packages/console/src/components/RoleUsersTransfer/components/SourceUsersBox/index.tsx
@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 import useSWR from 'swr';
 
 import Search from '@/assets/images/search.svg';
+import DataEmpty from '@/components/DataEmpty';
 import Pagination from '@/components/Pagination';
 import TextInput from '@/components/TextInput';
 import { defaultPageSize } from '@/consts';
@@ -40,7 +41,9 @@ const SourceUsersBox = ({ roleId, selectedUsers, onChange }: Props) => {
     ...conditional(keyword && { search: formatKeyword(keyword) }),
   });
 
-  const { data } = useSWR<[User[], number], RequestError>(url);
+  const { data, error } = useSWR<[User[], number], RequestError>(url);
+
+  const isLoading = !data && !error;
 
   const [dataSource = [], totalCount] = data ?? [];
 
@@ -64,24 +67,28 @@ const SourceUsersBox = ({ roleId, selectedUsers, onChange }: Props) => {
         />
       </div>
       <div className={transferLayout.boxContent}>
-        {dataSource.map((user) => {
-          const isSelected = isUserAdded(user);
+        {!isLoading && !error && dataSource.length === 0 && (
+          <DataEmpty imageClassName={styles.emptyImage} title={t('role_details.users.empty')} />
+        )}
+        {dataSource.length > 0 &&
+          dataSource.map((user) => {
+            const isSelected = isUserAdded(user);
 
-          return (
-            <SourceUserItem
-              key={user.id}
-              user={user}
-              isSelected={isSelected}
-              onSelect={() => {
-                onChange(
-                  isSelected
-                    ? selectedUsers.filter(({ id }) => user.id !== id)
-                    : [user, ...selectedUsers]
-                );
-              }}
-            />
-          );
-        })}
+            return (
+              <SourceUserItem
+                key={user.id}
+                user={user}
+                isSelected={isSelected}
+                onSelect={() => {
+                  onChange(
+                    isSelected
+                      ? selectedUsers.filter(({ id }) => user.id !== id)
+                      : [user, ...selectedUsers]
+                  );
+                }}
+              />
+            );
+          })}
       </div>
       <Pagination
         mode="pico"
diff --git a/packages/console/src/components/Table/TableEmpty.module.scss b/packages/console/src/components/Table/TableEmpty.module.scss
index e7a625d84..80891953f 100644
--- a/packages/console/src/components/Table/TableEmpty.module.scss
+++ b/packages/console/src/components/Table/TableEmpty.module.scss
@@ -1,23 +1,3 @@
-@use '@/scss/underscore' as _;
-
 .tableEmptyTableData {
   border-bottom: unset;
 }
-
-.tableEmpty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: _.unit(4) 0;
-
-  .title {
-    font: var(--font-subhead-2);
-    margin-bottom: _.unit(2);
-  }
-
-  .description {
-    font: var(--font-body-medium);
-    color: var(--color-neutral-50);
-    margin-bottom: _.unit(2);
-  }
-}
diff --git a/packages/console/src/components/Table/TableEmpty.tsx b/packages/console/src/components/Table/TableEmpty.tsx
index c4d4897b4..9eff32ec5 100644
--- a/packages/console/src/components/Table/TableEmpty.tsx
+++ b/packages/console/src/components/Table/TableEmpty.tsx
@@ -1,37 +1,18 @@
-import { AppearanceMode } from '@logto/schemas';
-import type { ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import EmptyDark from '@/assets/images/table-empty-dark.svg';
-import Empty from '@/assets/images/table-empty.svg';
-import { useTheme } from '@/hooks/use-theme';
+import DataEmpty from '@/components/DataEmpty';
+import type { Props as DataEmptyProps } from '@/components/DataEmpty';
 
 import * as styles from './TableEmpty.module.scss';
 
-type Props = {
-  title?: string;
-  description?: string;
-  image?: ReactNode;
-  children?: ReactNode;
+type Props = DataEmptyProps & {
   columns: number;
 };
 
-const TableEmpty = ({ title, description, image, children, columns }: Props) => {
-  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-  const theme = useTheme();
-
-  return (
-    <tr>
-      <td colSpan={columns} className={styles.tableEmptyTableData}>
-        <div className={styles.tableEmpty}>
-          {image ?? (theme === AppearanceMode.LightMode ? <Empty /> : <EmptyDark />)}
-          <div className={styles.title}>{title ?? t('errors.empty')}</div>
-          {description && <div className={styles.description}>{description}</div>}
-          {children}
-        </div>
-      </td>
-    </tr>
-  );
-};
+const TableEmpty = ({ columns, ...emptyProps }: Props) => (
+  <tr>
+    <td colSpan={columns} className={styles.tableEmptyTableData}>
+      <DataEmpty {...emptyProps} />
+    </td>
+  </tr>
+);
 
 export default TableEmpty;
diff --git a/packages/console/src/components/UserRolesTransfer/components/SourceRolesBox/index.module.scss b/packages/console/src/components/UserRolesTransfer/components/SourceRolesBox/index.module.scss
index b6084458b..622fdba2e 100644
--- a/packages/console/src/components/UserRolesTransfer/components/SourceRolesBox/index.module.scss
+++ b/packages/console/src/components/UserRolesTransfer/components/SourceRolesBox/index.module.scss
@@ -5,3 +5,8 @@
 .icon {
   color: var(--color-text-secondary);
 }
+
+.emptyImage {
+  width: 128px;
+  height: 128px;
+}
diff --git a/packages/console/src/components/UserRolesTransfer/components/SourceRolesBox/index.tsx b/packages/console/src/components/UserRolesTransfer/components/SourceRolesBox/index.tsx
index 49ff2e904..a1fc72e47 100644
--- a/packages/console/src/components/UserRolesTransfer/components/SourceRolesBox/index.tsx
+++ b/packages/console/src/components/UserRolesTransfer/components/SourceRolesBox/index.tsx
@@ -6,8 +6,10 @@ import { useTranslation } from 'react-i18next';
 import useSWR from 'swr';
 
 import Search from '@/assets/images/search.svg';
+import DataEmpty from '@/components/DataEmpty';
 import Pagination from '@/components/Pagination';
 import TextInput from '@/components/TextInput';
+import type { RequestError } from '@/hooks/use-api';
 import useDebounce from '@/hooks/use-debounce';
 import * as transferLayout from '@/scss/transfer.module.scss';
 import { buildUrl } from '@/utilities/url';
@@ -39,7 +41,9 @@ const SourceRolesBox = ({ userId, selectedRoles, onChange }: Props) => {
     ...conditional(keyword && { search: `%${keyword}%` }),
   });
 
-  const { data } = useSWR<[RoleResponse[], number]>(url);
+  const { data, error } = useSWR<[RoleResponse[], number], RequestError>(url);
+
+  const isLoading = !data && !error;
 
   const [dataSource = [], totalCount] = data ?? [];
 
@@ -64,24 +68,28 @@ const SourceRolesBox = ({ userId, selectedRoles, onChange }: Props) => {
         />
       </div>
       <div className={transferLayout.boxContent}>
-        {dataSource.map((role) => {
-          const isSelected = isRoleSelected(role);
+        {!isLoading && !error && dataSource.length === 0 && (
+          <DataEmpty imageClassName={styles.emptyImage} title={t('user_details.roles.empty')} />
+        )}
+        {dataSource.length > 0 &&
+          dataSource.map((role) => {
+            const isSelected = isRoleSelected(role);
 
-          return (
-            <SourceRoleItem
-              key={role.id}
-              role={role}
-              isSelected={isSelected}
-              onSelect={() => {
-                onChange(
-                  isSelected
-                    ? selectedRoles.filter(({ id }) => id !== role.id)
-                    : [role, ...selectedRoles]
-                );
-              }}
-            />
-          );
-        })}
+            return (
+              <SourceRoleItem
+                key={role.id}
+                role={role}
+                isSelected={isSelected}
+                onSelect={() => {
+                  onChange(
+                    isSelected
+                      ? selectedRoles.filter(({ id }) => id !== role.id)
+                      : [role, ...selectedRoles]
+                  );
+                }}
+              />
+            );
+          })}
       </div>
       <Pagination
         mode="pico"
diff --git a/packages/phrases/src/locales/de/translation/admin-console/role-details.ts b/packages/phrases/src/locales/de/translation/admin-console/role-details.ts
index 1094d440d..2617137ea 100644
--- a/packages/phrases/src/locales/de/translation/admin-console/role-details.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/role-details.ts
@@ -25,6 +25,7 @@ const role_details = {
     deletion_description:
       'If this permission is deleted, the affected user with this role will lose the access granted by this permission.', // UNTRANSLATED
     permission_deleted: 'The permission "{{name}}" was successfully removed from this role!', // UNTRANSLATED
+    empty: 'No permission available', // UNTRANSLATED
   },
   users: {
     assign_button: 'Assign Users', // UNTRANSLATED
@@ -40,6 +41,7 @@ const role_details = {
     assign_users_field: 'Assign users', // UNTRANSLATED
     confirm_assign: 'Assign users', // UNTRANSLATED
     users_assigned: 'The selected users were successfully assigned to this role!', // UNTRANSLATED
+    empty: 'No user available', // UNTRANSLATED
   },
 };
 
diff --git a/packages/phrases/src/locales/de/translation/admin-console/user-details.ts b/packages/phrases/src/locales/de/translation/admin-console/user-details.ts
index 568fed9c5..ade3dc924 100644
--- a/packages/phrases/src/locales/de/translation/admin-console/user-details.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/user-details.ts
@@ -58,6 +58,7 @@ const user_details = {
     confirm_assign: 'Assign roles', // UNTRANSLATED
     role_assigned: 'Successfully assigned role(s)', // UNTRANSLATED
     search: 'Search by role name, description or ID', // UNTRANSLATED
+    empty: 'No role available', // UNTRANSLATED
   },
 };
 
diff --git a/packages/phrases/src/locales/en/translation/admin-console/role-details.ts b/packages/phrases/src/locales/en/translation/admin-console/role-details.ts
index 0015ac0e3..599f22d1b 100644
--- a/packages/phrases/src/locales/en/translation/admin-console/role-details.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/role-details.ts
@@ -25,6 +25,7 @@ const role_details = {
     deletion_description:
       'If this permission is deleted, the affected user with this role will lose the access granted by this permission.',
     permission_deleted: 'The permission "{{name}}" was successfully removed from this role!',
+    empty: 'No permission available',
   },
   users: {
     assign_button: 'Assign Users',
@@ -40,6 +41,7 @@ const role_details = {
     assign_users_field: 'Assign users',
     confirm_assign: 'Assign users',
     users_assigned: 'The selected users were successfully assigned to this role!',
+    empty: 'No user available',
   },
 };
 
diff --git a/packages/phrases/src/locales/en/translation/admin-console/user-details.ts b/packages/phrases/src/locales/en/translation/admin-console/user-details.ts
index 55b54091e..62ae8220f 100644
--- a/packages/phrases/src/locales/en/translation/admin-console/user-details.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/user-details.ts
@@ -56,6 +56,7 @@ const user_details = {
     confirm_assign: 'Assign roles',
     role_assigned: 'Successfully assigned role(s)',
     search: 'Search by role name, description or ID',
+    empty: 'No role available',
   },
 };
 
diff --git a/packages/phrases/src/locales/fr/translation/admin-console/role-details.ts b/packages/phrases/src/locales/fr/translation/admin-console/role-details.ts
index 1094d440d..2617137ea 100644
--- a/packages/phrases/src/locales/fr/translation/admin-console/role-details.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/role-details.ts
@@ -25,6 +25,7 @@ const role_details = {
     deletion_description:
       'If this permission is deleted, the affected user with this role will lose the access granted by this permission.', // UNTRANSLATED
     permission_deleted: 'The permission "{{name}}" was successfully removed from this role!', // UNTRANSLATED
+    empty: 'No permission available', // UNTRANSLATED
   },
   users: {
     assign_button: 'Assign Users', // UNTRANSLATED
@@ -40,6 +41,7 @@ const role_details = {
     assign_users_field: 'Assign users', // UNTRANSLATED
     confirm_assign: 'Assign users', // UNTRANSLATED
     users_assigned: 'The selected users were successfully assigned to this role!', // UNTRANSLATED
+    empty: 'No user available', // UNTRANSLATED
   },
 };
 
diff --git a/packages/phrases/src/locales/fr/translation/admin-console/user-details.ts b/packages/phrases/src/locales/fr/translation/admin-console/user-details.ts
index 6836e25bb..d0f4d2cdc 100644
--- a/packages/phrases/src/locales/fr/translation/admin-console/user-details.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/user-details.ts
@@ -58,6 +58,7 @@ const user_details = {
     confirm_assign: 'Assign roles', // UNTRANSLATED
     role_assigned: 'Successfully assigned role(s)', // UNTRANSLATED
     search: 'Search by role name, description or ID', // UNTRANSLATED
+    empty: 'No role available', // UNTRANSLATED
   },
 };
 
diff --git a/packages/phrases/src/locales/ko/translation/admin-console/role-details.ts b/packages/phrases/src/locales/ko/translation/admin-console/role-details.ts
index 1094d440d..2617137ea 100644
--- a/packages/phrases/src/locales/ko/translation/admin-console/role-details.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/role-details.ts
@@ -25,6 +25,7 @@ const role_details = {
     deletion_description:
       'If this permission is deleted, the affected user with this role will lose the access granted by this permission.', // UNTRANSLATED
     permission_deleted: 'The permission "{{name}}" was successfully removed from this role!', // UNTRANSLATED
+    empty: 'No permission available', // UNTRANSLATED
   },
   users: {
     assign_button: 'Assign Users', // UNTRANSLATED
@@ -40,6 +41,7 @@ const role_details = {
     assign_users_field: 'Assign users', // UNTRANSLATED
     confirm_assign: 'Assign users', // UNTRANSLATED
     users_assigned: 'The selected users were successfully assigned to this role!', // UNTRANSLATED
+    empty: 'No user available', // UNTRANSLATED
   },
 };
 
diff --git a/packages/phrases/src/locales/ko/translation/admin-console/user-details.ts b/packages/phrases/src/locales/ko/translation/admin-console/user-details.ts
index ea36786e1..a91bbb990 100644
--- a/packages/phrases/src/locales/ko/translation/admin-console/user-details.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/user-details.ts
@@ -55,6 +55,7 @@ const user_details = {
     confirm_assign: 'Assign roles', // UNTRANSLATED
     role_assigned: 'Successfully assigned role(s)', // UNTRANSLATED
     search: 'Search by role name, description or ID', // UNTRANSLATED
+    empty: 'No role available', // UNTRANSLATED
   },
 };
 
diff --git a/packages/phrases/src/locales/pt-br/translation/admin-console/role-details.ts b/packages/phrases/src/locales/pt-br/translation/admin-console/role-details.ts
index 1094d440d..2617137ea 100644
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/role-details.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/role-details.ts
@@ -25,6 +25,7 @@ const role_details = {
     deletion_description:
       'If this permission is deleted, the affected user with this role will lose the access granted by this permission.', // UNTRANSLATED
     permission_deleted: 'The permission "{{name}}" was successfully removed from this role!', // UNTRANSLATED
+    empty: 'No permission available', // UNTRANSLATED
   },
   users: {
     assign_button: 'Assign Users', // UNTRANSLATED
@@ -40,6 +41,7 @@ const role_details = {
     assign_users_field: 'Assign users', // UNTRANSLATED
     confirm_assign: 'Assign users', // UNTRANSLATED
     users_assigned: 'The selected users were successfully assigned to this role!', // UNTRANSLATED
+    empty: 'No user available', // UNTRANSLATED
   },
 };
 
diff --git a/packages/phrases/src/locales/pt-br/translation/admin-console/user-details.ts b/packages/phrases/src/locales/pt-br/translation/admin-console/user-details.ts
index 7421037af..6c0890929 100644
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/user-details.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/user-details.ts
@@ -56,6 +56,7 @@ const user_details = {
     confirm_assign: 'Assign roles', // UNTRANSLATED
     role_assigned: 'Successfully assigned role(s)', // UNTRANSLATED
     search: 'Search by role name, description or ID', // UNTRANSLATED
+    empty: 'No role available', // UNTRANSLATED
   },
 };
 
diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/role-details.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/role-details.ts
index 1094d440d..2617137ea 100644
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/role-details.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/role-details.ts
@@ -25,6 +25,7 @@ const role_details = {
     deletion_description:
       'If this permission is deleted, the affected user with this role will lose the access granted by this permission.', // UNTRANSLATED
     permission_deleted: 'The permission "{{name}}" was successfully removed from this role!', // UNTRANSLATED
+    empty: 'No permission available', // UNTRANSLATED
   },
   users: {
     assign_button: 'Assign Users', // UNTRANSLATED
@@ -40,6 +41,7 @@ const role_details = {
     assign_users_field: 'Assign users', // UNTRANSLATED
     confirm_assign: 'Assign users', // UNTRANSLATED
     users_assigned: 'The selected users were successfully assigned to this role!', // UNTRANSLATED
+    empty: 'No user available', // UNTRANSLATED
   },
 };
 
diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/user-details.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/user-details.ts
index aa8816663..6e6247f3e 100644
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/user-details.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/user-details.ts
@@ -58,6 +58,7 @@ const user_details = {
     confirm_assign: 'Assign roles', // UNTRANSLATED
     role_assigned: 'Successfully assigned role(s)', // UNTRANSLATED
     search: 'Search by role name, description or ID', // UNTRANSLATED
+    empty: 'No role available', // UNTRANSLATED
   },
 };
 
diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/role-details.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/role-details.ts
index 1094d440d..2617137ea 100644
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/role-details.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/role-details.ts
@@ -25,6 +25,7 @@ const role_details = {
     deletion_description:
       'If this permission is deleted, the affected user with this role will lose the access granted by this permission.', // UNTRANSLATED
     permission_deleted: 'The permission "{{name}}" was successfully removed from this role!', // UNTRANSLATED
+    empty: 'No permission available', // UNTRANSLATED
   },
   users: {
     assign_button: 'Assign Users', // UNTRANSLATED
@@ -40,6 +41,7 @@ const role_details = {
     assign_users_field: 'Assign users', // UNTRANSLATED
     confirm_assign: 'Assign users', // UNTRANSLATED
     users_assigned: 'The selected users were successfully assigned to this role!', // UNTRANSLATED
+    empty: 'No user available', // UNTRANSLATED
   },
 };
 
diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/user-details.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/user-details.ts
index 9490437c7..a1670da28 100644
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/user-details.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/user-details.ts
@@ -56,6 +56,7 @@ const user_details = {
     confirm_assign: 'Assign roles', // UNTRANSLATED
     role_assigned: 'Successfully assigned role(s)', // UNTRANSLATED
     search: 'Search by role name, description or ID', // UNTRANSLATED
+    empty: 'No role available', // UNTRANSLATED
   },
 };
 
diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/role-details.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/role-details.ts
index ef1815172..e1dca9677 100644
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/role-details.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/role-details.ts
@@ -25,6 +25,7 @@ const role_details = {
     deletion_description:
       'If this permission is deleted, the affected user with this role will lose the access granted by this permission.', // UNTRANSLATED
     permission_deleted: 'The permission "{{name}}" was successfully removed from this role!', // UNTRANSLATED
+    empty: 'No permission available', // UNTRANSLATED
   },
   users: {
     assign_button: 'Assign Users', // UNTRANSLATED
@@ -40,6 +41,7 @@ const role_details = {
     assign_users_field: 'Assign users', // UNTRANSLATED
     confirm_assign: 'Assign users', // UNTRANSLATED
     users_assigned: 'The selected users were successfully assigned to this role!', // UNTRANSLATED
+    empty: 'No user available', // UNTRANSLATED
   },
 };
 
diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/user-details.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/user-details.ts
index 86a3ffbc0..72bc8e93c 100644
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/user-details.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/user-details.ts
@@ -54,6 +54,7 @@ const user_details = {
     confirm_assign: 'Assign roles', // UNTRANSLATED
     role_assigned: 'Successfully assigned role(s)', // UNTRANSLATED
     search: 'Search by role name, description or ID', // UNTRANSLATED
+    empty: 'No role available', // UNTRANSLATED
   },
 };