From 114a264da4197ecc7ca7a9cca8fea1bd97e5d3f2 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Thu, 6 Dec 2018 13:44:02 +0100
Subject: [PATCH 1/2] UserPicker and TeamPicker should use min-width instead of
 fixed widths to avoid overflowing form buttons.  #14341

---
 public/app/core/components/PermissionList/AddPermission.tsx | 2 +-
 public/app/features/teams/TeamMembers.tsx                   | 2 +-
 .../features/teams/__snapshots__/TeamMembers.test.tsx.snap  | 6 +++---
 public/sass/utils/_widths.scss                              | 6 ++++++
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/public/app/core/components/PermissionList/AddPermission.tsx b/public/app/core/components/PermissionList/AddPermission.tsx
index 71cc937ddfa..d6da7c68544 100644
--- a/public/app/core/components/PermissionList/AddPermission.tsx
+++ b/public/app/core/components/PermissionList/AddPermission.tsx
@@ -84,7 +84,7 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
   render() {
     const { onCancel } = this.props;
     const newItem = this.state;
-    const pickerClassName = 'width-20';
+    const pickerClassName = 'min-width-20';
     const isValid = this.isValid();
     return (
       <div className="gf-form-inline cta-form">
diff --git a/public/app/features/teams/TeamMembers.tsx b/public/app/features/teams/TeamMembers.tsx
index f43dc44808f..433702fa0d5 100644
--- a/public/app/features/teams/TeamMembers.tsx
+++ b/public/app/features/teams/TeamMembers.tsx
@@ -115,7 +115,7 @@ export class TeamMembers extends PureComponent<Props, State> {
             </button>
             <h5>Add Team Member</h5>
             <div className="gf-form-inline">
-              <UserPicker onSelected={this.onUserSelected} className="width-30" />
+              <UserPicker onSelected={this.onUserSelected} className="min-width-30" />
               {this.state.newTeamMember && (
                 <button className="btn btn-success gf-form-btn" type="submit" onClick={this.onAddUserToTeam}>
                   Add to team
diff --git a/public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap b/public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap
index 0e9b4332cca..d0a88bd97b0 100644
--- a/public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap
+++ b/public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap
@@ -58,7 +58,7 @@ exports[`Render should render component 1`] = `
         className="gf-form-inline"
       >
         <UserPicker
-          className="width-30"
+          className="min-width-30"
           onSelected={[Function]}
         />
       </div>
@@ -152,7 +152,7 @@ exports[`Render should render team members 1`] = `
         className="gf-form-inline"
       >
         <UserPicker
-          className="width-30"
+          className="min-width-30"
           onSelected={[Function]}
         />
       </div>
@@ -372,7 +372,7 @@ exports[`Render should render team members when sync enabled 1`] = `
         className="gf-form-inline"
       >
         <UserPicker
-          className="width-30"
+          className="min-width-30"
           onSelected={[Function]}
         />
       </div>
diff --git a/public/sass/utils/_widths.scss b/public/sass/utils/_widths.scss
index 2000982f08d..b1213e6ea60 100644
--- a/public/sass/utils/_widths.scss
+++ b/public/sass/utils/_widths.scss
@@ -19,6 +19,12 @@
   }
 }
 
+@for $i from 1 through 30 {
+  .min-width-#{$i} {
+    min-width: ($spacer * $i) - $gf-form-margin !important;
+  }
+}
+
 @for $i from 1 through 30 {
   .offset-width-#{$i} {
     margin-left: ($spacer * $i) !important;

From 02b14d33a6814589d4dbb96973c4731d12f18d2b Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Thu, 6 Dec 2018 13:45:29 +0100
Subject: [PATCH 2/2] If user login equals user email, only show the email once
 #14341

---
 public/app/core/components/Picker/UserPicker.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/app/core/components/Picker/UserPicker.tsx b/public/app/core/components/Picker/UserPicker.tsx
index f78cf69bf5e..f80a3fc135f 100644
--- a/public/app/core/components/Picker/UserPicker.tsx
+++ b/public/app/core/components/Picker/UserPicker.tsx
@@ -40,7 +40,7 @@ export class UserPicker extends Component<Props, State> {
       .then(result => {
         return result.map(user => ({
           id: user.userId,
-          label: `${user.login} - ${user.email}`,
+          label: user.login === user.email ? user.login : `${user.login} - ${user.email}`,
           avatarUrl: user.avatarUrl,
           login: user.login,
         }));