apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues 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
pull/24586/head
Tobias Skarhed 5 years ago committed by GitHub
parent 15ac76a47b
commit 0c1f1dd8fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 172 additions and 48 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 22
      public/app/features/users/UsersTable.tsx
  2. 198
      public/app/features/users/__snapshots__/UsersTable.test.tsx.snap

22
public/app/features/users/UsersTable.tsx
Unescape 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 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)} />

198
public/app/features/users/__snapshots__/UsersTable.test.tsx.snap
Unescape 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
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"
>

Write Preview
Loading…
Cancel
Save