From 7819529d459c6c20aab524c26528212f754b72fb Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Thu, 10 Jan 2019 13:29:53 +0100 Subject: [PATCH 1/4] Migrate Select components to @grafana/ui --- .../components/Select/IndicatorsContainer.tsx | 2 +- .../components/Select/NoOptionsMessage.tsx | 0 .../src}/components/Select/OptionGroup.tsx | 2 +- .../components/Select/PickerOption.test.tsx | 34 +++++++++++++------ .../src}/components/Select/PickerOption.tsx | 2 +- .../src}/components/Select/Select.tsx | 8 ++--- .../components/Select/resetSelectStyles.ts | 27 +++++++++++++++ packages/grafana-ui/src/components/index.ts | 6 ++++ .../PermissionList/AddPermission.tsx | 2 +- .../DisabledPermissionListItem.tsx | 2 +- .../PermissionList/PermissionListItem.tsx | 2 +- .../components/Select/DataSourcePicker.tsx | 2 +- .../core/components/Select/ResetStyles.tsx | 25 -------------- .../app/core/components/Select/TeamPicker.tsx | 2 +- .../app/core/components/Select/UnitPicker.tsx | 2 +- .../app/core/components/Select/UserPicker.tsx | 2 +- .../SharedPreferences/SharedPreferences.tsx | 2 +- .../core/components/TagFilter/TagFilter.tsx | 6 ++-- public/app/plugins/panel/gauge/MappingRow.tsx | 2 +- .../app/plugins/panel/gauge/ValueOptions.tsx | 2 +- yarn.lock | 6 ++-- 21 files changed, 78 insertions(+), 60 deletions(-) rename {public/app/core => packages/grafana-ui/src}/components/Select/IndicatorsContainer.tsx (88%) rename {public/app/core => packages/grafana-ui/src}/components/Select/NoOptionsMessage.tsx (100%) rename {public/app/core => packages/grafana-ui/src}/components/Select/OptionGroup.tsx (96%) rename {public/app/core => packages/grafana-ui/src}/components/Select/PickerOption.test.tsx (55%) rename {public/app/core => packages/grafana-ui/src}/components/Select/PickerOption.tsx (96%) rename {public/app/core => packages/grafana-ui/src}/components/Select/Select.tsx (97%) create mode 100644 packages/grafana-ui/src/components/Select/resetSelectStyles.ts delete mode 100644 public/app/core/components/Select/ResetStyles.tsx diff --git a/public/app/core/components/Select/IndicatorsContainer.tsx b/packages/grafana-ui/src/components/Select/IndicatorsContainer.tsx similarity index 88% rename from public/app/core/components/Select/IndicatorsContainer.tsx rename to packages/grafana-ui/src/components/Select/IndicatorsContainer.tsx index d4de51a2cef..8fc8e0b08d3 100644 --- a/public/app/core/components/Select/IndicatorsContainer.tsx +++ b/packages/grafana-ui/src/components/Select/IndicatorsContainer.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { components } from '@torkelo/react-select'; -export const IndicatorsContainer = props => { +export const IndicatorsContainer = (props: any) => { const isOpen = props.selectProps.menuIsOpen; return ( diff --git a/public/app/core/components/Select/NoOptionsMessage.tsx b/packages/grafana-ui/src/components/Select/NoOptionsMessage.tsx similarity index 100% rename from public/app/core/components/Select/NoOptionsMessage.tsx rename to packages/grafana-ui/src/components/Select/NoOptionsMessage.tsx diff --git a/public/app/core/components/Select/OptionGroup.tsx b/packages/grafana-ui/src/components/Select/OptionGroup.tsx similarity index 96% rename from public/app/core/components/Select/OptionGroup.tsx rename to packages/grafana-ui/src/components/Select/OptionGroup.tsx index a001f58c681..ed2b72a537c 100644 --- a/public/app/core/components/Select/OptionGroup.tsx +++ b/packages/grafana-ui/src/components/Select/OptionGroup.tsx @@ -24,7 +24,7 @@ export default class OptionGroup extends PureComponent = { cx: jest.fn(), clearValue: jest.fn(), - onSelect: jest.fn(), getStyles: jest.fn(), getValue: jest.fn(), hasValue: true, @@ -18,21 +18,33 @@ const model = { isFocused: false, isSelected: false, innerRef: null, - innerProps: null, - label: 'Option label', - type: null, - children: 'Model title', - data: { - title: 'Model title', - imgUrl: 'url/to/avatar', - label: 'User picker label', + innerProps: { + id: '', + key: '', + onClick: jest.fn(), + onMouseOver: jest.fn(), + tabIndex: 1, }, + label: 'Option label', + type: 'option', + children: 'Model title', className: 'class-for-user-picker', }; describe('PickerOption', () => { it('renders correctly', () => { - const tree = renderer.create().toJSON(); + const tree = renderer + .create( + + ) + .toJSON(); expect(tree).toMatchSnapshot(); }); }); diff --git a/public/app/core/components/Select/PickerOption.tsx b/packages/grafana-ui/src/components/Select/PickerOption.tsx similarity index 96% rename from public/app/core/components/Select/PickerOption.tsx rename to packages/grafana-ui/src/components/Select/PickerOption.tsx index d263f6f832b..ac6a5c62783 100644 --- a/public/app/core/components/Select/PickerOption.tsx +++ b/packages/grafana-ui/src/components/Select/PickerOption.tsx @@ -28,7 +28,7 @@ export const Option = (props: ExtendedOptionProps) => { }; // was not able to type this without typescript error -export const SingleValue = props => { +export const SingleValue = (props: any) => { const { children, data } = props; return ( diff --git a/public/app/core/components/Select/Select.tsx b/packages/grafana-ui/src/components/Select/Select.tsx similarity index 97% rename from public/app/core/components/Select/Select.tsx rename to packages/grafana-ui/src/components/Select/Select.tsx index f66e07c9ed6..c456de1c94d 100644 --- a/public/app/core/components/Select/Select.tsx +++ b/packages/grafana-ui/src/components/Select/Select.tsx @@ -10,7 +10,7 @@ import { Option, SingleValue } from './PickerOption'; import OptionGroup from './OptionGroup'; import IndicatorsContainer from './IndicatorsContainer'; import NoOptionsMessage from './NoOptionsMessage'; -import ResetStyles from './ResetStyles'; +import resetSelectStyles from './resetSelectStyles'; import { CustomScrollbar } from '@grafana/ui'; export interface SelectOptionItem { @@ -53,7 +53,7 @@ interface AsyncProps { loadingMessage?: () => string; } -export const MenuList = props => { +export const MenuList = (props: any) => { return ( {props.children} @@ -127,7 +127,7 @@ export class Select extends PureComponent { onChange={onChange} options={options} placeholder={placeholder || 'Choose'} - styles={ResetStyles} + styles={resetSelectStyles()} isDisabled={isDisabled} isLoading={isLoading} isClearable={isClearable} @@ -212,7 +212,7 @@ export class AsyncSelect extends PureComponent { isLoading={isLoading} defaultOptions={defaultOptions} placeholder={placeholder || 'Choose'} - styles={ResetStyles} + styles={resetSelectStyles()} loadingMessage={loadingMessage} noOptionsMessage={noOptionsMessage} isDisabled={isDisabled} diff --git a/packages/grafana-ui/src/components/Select/resetSelectStyles.ts b/packages/grafana-ui/src/components/Select/resetSelectStyles.ts new file mode 100644 index 00000000000..a980741c17c --- /dev/null +++ b/packages/grafana-ui/src/components/Select/resetSelectStyles.ts @@ -0,0 +1,27 @@ +export default function resetSelectStyles() { + return { + clearIndicator: () => ({}), + container: () => ({}), + control: () => ({}), + dropdownIndicator: () => ({}), + group: () => ({}), + groupHeading: () => ({}), + indicatorsContainer: () => ({}), + indicatorSeparator: () => ({}), + input: () => ({}), + loadingIndicator: () => ({}), + loadingMessage: () => ({}), + menu: () => ({}), + menuList: ({ maxHeight }: { maxHeight: number }) => ({ + maxHeight, + }), + multiValue: () => ({}), + multiValueLabel: () => ({}), + multiValueRemove: () => ({}), + noOptionsMessage: () => ({}), + option: () => ({}), + placeholder: () => ({}), + singleValue: () => ({}), + valueContainer: () => ({}), + }; +} diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts index abb1cf1b34c..9780b841959 100644 --- a/packages/grafana-ui/src/components/index.ts +++ b/packages/grafana-ui/src/components/index.ts @@ -2,3 +2,9 @@ export { DeleteButton } from './DeleteButton/DeleteButton'; export { Tooltip } from './Tooltip/Tooltip'; export { Portal } from './Portal/Portal'; export { CustomScrollbar } from './CustomScrollbar/CustomScrollbar'; + +// Select +export { Select, AsyncSelect, SelectOptionItem } from './Select/Select'; +export { IndicatorsContainer } from './Select/IndicatorsContainer'; +export { NoOptionsMessage } from './Select/NoOptionsMessage'; +export { default as resetSelectStyles } from './Select/resetSelectStyles'; diff --git a/public/app/core/components/PermissionList/AddPermission.tsx b/public/app/core/components/PermissionList/AddPermission.tsx index 749bef680bf..30219371257 100644 --- a/public/app/core/components/PermissionList/AddPermission.tsx +++ b/public/app/core/components/PermissionList/AddPermission.tsx @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import { UserPicker } from 'app/core/components/Select/UserPicker'; import { TeamPicker, Team } from 'app/core/components/Select/TeamPicker'; -import { Select, SelectOptionItem } from 'app/core/components/Select/Select'; +import { Select, SelectOptionItem } from '@grafana/ui'; import { User } from 'app/types'; import { dashboardPermissionLevels, diff --git a/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx b/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx index d3f9ddbb1fb..ebf3cbad1bc 100644 --- a/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx +++ b/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import Select from 'app/core/components/Select/Select'; +import { Select } from '@grafana/ui'; import { dashboardPermissionLevels } from 'app/types/acl'; export interface Props { diff --git a/public/app/core/components/PermissionList/PermissionListItem.tsx b/public/app/core/components/PermissionList/PermissionListItem.tsx index e726667cfbb..c33b564154a 100644 --- a/public/app/core/components/PermissionList/PermissionListItem.tsx +++ b/public/app/core/components/PermissionList/PermissionListItem.tsx @@ -1,5 +1,5 @@ import React, { PureComponent } from 'react'; -import { Select } from 'app/core/components/Select/Select'; +import { Select } from '@grafana/ui'; import { dashboardPermissionLevels, DashboardAcl, PermissionLevel } from 'app/types/acl'; import { FolderInfo } from 'app/types'; diff --git a/public/app/core/components/Select/DataSourcePicker.tsx b/public/app/core/components/Select/DataSourcePicker.tsx index 1a9081038c0..372c4cd4013 100644 --- a/public/app/core/components/Select/DataSourcePicker.tsx +++ b/public/app/core/components/Select/DataSourcePicker.tsx @@ -3,7 +3,7 @@ import React, { PureComponent } from 'react'; import _ from 'lodash'; // Components -import Select from './Select'; +import { Select } from '@grafana/ui'; // Types import { DataSourceSelectItem } from 'app/types'; diff --git a/public/app/core/components/Select/ResetStyles.tsx b/public/app/core/components/Select/ResetStyles.tsx deleted file mode 100644 index c34abb544ab..00000000000 --- a/public/app/core/components/Select/ResetStyles.tsx +++ /dev/null @@ -1,25 +0,0 @@ -export default { - clearIndicator: () => ({}), - container: () => ({}), - control: () => ({}), - dropdownIndicator: () => ({}), - group: () => ({}), - groupHeading: () => ({}), - indicatorsContainer: () => ({}), - indicatorSeparator: () => ({}), - input: () => ({}), - loadingIndicator: () => ({}), - loadingMessage: () => ({}), - menu: () => ({}), - menuList: ({ maxHeight }: { maxHeight: number }) => ({ - maxHeight, - }), - multiValue: () => ({}), - multiValueLabel: () => ({}), - multiValueRemove: () => ({}), - noOptionsMessage: () => ({}), - option: () => ({}), - placeholder: () => ({}), - singleValue: () => ({}), - valueContainer: () => ({}), -}; diff --git a/public/app/core/components/Select/TeamPicker.tsx b/public/app/core/components/Select/TeamPicker.tsx index bc608318806..8d9e1d48d81 100644 --- a/public/app/core/components/Select/TeamPicker.tsx +++ b/public/app/core/components/Select/TeamPicker.tsx @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import _ from 'lodash'; -import { AsyncSelect } from './Select'; +import { AsyncSelect } from '@grafana/ui'; import { debounce } from 'lodash'; import { getBackendSrv } from 'app/core/services/backend_srv'; diff --git a/public/app/core/components/Select/UnitPicker.tsx b/public/app/core/components/Select/UnitPicker.tsx index 75885cbbb84..54b064df7dc 100644 --- a/public/app/core/components/Select/UnitPicker.tsx +++ b/public/app/core/components/Select/UnitPicker.tsx @@ -1,5 +1,5 @@ import React, { PureComponent } from 'react'; -import Select from './Select'; +import { Select } from '@grafana/ui'; import kbn from 'app/core/utils/kbn'; interface Props { diff --git a/public/app/core/components/Select/UserPicker.tsx b/public/app/core/components/Select/UserPicker.tsx index 8496d707105..ff4ae32f068 100644 --- a/public/app/core/components/Select/UserPicker.tsx +++ b/public/app/core/components/Select/UserPicker.tsx @@ -3,7 +3,7 @@ import React, { Component } from 'react'; import _ from 'lodash'; // Components -import { AsyncSelect } from './Select'; +import { AsyncSelect } from '@grafana/ui'; // Utils & Services import { debounce } from 'lodash'; diff --git a/public/app/core/components/SharedPreferences/SharedPreferences.tsx b/public/app/core/components/SharedPreferences/SharedPreferences.tsx index d41626d9a2f..b13393ab2e1 100644 --- a/public/app/core/components/SharedPreferences/SharedPreferences.tsx +++ b/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 Select from 'app/core/components/Select/Select'; +import { Select } from '@grafana/ui'; import { getBackendSrv, BackendSrv } from 'app/core/services/backend_srv'; import { DashboardSearchHit } from 'app/types'; diff --git a/public/app/core/components/TagFilter/TagFilter.tsx b/public/app/core/components/TagFilter/TagFilter.tsx index 4b2de6b1b16..7e8bc9c6fd2 100644 --- a/public/app/core/components/TagFilter/TagFilter.tsx +++ b/public/app/core/components/TagFilter/TagFilter.tsx @@ -1,12 +1,10 @@ import React from 'react'; +import { NoOptionsMessage, IndicatorsContainer, resetSelectStyles } from '@grafana/ui'; import AsyncSelect from '@torkelo/react-select/lib/Async'; import { TagOption } from './TagOption'; import { TagBadge } from './TagBadge'; -import IndicatorsContainer from 'app/core/components/Select/IndicatorsContainer'; -import NoOptionsMessage from 'app/core/components/Select/NoOptionsMessage'; import { components } from '@torkelo/react-select'; -import ResetStyles from 'app/core/components/Select/ResetStyles'; export interface Props { tags: string[]; @@ -51,7 +49,7 @@ export class TagFilter extends React.Component { getOptionValue: i => i.value, getOptionLabel: i => i.label, value: tags, - styles: ResetStyles, + styles: resetSelectStyles(), filterOption: (option, searchQuery) => { const regex = RegExp(searchQuery, 'i'); return regex.test(option.value); diff --git a/public/app/plugins/panel/gauge/MappingRow.tsx b/public/app/plugins/panel/gauge/MappingRow.tsx index 35d0b2e638c..277afb4fd5c 100644 --- a/public/app/plugins/panel/gauge/MappingRow.tsx +++ b/public/app/plugins/panel/gauge/MappingRow.tsx @@ -1,6 +1,6 @@ import React, { PureComponent } from 'react'; import { Label } from 'app/core/components/Label/Label'; -import { Select } from 'app/core/components/Select/Select'; +import { Select } from '@grafana/ui'; import { MappingType, RangeMap, ValueMap } from 'app/types'; interface Props { diff --git a/public/app/plugins/panel/gauge/ValueOptions.tsx b/public/app/plugins/panel/gauge/ValueOptions.tsx index 4aafc0b0457..e8af6bc2fe1 100644 --- a/public/app/plugins/panel/gauge/ValueOptions.tsx +++ b/public/app/plugins/panel/gauge/ValueOptions.tsx @@ -1,6 +1,6 @@ import React, { PureComponent } from 'react'; import { Label } from 'app/core/components/Label/Label'; -import Select from 'app/core/components/Select/Select'; +import { Select} from '@grafana/ui'; import UnitPicker from 'app/core/components/Select/UnitPicker'; import { PanelOptionsProps } from '@grafana/ui'; import { Options } from './types'; diff --git a/yarn.lock b/yarn.lock index 8eff64ca822..c5734ffcad3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1098,14 +1098,14 @@ dependencies: "@types/react" "*" -"@types/react-transition-group@^2.0.15": +"@types/react-transition-group@*", "@types/react-transition-group@^2.0.15": version "2.0.15" resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-2.0.15.tgz#e5ee3fe558832e141cc6041bdd54caea7b787af8" integrity sha512-S0QnNzbHoWXDbKBl/xk5dxA4FT+BNlBcI3hku991cl8Cz3ytOkUMcCRtzdX11eb86E131bSsQqy5WrPCdJYblw== dependencies: "@types/react" "*" -"@types/react@*", "@types/react@^16.1.0", "@types/react@^16.7.6": +"@types/react@*", "@types/react@16.7.6", "@types/react@^16.1.0", "@types/react@^16.7.6": version "16.7.6" resolved "https://registry.yarnpkg.com/@types/react/-/react-16.7.6.tgz#80e4bab0d0731ad3ae51f320c4b08bdca5f03040" integrity sha512-QBUfzftr/8eg/q3ZRgf/GaDP6rTYc7ZNem+g4oZM38C9vXyV8AWRWaTQuW5yCoZTsfHrN7b3DeEiUnqH9SrnpA== @@ -3168,7 +3168,7 @@ caniuse-api@^1.5.2: lodash.memoize "^4.1.2" lodash.uniq "^4.5.0" -caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639: +caniuse-db@1.0.30000772, caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639: version "1.0.30000772" resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000772.tgz#51aae891768286eade4a3d8319ea76d6a01b512b" integrity sha1-UarokXaChureSj2DGep21qAbUSs= From 53f0f08efab58384aac5f73c76c5de381f9f36db Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Thu, 10 Jan 2019 14:24:24 +0100 Subject: [PATCH 2/4] Fixing TS and updating snapshot --- .../src/components/Select/IndicatorsContainer.tsx | 3 +++ .../grafana-ui/src/components/Select/NoOptionsMessage.tsx | 4 ++++ .../grafana-ui/src/components/Select/PickerOption.test.tsx | 2 -- packages/grafana-ui/src/components/Select/PickerOption.tsx | 3 +++ packages/grafana-ui/src/components/Select/Select.tsx | 5 +++++ .../Select/__snapshots__/PickerOption.test.tsx.snap | 7 ++++++- 6 files changed, 21 insertions(+), 3 deletions(-) rename {public/app/core => packages/grafana-ui/src}/components/Select/__snapshots__/PickerOption.test.tsx.snap (81%) diff --git a/packages/grafana-ui/src/components/Select/IndicatorsContainer.tsx b/packages/grafana-ui/src/components/Select/IndicatorsContainer.tsx index 8fc8e0b08d3..260fe6ebbdf 100644 --- a/packages/grafana-ui/src/components/Select/IndicatorsContainer.tsx +++ b/packages/grafana-ui/src/components/Select/IndicatorsContainer.tsx @@ -1,4 +1,7 @@ import React from 'react'; + +// Ignoring because I couldn't get @types/react-select work wih Torkel's fork +// @ts-ignore import { components } from '@torkelo/react-select'; export const IndicatorsContainer = (props: any) => { diff --git a/packages/grafana-ui/src/components/Select/NoOptionsMessage.tsx b/packages/grafana-ui/src/components/Select/NoOptionsMessage.tsx index 5fe229340a4..1cec06a5301 100644 --- a/packages/grafana-ui/src/components/Select/NoOptionsMessage.tsx +++ b/packages/grafana-ui/src/components/Select/NoOptionsMessage.tsx @@ -1,5 +1,9 @@ import React from 'react'; + +// Ignoring because I couldn't get @types/react-select work wih Torkel's fork +// @ts-ignore import { components } from '@torkelo/react-select'; +// @ts-ignore import { OptionProps } from '@torkelo/react-select/lib/components/Option'; export interface Props { diff --git a/packages/grafana-ui/src/components/Select/PickerOption.test.tsx b/packages/grafana-ui/src/components/Select/PickerOption.test.tsx index 96a4ff9cf2a..20187734c1a 100644 --- a/packages/grafana-ui/src/components/Select/PickerOption.test.tsx +++ b/packages/grafana-ui/src/components/Select/PickerOption.test.tsx @@ -38,9 +38,7 @@ describe('PickerOption', () => { ) diff --git a/packages/grafana-ui/src/components/Select/PickerOption.tsx b/packages/grafana-ui/src/components/Select/PickerOption.tsx index ac6a5c62783..4bbcb74a563 100644 --- a/packages/grafana-ui/src/components/Select/PickerOption.tsx +++ b/packages/grafana-ui/src/components/Select/PickerOption.tsx @@ -1,4 +1,7 @@ import React from 'react'; + +// Ignoring because I couldn't get @types/react-select work wih Torkel's fork +// @ts-ignore import { components } from '@torkelo/react-select'; import { OptionProps } from 'react-select/lib/components/Option'; diff --git a/packages/grafana-ui/src/components/Select/Select.tsx b/packages/grafana-ui/src/components/Select/Select.tsx index c456de1c94d..a2584ce8124 100644 --- a/packages/grafana-ui/src/components/Select/Select.tsx +++ b/packages/grafana-ui/src/components/Select/Select.tsx @@ -1,8 +1,13 @@ // Libraries import classNames from 'classnames'; import React, { PureComponent } from 'react'; + +// Ignoring because I couldn't get @types/react-select work wih Torkel's fork +// @ts-ignore import { default as ReactSelect } from '@torkelo/react-select'; +// @ts-ignore import { default as ReactAsyncSelect } from '@torkelo/react-select/lib/Async'; +// @ts-ignore import { components } from '@torkelo/react-select'; // Components diff --git a/public/app/core/components/Select/__snapshots__/PickerOption.test.tsx.snap b/packages/grafana-ui/src/components/Select/__snapshots__/PickerOption.test.tsx.snap similarity index 81% rename from public/app/core/components/Select/__snapshots__/PickerOption.test.tsx.snap rename to packages/grafana-ui/src/components/Select/__snapshots__/PickerOption.test.tsx.snap index 2136c22b1c6..c4185025a5d 100644 --- a/public/app/core/components/Select/__snapshots__/PickerOption.test.tsx.snap +++ b/packages/grafana-ui/src/components/Select/__snapshots__/PickerOption.test.tsx.snap @@ -1,7 +1,12 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`PickerOption renders correctly 1`] = ` -
+
From d322717f3ee8551fffe11d883aff8446241a1ff6 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Thu, 10 Jan 2019 15:21:11 +0100 Subject: [PATCH 3/4] Renamed Select related components: Picker* to Select*, Option* to SelectOption* --- packages/grafana-ui/src/components/Select/Select.tsx | 8 ++++---- .../{PickerOption.test.tsx => SelectOption.test.tsx} | 6 +++--- .../Select/{PickerOption.tsx => SelectOption.tsx} | 4 ++-- .../Select/{OptionGroup.tsx => SelectOptionGroup.tsx} | 2 +- ...kerOption.test.tsx.snap => SelectOption.test.tsx.snap} | 2 +- 5 files changed, 11 insertions(+), 11 deletions(-) rename packages/grafana-ui/src/components/Select/{PickerOption.test.tsx => SelectOption.test.tsx} (90%) rename packages/grafana-ui/src/components/Select/{PickerOption.tsx => SelectOption.tsx} (93%) rename packages/grafana-ui/src/components/Select/{OptionGroup.tsx => SelectOptionGroup.tsx} (93%) rename packages/grafana-ui/src/components/Select/__snapshots__/{PickerOption.test.tsx.snap => SelectOption.test.tsx.snap} (90%) diff --git a/packages/grafana-ui/src/components/Select/Select.tsx b/packages/grafana-ui/src/components/Select/Select.tsx index a2584ce8124..b3b0c8efbbb 100644 --- a/packages/grafana-ui/src/components/Select/Select.tsx +++ b/packages/grafana-ui/src/components/Select/Select.tsx @@ -11,8 +11,8 @@ import { default as ReactAsyncSelect } from '@torkelo/react-select/lib/Async'; import { components } from '@torkelo/react-select'; // Components -import { Option, SingleValue } from './PickerOption'; -import OptionGroup from './OptionGroup'; +import { SelectOption, SingleValue } from './SelectOption'; +import SelectOptionGroup from './SelectOptionGroup'; import IndicatorsContainer from './IndicatorsContainer'; import NoOptionsMessage from './NoOptionsMessage'; import resetSelectStyles from './resetSelectStyles'; @@ -117,11 +117,11 @@ export class Select extends PureComponent { classNamePrefix="gf-form-select-box" className={selectClassNames} components={{ - Option, + Option: SelectOption, SingleValue, IndicatorsContainer, MenuList, - Group: OptionGroup, + Group: SelectOptionGroup, }} defaultValue={defaultValue} value={value} diff --git a/packages/grafana-ui/src/components/Select/PickerOption.test.tsx b/packages/grafana-ui/src/components/Select/SelectOption.test.tsx similarity index 90% rename from packages/grafana-ui/src/components/Select/PickerOption.test.tsx rename to packages/grafana-ui/src/components/Select/SelectOption.test.tsx index 20187734c1a..a7326b3f4db 100644 --- a/packages/grafana-ui/src/components/Select/PickerOption.test.tsx +++ b/packages/grafana-ui/src/components/Select/SelectOption.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import renderer from 'react-test-renderer'; -import PickerOption from './PickerOption'; +import SelectOption from './SelectOption'; import { OptionProps } from 'react-select/lib/components/Option'; const model: OptionProps = { @@ -31,11 +31,11 @@ const model: OptionProps = { className: 'class-for-user-picker', }; -describe('PickerOption', () => { +describe('SelectOption', () => { it('renders correctly', () => { const tree = renderer .create( - { }; } -export const Option = (props: ExtendedOptionProps) => { +export const SelectOption = (props: ExtendedOptionProps) => { const { children, isSelected, data } = props; return ( @@ -44,4 +44,4 @@ export const SingleValue = (props: any) => { ); }; -export default Option; +export default SelectOption; diff --git a/packages/grafana-ui/src/components/Select/OptionGroup.tsx b/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx similarity index 93% rename from packages/grafana-ui/src/components/Select/OptionGroup.tsx rename to packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx index ed2b72a537c..30842f02e29 100644 --- a/packages/grafana-ui/src/components/Select/OptionGroup.tsx +++ b/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx @@ -9,7 +9,7 @@ interface State { expanded: boolean; } -export default class OptionGroup extends PureComponent { +export default class SelectOptionGroup extends PureComponent { state = { expanded: false, }; diff --git a/packages/grafana-ui/src/components/Select/__snapshots__/PickerOption.test.tsx.snap b/packages/grafana-ui/src/components/Select/__snapshots__/SelectOption.test.tsx.snap similarity index 90% rename from packages/grafana-ui/src/components/Select/__snapshots__/PickerOption.test.tsx.snap rename to packages/grafana-ui/src/components/Select/__snapshots__/SelectOption.test.tsx.snap index c4185025a5d..c52be902edd 100644 --- a/packages/grafana-ui/src/components/Select/__snapshots__/PickerOption.test.tsx.snap +++ b/packages/grafana-ui/src/components/Select/__snapshots__/SelectOption.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`PickerOption renders correctly 1`] = ` +exports[`SelectOption renders correctly 1`] = `
Date: Fri, 11 Jan 2019 09:50:05 +0100 Subject: [PATCH 4/4] Move Select styles to grafana/ui --- .../grafana-ui/src/components/Select/_Select.scss | 0 packages/grafana-ui/src/components/index.scss | 1 + public/sass/_grafana.scss | 9 ++++----- 3 files changed, 5 insertions(+), 5 deletions(-) rename public/sass/components/_form_select_box.scss => packages/grafana-ui/src/components/Select/_Select.scss (100%) diff --git a/public/sass/components/_form_select_box.scss b/packages/grafana-ui/src/components/Select/_Select.scss similarity index 100% rename from public/sass/components/_form_select_box.scss rename to packages/grafana-ui/src/components/Select/_Select.scss diff --git a/packages/grafana-ui/src/components/index.scss b/packages/grafana-ui/src/components/index.scss index e1d1474bb16..77a2caa9c5c 100644 --- a/packages/grafana-ui/src/components/index.scss +++ b/packages/grafana-ui/src/components/index.scss @@ -1,3 +1,4 @@ @import 'CustomScrollbar/CustomScrollbar'; @import 'DeleteButton/DeleteButton'; @import 'Tooltip/Tooltip'; +@import 'Select/Select'; diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 10cc7335bdf..c8ad1ce8edc 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -1,4 +1,4 @@ -// DEPENDENCIES + // DEPENDENCIES @import '../../node_modules/react-table/react-table.css'; // VENDOR @@ -38,9 +38,6 @@ @import 'layout/lists'; @import 'layout/page'; -// LOAD @grafana/ui components -@import '../../packages/grafana-ui/src/index'; - // COMPONENTS @import 'components/scrollbar'; @import 'components/cards'; @@ -97,7 +94,6 @@ @import 'components/page_header'; @import 'components/dashboard_settings'; @import 'components/empty_list_cta'; -@import 'components/form_select_box'; @import 'components/panel_editor'; @import 'components/toolbar'; @import 'components/add_data_source.scss'; @@ -107,6 +103,9 @@ @import 'components/value-mappings'; @import 'components/popover-box'; +// LOAD @grafana/ui components +@import '../../packages/grafana-ui/src/index'; + // PAGES @import 'pages/login'; @import 'pages/dashboard';