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 160 additions and 36 deletions
public/app/features/users/UsersTable.tsx
...@@ -31,16 +31,26 @@ const UsersTable: FC<Props> = props => { ...@@ -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}>
{user.login}
</span>
</td>
<td> <td className="max-width-5">
<span className="ellipsis">{user.email}</span> <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>
<td>{user.name}</td> <td className="width-1">{user.lastSeenAtAge}</td>
<td>{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)} />
......
public/app/features/users/__snapshots__/UsersTable.test.tsx.snap
...@@ -71,27 +71,46 @@ exports[`Render should render users table 1`] = ` ...@@ -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
className="max-width-6"
>
<span
className="ellipsis"
title="user-0"
>
user-0 user-0
</span>
</td> </td>
<td> <td
className="max-width-5"
>
<span <span
className="ellipsis" className="ellipsis"
title="user-0@test.com"
> >
user-0@test.com user-0@test.com
</span> </span>
</td> </td>
<td> <td
className="max-width-5"
>
<span
className="ellipsis"
title="user-0 test"
>
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`] = ` ...@@ -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
className="max-width-6"
>
<span
className="ellipsis"
title="user-1"
>
user-1 user-1
</span>
</td> </td>
<td> <td
className="max-width-5"
>
<span <span
className="ellipsis" className="ellipsis"
title="user-1@test.com"
> >
user-1@test.com user-1@test.com
</span> </span>
</td> </td>
<td> <td
className="max-width-5"
>
<span
className="ellipsis"
title="user-1 test"
>
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`] = ` ...@@ -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
className="max-width-6"
>
<span
className="ellipsis"
title="user-2"
>
user-2 user-2
</span>
</td> </td>
<td> <td
className="max-width-5"
>
<span <span
className="ellipsis" className="ellipsis"
title="user-2@test.com"
> >
user-2@test.com user-2@test.com
</span> </span>
</td> </td>
<td> <td
className="max-width-5"
>
<span
className="ellipsis"
title="user-2 test"
>
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`] = ` ...@@ -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
className="max-width-6"
>
<span
className="ellipsis"
title="user-3"
>
user-3 user-3
</span>
</td> </td>
<td> <td
className="max-width-5"
>
<span <span
className="ellipsis" className="ellipsis"
title="user-3@test.com"
> >
user-3@test.com user-3@test.com
</span> </span>
</td> </td>
<td> <td
className="max-width-5"
>
<span
className="ellipsis"
title="user-3 test"
>
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`] = ` ...@@ -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
className="max-width-6"
>
<span
className="ellipsis"
title="user-4"
>
user-4 user-4
</span>
</td> </td>
<td> <td
className="max-width-5"
>
<span <span
className="ellipsis" className="ellipsis"
title="user-4@test.com"
> >
user-4@test.com user-4@test.com
</span> </span>
</td> </td>
<td> <td
className="max-width-5"
>
<span
className="ellipsis"
title="user-4 test"
>
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`] = ` ...@@ -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
className="max-width-6"
>
<span
className="ellipsis"
title="user-5"
>
user-5 user-5
</span>
</td> </td>
<td> <td
className="max-width-5"
>
<span <span
className="ellipsis" className="ellipsis"
title="user-5@test.com"
> >
user-5@test.com user-5@test.com
</span> </span>
</td> </td>
<td> <td
className="max-width-5"
>
<span
className="ellipsis"
title="user-5 test"
>
user-5 test user-5 test
</span>
</td> </td>
<td /> <td
className="width-1"
/>
<td <td
className="width-8" 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