IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-09 23:16:16 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* Set width for cells and text overflow

* Add title and update snapshot
This commit is contained in:
Tobias Skarhed 2020-05-12 16:47:38 +02:00 committed by GitHub
parent 15ac76a47b
commit 0c1f1dd8fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 179 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
public/app/features/users/UsersTable.tsx
View File

@ -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>
<span className="ellipsis">{user.email}</span>
<td className="max-width-6">
<span className="ellipsis" title={user.login}>
{user.login}
</span>
</td>
<td>{user.name}</td>
<td>{user.lastSeenAtAge}</td>
<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 className="width-1">{user.lastSeenAtAge}</td>
<td className="width-8">
<OrgRolePicker value={user.role} onChange={newRole => onRoleChange(newRole, user)} />

210
public/app/features/users/__snapshots__/UsersTable.test.tsx.snap
View File

@ -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>
<td>
<td
className="max-width-6"
>
<span
className="ellipsis"
title="user-0"
>
user-0
</span>
</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>
<td>
<td
className="max-width-6"
>
<span
className="ellipsis"
title="user-1"
>
user-1
</span>
</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>
<td>
<td
className="max-width-6"
>
<span
className="ellipsis"
title="user-2"
>
user-2
</span>
</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>
<td>
<td
className="max-width-6"
>
<span
className="ellipsis"
title="user-3"
>
user-3
</span>
</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>
<td>
<td
className="max-width-6"
>
<span
className="ellipsis"
title="user-4"
>
user-4
</span>
</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>
<td>
<td
className="max-width-6"
>
<span
className="ellipsis"
title="user-5"
>
user-5
</span>
</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"
>