Merge branch 'panel-edit-style-changes' into select-refactor

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react';
 import { components } from 'react-select';
 import { OptionProps } from 'react-select/lib/components/Option';
 
@@ -6,13 +6,15 @@ export interface Props {
   children: Element;
 }
 
-export const PickerOption = (props: OptionProps<any>) => {
+export const NoOptionsMessage = (props: OptionProps<any>) => {
-  const { children, className } = props;
+  const { children } = props;
   return (
     <components.Option {...props}>
-      <div className={`description-picker-option__button btn btn-link ${className}`}>{children}</div>
+      <div className="gf-form-select-box__desc-option">
+        <div className="gf-form-select-box__desc-option__body">{children}</div>
+      </div>
     </components.Option>
   );
 };
 
-export default PickerOption;
+export default NoOptionsMessage;

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

@@ -1,60 +1,157 @@
-// import React, { PureComponent } from 'react';
+// Libraries
-// import Select as ReactSelect from 'react-select';
+import classNames from 'classnames';
-// import DescriptionOption from './DescriptionOption';
+import React, { PureComponent } from 'react';
-// import IndicatorsContainer from './IndicatorsContainer';
+import { default as ReactSelect } from 'react-select';
-// import ResetStyles from './ResetStyles';
+import { default as ReactAsyncSelect } from 'react-select/lib/Async';
-//
+
-// export interface OptionType {
+// Components
-//   label: string;
+import { Option, SingleValue } from './PickerOption';
-//   value: string;
+import IndicatorsContainer from './IndicatorsContainer';
-// }
+import NoOptionsMessage from './NoOptionsMessage';
-//
+import ResetStyles from './ResetStyles';
-// interface Props {
+
-//   defaultValue?: any;
+export interface SelectOptionItem {
-//   getOptionLabel: (item: T) => string;
+  label?: string;
-//   getOptionValue: (item: T) => string;
+  value?: string;
-//   onChange: (item: T) => {} | void;
+  imgUrl?: string;
-//   options: T[];
+  description?: string;
-//   placeholder?: string;
+  [key: string]: any;
-//   width?: number;
+}
-//   value: T;
+
-//   className?: string;
+interface CommonProps {
-// }
+  defaultValue?: any;
-//
+  getOptionLabel?: (item: SelectOptionItem) => string;
-// export class Select<T> extends PureComponent<Props<T>> {
+  getOptionValue?: (item: SelectOptionItem) => string;
-//   static defaultProps = {
+  onChange: (item: SelectOptionItem) => {} | void;
-//     width: null,
+  placeholder?: string;
-//     className: '',
+  width?: number;
-//   }
+  value?: SelectOptionItem;
-//
+  className?: string;
-//   render() {
+  components: object;
-//     const { defaultValue, getOptionLabel, getOptionValue, onSelected, options, placeholder, width, value, className } = this.props;
+}
-//     let widthClass = '';
+
-//     if (width) {
+interface SelectProps {
-//       widthClass = 'width-'+width;
+  options: SelectOptionItem[];
-//     }
+}
-//
+
-//   return (
+interface AsyncProps {
-//     <ReactSelect
+  defaultOptions: boolean;
-//       classNamePrefix="gf-form-select-box"
+  loadOptions: (query: string) => Promise<SelectOptionItem[]>;
-//       className={`gf-form-input gf-form-input--form-dropdown ${widthClass} ${className}`}
+  isLoading: boolean;
-//       components={{
+  loadingMessage?: () => string;
-//         Option: DescriptionOption,
+  noOptionsMessage?: () => string;
-//         IndicatorsContainer,
+}
-//       }}
+
-//       defaultValue={defaultValue}
+export class Select extends PureComponent<CommonProps & SelectProps> {
-//       value={value}
+  static defaultProps = {
-//       getOptionLabel={getOptionLabel}
+    width: null,
-//       getOptionValue={getOptionValue}
+    className: '',
-//       menuShouldScrollIntoView={false}
+    components: {},
-//       isSearchable={false}
+  };
-//       onChange={onSelected}
+
-//       options={options}
+  render() {
-//       placeholder={placeholder || 'Choose'}
+    const {
-//       styles={ResetStyles}
+      defaultValue,
-//     />
+      getOptionLabel,
-//   );
+      getOptionValue,
-// }
+      onChange,
-// }
+      options,
-//
+      placeholder,
-// export default Select;
+      width,
+      value,
+      className,
+    } = this.props;
+
+    let widthClass = '';
+    if (width) {
+      widthClass = 'width-' + width;
+    }
+
+    const selectClassNames = classNames('gf-form-input', 'gf-form-input--form-dropdown', widthClass, className);
+
+    return (
+      <ReactSelect
+        classNamePrefix="gf-form-select-box"
+        className={selectClassNames}
+        components={{
+          Option,
+          SingleValue,
+          IndicatorsContainer,
+        }}
+        defaultValue={defaultValue}
+        value={value}
+        getOptionLabel={getOptionLabel}
+        getOptionValue={getOptionValue}
+        menuShouldScrollIntoView={false}
+        isSearchable={false}
+        onChange={onChange}
+        options={options}
+        placeholder={placeholder || 'Choose'}
+        styles={ResetStyles}
+      />
+    );
+  }
+}
+
+export class AsyncSelect extends PureComponent<CommonProps & AsyncProps> {
+  static defaultProps = {
+    width: null,
+    className: '',
+    components: {},
+    loadingMessage: () => 'Loading...',
+  };
+
+  render() {
+    const {
+      defaultValue,
+      getOptionLabel,
+      getOptionValue,
+      onChange,
+      placeholder,
+      width,
+      value,
+      className,
+      loadOptions,
+      defaultOptions,
+      isLoading,
+      loadingMessage,
+      noOptionsMessage,
+    } = this.props;
+
+    let widthClass = '';
+    if (width) {
+      widthClass = 'width-' + width;
+    }
+
+    const selectClassNames = classNames('gf-form-input', 'gf-form-input--form-dropdown', widthClass, className);
+
+    return (
+      <ReactAsyncSelect
+        classNamePrefix="gf-form-select-box"
+        className={selectClassNames}
+        components={{
+          Option,
+          SingleValue,
+          IndicatorsContainer,
+          NoOptionsMessage,
+        }}
+        defaultValue={defaultValue}
+        value={value}
+        getOptionLabel={getOptionLabel}
+        getOptionValue={getOptionValue}
+        menuShouldScrollIntoView={false}
+        isSearchable={false}
+        onChange={onChange}
+        loadOptions={loadOptions}
+        isLoading={isLoading}
+        defaultOptions={defaultOptions}
+        placeholder={placeholder || 'Choose'}
+        styles={ResetStyles}
+        loadingMessage={loadingMessage}
+        noOptionsMessage={noOptionsMessage}
+      />
+    );
+  }
+}
+
+export default Select;

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

@@ -1,12 +1,15 @@
+// Libraries
 import React, { Component } from 'react';
-import AsyncSelect from 'react-select/lib/Async';
+
-import PickerOption from './PickerOption';
+// Components
+import { AsyncSelect } from 'app/core/components/Picker/Select';
+
+// Utils & Services
 import { debounce } from 'lodash';
 import { getBackendSrv } from 'app/core/services/backend_srv';
+
+// Types
 import { User } from 'app/types';
-import ResetStyles from './ResetStyles';
-import IndicatorsContainer from './IndicatorsContainer';
-import NoOptionsMessage from './NoOptionsMessage';
 
 export interface Props {
   onSelected: (user: User) => void;
@@ -40,6 +43,7 @@ export class UserPicker extends Component<Props, State> {
       .then(result => {
         return result.map(user => ({
           id: user.userId,
+          value: user.userId,
           label: user.login === user.email ? user.login : `${user.login} - ${user.email}`,
           imgUrl: user.avatarUrl,
           login: user.login,
@@ -57,24 +61,13 @@ export class UserPicker extends Component<Props, State> {
     return (
       <div className="user-picker">
         <AsyncSelect
-          classNamePrefix={`gf-form-select-box`}
+          className={className}
-          isMulti={false}
           isLoading={isLoading}
           defaultOptions={true}
           loadOptions={this.debouncedSearch}
           onChange={onSelected}
-          className={`gf-form-input gf-form-input--form-dropdown ${className || ''}`}
-          styles={ResetStyles}
-          components={{
-            Option: PickerOption,
-            IndicatorsContainer,
-            NoOptionsMessage,
-          }}
           placeholder="Select user"
-          loadingMessage={() => 'Loading...'}
           noOptionsMessage={() => 'No users found'}
-          getOptionValue={i => i.id}
-          getOptionLabel={i => i.label}
         />
       </div>
     );

public/app/core/components/SharedPreferences/SharedPreferences.tsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 
 import { Label } from 'app/core/components/Label/Label';
-import SimplePicker from 'app/core/components/Picker/SimplePicker';
+import Select from 'app/core/components/Picker/Select';
 import { getBackendSrv, BackendSrv } from 'app/core/services/backend_srv';
 
 import { DashboardSearchHit } from 'app/types';
@@ -17,12 +17,12 @@ export interface State {
   dashboards: DashboardSearchHit[];
 }
 
-const themes = [{ value: '', text: 'Default' }, { value: 'dark', text: 'Dark' }, { value: 'light', text: 'Light' }];
+const themes = [{ value: '', label: 'Default' }, { value: 'dark', label: 'Dark' }, { value: 'light', label: 'Light' }];
 
 const timezones = [
-  { value: '', text: 'Default' },
+  { value: '', label: 'Default' },
-  { value: 'browser', text: 'Local browser time' },
+  { value: 'browser', label: 'Local browser time' },
-  { value: 'utc', text: 'UTC' },
+  { value: 'utc', label: 'UTC' },
 ];
 
 export class SharedPreferences extends PureComponent<Props, State> {
@@ -91,12 +91,10 @@ export class SharedPreferences extends PureComponent<Props, State> {
         <h3 className="page-heading">Preferences</h3>
         <div className="gf-form">
           <span className="gf-form-label width-11">UI Theme</span>
-          <SimplePicker
+          <Select
             value={themes.find(item => item.value === theme)}
             options={themes}
-            getOptionValue={i => i.value}
+            onChange={theme => this.onThemeChanged(theme.value)}
-            getOptionLabel={i => i.text}
-            onSelected={theme => this.onThemeChanged(theme.value)}
             width={20}
           />
         </div>
@@ -107,11 +105,11 @@ export class SharedPreferences extends PureComponent<Props, State> {
           >
             Home Dashboard
           </Label>
-          <SimplePicker
+          <Select
             value={dashboards.find(dashboard => dashboard.id === homeDashboardId)}
             getOptionValue={i => i.id}
             getOptionLabel={i => i.title}
-            onSelected={(dashboard: DashboardSearchHit) => this.onHomeDashboardChanged(dashboard.id)}
+            onChange={(dashboard: DashboardSearchHit) => this.onHomeDashboardChanged(dashboard.id)}
             options={dashboards}
             placeholder="Chose default dashboard"
             width={20}
@@ -119,11 +117,9 @@ export class SharedPreferences extends PureComponent<Props, State> {
         </div>
         <div className="gf-form">
           <label className="gf-form-label width-11">Timezone</label>
-          <SimplePicker
+          <Select
             value={timezones.find(item => item.value === timezone)}
-            getOptionValue={i => i.value}
+            onChange={timezone => this.onTimeZoneChanged(timezone.value)}
-            getOptionLabel={i => i.text}
-            onSelected={timezone => this.onTimeZoneChanged(timezone.value)}
             options={timezones}
             width={20}
           />

public/app/features/panel/panel_header.ts

@@ -111,11 +111,11 @@ function panelHeader($compile) {
        */
       function togglePanelStackPosition() {
         const menuOpenClass = 'dropdown-menu-open';
-        const panelGridClass = '.react-grid-item.panel';
+        const panelGridClass = '.react-grid-item';
 
         let panelElem = elem
           .find('[data-toggle=dropdown]')
-          .parentsUntil('.panel')
+          .parentsUntil(panelGridClass)
           .parent();
         const menuElem = elem.find('[data-toggle=dropdown]').parent();
         panelElem = panelElem && panelElem.length ? panelElem[0] : undefined;

public/app/plugins/panel/gauge/ValueOptions.tsx

@@ -1,21 +1,21 @@
 import React, { PureComponent } from 'react';
 import { Label } from 'app/core/components/Label/Label';
-import SimplePicker from 'app/core/components/Picker/SimplePicker';
+import Select from 'app/core/components/Picker/Select';
 import UnitPicker from 'app/core/components/Picker/Unit/UnitPicker';
 import { OptionModuleProps } from './module';
 
 const statOptions = [
-  { value: 'min', text: 'Min' },
+  { value: 'min', label: 'Min' },
-  { value: 'max', text: 'Max' },
+  { value: 'max', label: 'Max' },
-  { value: 'avg', text: 'Average' },
+  { value: 'avg', label: 'Average' },
-  { value: 'current', text: 'Current' },
+  { value: 'current', label: 'Current' },
-  { value: 'total', text: 'Total' },
+  { value: 'total', label: 'Total' },
-  { value: 'name', text: 'Name' },
+  { value: 'name', label: 'Name' },
-  { value: 'first', text: 'First' },
+  { value: 'first', label: 'First' },
-  { value: 'delta', text: 'Delta' },
+  { value: 'delta', label: 'Delta' },
-  { value: 'diff', text: 'Difference' },
+  { value: 'diff', label: 'Difference' },
-  { value: 'range', text: 'Range' },
+  { value: 'range', label: 'Range' },
-  { value: 'last_time', text: 'Time of last point' },
+  { value: 'last_time', label: 'Time of last point' },
 ];
 
 const labelWidth = 6;
@@ -43,12 +43,10 @@ export default class ValueOptions extends PureComponent<OptionModuleProps> {
         <h5 className="page-heading">Value</h5>
         <div className="gf-form-inline">
           <Label width={labelWidth}>Stat</Label>
-          <SimplePicker
+          <Select
             width={12}
             options={statOptions}
-            getOptionLabel={i => i.text}
+            onChange={this.onStatChange}
-            getOptionValue={i => i.value}
-            onSelected={this.onStatChange}
             value={statOptions.find(option => option.value === stat)}
           />
         </div>