Handle DescriptionPicker's initial state #13425

public/app/core/components/PermissionList/DisabledPermissionListItem.tsx

@@ -28,6 +28,7 @@ export default class DisabledPermissionListItem extends Component<Props, any> {
               onSelected={() => {}}
               disabled={true}
               className={'gf-form-select-box__control--menu-right'}
+              value={item.permission}
             />
           </div>
         </td>

public/app/core/components/PermissionList/PermissionListItem.tsx

@@ -79,6 +79,7 @@ export default class PermissionsListItem extends PureComponent<Props> {
               onSelected={this.onPermissionChanged}
               disabled={item.inherited}
               className={'gf-form-select-box__control--menu-right'}
+              value={item.permission}
             />
           </div>
         </td>

public/app/core/components/Picker/DescriptionPicker.tsx

@@ -16,15 +16,19 @@ export interface Props {
   onSelected: (permission) => void;
   disabled: boolean;
   className?: string;
+  value?: any;
 }
 
+const getSelectedOption = (optionsWithDesc, value) => optionsWithDesc.find(option => option.value === value);
+
 class DescriptionPicker extends Component<Props, any> {
   constructor(props) {
     super(props);
   }
 
   render() {
-    const { optionsWithDesc, onSelected, disabled, className } = this.props;
+    const { optionsWithDesc, onSelected, disabled, className, value } = this.props;
+    const selectedOption = getSelectedOption(optionsWithDesc, value);
     return (
       <div className="permissions-picker">
         <Select
@@ -42,6 +46,7 @@ class DescriptionPicker extends Component<Props, any> {
           onChange={onSelected}
           getOptionValue={i => i.value}
           getOptionLabel={i => i.label}
+          value={selectedOption}
         />
       </div>
     );