From 146af8595de0fbde55b88b898d204e4d5a89571d Mon Sep 17 00:00:00 2001
From: Daniel Lee <dan.limerick@gmail.com>
Date: Mon, 29 Jan 2018 14:30:01 +0100
Subject: [PATCH] dashfolders: css class as parameter for Picker

For the permissions picker, pass in an extra class to decide
if the description should be aligned left or right.
---
 .../Permissions/DisabledPermissionsListItem.tsx        |  1 +
 .../components/Permissions/PermissionsListItem.tsx     |  1 +
 .../app/core/components/Picker/DescriptionPicker.tsx   |  5 +++--
 public/sass/components/_form_select_box.scss           | 10 ++++++----
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/public/app/core/components/Permissions/DisabledPermissionsListItem.tsx b/public/app/core/components/Permissions/DisabledPermissionsListItem.tsx
index 6601e2800e1..ed97f30c8df 100644
--- a/public/app/core/components/Permissions/DisabledPermissionsListItem.tsx
+++ b/public/app/core/components/Permissions/DisabledPermissionsListItem.tsx
@@ -25,6 +25,7 @@ export default class DisabledPermissionListItem extends Component<IProps, any> {
               handlePicked={() => {}}
               value={item.permission}
               disabled={true}
+              className={'gf-form-input--form-dropdown-right'}
             />
           </div>
         </td>
diff --git a/public/app/core/components/Permissions/PermissionsListItem.tsx b/public/app/core/components/Permissions/PermissionsListItem.tsx
index 57e438d663a..dfb855ed682 100644
--- a/public/app/core/components/Permissions/PermissionsListItem.tsx
+++ b/public/app/core/components/Permissions/PermissionsListItem.tsx
@@ -32,6 +32,7 @@ export default observer(({ item, removeItem, permissionChanged, itemIndex, folde
             handlePicked={handleChangePermission}
             value={item.permission}
             disabled={item.inherited}
+            className={'gf-form-input--form-dropdown-right'}
           />
         </div>
       </td>
diff --git a/public/app/core/components/Picker/DescriptionPicker.tsx b/public/app/core/components/Picker/DescriptionPicker.tsx
index 174a04861be..498c0df7ab2 100644
--- a/public/app/core/components/Picker/DescriptionPicker.tsx
+++ b/public/app/core/components/Picker/DescriptionPicker.tsx
@@ -7,6 +7,7 @@ export interface IProps {
   handlePicked: (permission) => void;
   value: number;
   disabled: boolean;
+  className?: string;
 }
 
 export interface OptionWithDescription {
@@ -22,7 +23,7 @@ class DescriptionPicker extends Component<IProps, any> {
   }
 
   render() {
-    const { optionsWithDesc, handlePicked, value, disabled } = this.props;
+    const { optionsWithDesc, handlePicked, value, disabled, className } = this.props;
 
     return (
       <div className="permissions-picker">
@@ -34,7 +35,7 @@ class DescriptionPicker extends Component<IProps, any> {
           labelKey="label"
           options={optionsWithDesc}
           onChange={handlePicked}
-          className="width-7 gf-form-input gf-form-input--form-dropdown"
+          className={`width-7 gf-form-input gf-form-input--form-dropdown ${className || ''}`}
           optionComponent={DescriptionOption}
           placeholder="Choose"
           disabled={disabled}
diff --git a/public/sass/components/_form_select_box.scss b/public/sass/components/_form_select_box.scss
index b0c1f96336e..beee2db15ab 100644
--- a/public/sass/components/_form_select_box.scss
+++ b/public/sass/components/_form_select_box.scss
@@ -39,10 +39,6 @@ $select-option-selected-bg: $dropdownLinkBackgroundActive;
     color: $input-color-placeholder;
   }
 
-  .Select-menu-outer {
-    right: 0;
-  }
-
   > .Select-control {
     @include select-control();
     border-color: $dark-3;
@@ -102,3 +98,9 @@ $select-option-selected-bg: $dropdownLinkBackgroundActive;
     }
   }
 }
+
+.gf-form-input--form-dropdown-right {
+  .Select-menu-outer {
+    right: 0;
+  }
+}