IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -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) => { {users.map((user, index) => {
return ( return (
<tr key={`${user.userId}-${index}`}> <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} /> <img className="filter-table__avatar" src={user.avatarUrl} />
</td> </td>
<td>{user.login}</td> <td className="max-width-6">
<span className="ellipsis" title={user.login}>
<td> {user.login}
<span className="ellipsis">{user.email}</span> </span>
</td> </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"> <td className="width-8">
<OrgRolePicker value={user.role} onChange={newRole => onRoleChange(newRole, user)} /> <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" key="0-0"
> >
<td <td
className="width-4 text-center" className="width-2 text-center"
> >
<img <img
className="filter-table__avatar" className="filter-table__avatar"
src="url/to/avatar" src="url/to/avatar"
/> />
</td> </td>
<td> <td
user-0 className="max-width-6"
</td> >
<td>
<span <span
className="ellipsis" 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 user-0@test.com
</span> </span>
</td> </td>
<td> <td
user-0 test className="max-width-5"
>
<span
className="ellipsis"
title="user-0 test"
>
user-0 test
</span>
</td> </td>
<td /> <td
className="width-1"
/>
<td <td
className="width-8" className="width-8"
> >
@ -121,27 +140,46 @@ exports[`Render should render users table 1`] = `
key="1-1" key="1-1"
> >
<td <td
className="width-4 text-center" className="width-2 text-center"
> >
<img <img
className="filter-table__avatar" className="filter-table__avatar"
src="url/to/avatar" src="url/to/avatar"
/> />
</td> </td>
<td> <td
user-1 className="max-width-6"
</td> >
<td>
<span <span
className="ellipsis" 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 user-1@test.com
</span> </span>
</td> </td>
<td> <td
user-1 test className="max-width-5"
>
<span
className="ellipsis"
title="user-1 test"
>
user-1 test
</span>
</td> </td>
<td /> <td
className="width-1"
/>
<td <td
className="width-8" className="width-8"
> >
@ -171,27 +209,46 @@ exports[`Render should render users table 1`] = `
key="2-2" key="2-2"
> >
<td <td
className="width-4 text-center" className="width-2 text-center"
> >
<img <img
className="filter-table__avatar" className="filter-table__avatar"
src="url/to/avatar" src="url/to/avatar"
/> />
</td> </td>
<td> <td
user-2 className="max-width-6"
</td> >
<td>
<span <span
className="ellipsis" 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 user-2@test.com
</span> </span>
</td> </td>
<td> <td
user-2 test className="max-width-5"
>
<span
className="ellipsis"
title="user-2 test"
>
user-2 test
</span>
</td> </td>
<td /> <td
className="width-1"
/>
<td <td
className="width-8" className="width-8"
> >
@ -221,27 +278,46 @@ exports[`Render should render users table 1`] = `
key="3-3" key="3-3"
> >
<td <td
className="width-4 text-center" className="width-2 text-center"
> >
<img <img
className="filter-table__avatar" className="filter-table__avatar"
src="url/to/avatar" src="url/to/avatar"
/> />
</td> </td>
<td> <td
user-3 className="max-width-6"
</td> >
<td>
<span <span
className="ellipsis" 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 user-3@test.com
</span> </span>
</td> </td>
<td> <td
user-3 test className="max-width-5"
>
<span
className="ellipsis"
title="user-3 test"
>
user-3 test
</span>
</td> </td>
<td /> <td
className="width-1"
/>
<td <td
className="width-8" className="width-8"
> >
@ -271,27 +347,46 @@ exports[`Render should render users table 1`] = `
key="4-4" key="4-4"
> >
<td <td
className="width-4 text-center" className="width-2 text-center"
> >
<img <img
className="filter-table__avatar" className="filter-table__avatar"
src="url/to/avatar" src="url/to/avatar"
/> />
</td> </td>
<td> <td
user-4 className="max-width-6"
</td> >
<td>
<span <span
className="ellipsis" 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 user-4@test.com
</span> </span>
</td> </td>
<td> <td
user-4 test className="max-width-5"
>
<span
className="ellipsis"
title="user-4 test"
>
user-4 test
</span>
</td> </td>
<td /> <td
className="width-1"
/>
<td <td
className="width-8" className="width-8"
> >
@ -321,27 +416,46 @@ exports[`Render should render users table 1`] = `
key="5-5" key="5-5"
> >
<td <td
className="width-4 text-center" className="width-2 text-center"
> >
<img <img
className="filter-table__avatar" className="filter-table__avatar"
src="url/to/avatar" src="url/to/avatar"
/> />
</td> </td>
<td> <td
user-5 className="max-width-6"
</td> >
<td>
<span <span
className="ellipsis" 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 user-5@test.com
</span> </span>
</td> </td>
<td> <td
user-5 test className="max-width-5"
>
<span
className="ellipsis"
title="user-5 test"
>
user-5 test
</span>
</td> </td>
<td /> <td
className="width-1"
/>
<td <td
className="width-8" className="width-8"
> >