Skip to content

N
nexpie-grafana-theme
Commit 0c1f1dd8 by Tobias Skarhed Committed by GitHub
Options

OrgUsersTable: Fix width when there are long cells in table (#24533) 

* Set width for cells and text overflow

* Add title and update snapshot
parent 15ac76a4
Showing with 172 additions and 48 deletions
public/app/features/users/UsersTable.tsx
......@@ -31,16 +31,26 @@ const UsersTable: FC<Props> = props => {
{users.map((user, index) => {
return (
<tr key={`${user.userId}-${index}`}>
<td className="width-4 text-center">
<td className="width-2 text-center">
<img className="filter-table__avatar" src={user.avatarUrl} />
</td>
<td>{user.login}</td>
<td className="max-width-6">
<span className="ellipsis" title={user.login}>
{user.login}
</span>
</td>
<td>
<span className="ellipsis">{user.email}</span>
<td className="max-width-5">
<span className="ellipsis" title={user.email}>
{user.email}
</span>
</td>
<td className="max-width-5">
<span className="ellipsis" title={user.name}>
{user.name}
</span>
</td>
<td>{user.name}</td>
<td>{user.lastSeenAtAge}</td>
<td className="width-1">{user.lastSeenAtAge}</td>
<td className="width-8">
<OrgRolePicker value={user.role} onChange={newRole => onRoleChange(newRole, user)} />
......
public/app/features/users/__snapshots__/UsersTable.test.tsx.snap
......@@ -71,27 +71,46 @@ exports[`Render should render users table 1`] = `
key="0-0"
>
<td
className="width-4 text-center"
className="width-2 text-center"
>
<img
className="filter-table__avatar"
src="url/to/avatar"
/>
</td>
<td>
user-0
<td
className="max-width-6"
>
<span
className="ellipsis"
title="user-0"
>
user-0
</span>
</td>
<td>
<td
className="max-width-5"
>
<span
className="ellipsis"
title="user-0@test.com"
>
user-0@test.com
</span>
</td>
<td>
user-0 test
<td
className="max-width-5"
>
<span
className="ellipsis"
title="user-0 test"
>
user-0 test
</span>
</td>
<td />
<td
className="width-1"
/>
<td
className="width-8"
>
......@@ -121,27 +140,46 @@ exports[`Render should render users table 1`] = `
key="1-1"
>
<td
className="width-4 text-center"
className="width-2 text-center"
>
<img
className="filter-table__avatar"
src="url/to/avatar"
/>
</td>
<td>
user-1
<td
className="max-width-6"
>
<span
className="ellipsis"
title="user-1"
>
user-1
</span>
</td>
<td>
<td
className="max-width-5"
>
<span
className="ellipsis"
title="user-1@test.com"
>
user-1@test.com
</span>
</td>
<td>
user-1 test
<td
className="max-width-5"
>
<span
className="ellipsis"
title="user-1 test"
>
user-1 test
</span>
</td>
<td />
<td
className="width-1"
/>
<td
className="width-8"
>
......@@ -171,27 +209,46 @@ exports[`Render should render users table 1`] = `
key="2-2"
>
<td
className="width-4 text-center"
className="width-2 text-center"
>
<img
className="filter-table__avatar"
src="url/to/avatar"
/>
</td>
<td>
user-2
<td
className="max-width-6"
>
<span
className="ellipsis"
title="user-2"
>
user-2
</span>
</td>
<td>
<td
className="max-width-5"
>
<span
className="ellipsis"
title="user-2@test.com"
>
user-2@test.com
</span>
</td>
<td>
user-2 test
<td
className="max-width-5"
>
<span
className="ellipsis"
title="user-2 test"
>
user-2 test
</span>
</td>
<td />
<td
className="width-1"
/>
<td
className="width-8"
>
......@@ -221,27 +278,46 @@ exports[`Render should render users table 1`] = `
key="3-3"
>
<td
className="width-4 text-center"
className="width-2 text-center"
>
<img
className="filter-table__avatar"
src="url/to/avatar"
/>
</td>
<td>
user-3
<td
className="max-width-6"
>
<span
className="ellipsis"
title="user-3"
>
user-3
</span>
</td>
<td>
<td
className="max-width-5"
>
<span
className="ellipsis"
title="user-3@test.com"
>
user-3@test.com
</span>
</td>
<td>
user-3 test
<td
className="max-width-5"
>
<span
className="ellipsis"
title="user-3 test"
>
user-3 test
</span>
</td>
<td />
<td
className="width-1"
/>
<td
className="width-8"
>
......@@ -271,27 +347,46 @@ exports[`Render should render users table 1`] = `
key="4-4"
>
<td
className="width-4 text-center"
className="width-2 text-center"
>
<img
className="filter-table__avatar"
src="url/to/avatar"
/>
</td>
<td>
user-4
<td
className="max-width-6"
>
<span
className="ellipsis"
title="user-4"
>
user-4
</span>
</td>
<td>
<td
className="max-width-5"
>
<span
className="ellipsis"
title="user-4@test.com"
>
user-4@test.com
</span>
</td>
<td>
user-4 test
<td
className="max-width-5"
>
<span
className="ellipsis"
title="user-4 test"
>
user-4 test
</span>
</td>
<td />
<td
className="width-1"
/>
<td
className="width-8"
>
......@@ -321,27 +416,46 @@ exports[`Render should render users table 1`] = `
key="5-5"
>
<td
className="width-4 text-center"
className="width-2 text-center"
>
<img
className="filter-table__avatar"
src="url/to/avatar"
/>
</td>
<td>
user-5
<td
className="max-width-6"
>
<span
className="ellipsis"
title="user-5"
>
user-5
</span>
</td>
<td>
<td
className="max-width-5"
>
<span
className="ellipsis"
title="user-5@test.com"
>
user-5@test.com
</span>
</td>
<td>
user-5 test
<td
className="max-width-5"
>
<span
className="ellipsis"
title="user-5 test"
>
user-5 test
</span>
</td>
<td />
<td
className="width-1"
/>
<td
className="width-8"
>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment