From 4bc5945c17ca090ff0821538a106af455f29aa68 Mon Sep 17 00:00:00 2001
From: Daniel Lee <dan.limerick@gmail.com>
Date: Tue, 30 Jan 2018 17:26:44 +0100
Subject: [PATCH] dashfolders: remove inline styles

---
 .../app/core/components/Picker/DescriptionOption.tsx  | 10 ++--------
 .../app/stores/PermissionsStore/PermissionsStore.ts   |  4 ----
 public/sass/_grafana.scss                             |  1 +
 public/sass/components/_description-picker.scss       | 11 +++++++++++
 4 files changed, 14 insertions(+), 12 deletions(-)
 create mode 100644 public/sass/components/_description-picker.scss

diff --git a/public/app/core/components/Picker/DescriptionOption.tsx b/public/app/core/components/Picker/DescriptionOption.tsx
index 565191a5166..12a1fdd9163 100644
--- a/public/app/core/components/Picker/DescriptionOption.tsx
+++ b/public/app/core/components/Picker/DescriptionOption.tsx
@@ -41,18 +41,12 @@ class DescriptionOption extends Component<IProps, any> {
         onMouseEnter={this.handleMouseEnter}
         onMouseMove={this.handleMouseMove}
         title={option.title}
-        className={`user-picker-option__button btn btn-link ${className} width-19`}
-        style={{
-          whiteSpace: 'normal',
-          // height: '55px',
-        }}
+        className={`description-picker-option__button btn btn-link ${className} width-19`}
       >
         <div className="gf-form">{children}</div>
         <div className="gf-form">
           <div className="muted width-17">{option.description}</div>
-          {className.indexOf('is-selected') > -1 && (
-            <i style={{ paddingLeft: '2px' }} className="fa fa-check" aria-hidden="true" />
-          )}
+          {className.indexOf('is-selected') > -1 && <i className="fa fa-check" aria-hidden="true" />}
         </div>
       </button>
     );
diff --git a/public/app/stores/PermissionsStore/PermissionsStore.ts b/public/app/stores/PermissionsStore/PermissionsStore.ts
index 52e5dcdb339..be7f29a22c8 100644
--- a/public/app/stores/PermissionsStore/PermissionsStore.ts
+++ b/public/app/stores/PermissionsStore/PermissionsStore.ts
@@ -130,20 +130,16 @@ const prepareItem = (item, dashboardId: number, isFolder: boolean) => {
   item.sortRank = 0;
   if (item.userId > 0) {
     item.icon = 'fa fa-fw fa-user';
-    // TODO: Check what sce.trustAsHtml did
-    //   item.nameHtml = this.$sce.trustAsHtml(item.userLogin);
     item.nameHtml = item.userLogin;
     item.sortName = item.userLogin;
     item.sortRank = 10;
   } else if (item.teamId > 0) {
     item.icon = 'fa fa-fw fa-users';
-    //   item.nameHtml = this.$sce.trustAsHtml(item.team);
     item.nameHtml = item.team;
     item.sortName = item.team;
     item.sortRank = 20;
   } else if (item.role) {
     item.icon = 'fa fa-fw fa-street-view';
-    //   item.nameHtml = this.$sce.trustAsHtml(`Everyone with <span class="query-keyword">${item.role}</span> Role`);
     item.nameHtml = `Everyone with <span class="query-keyword">${item.role}</span> Role`;
     item.sortName = item.role;
     item.sortRank = 30;
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index ceae2438533..36072fe8929 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -91,6 +91,7 @@
 @import 'components/popper';
 @import 'components/form_select_box';
 @import 'components/user-picker';
+@import 'components/description-picker';
 
 // PAGES
 @import 'pages/login';
diff --git a/public/sass/components/_description-picker.scss b/public/sass/components/_description-picker.scss
new file mode 100644
index 00000000000..30ca80cf18d
--- /dev/null
+++ b/public/sass/components/_description-picker.scss
@@ -0,0 +1,11 @@
+.description-picker-option__button {
+  position: relative;
+  text-align: left;
+  width: 100%;
+  display: block;
+  border-radius: 0;
+  white-space: normal;
+  i.fa-check {
+    padding-left: 2px;
+  }
+}