From 2e3b8d3fbf34a0cb7103e70291d972797066de2a Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Sun, 1 Sep 2024 13:02:46 -0700 Subject: [PATCH] Convert display selector width style - just inline it in the component, since it's super minor + update Enzyme tests to RTL, snapshot full popover --- .../display_selector.test.tsx.snap | 311 ++++++++++++++---- .../datagrid/controls/_data_grid_display.scss | 3 - .../controls/display_selector.test.tsx | 50 ++- .../datagrid/controls/display_selector.tsx | 17 +- 4 files changed, 279 insertions(+), 102 deletions(-) diff --git a/packages/eui/src/components/datagrid/controls/__snapshots__/display_selector.test.tsx.snap b/packages/eui/src/components/datagrid/controls/__snapshots__/display_selector.test.tsx.snap index 50216eb2602..0dce8b33c9c 100644 --- a/packages/eui/src/components/datagrid/controls/__snapshots__/display_selector.test.tsx.snap +++ b/packages/eui/src/components/datagrid/controls/__snapshots__/display_selector.test.tsx.snap @@ -1,78 +1,251 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`useDataGridDisplaySelector displaySelector renders a toolbar button/popover allowing users to customize display settings 1`] = ` - - +
+
+ - - - } - closePopover={[Function]} - data-test-subj="dataGridDisplaySelectorPopover" - display="inline-block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="euiDataGrid__displayPopoverPanel" - panelPaddingSize="s" - repositionToCrossAxis={true} + type="button" + > + +
+
+
- - - - +
- - - - + +
+
+ `; diff --git a/packages/eui/src/components/datagrid/controls/_data_grid_display.scss b/packages/eui/src/components/datagrid/controls/_data_grid_display.scss index 628f4c2e010..e69de29bb2d 100644 --- a/packages/eui/src/components/datagrid/controls/_data_grid_display.scss +++ b/packages/eui/src/components/datagrid/controls/_data_grid_display.scss @@ -1,3 +0,0 @@ -.euiDataGrid__displayPopoverPanel { - width: $euiFormMaxWidth + $euiSize; -} diff --git a/packages/eui/src/components/datagrid/controls/display_selector.test.tsx b/packages/eui/src/components/datagrid/controls/display_selector.test.tsx index 0499e433309..1261beaa662 100644 --- a/packages/eui/src/components/datagrid/controls/display_selector.test.tsx +++ b/packages/eui/src/components/datagrid/controls/display_selector.test.tsx @@ -8,10 +8,10 @@ import React from 'react'; import { act, fireEvent, waitFor } from '@testing-library/react'; -import { shallow, ShallowWrapper } from 'enzyme'; import { renderHook, render, + screen, waitForEuiPopoverClose, waitForEuiPopoverOpen, } from '../../../test/rtl'; @@ -69,12 +69,13 @@ describe('useDataGridDisplaySelector', () => { }; it('renders a toolbar button/popover allowing users to customize display settings', () => { - const component = shallow(); - expect(component).toMatchSnapshot(); + const { getByTestSubject, baseElement } = render(); + fireEvent.click(getByTestSubject('dataGridDisplaySelectorButton')); + expect(baseElement).toMatchSnapshot(); }); it('does not render if all valid sub-options are disabled', () => { - const component = shallow( + const { container } = render( { }} /> ); - expect(component.text()).toEqual(''); + expect(container).toBeEmptyDOMElement(); }); describe('density', () => { @@ -653,22 +654,17 @@ describe('useDataGridDisplaySelector', () => { ); }; - const diveIntoEuiI18n = (component: ShallowWrapper) => { - return ( - component.find('EuiI18n').last().renderProp('children') as Function - )(['', '', '', '']); - }; - const setRowHeight = (component: ShallowWrapper, selection = '') => { - diveIntoEuiI18n(component) - .find('[data-test-subj="rowHeightButtonGroup"]') - .simulate('change', selection); + const setRowHeight = (buttonGroupId: string) => { + fireEvent.click(screen.getByTestSubject('dataGridDisplaySelectorButton')); + waitForEuiPopoverOpen(); + fireEvent.click(screen.getByTestSubject(buttonGroupId)); }; - const getOutput = (component: ShallowWrapper) => { - return JSON.parse(component.find('[data-test-subj="output"]').text()); + const getOutput = () => { + return JSON.parse(screen.getByTestSubject('output').textContent!); }; describe('returns an object of rowHeightsOptions with user overrides', () => { it('overrides `rowHeights` and `defaultHeight`', () => { - const component = shallow( + render( { }} /> ); - setRowHeight(component, 'undefined'); - expect(getOutput(component)).toEqual({ + setRowHeight('undefined'); + expect(getOutput()).toEqual({ rowHeights: {}, defaultHeight: undefined, }); }); it('does not override other rowHeightsOptions properties', () => { - const component = shallow( + render( ); - setRowHeight(component, 'lineCount'); - expect(getOutput(component)).toEqual({ + setRowHeight('lineCount'); + expect(getOutput()).toEqual({ lineHeight: '2em', defaultHeight: { lineCount: 2 }, rowHeights: {}, @@ -696,14 +692,12 @@ describe('useDataGridDisplaySelector', () => { }); it('handles undefined initialRowHeightsOptions', () => { - const component = shallow( - - ); - expect(getOutput(component)).toEqual({}); + render(); + expect(getOutput()).toEqual({}); - setRowHeight(component, 'auto'); + setRowHeight('auto'); - expect(getOutput(component)).toEqual({ + expect(getOutput()).toEqual({ defaultHeight: 'auto', rowHeights: {}, }); diff --git a/packages/eui/src/components/datagrid/controls/display_selector.tsx b/packages/eui/src/components/datagrid/controls/display_selector.tsx index e581b4e5ac0..12b93f9164e 100644 --- a/packages/eui/src/components/datagrid/controls/display_selector.tsx +++ b/packages/eui/src/components/datagrid/controls/display_selector.tsx @@ -14,11 +14,13 @@ import React, { useEffect, } from 'react'; -import { useUpdateEffect } from '../../../services'; +import { logicalStyle, mathWithUnits } from '../../../global_styling'; +import { useUpdateEffect, useEuiTheme } from '../../../services'; import { EuiI18n, useEuiI18n } from '../../i18n'; import { EuiPopover, EuiPopoverFooter } from '../../popover'; import { EuiButtonIcon, EuiButtonGroup, EuiButtonEmpty } from '../../button'; import { EuiFormRow, EuiRange, EuiRangeProps } from '../../form'; +import { euiFormMaxWidth } from '../../form/form.styles'; import { EuiFlexGroup, EuiFlexItem } from '../../flex'; import { EuiToolTip } from '../../tool_tip'; @@ -232,7 +234,16 @@ export const useDataGridDisplaySelector = ( 'Reset to default' ); + const euiTheme = useEuiTheme(); + const displaySelector = useMemo(() => { + const paddingSize = 's'; + const formMaxWidth = euiFormMaxWidth(euiTheme); + const popoverWidth = mathWithUnits( + [formMaxWidth, euiTheme.euiTheme.size[paddingSize]], + (x, y) => x + y * 2 + ); + return showDensityControls || showRowHeightControls || additionalDisplaySettings ? ( @@ -241,7 +252,8 @@ export const useDataGridDisplaySelector = ( isOpen={isOpen} closePopover={() => setIsOpen(false)} anchorPosition="downRight" - panelPaddingSize="s" + panelPaddingSize={paddingSize} + panelProps={{ css: logicalStyle('width', popoverWidth) }} panelClassName="euiDataGrid__displayPopoverPanel" button={ @@ -390,6 +402,7 @@ export const useDataGridDisplaySelector = ( ) : null; }, [ + euiTheme, additionalDisplaySettings, buttonLabel, isOpen,