feat(console): add assigned users column to roles table (#2916)

packages/console/src/pages/Roles/components/AssignedUsers/index.module.scss

@@ -0,0 +1,37 @@
+@use '@/scss/underscore' as _;
+
+.users {
+  display: flex;
+  align-items: center;
+
+  .avatars {
+    display: flex;
+    align-items: center;
+    flex-direction: row-reverse;
+
+    .avatar {
+      position: relative;
+      width: 24px;
+      height: 24px;
+      border-radius: 4px;
+      object-fit: cover;
+      flex-shrink: 0;
+      border: 2px solid var(--color-layer-1);
+
+      &:not(:last-child) {
+        margin-left: _.unit(-2);
+      }
+    }
+  }
+
+  .count {
+    margin-left: _.unit(2);
+    color: var(--color-text);
+    font: var(--font-body-medium);
+  }
+}
+
+.empty {
+  padding-left: _.unit(10);
+}
+

packages/console/src/pages/Roles/components/AssignedUsers/index.tsx

@@ -0,0 +1,26 @@
+import type { User } from '@logto/schemas';
+
+import UserAvatar from '@/components/UserAvatar';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+  users: Array<Pick<User, 'avatar' | 'id'>>;
+  count: number;
+};
+
+const AssignedUsers = ({ users, count }: Props) =>
+  count ? (
+    <div className={styles.users}>
+      <div className={styles.avatars}>
+        {users.map(({ id, avatar }) => (
+          <UserAvatar key={id} url={avatar} className={styles.avatar} />
+        ))}
+      </div>
+      {count > 2 && <span className={styles.count}>{count.toLocaleString()}</span>}
+    </div>
+  ) : (
+    <div className={styles.empty}>-</div>
+  );
+
+export default AssignedUsers;

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

@@ -15,6 +15,7 @@ import useTableSearchParams, { formatKeyword } from '@/hooks/use-table-search-pa
 import * as pageStyles from '@/scss/resources.module.scss';
 import { buildUrl } from '@/utilities/url';
 
+import AssignedUsers from './components/AssignedUsers';
 import CreateRoleModal from './components/CreateRoleModal';
 
 const rolesPathname = '/roles';
@@ -68,15 +69,23 @@ const Roles = () => {
           {
             title: t('roles.role_name'),
             dataIndex: 'name',
-            colSpan: 6,
+            colSpan: 5,
             render: ({ id, name }) => <ItemPreview title={name} to={buildDetailsPathname(id)} />,
           },
           {
             title: t('roles.role_description'),
             dataIndex: 'description',
-            colSpan: 10,
+            colSpan: 6,
             render: ({ description }) => description,
           },
+          {
+            title: <span>{t('roles.assigned_users')}</span>,
+            dataIndex: 'users',
+            colSpan: 5,
+            render: ({ featuredUsers, usersCount }) => (
+              <AssignedUsers users={featuredUsers} count={usersCount} />
+            ),
+          },
         ]}
         rowClickHandler={({ id }) => {
           navigate(buildDetailsPathname(id));

packages/phrases/src/locales/de/translation/admin-console/roles.ts

@@ -5,6 +5,7 @@ const roles = {
   create: 'Add Roles', // UNTRANSLATED
   role_name: 'Role', // UNTRANSLATED
   role_description: 'Description', // UNTRANSLATED
+  assigned_users: 'Assigned users', // UNTRANSLATED
   assign_permissions: 'Assign permissions', // UNTRANSLATED
   create_role_title: 'Create a role', // UNTRANSLATED
   create_role_description:

packages/phrases/src/locales/en/translation/admin-console/roles.ts

@@ -5,6 +5,7 @@ const roles = {
   create: 'Add Roles',
   role_name: 'Role',
   role_description: 'Description',
+  assigned_users: 'Assigned users',
   assign_permissions: 'Assign permissions',
   create_role_title: 'Create a role',
   create_role_description:

packages/phrases/src/locales/fr/translation/admin-console/roles.ts

@@ -5,6 +5,7 @@ const roles = {
   create: 'Add Roles', // UNTRANSLATED
   role_name: 'Role', // UNTRANSLATED
   role_description: 'Description', // UNTRANSLATED
+  assigned_users: 'Assigned users', // UNTRANSLATED
   assign_permissions: 'Assign permissions', // UNTRANSLATED
   create_role_title: 'Create a role', // UNTRANSLATED
   create_role_description:

packages/phrases/src/locales/ko/translation/admin-console/roles.ts

@@ -5,6 +5,7 @@ const roles = {
   create: 'Add Roles', // UNTRANSLATED
   role_name: 'Role', // UNTRANSLATED
   role_description: 'Description', // UNTRANSLATED
+  assigned_users: 'Assigned users', // UNTRANSLATED
   assign_permissions: 'Assign permissions', // UNTRANSLATED
   create_role_title: 'Create a role', // UNTRANSLATED
   create_role_description:

packages/phrases/src/locales/pt-br/translation/admin-console/roles.ts

@@ -5,6 +5,7 @@ const roles = {
   create: 'Add Roles', // UNTRANSLATED
   role_name: 'Role', // UNTRANSLATED
   role_description: 'Description', // UNTRANSLATED
+  assigned_users: 'Assigned users', // UNTRANSLATED
   assign_permissions: 'Assign permissions', // UNTRANSLATED
   create_role_title: 'Create a role', // UNTRANSLATED
   create_role_description:

packages/phrases/src/locales/pt-pt/translation/admin-console/roles.ts

@@ -5,6 +5,7 @@ const roles = {
   create: 'Add Roles', // UNTRANSLATED
   role_name: 'Role', // UNTRANSLATED
   role_description: 'Description', // UNTRANSLATED
+  assigned_users: 'Assigned users', // UNTRANSLATED
   assign_permissions: 'Assign permissions', // UNTRANSLATED
   create_role_title: 'Create a role', // UNTRANSLATED
   create_role_description:

packages/phrases/src/locales/tr-tr/translation/admin-console/roles.ts

@@ -5,6 +5,7 @@ const roles = {
   create: 'Add Roles', // UNTRANSLATED
   role_name: 'Role', // UNTRANSLATED
   role_description: 'Description', // UNTRANSLATED
+  assigned_users: 'Assigned users', // UNTRANSLATED
   assign_permissions: 'Assign permissions', // UNTRANSLATED
   create_role_title: 'Create a role', // UNTRANSLATED
   create_role_description:

packages/phrases/src/locales/zh-cn/translation/admin-console/roles.ts

@@ -5,6 +5,7 @@ const roles = {
   create: 'Add Roles', // UNTRANSLATED
   role_name: 'Role', // UNTRANSLATED
   role_description: 'Description', // UNTRANSLATED
+  assigned_users: 'Assigned users', // UNTRANSLATED
   assign_permissions: 'Assign permissions', // UNTRANSLATED
   create_role_title: 'Create a role', // UNTRANSLATED
   create_role_description: