From 6954b0ff6b51a220498ac7926fad9751731cdea7 Mon Sep 17 00:00:00 2001 From: Andrew Tate Date: Mon, 11 Apr 2022 14:09:02 -0500 Subject: [PATCH] [Discover] make field icons consistent across field list and doc tables (#129621) --- .../components/sidebar/discover_field.tsx | 8 ++-- .../doc_viewer_table/legacy/table.tsx | 7 +++- .../components/doc_viewer_table/table.tsx | 7 +++- .../utils/get_type_for_field_icon.test.ts | 39 +++++++++++++++++++ .../public/utils/get_type_for_field_icon.ts | 17 ++++++++ 5 files changed, 73 insertions(+), 5 deletions(-) create mode 100644 src/plugins/discover/public/utils/get_type_for_field_icon.test.ts create mode 100644 src/plugins/discover/public/utils/get_type_for_field_icon.ts diff --git a/src/plugins/discover/public/application/main/components/sidebar/discover_field.tsx b/src/plugins/discover/public/application/main/components/sidebar/discover_field.tsx index e629c85c6d242..e14d9f7a0e5a7 100644 --- a/src/plugins/discover/public/application/main/components/sidebar/discover_field.tsx +++ b/src/plugins/discover/public/application/main/components/sidebar/discover_field.tsx @@ -25,6 +25,7 @@ import { i18n } from '@kbn/i18n'; import { UiCounterMetricType } from '@kbn/analytics'; import classNames from 'classnames'; import { FieldButton, FieldIcon } from '@kbn/react-field'; +import { getTypeForFieldIcon } from '../../../../utils/get_type_for_field_icon'; import { DiscoverFieldDetails } from './discover_field_details'; import { FieldDetails } from './types'; import type { DataViewField, DataView } from '../../../../../../data_views/public'; @@ -59,9 +60,10 @@ const FieldInfoIcon: React.FC = memo(() => ( )); const DiscoverFieldTypeIcon: React.FC<{ field: DataViewField }> = memo(({ field }) => { - // If it's a string type, we want to distinguish between keyword and text - const tempType = field.type === 'string' && field.esTypes ? field.esTypes[0] : field.type; - return ; + const typeForIcon = getTypeForFieldIcon(field); + return ( + + ); }); const FieldName: React.FC<{ field: DataViewField }> = memo(({ field }) => { diff --git a/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/legacy/table.tsx b/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/legacy/table.tsx index aab4856d6698c..aa44f0d56889c 100644 --- a/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/legacy/table.tsx +++ b/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/legacy/table.tsx @@ -9,6 +9,7 @@ import '../table.scss'; import React, { useCallback, useMemo } from 'react'; import { EuiInMemoryTable } from '@elastic/eui'; +import { getTypeForFieldIcon } from '../../../../../utils/get_type_for_field_icon'; import { useDiscoverServices } from '../../../../../utils/use_discover_services'; import { flattenHit } from '../../../../../../../data/public'; import { SHOW_MULTIFIELDS } from '../../../../../../common'; @@ -73,7 +74,11 @@ export const DocViewerLegacyTable = ({ .map((field) => { const fieldMapping = mapping(field); const displayName = fieldMapping?.displayName ?? field; - const fieldType = isNestedFieldParent(field, dataView) ? 'nested' : fieldMapping?.type; + const fieldType = isNestedFieldParent(field, dataView) + ? 'nested' + : fieldMapping + ? getTypeForFieldIcon(fieldMapping) + : undefined; const ignored = getIgnoredReason(fieldMapping ?? field, hit._ignored); return { action: { diff --git a/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/table.tsx b/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/table.tsx index 7aa372e36adff..4742dd3d8f585 100644 --- a/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/table.tsx +++ b/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/table.tsx @@ -27,6 +27,7 @@ import { import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; import { debounce } from 'lodash'; +import { getTypeForFieldIcon } from '../../../../utils/get_type_for_field_icon'; import { useDiscoverServices } from '../../../../utils/use_discover_services'; import { Storage } from '../../../../../../kibana_utils/public'; import { usePager } from '../../../../utils/use_pager'; @@ -157,7 +158,11 @@ export const DocViewerTable = ({ (field: string) => { const fieldMapping = mapping(field); const displayName = fieldMapping?.displayName ?? field; - const fieldType = isNestedFieldParent(field, dataView) ? 'nested' : fieldMapping?.type; + const fieldType = isNestedFieldParent(field, dataView) + ? 'nested' + : fieldMapping + ? getTypeForFieldIcon(fieldMapping) + : undefined; const ignored = getIgnoredReason(fieldMapping ?? field, hit._ignored); diff --git a/src/plugins/discover/public/utils/get_type_for_field_icon.test.ts b/src/plugins/discover/public/utils/get_type_for_field_icon.test.ts new file mode 100644 index 0000000000000..bffa0fecaed74 --- /dev/null +++ b/src/plugins/discover/public/utils/get_type_for_field_icon.test.ts @@ -0,0 +1,39 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { DataViewField } from 'src/plugins/data_views/common'; +import { getTypeForFieldIcon } from './get_type_for_field_icon'; + +describe('getTypeForFieldIcon', () => { + it('extracts type for non-string types', () => { + expect( + getTypeForFieldIcon({ + type: 'not-string', + esTypes: ['bar'], + } as DataViewField) + ).toBe('not-string'); + }); + + it('extracts type when type is string but esTypes is unavailable', () => { + expect( + getTypeForFieldIcon({ + type: 'string', + esTypes: undefined, + } as DataViewField) + ).toBe('string'); + }); + + it('extracts esType when type is string and esTypes is available', () => { + expect( + getTypeForFieldIcon({ + type: 'string', + esTypes: ['version'], + } as DataViewField) + ).toBe('version'); + }); +}); diff --git a/src/plugins/discover/public/utils/get_type_for_field_icon.ts b/src/plugins/discover/public/utils/get_type_for_field_icon.ts new file mode 100644 index 0000000000000..bb3f65ed3e01c --- /dev/null +++ b/src/plugins/discover/public/utils/get_type_for_field_icon.ts @@ -0,0 +1,17 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { DataViewField } from 'src/plugins/data_views/common'; + +/** + * Extracts the type from a data view field that will match the right icon. + * + * We define custom logic for Discover in order to distinguish between various "string" types. + */ +export const getTypeForFieldIcon = (field: DataViewField) => + field.type === 'string' && field.esTypes ? field.esTypes[0] : field.type;