From 0c1f1dd8fd13d47dfaa498c98c543abf25b8997b Mon Sep 17 00:00:00 2001
From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Date: Tue, 12 May 2020 16:47:38 +0200
Subject: [PATCH] OrgUsersTable: Fix width when there are long cells in table
 (#24533)

* Set width for cells and text overflow

* Add title and update snapshot
---
 public/app/features/users/UsersTable.tsx      |  24 +-
 .../__snapshots__/UsersTable.test.tsx.snap    | 210 ++++++++++++++----
 2 files changed, 179 insertions(+), 55 deletions(-)

diff --git a/public/app/features/users/UsersTable.tsx b/public/app/features/users/UsersTable.tsx
index 9ad31f9f75b..0d8cf149137 100644
--- a/public/app/features/users/UsersTable.tsx
+++ b/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>
-                <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)} />
diff --git a/public/app/features/users/__snapshots__/UsersTable.test.tsx.snap b/public/app/features/users/__snapshots__/UsersTable.test.tsx.snap
index 0a13703e0b2..fd7c496b9d1 100644
--- a/public/app/features/users/__snapshots__/UsersTable.test.tsx.snap
+++ b/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>
-      <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"
       >