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.

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>

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>

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}

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;
+  }
+}