Skip to content

Commit

Permalink
[Lens] refactor DimensionContainer and fix flyout bug (#79277) (#79430)
Browse files Browse the repository at this point in the history
  • Loading branch information
mbondyra authored Oct 5, 2020
1 parent 03050c6 commit d02e3a9
Show file tree
Hide file tree
Showing 5 changed files with 146 additions and 245 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,7 @@
animation: euiFlyout $euiAnimSpeedNormal $euiAnimSlightResistance;
}

.lnsDimensionContainer--noAnimation {
animation: none;
}

.lnsDimensionContainer__footer,
.lnsDimensionContainer__header {
padding: $euiSizeS;
}

.lnsDimensionContainer__trigger {
width: 100%;
display: block;
word-break: break-word;
}
Original file line number Diff line number Diff line change
Expand Up @@ -16,89 +16,42 @@ import {
EuiOutsideClickDetector,
} from '@elastic/eui';

import classNames from 'classnames';
import { i18n } from '@kbn/i18n';
import { VisualizationDimensionGroupConfig } from '../../../types';
import { DimensionContainerState } from './types';

export function DimensionContainer({
dimensionContainerState,
setDimensionContainerState,
groups,
accessor,
groupId,
trigger,
isOpen,
groupLabel,
handleClose,
panel,
panelTitle,
}: {
dimensionContainerState: DimensionContainerState;
setDimensionContainerState: (newState: DimensionContainerState) => void;
groups: VisualizationDimensionGroupConfig[];
accessor: string;
groupId: string;
trigger: React.ReactElement;
isOpen: boolean;
handleClose: () => void;
panel: React.ReactElement;
panelTitle: React.ReactNode;
groupLabel: string;
}) {
const [openByCreation, setIsOpenByCreation] = useState(
dimensionContainerState.openId === accessor
);
const [focusTrapIsEnabled, setFocusTrapIsEnabled] = useState(false);
const [flyoutIsVisible, setFlyoutIsVisible] = useState(false);

const noMatch = dimensionContainerState.isOpen
? !groups.some((d) => d.accessors.includes(accessor))
: false;

const closeFlyout = () => {
setDimensionContainerState({
isOpen: false,
openId: null,
addingToGroupId: null,
});
setIsOpenByCreation(false);
handleClose();
setFocusTrapIsEnabled(false);
setFlyoutIsVisible(false);
};

const openFlyout = () => {
setFlyoutIsVisible(true);
setTimeout(() => {
setFocusTrapIsEnabled(true);
}, 255);
};

const flyoutShouldBeOpen =
dimensionContainerState.isOpen &&
(dimensionContainerState.openId === accessor ||
(noMatch && dimensionContainerState.addingToGroupId === groupId));

useEffect(() => {
if (flyoutShouldBeOpen) {
openFlyout();
if (isOpen) {
// without setTimeout here the flyout pushes content when animating
setTimeout(() => {
setFocusTrapIsEnabled(true);
}, 255);
}
});
}, [isOpen]);

useEffect(() => {
if (!flyoutShouldBeOpen) {
if (flyoutIsVisible) {
setFlyoutIsVisible(false);
}
if (focusTrapIsEnabled) {
setFocusTrapIsEnabled(false);
}
}
}, [flyoutShouldBeOpen, flyoutIsVisible, focusTrapIsEnabled]);

const flyout = flyoutIsVisible && (
return isOpen ? (
<EuiFocusTrap disabled={!focusTrapIsEnabled} clickOutsideDisables={true}>
<EuiOutsideClickDetector onOutsideClick={closeFlyout} isDisabled={!flyoutIsVisible}>
<EuiOutsideClickDetector onOutsideClick={closeFlyout} isDisabled={!isOpen}>
<div
role="dialog"
aria-labelledby="lnsDimensionContainerTitle"
className={classNames('lnsDimensionContainer', {
'lnsDimensionContainer--noAnimation': openByCreation,
})}
className="lnsDimensionContainer"
>
<EuiFlyoutHeader hasBorder className="lnsDimensionContainer__header">
<EuiTitle size="xs">
Expand All @@ -109,7 +62,14 @@ export function DimensionContainer({
iconType="sortLeft"
flush="left"
>
<strong>{panelTitle}</strong>
<strong>
{i18n.translate('xpack.lens.configure.configurePanelTitle', {
defaultMessage: '{groupLabel} configuration',
values: {
groupLabel,
},
})}
</strong>
</EuiButtonEmpty>
</EuiTitle>
</EuiFlyoutHeader>
Expand All @@ -126,12 +86,5 @@ export function DimensionContainer({
</div>
</EuiOutsideClickDetector>
</EuiFocusTrap>
);

return (
<>
{trigger}
{flyout}
</>
);
) : null;
}
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import {
} from '../../mocks';
import { ChildDragDropProvider } from '../../../drag_drop';
import { EuiFormRow } from '@elastic/eui';
import { mount } from 'enzyme';
import { mountWithIntl } from 'test_utils/enzyme_helpers';
import { Visualization } from '../../../types';
import { LayerPanel } from './layer_panel';
Expand Down Expand Up @@ -211,7 +210,7 @@ describe('LayerPanel', () => {
groupId: 'a',
accessors: ['newid'],
filterOperations: () => true,
supportsMoreColumns: false,
supportsMoreColumns: true,
dataTestSubj: 'lnsGroup',
enableDimensionEditor: true,
},
Expand All @@ -220,11 +219,14 @@ describe('LayerPanel', () => {
mockVisualization.renderDimensionEditor = jest.fn();

const component = mountWithIntl(<LayerPanel {...getDefaultProps()} />);
act(() => {
component.find('[data-test-subj="lns-empty-dimension"]').first().simulate('click');
});
component.update();

const group = component.find('DimensionContainer');
const panel = mount(group.prop('panel'));

expect(panel.children()).toHaveLength(2);
const group = component.find('DimensionContainer').first();
const panel: React.ReactElement = group.prop('panel');
expect(panel.props.children).toHaveLength(2);
});

it('should keep the DimensionContainer open when configuring a new dimension', () => {
Expand Down Expand Up @@ -263,11 +265,8 @@ describe('LayerPanel', () => {
});

const component = mountWithIntl(<LayerPanel {...getDefaultProps()} />);

const group = component.find('DimensionContainer');
const triggerButton = mountWithIntl(group.prop('trigger'));
act(() => {
triggerButton.find('[data-test-subj="lns-empty-dimension"]').first().simulate('click');
component.find('[data-test-subj="lns-empty-dimension"]').first().simulate('click');
});
component.update();

Expand Down Expand Up @@ -312,10 +311,8 @@ describe('LayerPanel', () => {

const component = mountWithIntl(<LayerPanel {...getDefaultProps()} />);

const group = component.find('DimensionContainer');
const triggerButton = mountWithIntl(group.prop('trigger'));
act(() => {
triggerButton.find('[data-test-subj="lns-empty-dimension"]').first().simulate('click');
component.find('[data-test-subj="lns-empty-dimension"]').first().simulate('click');
});
component.update();
expect(component.find('EuiFlyoutHeader').exists()).toBe(true);
Expand Down
Loading

0 comments on commit d02e3a9

Please sign in to comment.