From ebc16a3cad4a5f02b65ce74cef973f26a93c853c Mon Sep 17 00:00:00 2001 From: Josh Romero Date: Thu, 3 Nov 2022 01:20:14 +0000 Subject: [PATCH] [VisBuilder] Update naming of summary field components Signed-off-by: Josh Romero --- .../{field_selector_field.scss => field.scss} | 2 +- ...selector_field.test.tsx => field.test.tsx} | 22 ++++++------- .../{field_selector_field.tsx => field.tsx} | 27 +++++++--------- .../components/data_tab/field_bucket.tsx | 32 ++++++++----------- .../data_tab/field_details.test.tsx | 6 ++-- .../components/data_tab/field_details.tsx | 21 +++++------- .../data_tab/field_selector.test.tsx | 6 ++-- .../components/data_tab/field_selector.tsx | 6 ++-- .../{get_details.ts => get_field_details.ts} | 6 ++-- .../components/data_tab/utils/index.ts | 2 +- 10 files changed, 57 insertions(+), 73 deletions(-) rename src/plugins/vis_builder/public/application/components/data_tab/{field_selector_field.scss => field.scss} (95%) rename src/plugins/vis_builder/public/application/components/data_tab/{field_selector_field.test.tsx => field.test.tsx} (56%) rename src/plugins/vis_builder/public/application/components/data_tab/{field_selector_field.tsx => field.tsx} (85%) rename src/plugins/vis_builder/public/application/components/data_tab/utils/{get_details.ts => get_field_details.ts} (86%) diff --git a/src/plugins/vis_builder/public/application/components/data_tab/field_selector_field.scss b/src/plugins/vis_builder/public/application/components/data_tab/field.scss similarity index 95% rename from src/plugins/vis_builder/public/application/components/data_tab/field_selector_field.scss rename to src/plugins/vis_builder/public/application/components/data_tab/field.scss index ff522d5b8a44..2c4a96c6ec56 100644 --- a/src/plugins/vis_builder/public/application/components/data_tab/field_selector_field.scss +++ b/src/plugins/vis_builder/public/application/components/data_tab/field.scss @@ -2,7 +2,7 @@ * Copyright OpenSearch Contributors * SPDX-License-Identifier: Apache-2.0 */ -.vbFieldSelectorField { +.vbFieldButton { @include euiBottomShadowSmall; background-color: $euiColorEmptyShade; diff --git a/src/plugins/vis_builder/public/application/components/data_tab/field_selector_field.test.tsx b/src/plugins/vis_builder/public/application/components/data_tab/field.test.tsx similarity index 56% rename from src/plugins/vis_builder/public/application/components/data_tab/field_selector_field.test.tsx rename to src/plugins/vis_builder/public/application/components/data_tab/field.test.tsx index 2f235884db6e..6aed9deb159e 100644 --- a/src/plugins/vis_builder/public/application/components/data_tab/field_selector_field.test.tsx +++ b/src/plugins/vis_builder/public/application/components/data_tab/field.test.tsx @@ -8,10 +8,10 @@ import { render, screen } from '@testing-library/react'; import { IndexPatternField } from '../../../../../data/public'; -import { SelectorFieldButton } from './field_selector_field'; +import { DraggableFieldButton } from './field'; -describe('visBuilder sidebar field selector field', function () { - describe('SelectorFieldButton', () => { +describe('visBuilder field', function () { + describe('DraggableFieldButton', () => { it('should render normal fields without a dragValue specified', async () => { const props = { field: new IndexPatternField( @@ -28,19 +28,19 @@ describe('visBuilder sidebar field selector field', function () { 'bytes' ), }; - render(); + render(); - expect(screen.getByTestId('field-bytes-showDetails')).toBeDefined(); + const button = screen.getByTestId('field-bytes-showDetails'); + + expect(button).toBeDefined(); }); - // it('should allow specified dragValue to override the field name'); + // TODO: it('should allow specified dragValue to override the field name'); - // it('should make dots wrappable'); + // TODO: it('should make dots wrappable'); - // it('should use a non-scripted FieldIcon by default'); + // TODO: it('should use a non-scripted FieldIcon by default'); }); - // describe('FieldSelectorField', function () { - - // }); + // TODO: describe('Field', function () { }); }); diff --git a/src/plugins/vis_builder/public/application/components/data_tab/field_selector_field.tsx b/src/plugins/vis_builder/public/application/components/data_tab/field.tsx similarity index 85% rename from src/plugins/vis_builder/public/application/components/data_tab/field_selector_field.tsx rename to src/plugins/vis_builder/public/application/components/data_tab/field.tsx index affa5f0e5bc7..daea4139653b 100644 --- a/src/plugins/vis_builder/public/application/components/data_tab/field_selector_field.tsx +++ b/src/plugins/vis_builder/public/application/components/data_tab/field.tsx @@ -44,11 +44,11 @@ import { } from '../../../../../opensearch_dashboards_react/public'; import { COUNT_FIELD, useDrag } from '../../utils/drag_drop'; -import { VisBuilderFieldDetails } from './field_details'; +import { FieldDetailsView } from './field_details'; import { FieldDetails } from './types'; -import './field_selector_field.scss'; +import './field.scss'; -export interface FieldSelectorFieldProps { +export interface FieldProps { field: IndexPatternField; filterManager: FilterManager; indexPattern?: IndexPattern; @@ -56,12 +56,7 @@ export interface FieldSelectorFieldProps { } // TODO: Add field sections (Available fields, popular fields from src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx) -export const FieldSelectorField = ({ - field, - filterManager, - indexPattern, - getDetails, -}: FieldSelectorFieldProps) => { +export const Field = ({ field, filterManager, indexPattern, getDetails }: FieldProps) => { const { id: indexPatternId = '', metaFields = [] } = indexPattern ?? {}; const isMetaField = metaFields.includes(field.name); const [infoIsOpen, setOpen] = useState(false); @@ -88,16 +83,16 @@ export const FieldSelectorField = ({ } + button={} isOpen={infoIsOpen} closePopover={() => setOpen(false)} anchorPosition="rightUp" panelClassName="vbItem__fieldPopoverPanel" repositionOnScroll - data-test-subj="field-selector-field" + data-test-subj="field-popover" > {infoIsOpen && ( - { +export interface DraggableFieldButtonProps extends Partial { dragValue?: IndexPatternField['name'] | null | typeof COUNT_FIELD; field: Partial & Pick; } -export const SelectorFieldButton = ({ dragValue, field, ...rest }: SelectorFieldButtonProps) => { +export const DraggableFieldButton = ({ dragValue, field, ...rest }: DraggableFieldButtonProps) => { const { name, displayName, type, scripted = false } = field; const [dragProps] = useDrag({ namespace: 'field-data', @@ -130,13 +125,13 @@ export const SelectorFieldButton = ({ dragValue, field, ...rest }: SelectorField const defaultIcon = ; const defaultFieldName = ( - + {wrapOnDot(displayName)} ); const defaultProps = { - className: 'vbFieldSelectorField', + className: 'vbFieldButton', dataTestSubj: `field-${name}-showDetails`, fieldIcon: defaultIcon, fieldName: defaultFieldName, diff --git a/src/plugins/vis_builder/public/application/components/data_tab/field_bucket.tsx b/src/plugins/vis_builder/public/application/components/data_tab/field_bucket.tsx index 603c43eb1ac9..5371a65b684d 100644 --- a/src/plugins/vis_builder/public/application/components/data_tab/field_bucket.tsx +++ b/src/plugins/vis_builder/public/application/components/data_tab/field_bucket.tsx @@ -19,36 +19,36 @@ import { IndexPatternField } from '../../../../../data/public'; import { Bucket } from './types'; import './field_bucket.scss'; -interface Props { +interface FieldBucketProps { bucket: Bucket; field: IndexPatternField; onAddFilter: (field: IndexPatternField | string, value: string, type: '+' | '-') => void; } -export function VisBuilderFieldBucket({ bucket, field, onAddFilter }: Props) { +export function FieldBucket({ bucket, field, onAddFilter }: FieldBucketProps) { const { count, display, percent, value } = bucket; const { filterable: isFilterableField, name: fieldName } = field; - const emptyTxt = i18n.translate('visBuilder.fieldChooser.detailViews.emptyStringText', { + const emptyText = i18n.translate('visBuilder.fieldSelector.detailsView.emptyStringText', { // We need this to communicate to users when a top value is actually an empty string defaultMessage: 'Empty string', }); const addLabel = i18n.translate( - 'visBuilder.fieldChooser.detailViews.filterValueButtonAriaLabel', + 'visBuilder.fieldSelector.detailsView.filterValueButtonAriaLabel', { defaultMessage: 'Filter for {fieldName}: "{value}"', values: { fieldName, value }, } ); const removeLabel = i18n.translate( - 'visBuilder.fieldChooser.detailViews.filterOutValueButtonAriaLabel', + 'visBuilder.fieldSelector.detailsView.filterOutValueButtonAriaLabel', { defaultMessage: 'Filter out {fieldName}: "{value}"', values: { fieldName, value }, } ); - const displayValue = display || emptyTxt; + const displayValue = display || emptyText; return ( <> @@ -70,7 +70,13 @@ export function VisBuilderFieldBucket({ bucket, field, onAddFilter }: Props) { - + {/* TODO: Should we have any explanation for non-filterable fields? */} {isFilterableField && ( @@ -100,15 +106,3 @@ export function VisBuilderFieldBucket({ bucket, field, onAddFilter }: Props) { ); } - -export function StringFieldProgressBar({ - value, - percent, - count, -}: Pick) { - const ariaLabel = `${value}: ${count} (${percent}%)`; - - return ( - - ); -} diff --git a/src/plugins/vis_builder/public/application/components/data_tab/field_details.test.tsx b/src/plugins/vis_builder/public/application/components/data_tab/field_details.test.tsx index 90bbb2e9aa02..313673312269 100644 --- a/src/plugins/vis_builder/public/application/components/data_tab/field_details.test.tsx +++ b/src/plugins/vis_builder/public/application/components/data_tab/field_details.test.tsx @@ -38,11 +38,11 @@ import { mountWithIntl, nextTick } from 'test_utils/enzyme_helpers'; import { IndexPatternField } from '../../../../../data/public'; -import { VisBuilderFieldDetails } from './field_details'; +import { FieldDetailsView } from './field_details'; const mockOnAddFilter = jest.fn(); -describe('visBuilder sidebar field details', function () { +describe('visBuilder field details', function () { const defaultProps = { isMetaField: false, details: { buckets: [], error: '', exists: 1, total: 1 }, @@ -51,7 +51,7 @@ describe('visBuilder sidebar field details', function () { function mountComponent(field: IndexPatternField, props?: Record) { const compProps = { ...defaultProps, ...props, field }; - return mountWithIntl(); + return mountWithIntl(); } it('should render buckets if they exist', async function () { diff --git a/src/plugins/vis_builder/public/application/components/data_tab/field_details.tsx b/src/plugins/vis_builder/public/application/components/data_tab/field_details.tsx index ecbe7a770f68..4f1e07a88643 100644 --- a/src/plugins/vis_builder/public/application/components/data_tab/field_details.tsx +++ b/src/plugins/vis_builder/public/application/components/data_tab/field_details.tsx @@ -9,7 +9,7 @@ import { i18n } from '@osd/i18n'; import { IndexPatternField } from '../../../../../data/public'; -import { VisBuilderFieldBucket } from './field_bucket'; +import { FieldBucket } from './field_bucket'; import { Bucket, FieldDetails } from './types'; interface FieldDetailsProps { @@ -19,31 +19,26 @@ interface FieldDetailsProps { onAddFilter: (field: IndexPatternField | string, value: string, type: '+' | '-') => void; } -export function VisBuilderFieldDetails({ - field, - isMetaField, - details, - onAddFilter, -}: FieldDetailsProps) { +export function FieldDetailsView({ field, isMetaField, details, onAddFilter }: FieldDetailsProps) { const { buckets, error, exists, total } = details; const bucketsTitle = buckets.length > 1 - ? i18n.translate('visBuilder.fieldChooser.detailViews.fieldTopValuesLabel', { + ? i18n.translate('visBuilder.fieldSelector.detailsView.fieldTopValuesLabel', { defaultMessage: 'Top {n} values', values: { n: buckets.length }, }) - : i18n.translate('visBuilder.fieldChooser.detailViews.fieldTopValueLabel', { + : i18n.translate('visBuilder.fieldSelector.detailsView.fieldTopValueLabel', { defaultMessage: 'Top value', }); - const errorTitle = i18n.translate('visBuilder.fieldChooser.detailViews.fieldNoValuesLabel', { + const errorTitle = i18n.translate('visBuilder.fieldSelector.detailsView.fieldNoValuesLabel', { defaultMessage: 'No values found', }); - const existsIn = i18n.translate('visBuilder.fieldChooser.detailViews.fieldExistsIn', { + const existsIn = i18n.translate('visBuilder.fieldSelector.detailsView.fieldExistsIn', { defaultMessage: 'Exists in {exists}', values: { exists }, }); - const totalRecords = i18n.translate('visBuilder.fieldChooser.detailViews.fieldTotalRecords', { + const totalRecords = i18n.translate('visBuilder.fieldSelector.detailsView.fieldTotalRecords', { defaultMessage: '/ {total} records', values: { total }, }); @@ -66,7 +61,7 @@ export function VisBuilderFieldDetails({ data-test-subj="fieldDetailsBucketsContainer" > {buckets.map((bucket: Bucket, idx: number) => ( - { + it('renders an accordion with Fields if fields provided', async () => { const props = { ...defaultProps, fields: ['bytes', 'machine.ram', 'memory', 'phpmemory'].map(getFields), @@ -65,7 +65,7 @@ describe('visBuilder sidebar field selector', function () { expect(container).toHaveTextContent(props.header); expect(container).toHaveTextContent(props.fields.length.toString()); - expect(screen.queryAllByTestId('field-selector-field').length).toBe(props.fields.length); + expect(screen.queryAllByTestId('field-popover').length).toBe(props.fields.length); await fireEvent.click(screen.getByText('memory')); diff --git a/src/plugins/vis_builder/public/application/components/data_tab/field_selector.tsx b/src/plugins/vis_builder/public/application/components/data_tab/field_selector.tsx index 8f20705b1269..c315e6088162 100644 --- a/src/plugins/vis_builder/public/application/components/data_tab/field_selector.tsx +++ b/src/plugins/vis_builder/public/application/components/data_tab/field_selector.tsx @@ -22,7 +22,7 @@ import { COUNT_FIELD } from '../../utils/drag_drop'; import { useTypedSelector } from '../../utils/state_management'; import { useIndexPatterns } from '../../utils/use'; import { FieldSearch } from './field_search'; -import { FieldSelectorField, SelectorFieldButton } from './field_selector_field'; +import { Field, DraggableFieldButton } from './field'; import { FieldDetails } from './types'; import { getAvailableFields, getDetails } from './utils'; import './field_selector.scss'; @@ -159,7 +159,7 @@ export const FieldSelector = () => {
{/* Count Field */} - @@ -214,7 +214,7 @@ export const FieldGroup = ({ fields, header, id, ...rest }: FieldGroupProps) => > {fields?.map((field, i) => ( - + ))} diff --git a/src/plugins/vis_builder/public/application/components/data_tab/utils/get_details.ts b/src/plugins/vis_builder/public/application/components/data_tab/utils/get_field_details.ts similarity index 86% rename from src/plugins/vis_builder/public/application/components/data_tab/utils/get_details.ts rename to src/plugins/vis_builder/public/application/components/data_tab/utils/get_field_details.ts index a2a0d6ce439e..75b8b60c0c67 100644 --- a/src/plugins/vis_builder/public/application/components/data_tab/utils/get_details.ts +++ b/src/plugins/vis_builder/public/application/components/data_tab/utils/get_field_details.ts @@ -10,7 +10,7 @@ import { FieldDetails } from '../types'; import { getFieldValueCounts } from './field_calculator'; -export function getDetails( +export function getFieldDetails( field: IndexPatternField, hits: Array>, indexPattern?: IndexPattern @@ -24,7 +24,7 @@ export function getDetails( if (!indexPattern) { return { ...defaultDetails, - error: i18n.translate('visBuilder.fieldChooser.noIndexPatternSelectedErrorMessage', { + error: i18n.translate('visBuilder.fieldSelector.noIndexPatternSelectedErrorMessage', { defaultMessage: 'Index pattern not specified.', }), }; @@ -32,7 +32,7 @@ export function getDetails( if (!hits.length) { return { ...defaultDetails, - error: i18n.translate('visBuilder.fieldChooser.noHits', { + error: i18n.translate('visBuilder.fieldSelector.noHits', { defaultMessage: 'No documents match the selected query and filters. Try increasing time range or removing filters.', }), diff --git a/src/plugins/vis_builder/public/application/components/data_tab/utils/index.ts b/src/plugins/vis_builder/public/application/components/data_tab/utils/index.ts index 45d9c1042295..2900a66d8f1e 100644 --- a/src/plugins/vis_builder/public/application/components/data_tab/utils/index.ts +++ b/src/plugins/vis_builder/public/application/components/data_tab/utils/index.ts @@ -4,4 +4,4 @@ */ export { getAvailableFields } from './get_available_fields'; -export { getDetails } from './get_details'; +export { getFieldDetails as getDetails } from './get_field_details';