diff --git a/src/legacy/ui/public/directives/field_name/__snapshots__/field_name_icon.test.tsx.snap b/src/legacy/ui/public/directives/field_name/__snapshots__/field_name_icon.test.tsx.snap deleted file mode 100644 index ef231622f7cd8..0000000000000 --- a/src/legacy/ui/public/directives/field_name/__snapshots__/field_name_icon.test.tsx.snap +++ /dev/null @@ -1,27 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`FieldNameIcon renders a blackwhite icon for a string 1`] = ` - -`; - -exports[`FieldNameIcon renders a colored icon for a number 1`] = ` - -`; - -exports[`FieldNameIcon renders an icon for an unknown type 1`] = ` - -`; diff --git a/src/legacy/ui/public/directives/field_name/field_name.tsx b/src/legacy/ui/public/directives/field_name/field_name.tsx index 855caa8d0b96e..0340ce9cb5d1b 100644 --- a/src/legacy/ui/public/directives/field_name/field_name.tsx +++ b/src/legacy/ui/public/directives/field_name/field_name.tsx @@ -20,7 +20,7 @@ import React from 'react'; import classNames from 'classnames'; // @ts-ignore import { shortenDottedString } from '../../../../core_plugins/kibana/common/utils/shorten_dotted_string'; -import { FieldNameIcon } from './field_name_icon'; +import { FieldIcon } from '../../../../../../src/plugins/kibana_react/public'; import { getFieldTypeName } from './field_type_name'; // property field is provided at discover's field chooser @@ -53,7 +53,7 @@ export function FieldName({ field, fieldName, fieldType, useShortDots }: Props) return ( - + {displayName} ); diff --git a/src/plugins/kibana_react/public/field_icon/__snapshots__/field_icon.test.tsx.snap b/src/plugins/kibana_react/public/field_icon/__snapshots__/field_icon.test.tsx.snap new file mode 100644 index 0000000000000..5abce10c5be61 --- /dev/null +++ b/src/plugins/kibana_react/public/field_icon/__snapshots__/field_icon.test.tsx.snap @@ -0,0 +1,37 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`FieldIcon renders a blackwhite icon for a string 1`] = ` + +`; + +exports[`FieldIcon renders a colored icon for a number 1`] = ` + +`; + +exports[`FieldIcon renders an icon for an unknown type 1`] = ` + +`; + +exports[`FieldIcon renders with className if provided 1`] = ` + +`; diff --git a/src/legacy/ui/public/directives/field_name/field_name_icon.test.tsx b/src/plugins/kibana_react/public/field_icon/field_icon.test.tsx similarity index 60% rename from src/legacy/ui/public/directives/field_name/field_name_icon.test.tsx rename to src/plugins/kibana_react/public/field_icon/field_icon.test.tsx index 2fce3d2c0ce95..90a858e31b4f3 100644 --- a/src/legacy/ui/public/directives/field_name/field_name_icon.test.tsx +++ b/src/plugins/kibana_react/public/field_icon/field_icon.test.tsx @@ -18,19 +18,24 @@ */ import React from 'react'; import { shallow } from 'enzyme'; -import { FieldNameIcon } from './field_name_icon'; +import { FieldIcon } from './field_icon'; -test('FieldNameIcon renders a blackwhite icon for a string', () => { - const component = shallow(); +test('FieldIcon renders a blackwhite icon for a string', () => { + const component = shallow(); expect(component).toMatchSnapshot(); }); -test('FieldNameIcon renders a colored icon for a number', () => { - const component = shallow(); +test('FieldIcon renders a colored icon for a number', () => { + const component = shallow(); expect(component).toMatchSnapshot(); }); -test('FieldNameIcon renders an icon for an unknown type', () => { - const component = shallow(); +test('FieldIcon renders an icon for an unknown type', () => { + const component = shallow(); + expect(component).toMatchSnapshot(); +}); + +test('FieldIcon renders with className if provided', () => { + const component = shallow(); expect(component).toMatchSnapshot(); }); diff --git a/src/legacy/ui/public/directives/field_name/field_name_icon.tsx b/src/plugins/kibana_react/public/field_icon/field_icon.tsx similarity index 87% rename from src/legacy/ui/public/directives/field_name/field_name_icon.tsx rename to src/plugins/kibana_react/public/field_icon/field_icon.tsx index a0b2f97fb4fcc..f9bdf3a25adaa 100644 --- a/src/legacy/ui/public/directives/field_name/field_name_icon.tsx +++ b/src/plugins/kibana_react/public/field_icon/field_icon.tsx @@ -24,7 +24,7 @@ interface IconMapEntry { icon: string; color: string; } -interface FieldNameIconProps { +interface FieldIconProps { type: | 'boolean' | 'conflict' @@ -37,9 +37,10 @@ interface FieldNameIconProps { | '_source' | 'string' | string; - label: string; + label?: string; size?: IconSize; useColor?: boolean; + className?: string; } const { colors } = palettes.euiPaletteColorBlind; @@ -47,7 +48,7 @@ const { colors } = palettes.euiPaletteColorBlind; // defaultIcon => a unknown datatype const defaultIcon = { icon: 'questionInCircle', color: colors[0] }; -const typeToEuiIconMap: Partial> = { +export const typeToEuiIconMap: Partial> = { boolean: { icon: 'invert', color: colors[5] }, // icon for an index pattern mapping conflict in discover conflict: { icon: 'alert', color: colors[8] }, @@ -63,9 +64,15 @@ const typeToEuiIconMap: Partial> = { }; /** - * Field icon displayed in discover doc_viewer + side bar + * Field icon used across the app */ -export function FieldNameIcon({ type, label, size = 's', useColor = false }: FieldNameIconProps) { +export function FieldIcon({ + type, + label, + size = 's', + useColor = false, + className = undefined, +}: FieldIconProps) { const euiIcon = typeToEuiIconMap[type] || defaultIcon; return ( @@ -74,6 +81,7 @@ export function FieldNameIcon({ type, label, size = 's', useColor = false }: Fie aria-label={label || type} size={size as IconSize} color={useColor || type === 'conflict' ? euiIcon.color : undefined} + className={className} /> ); } diff --git a/src/plugins/kibana_react/public/field_icon/index.ts b/src/plugins/kibana_react/public/field_icon/index.ts new file mode 100644 index 0000000000000..e1bb15bfd9194 --- /dev/null +++ b/src/plugins/kibana_react/public/field_icon/index.ts @@ -0,0 +1,19 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +export * from './field_icon'; diff --git a/src/plugins/kibana_react/public/index.ts b/src/plugins/kibana_react/public/index.ts index 0e98d68988488..cd2ae89b05b5d 100644 --- a/src/plugins/kibana_react/public/index.ts +++ b/src/plugins/kibana_react/public/index.ts @@ -22,3 +22,4 @@ export * from './exit_full_screen_button'; export * from './context'; export * from './overlays'; export * from './ui_settings'; +export * from './field_icon'; diff --git a/x-pack/legacy/plugins/graph/public/components/field_manager/field_editor.tsx b/x-pack/legacy/plugins/graph/public/components/field_manager/field_editor.tsx index 519e41e846051..2279873762251 100644 --- a/x-pack/legacy/plugins/graph/public/components/field_manager/field_editor.tsx +++ b/x-pack/legacy/plugins/graph/public/components/field_manager/field_editor.tsx @@ -29,7 +29,7 @@ import classNames from 'classnames'; import { WorkspaceField } from '../../types'; import { iconChoices } from '../../helpers/style_choices'; import { LegacyIcon } from '../legacy_icon'; -import { FieldIcon } from './field_icon'; +import { FieldIcon } from '../../../../../../../src/plugins/kibana_react/public'; import { UpdateableFieldProperties } from './field_manager'; import { isEqual } from '../helpers'; @@ -216,7 +216,7 @@ export function FieldEditor({ const { type, label } = option; return ( - {' '} + {' '} {label} ); diff --git a/x-pack/legacy/plugins/graph/public/components/field_manager/field_picker.tsx b/x-pack/legacy/plugins/graph/public/components/field_manager/field_picker.tsx index 8ef566e881989..5df94ac873bc1 100644 --- a/x-pack/legacy/plugins/graph/public/components/field_manager/field_picker.tsx +++ b/x-pack/legacy/plugins/graph/public/components/field_manager/field_picker.tsx @@ -9,8 +9,7 @@ import { EuiPopover, EuiSelectable, EuiBadge } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import classNames from 'classnames'; import { WorkspaceField } from '../../types'; - -import { FieldIcon } from './field_icon'; +import { FieldIcon } from '../../../../../../../src/plugins/kibana_react/public'; export interface FieldPickerProps { fieldMap: Record; @@ -121,7 +120,7 @@ function toOptions( ): Array<{ label: string; checked?: 'on' | 'off'; prepend?: ReactNode }> { return fields.map(field => ({ label: field.name, - prepend: , + prepend: , checked: field.selected ? 'on' : undefined, })); } diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/__snapshots__/lens_field_icon.test.tsx.snap b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/__snapshots__/lens_field_icon.test.tsx.snap new file mode 100644 index 0000000000000..5593a1af00d70 --- /dev/null +++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/__snapshots__/lens_field_icon.test.tsx.snap @@ -0,0 +1,10 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`LensFieldIcon renders properly 1`] = ` + +`; diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/datapanel.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/datapanel.tsx index 11d6228251025..fbe71381fd449 100644 --- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/datapanel.tsx +++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/datapanel.tsx @@ -30,7 +30,7 @@ import { DatasourceDataPanelProps, DataType } from '../types'; import { IndexPatternPrivateState, IndexPatternField, IndexPattern } from './indexpattern'; import { ChildDragDropProvider, DragContextState } from '../drag_drop'; import { FieldItem } from './field_item'; -import { FieldIcon } from './field_icon'; +import { LensFieldIcon } from './lens_field_icon'; import { updateLayerIndexPattern } from './state_helpers'; import { ChangeIndexPattern } from './change_indexpattern'; @@ -442,7 +442,7 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({ })) } > - {fieldTypeNames[type]} + {fieldTypeNames[type]} ))} /> diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/field_select.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/field_select.tsx index 0cd7329b4613d..d76e882f11cf5 100644 --- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/field_select.tsx +++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/field_select.tsx @@ -14,7 +14,7 @@ import { EuiHighlight, } from '@elastic/eui'; import { OperationType, IndexPattern, IndexPatternField } from '../indexpattern'; -import { FieldIcon } from '../field_icon'; +import { LensFieldIcon } from '../lens_field_icon'; import { DataType } from '../../types'; import { OperationFieldSupportMatrix } from './dimension_panel'; @@ -172,7 +172,9 @@ export function FieldSelect({ return ( - + {option.label} diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_item.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_item.tsx index 804ea478e57f1..9cfe2893155ca 100644 --- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_item.tsx +++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_item.tsx @@ -41,9 +41,9 @@ import { Query } from 'src/plugins/data/common'; import { fieldFormats } from '../../../../../../src/legacy/ui/public/registry/field_formats'; import { IndexPattern, IndexPatternField, DraggedField } from './indexpattern'; import { DragDrop } from '../drag_drop'; -import { FieldIcon, getColorForDataType } from './field_icon'; import { DatasourceDataPanelProps, DataType } from '../types'; import { BucketedAggregation, FieldStatsResponse } from '../../common'; +import { LensFieldIcon, getColorForDataType } from './lens_field_icon'; export interface FieldItemProps { core: DatasourceDataPanelProps['core']; @@ -177,7 +177,7 @@ export function FieldItem(props: FieldItemProps) { values: { fieldName: field.name }, })} > - + {wrappableHighlightableFieldName} @@ -362,11 +362,11 @@ function FieldItemPopoverContents(props: State & FieldItemProps) { defaultMessage: 'Count', }) ); - const expectedColor = getColorForDataType(field.type); const colors: DataSeriesColorsValues = { colorValues: [], specId, }; + const expectedColor = getColorForDataType(field.type); const seriesColors = new Map([[colors, expectedColor]]); diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/lens_field_icon.test.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/lens_field_icon.test.tsx new file mode 100644 index 0000000000000..7441083550706 --- /dev/null +++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/lens_field_icon.test.tsx @@ -0,0 +1,29 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ +import React from 'react'; +import { shallow } from 'enzyme'; +import { LensFieldIcon, getColorForDataType } from './lens_field_icon'; + +test('LensFieldIcon renders properly', () => { + const component = shallow(); + expect(component).toMatchSnapshot(); +}); + +test('LensFieldIcon getColorForDataType for a valid type', () => { + const color = getColorForDataType('date'); + expect(color).toEqual('#B0916F'); +}); + +test('LensFieldIcon getColorForDataType for an invalid type', () => { + const color = getColorForDataType('invalid'); + expect(color).toEqual('#1EA593'); +}); diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/lens_field_icon.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/lens_field_icon.tsx new file mode 100644 index 0000000000000..1773022bf6e1a --- /dev/null +++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/lens_field_icon.tsx @@ -0,0 +1,22 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { palettes } from '@elastic/eui'; +import { FieldIcon, typeToEuiIconMap } from '../../../../../../src/plugins/kibana_react/public'; +import { DataType } from '../types'; + +export function getColorForDataType(type: string) { + const iconMap = typeToEuiIconMap[type]; + if (iconMap) { + return iconMap.color; + } + return palettes.euiPaletteColorBlind.colors[0]; +} + +export function LensFieldIcon({ type }: { type: DataType }) { + return ; +}