From c90979a8f0602703942dd2c143c20e89ff64ea4d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= Date: Wed, 16 Jan 2019 10:49:48 +0100 Subject: [PATCH] Moved ValueMappings to grafana/ui/component and renamed it ValueMappingsEditor --- .../ValueMappingsEditor}/MappingRow.tsx | 5 +- .../ValueMappingsEditor.test.tsx | 11 ++-- .../ValueMappingsEditor.tsx | 6 +- .../_ValueMappingsEditor.scss | 0 .../ValueMappingsEditor.test.tsx.snap | 56 +++++++++++++++++++ packages/grafana-ui/src/components/index.scss | 1 + packages/grafana-ui/src/components/index.ts | 1 + .../plugins/panel/gauge/GaugePanelOptions.tsx | 4 +- public/sass/_grafana.scss | 3 +- 9 files changed, 75 insertions(+), 12 deletions(-) rename {public/app/plugins/panel/gauge => packages/grafana-ui/src/components/ValueMappingsEditor}/MappingRow.tsx (95%) rename public/app/plugins/panel/gauge/ValueMappings.test.tsx => packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.test.tsx (84%) rename public/app/plugins/panel/gauge/ValueMappings.tsx => packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx (88%) rename public/sass/components/_value-mappings.scss => packages/grafana-ui/src/components/ValueMappingsEditor/_ValueMappingsEditor.scss (100%) create mode 100644 packages/grafana-ui/src/components/ValueMappingsEditor/__snapshots__/ValueMappingsEditor.test.tsx.snap diff --git a/public/app/plugins/panel/gauge/MappingRow.tsx b/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx similarity index 95% rename from public/app/plugins/panel/gauge/MappingRow.tsx rename to packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx index 4aeb85a52d3..8d3407329bf 100644 --- a/public/app/plugins/panel/gauge/MappingRow.tsx +++ b/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx @@ -1,5 +1,8 @@ import React, { PureComponent } from 'react'; -import { MappingType, RangeMap, Select, ValueMap, Label } from '@grafana/ui'; + +import { ValueMap, RangeMap, MappingType } from '../../types/panel'; +import { Label } from '../Label/Label'; +import { Select } from '../Select/Select'; interface Props { mapping: ValueMap | RangeMap; diff --git a/public/app/plugins/panel/gauge/ValueMappings.test.tsx b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.test.tsx similarity index 84% rename from public/app/plugins/panel/gauge/ValueMappings.test.tsx rename to packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.test.tsx index 07db4028c68..fcb614f8e6f 100644 --- a/public/app/plugins/panel/gauge/ValueMappings.test.tsx +++ b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.test.tsx @@ -1,9 +1,10 @@ import React from 'react'; import { shallow } from 'enzyme'; -import { GaugeOptions, MappingType, PanelOptionsProps } from '@grafana/ui'; -import { defaultProps } from 'app/plugins/panel/gauge/GaugePanelOptions'; -import ValueMappings from './ValueMappings'; +import { defaultProps } from 'app/plugins/panel/gauge/GaugePanelOptions'; +import { ValueMappingsEditor } from './ValueMappingsEditor'; +import { PanelOptionsProps, MappingType } from '../../types/panel'; +import { GaugeOptions } from '../../types/gauge'; const setup = (propOverrides?: object) => { const props: PanelOptionsProps = { @@ -19,9 +20,9 @@ const setup = (propOverrides?: object) => { Object.assign(props, propOverrides); - const wrapper = shallow(); + const wrapper = shallow(); - const instance = wrapper.instance() as ValueMappings; + const instance = wrapper.instance() as ValueMappingsEditor; return { instance, diff --git a/public/app/plugins/panel/gauge/ValueMappings.tsx b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx similarity index 88% rename from public/app/plugins/panel/gauge/ValueMappings.tsx rename to packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx index 9a3f87450f4..ae0ff092a06 100644 --- a/public/app/plugins/panel/gauge/ValueMappings.tsx +++ b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx @@ -1,14 +1,16 @@ import React, { PureComponent } from 'react'; -import { GaugeOptions, PanelOptionsProps, MappingType, RangeMap, ValueMap, PanelOptionsGroup } from '@grafana/ui'; import MappingRow from './MappingRow'; +import { PanelOptionsProps, ValueMap, RangeMap, MappingType } from '../../types/panel'; +import { GaugeOptions } from '../../types/gauge'; +import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup'; interface State { mappings: Array; nextIdToAdd: number; } -export default class ValueMappings extends PureComponent, State> { +export class ValueMappingsEditor extends PureComponent, State> { constructor(props) { super(props); diff --git a/public/sass/components/_value-mappings.scss b/packages/grafana-ui/src/components/ValueMappingsEditor/_ValueMappingsEditor.scss similarity index 100% rename from public/sass/components/_value-mappings.scss rename to packages/grafana-ui/src/components/ValueMappingsEditor/_ValueMappingsEditor.scss diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/__snapshots__/ValueMappingsEditor.test.tsx.snap b/packages/grafana-ui/src/components/ValueMappingsEditor/__snapshots__/ValueMappingsEditor.test.tsx.snap new file mode 100644 index 00000000000..592b3326421 --- /dev/null +++ b/packages/grafana-ui/src/components/ValueMappingsEditor/__snapshots__/ValueMappingsEditor.test.tsx.snap @@ -0,0 +1,56 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Render should render component 1`] = ` + +
+ + +
+
+
+ +
+
+ Add mapping +
+
+ +`; diff --git a/packages/grafana-ui/src/components/index.scss b/packages/grafana-ui/src/components/index.scss index b894cf73c1a..fa8d0135756 100644 --- a/packages/grafana-ui/src/components/index.scss +++ b/packages/grafana-ui/src/components/index.scss @@ -6,3 +6,4 @@ @import 'PanelOptionsGroup/PanelOptionsGroup'; @import 'PanelOptionsGrid/PanelOptionsGrid'; @import 'ColorPicker/ColorPicker'; +@import 'ValueMappingsEditor/ValueMappingsEditor'; diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts index 51b601f2921..1b2d2fce972 100644 --- a/packages/grafana-ui/src/components/index.ts +++ b/packages/grafana-ui/src/components/index.ts @@ -19,3 +19,4 @@ export { GfFormLabel } from './GfFormLabel/GfFormLabel'; export { Graph } from './Graph/Graph'; export { PanelOptionsGroup } from './PanelOptionsGroup/PanelOptionsGroup'; export { PanelOptionsGrid } from './PanelOptionsGrid/PanelOptionsGrid'; +export { ValueMappingsEditor } from './ValueMappingsEditor/ValueMappingsEditor'; diff --git a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx index a5334b0c6e1..3e82ca0e27b 100644 --- a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx +++ b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx @@ -6,10 +6,10 @@ import { ThresholdsEditor, Threshold, PanelOptionsGrid, + ValueMappingsEditor, } from '@grafana/ui'; import ValueOptions from 'app/plugins/panel/gauge/ValueOptions'; -import ValueMappings from 'app/plugins/panel/gauge/ValueMappings'; import GaugeOptionsEditor from './GaugeOptionsEditor'; export const defaultProps = { @@ -44,7 +44,7 @@ export default class GaugePanelOptions extends PureComponent - + ); } diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 93fd26b7ca8..e8859ff8255 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 @@ -97,7 +97,6 @@ @import 'components/add_data_source.scss'; @import 'components/page_loader'; @import 'components/toggle_button_group'; -@import 'components/value-mappings'; @import 'components/popover-box'; // LOAD @grafana/ui components