Upgrade Datasources-picker on Explore page #13425

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

@@ -12,7 +12,7 @@ export const PickerOption = (props: ExtendedOptionProps) => {
   return (
     <components.Option {...props}>
       <div className={`description-picker-option__button btn btn-link width-19`}>
-        <img src={data.avatarUrl} alt={data.label} className="user-picker-option__avatar" />
+        {data.avatarUrl && <img src={data.avatarUrl} alt={data.label} className="user-picker-option__avatar" />}
         {children}
       </div>
     </components.Option>

public/app/features/explore/Explore.tsx

@@ -9,6 +9,10 @@ import store from 'app/core/store';
 import TimeSeries from 'app/core/time_series2';
 import { parse as parseDate } from 'app/core/utils/datemath';
 import { DEFAULT_RANGE } from 'app/core/utils/explore';
+import ResetStyles from 'app/core/components/Picker/ResetStyles';
+import PickerOption from 'app/core/components/Picker/PickerOption';
+import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
+import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
 
 import ElapsedTime from './ElapsedTime';
 import QueryRows from './QueryRows';
@@ -519,7 +523,6 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
     const logsButtonActive = showingLogs ? 'active' : '';
     const tableButtonActive = showingBoth || showingTable ? 'active' : '';
     const exploreClass = split ? 'explore explore-split' : 'explore';
-    const selectedDatasource = datasource ? datasource.name : undefined;
 
     return (
       <div className={exploreClass} ref={this.getRef}>
@@ -541,13 +544,24 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
           {!datasourceMissing ? (
             <div className="navbar-buttons">
               <Select
-                clearable={false}
+                classNamePrefix={`gf-form-select2`}
+                isMulti={false}
+                isLoading={datasourceLoading}
+                isClearable={false}
                 className="gf-form-input gf-form-input--form-dropdown datasource-picker"
                 onChange={this.onChangeDatasource}
                 options={exploreDatasources}
-                isOpen={true}
-                placeholder="Loading datasources..."
-                value={selectedDatasource}
+                styles={ResetStyles}
+                placeholder="Select datasource"
+                loadingMessage={() => 'Loading datasources...'}
+                noOptionsMessage={() => 'No datasources found'}
+                getOptionValue={i => i.value}
+                getOptionLabel={i => i.label}
+                components={{
+                  Option: PickerOption,
+                  IndicatorsContainer,
+                  NoOptionsMessage,
+                }}
               />
             </div>
           ) : null}