From c33d67feca86f26b1e927c7f028a68c56f7bb312 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 26 Aug 2020 12:38:51 -0400 Subject: [PATCH 01/28] Moving to a Flyout implementation --- .../editor_frame/_frame_layout.scss | 14 +++-- .../config_panel/dimension_popover.scss | 15 ++++-- .../config_panel/dimension_popover.tsx | 54 ++++++++++++------- 3 files changed, 57 insertions(+), 26 deletions(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/_frame_layout.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/_frame_layout.scss index c2e8d4f6c0049..31723dd35103d 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/_frame_layout.scss +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/_frame_layout.scss @@ -11,7 +11,7 @@ .lnsFrameLayout__pageContent { display: flex; - overflow: auto; + overflow: hidden; flex-grow: 1; } @@ -39,11 +39,15 @@ } .lnsFrameLayout__sidebar--right { - @include euiScrollBar; background-color: lightOrDarkTheme($euiColorLightestShade, $euiColorInk); min-width: $lnsPanelMinWidth + $euiSizeXL; - overflow-x: hidden; - overflow-y: scroll; - padding: $euiSize 0 $euiSize $euiSize; max-height: 100%; + + .lnsConfigPanel { + @include euiScrollBar; + padding: $euiSize 0 $euiSize $euiSize; + overflow-x: hidden; + overflow-y: scroll; + + } } diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.scss index 98036c7f31bd9..e31d79c399eb7 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.scss +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.scss @@ -1,7 +1,16 @@ +@import '@elastic/eui/src/components/flyout/variables'; +@import '@elastic/eui/src/components/flyout/mixins'; + .lnsDimensionPopover { - line-height: 0; - flex-grow: 1; - max-width: calc(100% - #{$euiSizeL}); + // Use the EuiFlyout style + @include euiFlyout; + // But with custom positioning to keep it within the sidebar contents + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + animation: euiFlyout $euiAnimSpeedNormal $euiAnimSlightResistance; } .lnsDimensionPopover__trigger { diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx index a90bd8122d18e..f53952817c230 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx @@ -6,7 +6,7 @@ import './dimension_popover.scss'; import React from 'react'; -import { EuiPopover } from '@elastic/eui'; +import { EuiIcon, EuiFlyoutHeader, EuiFlyoutBody, EuiTitle } from '@elastic/eui'; import { VisualizationDimensionGroupConfig } from '../../../types'; import { DimensionPopoverState } from './types'; @@ -28,23 +28,41 @@ export function DimensionPopover({ panel: React.ReactElement; }) { const noMatch = popoverState.isOpen ? !groups.some((d) => d.accessors.includes(accessor)) : false; + + let flyout; + if ( + popoverState.isOpen && + (popoverState.openId === accessor || (noMatch && popoverState.addingToGroupId === groupId)) + ) { + flyout = ( +
+ + + + + + {panel} +
+ ); + } + return ( - { - setPopoverState({ isOpen: false, openId: null, addingToGroupId: null, tabId: null }); - }} - button={trigger} - anchorPosition="leftUp" - panelPaddingSize="none" - > - {panel} - + <> +
{trigger}
+ {flyout} + ); } From 2bb56c5fa74bbe8d5afee8bb895fbef2d36734c0 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 26 Aug 2020 16:31:50 -0400 Subject: [PATCH 02/28] Fix up inner layout of flyout --- .../config_panel/_layer_panel.scss | 2 +- .../config_panel/dimension_popover.scss | 10 +- .../config_panel/dimension_popover.tsx | 52 ++- .../editor_frame/config_panel/layer_panel.tsx | 16 +- .../dimension_panel/popover_editor.scss | 9 +- .../dimension_panel/popover_editor.tsx | 369 +++++++++--------- 6 files changed, 236 insertions(+), 222 deletions(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss index ab53ff983ca26..0e204dc023ce8 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss @@ -52,6 +52,6 @@ } .lnsLayerPanel__styleEditor { - width: $euiSize * 30; + // width: $euiSize * 30; padding: $euiSizeS; } diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.scss index e31d79c399eb7..d7694ceee761d 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.scss +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.scss @@ -13,8 +13,16 @@ animation: euiFlyout $euiAnimSpeedNormal $euiAnimSlightResistance; } +.lnsDimensionPopover__footer { + padding: $euiSizeXS; +} + +.lnsDimensionPopover__header { + padding: $euiSizeS; +} + .lnsDimensionPopover__trigger { - max-width: 100%; + width: 100%; display: block; word-break: break-word; } diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx index f53952817c230..77e6e4d57502d 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx @@ -6,7 +6,14 @@ import './dimension_popover.scss'; import React from 'react'; -import { EuiIcon, EuiFlyoutHeader, EuiFlyoutBody, EuiTitle } from '@elastic/eui'; +import { + EuiIcon, + EuiFlyoutHeader, + EuiFlyoutFooter, + EuiTitle, + EuiButtonEmpty, + EuiFlexItem, +} from '@elastic/eui'; import { VisualizationDimensionGroupConfig } from '../../../types'; import { DimensionPopoverState } from './types'; @@ -18,6 +25,7 @@ export function DimensionPopover({ groupId, trigger, panel, + panelTitle, }: { popoverState: DimensionPopoverState; setPopoverState: (newState: DimensionPopoverState) => void; @@ -26,35 +34,47 @@ export function DimensionPopover({ groupId: string; trigger: React.ReactElement; panel: React.ReactElement; + panelTitle: React.ReactNode; }) { const noMatch = popoverState.isOpen ? !groups.some((d) => d.accessors.includes(accessor)) : false; + const closeFlyout = () => { + setPopoverState({ + isOpen: false, + openId: null, + addingToGroupId: null, + tabId: null, + }); + }; + let flyout; if ( popoverState.isOpen && (popoverState.openId === accessor || (noMatch && popoverState.addingToGroupId === groupId)) ) { flyout = ( -
- +
+ - - {panel} + + {panel} + + + + Close + +
); } diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx index b45dd13bfa4fd..2878b1ee9b3bb 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx @@ -297,19 +297,8 @@ export function LayerPanel( }} /> } - panel={ - t.id === popoverState.tabId) || tabs[0]} - size="s" - onTabClick={(tab) => { - setPopoverState({ - ...popoverState, - tabId: tab.id as typeof popoverState['tabId'], - }); - }} - /> - } + panel={<>{tabs.map((tab) => tab.content)}} + panelTitle={`${group.groupLabel} configuration`} />
} + panelTitle={group.groupLabel} panel={ button { diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx index d5f0110f071f1..02ac5c83ff82c 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx @@ -224,203 +224,198 @@ export function PopoverEditor(props: PopoverEditorProps) { } return ( -
- - - + +
+ { + setState( + deleteColumn({ + state, + layerId, + columnId, + }) + ); + }} + onChoose={(choice) => { + let column: IndexPatternColumn; + if ( + !incompatibleSelectedOperationType && + selectedColumn && + 'field' in choice && + choice.operationType === selectedColumn.operationType + ) { + // If we just changed the field are not in an error state and the operation didn't change, + // we use the operations onFieldChange method to calculate the new column. + column = changeField(selectedColumn, currentIndexPattern, fieldMap[choice.field]); + } else { + // Otherwise we'll use the buildColumn method to calculate a new column + const compatibleOperations = + ('field' in choice && operationFieldSupportMatrix.operationByField[choice.field]) || + []; + let operation; + if (compatibleOperations.length > 0) { + operation = + incompatibleSelectedOperationType && + compatibleOperations.includes(incompatibleSelectedOperationType) + ? incompatibleSelectedOperationType + : compatibleOperations[0]; + } else if ('field' in choice) { + operation = choice.operationType; + } + column = buildColumn({ + columns: props.state.layers[props.layerId].columns, + field: fieldMap[choice.field], + indexPattern: currentIndexPattern, + layerId: props.layerId, + suggestedPriority: props.suggestedPriority, + op: operation as OperationType, + previousColumn: selectedColumn, + }); } - incompatibleSelectedOperationType={incompatibleSelectedOperationType} - onDeleteColumn={() => { - setState( - deleteColumn({ - state, - layerId, - columnId, - }) - ); - }} - onChoose={(choice) => { - let column: IndexPatternColumn; - if ( - !incompatibleSelectedOperationType && - selectedColumn && - 'field' in choice && - choice.operationType === selectedColumn.operationType - ) { - // If we just changed the field are not in an error state and the operation didn't change, - // we use the operations onFieldChange method to calculate the new column. - column = changeField(selectedColumn, currentIndexPattern, fieldMap[choice.field]); - } else { - // Otherwise we'll use the buildColumn method to calculate a new column - const compatibleOperations = - ('field' in choice && - operationFieldSupportMatrix.operationByField[choice.field]) || - []; - let operation; - if (compatibleOperations.length > 0) { - operation = - incompatibleSelectedOperationType && - compatibleOperations.includes(incompatibleSelectedOperationType) - ? incompatibleSelectedOperationType - : compatibleOperations[0]; - } else if ('field' in choice) { - operation = choice.operationType; - } - column = buildColumn({ - columns: props.state.layers[props.layerId].columns, - field: fieldMap[choice.field], - indexPattern: currentIndexPattern, - layerId: props.layerId, - suggestedPriority: props.suggestedPriority, - op: operation as OperationType, - previousColumn: selectedColumn, + + setState( + changeColumn({ + state, + layerId, + columnId, + newColumn: column, + keepParams: false, + }) + ); + setInvalidOperationType(null); + }} + /> +
+
+ {incompatibleSelectedOperationType && selectedColumn && ( + <> + + + + )} + {incompatibleSelectedOperationType && !selectedColumn && ( + <> + + + + )} + {!incompatibleSelectedOperationType && ParamEditor && ( + <> + + + + )} + {!incompatibleSelectedOperationType && selectedColumn && ( + + { + setState({ + ...state, + layers: { + ...state.layers, + [layerId]: { + ...state.layers[layerId], + columns: { + ...state.layers[layerId].columns, + [columnId]: { + ...selectedColumn, + label: value, + customLabel: true, + }, + }, + }, + }, }); - } + }} + /> + + )} + {!hideGrouping && ( + { + setState({ + ...state, + layers: { + ...state.layers, + [props.layerId]: { + ...state.layers[props.layerId], + columnOrder, + }, + }, + }); + }} + /> + )} + + {selectedColumn && selectedColumn.dataType === 'number' ? ( + { setState( - changeColumn({ + updateColumnParam({ state, layerId, - columnId, - newColumn: column, - keepParams: false, + currentColumn: selectedColumn, + paramName: 'format', + value: newFormat, }) ); - setInvalidOperationType(null); }} /> - - - - - - - - {incompatibleSelectedOperationType && selectedColumn && ( - <> - - - - )} - {incompatibleSelectedOperationType && !selectedColumn && ( - <> - - - - )} - {!incompatibleSelectedOperationType && ParamEditor && ( - <> - - - - )} - {!incompatibleSelectedOperationType && selectedColumn && ( - - { - setState({ - ...state, - layers: { - ...state.layers, - [layerId]: { - ...state.layers[layerId], - columns: { - ...state.layers[layerId].columns, - [columnId]: { - ...selectedColumn, - label: value, - customLabel: true, - }, - }, - }, - }, - }); - }} - /> - - )} - - {!hideGrouping && ( - { - setState({ - ...state, - layers: { - ...state.layers, - [props.layerId]: { - ...state.layers[props.layerId], - columnOrder, - }, - }, - }); - }} - /> - )} - - {selectedColumn && selectedColumn.dataType === 'number' ? ( - { - setState( - updateColumnParam({ - state, - layerId, - currentColumn: selectedColumn, - paramName: 'format', - value: newFormat, - }) - ); - }} - /> - ) : null} - - - - + ) : null} +
); } From d4da924e27128b65fe0cacfc554302c193114a0c Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 26 Aug 2020 17:16:32 -0400 Subject: [PATCH 03/28] Fix up form rows --- .../config_panel/_layer_panel.scss | 3 +- .../dimension_panel/format_selector.tsx | 4 +- .../dimension_panel/popover_editor.scss | 7 +- .../dimension_panel/popover_editor.tsx | 194 +++++++++--------- .../operations/definitions/date_histogram.tsx | 9 +- .../operations/definitions/terms.tsx | 3 + 6 files changed, 118 insertions(+), 102 deletions(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss index 0e204dc023ce8..34cefd7d1b101 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss @@ -52,6 +52,5 @@ } .lnsLayerPanel__styleEditor { - // width: $euiSize * 30; - padding: $euiSizeS; + padding: 0 $euiSizeS $euiSizeS; } diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/format_selector.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/format_selector.tsx index b3b0190b9c400..8fb9c8d2d4926 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/format_selector.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/format_selector.tsx @@ -63,7 +63,8 @@ export function FormatSelector(props: FormatSelectorProps) { label={i18n.translate('xpack.lens.indexPattern.columnFormatLabel', { defaultMessage: 'Value format', })} - display="rowCompressed" + display="columnCompressed" + fullWidth > button { padding-top: 0; padding-bottom: 0; diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx index 02ac5c83ff82c..0cd97852b5f18 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx @@ -19,6 +19,7 @@ import { EuiListGroupItemProps, } from '@elastic/eui'; import classNames from 'classnames'; +import { EuiFormLabel } from '@elastic/eui'; import { IndexPatternColumn, OperationType } from '../indexpattern'; import { IndexPatternDimensionEditorProps, OperationFieldSupportMatrix } from './dimension_panel'; import { @@ -128,8 +129,8 @@ export function PopoverEditor(props: PopoverEditorProps) { ); } - function getSideNavItems(): EuiListGroupItemProps[] { - return getOperationTypes().map(({ operationType, compatibleWithCurrentField }) => { + const sideNavItems: EuiListGroupItemProps[] = getOperationTypes().map( + ({ operationType, compatibleWithCurrentField }) => { const isActive = Boolean( incompatibleSelectedOperationType === operationType || (!incompatibleSelectedOperationType && @@ -220,116 +221,112 @@ export function PopoverEditor(props: PopoverEditorProps) { ); }, }; - }); - } + } + ); return (
-
- { - setState( - deleteColumn({ - state, - layerId, - columnId, - }) - ); - }} - onChoose={(choice) => { - let column: IndexPatternColumn; - if ( - !incompatibleSelectedOperationType && - selectedColumn && - 'field' in choice && - choice.operationType === selectedColumn.operationType - ) { - // If we just changed the field are not in an error state and the operation didn't change, - // we use the operations onFieldChange method to calculate the new column. - column = changeField(selectedColumn, currentIndexPattern, fieldMap[choice.field]); - } else { - // Otherwise we'll use the buildColumn method to calculate a new column - const compatibleOperations = - ('field' in choice && operationFieldSupportMatrix.operationByField[choice.field]) || - []; - let operation; - if (compatibleOperations.length > 0) { - operation = - incompatibleSelectedOperationType && - compatibleOperations.includes(incompatibleSelectedOperationType) - ? incompatibleSelectedOperationType - : compatibleOperations[0]; - } else if ('field' in choice) { - operation = choice.operationType; - } - column = buildColumn({ - columns: props.state.layers[props.layerId].columns, - field: fieldMap[choice.field], - indexPattern: currentIndexPattern, - layerId: props.layerId, - suggestedPriority: props.suggestedPriority, - op: operation as OperationType, - previousColumn: selectedColumn, - }); - } - - setState( - changeColumn({ - state, - layerId, - columnId, - newColumn: column, - keepParams: false, - }) - ); - setInvalidOperationType(null); - }} + Choose a function + + 3 ? 'lnsIndexPatternDimensionEditor__columns' : ''} + gutterSize="none" + listItems={sideNavItems} + maxWidth={false} />
-
+ +
+ + { + setState( + deleteColumn({ + state, + layerId, + columnId, + }) + ); + }} + onChoose={(choice) => { + let column: IndexPatternColumn; + if ( + !incompatibleSelectedOperationType && + selectedColumn && + 'field' in choice && + choice.operationType === selectedColumn.operationType + ) { + // If we just changed the field are not in an error state and the operation didn't change, + // we use the operations onFieldChange method to calculate the new column. + column = changeField(selectedColumn, currentIndexPattern, fieldMap[choice.field]); + } else { + // Otherwise we'll use the buildColumn method to calculate a new column + const compatibleOperations = + ('field' in choice && + operationFieldSupportMatrix.operationByField[choice.field]) || + []; + let operation; + if (compatibleOperations.length > 0) { + operation = + incompatibleSelectedOperationType && + compatibleOperations.includes(incompatibleSelectedOperationType) + ? incompatibleSelectedOperationType + : compatibleOperations[0]; + } else if ('field' in choice) { + operation = choice.operationType; + } + column = buildColumn({ + columns: props.state.layers[props.layerId].columns, + field: fieldMap[choice.field], + indexPattern: currentIndexPattern, + layerId: props.layerId, + suggestedPriority: props.suggestedPriority, + op: operation as OperationType, + previousColumn: selectedColumn, + }); + } + + setState( + changeColumn({ + state, + layerId, + columnId, + newColumn: column, + keepParams: false, + }) + ); + setInvalidOperationType(null); + }} + /> + {incompatibleSelectedOperationType && selectedColumn && ( <> + - - - )} - {incompatibleSelectedOperationType && !selectedColumn && ( - <> - - )} + {!incompatibleSelectedOperationType && ParamEditor && ( <> + - )} +
+ + + +
{!incompatibleSelectedOperationType && selectedColumn && ( {!intervalIsRestricted && ( - + )} @@ -197,6 +198,8 @@ export const dateHistogramOperation: OperationDefinition {intervalIsRestricted ? ( ) : ( <> - + { diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms.tsx index c1b19fd5549e7..20c421008a746 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms.tsx @@ -177,6 +177,7 @@ export const termsOperation: OperationDefinition = { defaultMessage: 'Number of values', })} display="columnCompressed" + fullWidth > = { defaultMessage: 'Order by', })} display="columnCompressed" + fullWidth > = { defaultMessage: 'Order direction', })} display="columnCompressed" + fullWidth > Date: Wed, 26 Aug 2020 17:33:33 -0400 Subject: [PATCH 04/28] A few more adjustments for flyout --- .../editor_frame/_frame_layout.scss | 2 ++ .../config_panel/dimension_popover.scss | 5 +---- .../config_panel/dimension_popover.tsx | 15 +++++++++------ .../editor_frame/config_panel/layer_panel.tsx | 1 + .../dimension_panel/field_select.tsx | 2 +- 5 files changed, 14 insertions(+), 11 deletions(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/_frame_layout.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/_frame_layout.scss index 31723dd35103d..4e90f7e3f812b 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/_frame_layout.scss +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/_frame_layout.scss @@ -39,9 +39,11 @@ } .lnsFrameLayout__sidebar--right { + flex-basis: 25%; background-color: lightOrDarkTheme($euiColorLightestShade, $euiColorInk); min-width: $lnsPanelMinWidth + $euiSizeXL; max-height: 100%; + max-width: $euiFormMaxWidth + $euiSizeXXL; .lnsConfigPanel { @include euiScrollBar; diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.scss index d7694ceee761d..a038dc714ee25 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.scss +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.scss @@ -13,10 +13,7 @@ animation: euiFlyout $euiAnimSpeedNormal $euiAnimSlightResistance; } -.lnsDimensionPopover__footer { - padding: $euiSizeXS; -} - +.lnsDimensionPopover__footer, .lnsDimensionPopover__header { padding: $euiSizeS; } diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx index 77e6e4d57502d..e0cef88d9c333 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx @@ -60,18 +60,21 @@ export function DimensionPopover({ > - + + {panelTitle} + {panel} - + Close diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx index 2878b1ee9b3bb..7205778ba0bfe 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx @@ -159,6 +159,7 @@ export function LayerPanel( return ( Date: Wed, 26 Aug 2020 19:08:44 -0400 Subject: [PATCH 05/28] Cleanup --- .../editor_frame/_frame_layout.scss | 3 +- .../config_panel/dimension_popover.tsx | 2 - .../editor_frame/config_panel/layer_panel.tsx | 78 +++++----- .../editor_frame/config_panel/types.ts | 1 - .../dimension_panel/format_selector.tsx | 140 +++++++++--------- .../dimension_panel/popover_editor.scss | 9 +- .../dimension_panel/popover_editor.tsx | 37 ++--- 7 files changed, 124 insertions(+), 146 deletions(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/_frame_layout.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/_frame_layout.scss index 4e90f7e3f812b..9367e59b11717 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/_frame_layout.scss +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/_frame_layout.scss @@ -42,14 +42,13 @@ flex-basis: 25%; background-color: lightOrDarkTheme($euiColorLightestShade, $euiColorInk); min-width: $lnsPanelMinWidth + $euiSizeXL; - max-height: 100%; max-width: $euiFormMaxWidth + $euiSizeXXL; + max-height: 100%; .lnsConfigPanel { @include euiScrollBar; padding: $euiSize 0 $euiSize $euiSize; overflow-x: hidden; overflow-y: scroll; - } } diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx index e0cef88d9c333..9e4e5f7c0c129 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx @@ -7,7 +7,6 @@ import './dimension_popover.scss'; import React from 'react'; import { - EuiIcon, EuiFlyoutHeader, EuiFlyoutFooter, EuiTitle, @@ -43,7 +42,6 @@ export function DimensionPopover({ isOpen: false, openId: null, addingToGroupId: null, - tabId: null, }); }; diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx index 7205778ba0bfe..4bb16eceddba1 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx @@ -13,7 +13,6 @@ import { EuiFlexItem, EuiButtonEmpty, EuiFormRow, - EuiTabbedContent, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; @@ -31,7 +30,6 @@ const initialPopoverState = { isOpen: false, openId: null, addingToGroupId: null, - tabId: null, }; export function LayerPanel( @@ -173,46 +171,33 @@ export function LayerPanel( > <> {group.accessors.map((accessor) => { - const tabs = [ - { - id: 'datasource', - name: i18n.translate('xpack.lens.editorFrame.quickFunctionsLabel', { - defaultMessage: 'Quick functions', - }), - content: ( + const dimensionEditor = ( + + ); + + let extraDimensionEditor; + if (activeVisualization.renderDimensionEditor && group.enableDimensionEditor) { + extraDimensionEditor = ( +
- ), - }, - ]; - - if (activeVisualization.renderDimensionEditor && group.enableDimensionEditor) { - tabs.push({ - id: 'visualization', - name: i18n.translate('xpack.lens.editorFrame.formatStyleLabel', { - defaultMessage: 'Format & style', - }), - content: ( -
- -
- ), - }); +
+ ); } return ( @@ -291,15 +276,24 @@ export function LayerPanel( isOpen: true, openId: accessor, addingToGroupId: null, // not set for existing dimension - tabId: 'datasource', }); } }, }} /> } - panel={<>{tabs.map((tab) => tab.content)}} - panelTitle={`${group.groupLabel} configuration`} + panel={ + <> + {dimensionEditor} + {extraDimensionEditor} + + } + panelTitle={i18n.translate('xpack.lens.configure.configurePanelTitle', { + defaultMessage: '{groupLabel} configuration', + values: { + groupLabel: group.groupLabel, + }, + })} /> = { @@ -57,82 +57,84 @@ export function FormatSelector(props: FormatSelectorProps) { }), }; + const label = i18n.translate('xpack.lens.indexPattern.columnFormatLabel', { + defaultMessage: 'Value format', + }); + + const decimalsLabel = i18n.translate('xpack.lens.indexPattern.decimalPlacesLabel', { + defaultMessage: 'Decimals', + }); + return ( <> - - ({ - value: id, - label: format.title ?? id, - })), - ]} - selectedOptions={ - currentFormat - ? [ - { - value: currentFormat.id, - label: selectedFormat?.title ?? currentFormat.id, - }, - ] - : [defaultOption] - } - onChange={(choices) => { - if (choices.length === 0) { - return; - } - - if (!choices[0].value) { - onChange(); - return; + +
+ ({ + value: id, + label: format.title ?? id, + })), + ]} + selectedOptions={ + currentFormat + ? [ + { + value: currentFormat.id, + label: selectedFormat?.title ?? currentFormat.id, + }, + ] + : [defaultOption] } - onChange({ - id: choices[0].value, - params: { decimals: state.decimalPlaces }, - }); - }} - /> - + onChange={(choices) => { + if (choices.length === 0) { + return; + } - {currentFormat ? ( - - { - setState({ decimalPlaces: Number(e.target.value) }); + if (!choices[0].value) { + onChange(); + return; + } onChange({ - id: (selectedColumn.params as { format: { id: string } }).format.id, - params: { - decimals: Number(e.target.value), - }, + id: choices[0].value, + params: { decimals: state.decimalPlaces }, }); }} - compressed - fullWidth /> - - ) : null} + {currentFormat ? ( + <> + + { + setState({ decimalPlaces: Number(e.currentTarget.value) }); + onChange({ + id: (selectedColumn.params as { format: { id: string } }).format.id, + params: { + decimals: Number(e.currentTarget.value), + }, + }); + }} + data-test-subj="indexPattern-dimension-formatDecimals" + compressed + fullWidth + prepend={decimalsLabel} + aria-label={decimalsLabel} + /> + + ) : null} +
+ ); } diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.scss b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.scss index 27177fd24633c..096047da681b9 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.scss +++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.scss @@ -1,18 +1,13 @@ .lnsIndexPatternDimensionEditor { - // width: $euiSize * 30; - // padding: $euiSizeS; - // max-width: 100%; height: 100%; } -.lnsIndexPatternDimensionEditor__left, -.lnsIndexPatternDimensionEditor__right { +.lnsIndexPatternDimensionEditor__section { padding: $euiSizeS; } -.lnsIndexPatternDimensionEditor__left { +.lnsIndexPatternDimensionEditor__section--shaded { background-color: $euiColorLightestShade; - // width: $euiSize * 8; } .lnsIndexPatternDimensionEditor__columns { diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx index 0cd97852b5f18..929398224a8f6 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx @@ -9,16 +9,12 @@ import _ from 'lodash'; import React, { useState, useMemo, useEffect } from 'react'; import { i18n } from '@kbn/i18n'; import { - EuiFlexItem, - EuiFlexGroup, EuiListGroup, - EuiCallOut, EuiFormRow, EuiFieldText, EuiSpacer, EuiListGroupItemProps, } from '@elastic/eui'; -import classNames from 'classnames'; import { EuiFormLabel } from '@elastic/eui'; import { IndexPatternColumn, OperationType } from '../indexpattern'; import { IndexPatternDimensionEditorProps, OperationFieldSupportMatrix } from './dimension_panel'; @@ -226,7 +222,7 @@ export function PopoverEditor(props: PopoverEditorProps) { return (
-
+
Choose a function
-
- +
+ - {incompatibleSelectedOperationType && selectedColumn && ( - <> - - - - )} {!incompatibleSelectedOperationType && ParamEditor && ( <> @@ -346,7 +339,7 @@ export function PopoverEditor(props: PopoverEditorProps) { -
+
{!incompatibleSelectedOperationType && selectedColumn && ( Date: Wed, 26 Aug 2020 19:16:04 -0400 Subject: [PATCH 06/28] Fix 2 tests --- .../dimension_panel/dimension_panel.test.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.test.tsx index f184d5628ab1c..3e4bb0cfca4ac 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.test.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.test.tsx @@ -7,7 +7,7 @@ import { ReactWrapper, ShallowWrapper } from 'enzyme'; import React from 'react'; import { act } from 'react-dom/test-utils'; -import { EuiComboBox, EuiListGroupItemProps, EuiListGroup, EuiFieldNumber } from '@elastic/eui'; +import { EuiComboBox, EuiListGroupItemProps, EuiListGroup, EuiRange } from '@elastic/eui'; import { DataPublicPluginStart } from '../../../../../../src/plugins/data/public'; import { changeColumn } from '../state_helpers'; import { @@ -1188,7 +1188,7 @@ describe('IndexPatternDimensionEditorPanel', () => { expect( wrapper - .find(EuiFieldNumber) + .find(EuiRange) .filter('[data-test-subj="indexPattern-dimension-formatDecimals"]') .prop('value') ).toEqual(0); @@ -1224,7 +1224,7 @@ describe('IndexPatternDimensionEditorPanel', () => { act(() => { wrapper - .find(EuiFieldNumber) + .find(EuiRange) .filter('[data-test-subj="indexPattern-dimension-formatDecimals"]') .prop('onChange')!({ target: { value: '0' } }); }); From 106e8684cf9dbc8a444ad2fc74e777116c7b3880 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 26 Aug 2020 19:21:40 -0400 Subject: [PATCH 07/28] i18n --- x-pack/plugins/translations/translations/ja-JP.json | 3 --- x-pack/plugins/translations/translations/zh-CN.json | 3 --- 2 files changed, 6 deletions(-) diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 54c92d323fcff..7fb9b7ef64143 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -9573,10 +9573,8 @@ "xpack.lens.editorFrame.emptyWorkspaceHeading": "レンズはビジュアライゼーションを作成するための新しいツールです", "xpack.lens.editorFrame.expandRenderingErrorButton": "エラーの詳細を表示", "xpack.lens.editorFrame.expressionFailure": "表現を正常に実行できませんでした", - "xpack.lens.editorFrame.formatStyleLabel": "書式とスタイル", "xpack.lens.editorFrame.goToForums": "リクエストとフィードバック", "xpack.lens.editorFrame.previewErrorLabel": "レンダリングのプレビューに失敗しました", - "xpack.lens.editorFrame.quickFunctionsLabel": "クイック機能", "xpack.lens.editorFrame.requiredDimensionWarningLabel": "必要な次元", "xpack.lens.editorFrame.suggestionPanelTitle": "提案", "xpack.lens.embeddable.failure": "ビジュアライゼーションを表示できませんでした", @@ -9630,7 +9628,6 @@ "xpack.lens.indexPattern.existenceErrorLabel": "フィールド情報を読み込めません", "xpack.lens.indexPattern.fieldDistributionLabel": "分布", "xpack.lens.indexPattern.fieldItemTooltip": "可視化するには、ドラッグアンドドロップします。", - "xpack.lens.indexPattern.fieldlessOperationLabel": "この関数を使用するには、フィールドを選択してください。", "xpack.lens.indexPattern.fieldPanelEmptyStringValue": "空の文字列", "xpack.lens.indexPattern.fieldPlaceholder": "フィールド", "xpack.lens.indexPattern.fieldStatsButtonLabel": "フィールドプレビューを表示するには、クリックします。可視化するには、ドラッグアンドドロップします。", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index df721cb624662..c217f8819f978 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -9579,10 +9579,8 @@ "xpack.lens.editorFrame.emptyWorkspaceHeading": "Lens 是用于创建可视化的新工具", "xpack.lens.editorFrame.expandRenderingErrorButton": "显示错误的详情", "xpack.lens.editorFrame.expressionFailure": "无法成功执行表达式", - "xpack.lens.editorFrame.formatStyleLabel": "格式和样式", "xpack.lens.editorFrame.goToForums": "提出请求并提供反馈", "xpack.lens.editorFrame.previewErrorLabel": "预览呈现失败", - "xpack.lens.editorFrame.quickFunctionsLabel": "快选函数", "xpack.lens.editorFrame.requiredDimensionWarningLabel": "所需尺寸", "xpack.lens.editorFrame.suggestionPanelTitle": "建议", "xpack.lens.embeddable.failure": "无法显示可视化", @@ -9636,7 +9634,6 @@ "xpack.lens.indexPattern.existenceErrorLabel": "无法加载字段信息", "xpack.lens.indexPattern.fieldDistributionLabel": "分布", "xpack.lens.indexPattern.fieldItemTooltip": "拖放以可视化。", - "xpack.lens.indexPattern.fieldlessOperationLabel": "要使用此函数，请选择字段。", "xpack.lens.indexPattern.fieldPanelEmptyStringValue": "空字符串", "xpack.lens.indexPattern.fieldPlaceholder": "字段", "xpack.lens.indexPattern.fieldStatsButtonLabel": "单击以进行字段预览，或拖放以进行可视化。", From d943cb494b750a9a37aa6d30145e9df341364bb4 Mon Sep 17 00:00:00 2001 From: dej611 Date: Mon, 7 Sep 2020 10:37:03 +0200 Subject: [PATCH 08/28] :white_check_mark: Fix Jest tests --- .../editor_frame/config_panel/layer_panel.test.tsx | 12 ++++++------ .../dimension_panel/dimension_panel.test.tsx | 8 ++++---- .../dimension_panel/popover_editor.tsx | 1 + 3 files changed, 11 insertions(+), 10 deletions(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx index 85dbee6de524f..6209a183e5821 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx @@ -203,7 +203,7 @@ describe('LayerPanel', () => { expect(group).toHaveLength(1); }); - it('should render the datasource and visualization panels inside the dimension popover', () => { + it('should render the datasource and visualization panels inside the dimension flyout', () => { mockVisualization.getConfiguration.mockReturnValueOnce({ groups: [ { @@ -224,10 +224,10 @@ describe('LayerPanel', () => { const group = component.find('DimensionPopover'); const panel = mount(group.prop('panel')); - expect(panel.find('EuiTabbedContent').prop('tabs')).toHaveLength(2); + expect(panel.children()).toHaveLength(2); }); - it('should keep the popover open when configuring a new dimension', () => { + it('should keep the flyout open when configuring a new dimension', () => { /** * The ID generation system for new dimensions has been messy before, so * this tests that the ID used in the first render is used to keep the popover @@ -271,7 +271,7 @@ describe('LayerPanel', () => { }); component.update(); - expect(component.find(EuiPopover).prop('isOpen')).toBe(true); + expect(component.find('EuiFlyoutHeader').exists()).toBe(true); }); it('should close the popover when the active visualization changes', () => { @@ -318,12 +318,12 @@ describe('LayerPanel', () => { triggerButton.find('[data-test-subj="lns-empty-dimension"]').first().simulate('click'); }); component.update(); - expect(component.find(EuiPopover).prop('isOpen')).toBe(true); + expect(component.find('EuiFlyoutHeader').exists()).toBe(true); act(() => { component.setProps({ activeVisualizationId: 'vis2' }); }); component.update(); - expect(component.find(EuiPopover).prop('isOpen')).toBe(false); + expect(component.find('EuiFlyoutHeader').exists()).toBe(false); }); }); diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.test.tsx index 3e4bb0cfca4ac..dd7611ca7f41f 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.test.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.test.tsx @@ -619,9 +619,9 @@ describe('IndexPatternDimensionEditorPanel', () => { .find('button[data-test-subj="lns-indexPatternDimension-terms incompatible"]') .simulate('click'); - expect(wrapper.find('[data-test-subj="indexPattern-invalid-operation"]')).not.toHaveLength( - 0 - ); + expect( + wrapper.find('[data-test-subj="indexPattern-field-selection-row"]').first().prop('error') + ).toBeDefined(); expect(setState).not.toHaveBeenCalled(); }); @@ -1226,7 +1226,7 @@ describe('IndexPatternDimensionEditorPanel', () => { wrapper .find(EuiRange) .filter('[data-test-subj="indexPattern-dimension-formatDecimals"]') - .prop('onChange')!({ target: { value: '0' } }); + .prop('onChange')!({ currentTarget: { value: '0' } }); }); expect(setState).toHaveBeenCalledWith({ diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx index 929398224a8f6..8fdef9ea228e6 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx @@ -235,6 +235,7 @@ export function PopoverEditor(props: PopoverEditorProps) {
Date: Mon, 7 Sep 2020 13:06:11 +0200 Subject: [PATCH 09/28] :label: Fix unused import --- .../editor_frame/config_panel/layer_panel.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx index 6209a183e5821..ddb9e86dea444 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx @@ -13,7 +13,7 @@ import { DatasourceMock, } from '../../mocks'; import { ChildDragDropProvider } from '../../../drag_drop'; -import { EuiFormRow, EuiPopover } from '@elastic/eui'; +import { EuiFormRow } from '@elastic/eui'; import { mount } from 'enzyme'; import { mountWithIntl } from 'test_utils/enzyme_helpers'; import { Visualization } from '../../../types'; From c4bcaa4fa05a53015d46cb6aee134b53fafd1c85 Mon Sep 17 00:00:00 2001 From: Marta Bondyra Date: Tue, 8 Sep 2020 13:27:55 +0200 Subject: [PATCH 10/28] fix functional tests --- .../editor_frame/config_panel/dimension_popover.tsx | 1 + x-pack/test/functional/page_objects/lens_page.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx index 9e4e5f7c0c129..c23ad0fe020c7 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx @@ -60,6 +60,7 @@ export function DimensionPopover({ Date: Tue, 8 Sep 2020 13:27:55 +0200 Subject: [PATCH 11/28] refactor: inline some code --- .../config_panel/dimension_popover.tsx | 68 +++++++++---------- .../editor_frame/config_panel/layer_panel.tsx | 54 +++++++-------- 2 files changed, 54 insertions(+), 68 deletions(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx index c23ad0fe020c7..173d518d83d4b 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx @@ -45,46 +45,40 @@ export function DimensionPopover({ }); }; - let flyout; - if ( - popoverState.isOpen && - (popoverState.openId === accessor || (noMatch && popoverState.addingToGroupId === groupId)) - ) { - flyout = ( -
- - - - {panelTitle} - - - - - {panel} - - - - Close - - -
- ); - } - return ( <>
{trigger}
- {flyout} + {popoverState.isOpen && + (popoverState.openId === accessor || + (noMatch && popoverState.addingToGroupId === groupId)) && ( +
+ + + + {panelTitle} + + + + + {panel} + + + + Close + + +
+ )} ); } diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx index 4bb16eceddba1..52b40fb128194 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx @@ -171,35 +171,6 @@ export function LayerPanel( > <> {group.accessors.map((accessor) => { - const dimensionEditor = ( - - ); - - let extraDimensionEditor; - if (activeVisualization.renderDimensionEditor && group.enableDimensionEditor) { - extraDimensionEditor = ( -
- -
- ); - } - return ( - {dimensionEditor} - {extraDimensionEditor} + + {activeVisualization.renderDimensionEditor && + group.enableDimensionEditor ? ( +
+ +
+ ) : null} } panelTitle={i18n.translate('xpack.lens.configure.configurePanelTitle', { From 167efa5e9f650d5f3395c0694fc7e9ec3a049a2f Mon Sep 17 00:00:00 2001 From: Marta Bondyra Date: Tue, 8 Sep 2020 14:18:08 +0200 Subject: [PATCH 12/28] fix skipped i18n --- .../editor_frame/config_panel/dimension_popover.tsx | 5 ++++- .../dimension_panel/popover_editor.tsx | 4 +++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx index 173d518d83d4b..bf8f2dace1251 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx @@ -13,6 +13,7 @@ import { EuiButtonEmpty, EuiFlexItem, } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; import { VisualizationDimensionGroupConfig } from '../../../types'; import { DimensionPopoverState } from './types'; @@ -74,7 +75,9 @@ export function DimensionPopover({ - Close + {i18n.translate('xpack.lens.dimensionFlyout.close', { + defaultMessage: 'Close', + })}
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx index 8fdef9ea228e6..5500c2bc8ebc9 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx @@ -236,7 +236,9 @@ export function PopoverEditor(props: PopoverEditorProps) {
Date: Tue, 8 Sep 2020 15:51:17 +0200 Subject: [PATCH 13/28] tests --- .../editor_frame/config_panel/dimension_popover.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx index bf8f2dace1251..bf9131f6c443e 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx @@ -61,7 +61,7 @@ export function DimensionPopover({ Date: Tue, 8 Sep 2020 16:06:03 +0200 Subject: [PATCH 14/28] remove animation on creating the field --- .../editor_frame/config_panel/dimension_popover.scss | 4 ++++ .../editor_frame/config_panel/dimension_popover.tsx | 11 +++++++++-- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.scss index a038dc714ee25..8daa876782bfc 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.scss +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.scss @@ -13,6 +13,10 @@ animation: euiFlyout $euiAnimSpeedNormal $euiAnimSlightResistance; } +.lnsDimensionPopover--noAnimation { + animation: none; +} + .lnsDimensionPopover__footer, .lnsDimensionPopover__header { padding: $euiSizeS; diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx index bf9131f6c443e..69e69ad9d0cc7 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx @@ -5,7 +5,7 @@ */ import './dimension_popover.scss'; -import React from 'react'; +import React, { useState } from 'react'; import { EuiFlyoutHeader, EuiFlyoutFooter, @@ -13,6 +13,8 @@ import { EuiButtonEmpty, EuiFlexItem, } from '@elastic/eui'; + +import classNames from 'classnames'; import { i18n } from '@kbn/i18n'; import { VisualizationDimensionGroupConfig } from '../../../types'; import { DimensionPopoverState } from './types'; @@ -36,6 +38,8 @@ export function DimensionPopover({ panel: React.ReactElement; panelTitle: React.ReactNode; }) { + const [openByCreation, setIsOpenByCreation] = React.useState(popoverState.openId === accessor); + const noMatch = popoverState.isOpen ? !groups.some((d) => d.accessors.includes(accessor)) : false; const closeFlyout = () => { @@ -44,6 +48,7 @@ export function DimensionPopover({ openId: null, addingToGroupId: null, }); + setIsOpenByCreation(false); }; return ( @@ -55,7 +60,9 @@ export function DimensionPopover({
From 3631fd6ce9d640f3dc00b8a3a69aaa4299ab8c88 Mon Sep 17 00:00:00 2001 From: Marta Bondyra Date: Tue, 8 Sep 2020 16:52:33 +0200 Subject: [PATCH 15/28] fix: revert inlining --- .../config_panel/dimension_popover.tsx | 70 +++++++++---------- 1 file changed, 34 insertions(+), 36 deletions(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx index 69e69ad9d0cc7..4f2f61e5e8c5a 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx @@ -38,7 +38,7 @@ export function DimensionPopover({ panel: React.ReactElement; panelTitle: React.ReactNode; }) { - const [openByCreation, setIsOpenByCreation] = React.useState(popoverState.openId === accessor); + const [openByCreation, setIsOpenByCreation] = useState(popoverState.openId === accessor); const noMatch = popoverState.isOpen ? !groups.some((d) => d.accessors.includes(accessor)) : false; @@ -51,44 +51,42 @@ export function DimensionPopover({ setIsOpenByCreation(false); }; + const flyout = + popoverState.isOpen && + (popoverState.openId === accessor || (noMatch && popoverState.addingToGroupId === groupId)) ? ( +
+ + + + {panelTitle} + + + + + {panel} + + + + Close + + +
+ ) : null; + return ( <>
{trigger}
- {popoverState.isOpen && - (popoverState.openId === accessor || - (noMatch && popoverState.addingToGroupId === groupId)) && ( -
- - - - {panelTitle} - - - - - {panel} - - - - {i18n.translate('xpack.lens.dimensionFlyout.close', { - defaultMessage: 'Close', - })} - - -
- )} + {flyout} ); } From 21f1eea2ae0db5b16c057805b1ba540b77e6be4e Mon Sep 17 00:00:00 2001 From: Marta Bondyra Date: Tue, 8 Sep 2020 17:21:21 +0200 Subject: [PATCH 16/28] bad revert --- .../editor_frame/config_panel/dimension_popover.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx index 4f2f61e5e8c5a..c9a0c6ae019f2 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx @@ -57,13 +57,15 @@ export function DimensionPopover({
- Close + {i18n.translate('xpack.lens.dimensionFlyout.close', { + defaultMessage: 'Close', + })}
From 721942d5074431867c3ad108f745b22124f4afae Mon Sep 17 00:00:00 2001 From: Marta Bondyra Date: Wed, 9 Sep 2020 12:15:52 +0200 Subject: [PATCH 17/28] revert to not inlining --- .../editor_frame/config_panel/layer_panel.tsx | 50 ++++++++++--------- 1 file changed, 27 insertions(+), 23 deletions(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx index 52b40fb128194..67ab251176123 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx @@ -171,6 +171,31 @@ export function LayerPanel( > <> {group.accessors.map((accessor) => { + const datasourceDimensionEditor = ( + + ); + const visDimensionEditor = + activeVisualization.renderDimensionEditor && group.enableDimensionEditor ? ( +
+ +
+ ) : null; return ( - - {activeVisualization.renderDimensionEditor && - group.enableDimensionEditor ? ( -
- -
- ) : null} + {datasourceDimensionEditor} + {visDimensionEditor} } panelTitle={i18n.translate('xpack.lens.configure.configurePanelTitle', { From 54f57b02f35421aedc3fba23b92ef29f13a15ae0 Mon Sep 17 00:00:00 2001 From: Marta Bondyra Date: Wed, 9 Sep 2020 15:08:00 +0200 Subject: [PATCH 18/28] naming from popover to flyout --- ...on_popover.scss => _dimension_flyout.scss} | 10 ++--- .../editor_frame/config_panel/_index.scss | 1 + ...nsion_popover.tsx => dimension_flyout.tsx} | 36 ++++++++--------- .../config_panel/layer_panel.test.tsx | 12 +++--- .../editor_frame/config_panel/layer_panel.tsx | 40 +++++++++---------- .../editor_frame/config_panel/types.ts | 2 +- .../indexpattern_datasource/_field_item.scss | 6 +-- ...over_editor.scss => dimension_editor.scss} | 0 ...opover_editor.tsx => dimension_editor.tsx} | 6 +-- .../dimension_panel/dimension_panel.tsx | 8 ++-- .../indexpattern_datasource/field_item.tsx | 4 +- .../operations/definitions/terms.test.tsx | 2 +- x-pack/plugins/lens/public/types.ts | 2 +- .../test/functional/page_objects/lens_page.ts | 2 +- 14 files changed, 65 insertions(+), 66 deletions(-) rename x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/{dimension_popover.scss => _dimension_flyout.scss} (81%) rename x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/{dimension_popover.tsx => dimension_flyout.tsx} (65%) rename x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/{popover_editor.scss => dimension_editor.scss} (100%) rename x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/{popover_editor.tsx => dimension_editor.tsx} (98%) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_dimension_flyout.scss similarity index 81% rename from x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.scss rename to x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_dimension_flyout.scss index 8daa876782bfc..bb620711360bf 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.scss +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_dimension_flyout.scss @@ -1,7 +1,7 @@ @import '@elastic/eui/src/components/flyout/variables'; @import '@elastic/eui/src/components/flyout/mixins'; -.lnsDimensionPopover { +.lnsDimensionFlyout { // Use the EuiFlyout style @include euiFlyout; // But with custom positioning to keep it within the sidebar contents @@ -13,16 +13,16 @@ animation: euiFlyout $euiAnimSpeedNormal $euiAnimSlightResistance; } -.lnsDimensionPopover--noAnimation { +.lnsDimensionFlyout--noAnimation { animation: none; } -.lnsDimensionPopover__footer, -.lnsDimensionPopover__header { +.lnsDimensionFlyout__footer, +.lnsDimensionFlyout__header { padding: $euiSizeS; } -.lnsDimensionPopover__trigger { +.lnsDimensionFlyout__trigger { width: 100%; display: block; word-break: break-word; diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_index.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_index.scss index 954fbfadf159b..19d3bc55b3168 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_index.scss +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_index.scss @@ -1,2 +1,3 @@ @import 'config_panel'; +@import 'dimension_flyout'; @import 'layer_panel'; diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_flyout.tsx similarity index 65% rename from x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx rename to x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_flyout.tsx index c9a0c6ae019f2..c41a027b188f2 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_flyout.tsx @@ -17,11 +17,11 @@ import { import classNames from 'classnames'; import { i18n } from '@kbn/i18n'; import { VisualizationDimensionGroupConfig } from '../../../types'; -import { DimensionPopoverState } from './types'; +import { DimensionFlyoutState } from './types'; -export function DimensionPopover({ - popoverState, - setPopoverState, +export function DimensionFlyout({ + flyoutState, + setFlyoutState, groups, accessor, groupId, @@ -29,8 +29,8 @@ export function DimensionPopover({ panel, panelTitle, }: { - popoverState: DimensionPopoverState; - setPopoverState: (newState: DimensionPopoverState) => void; + flyoutState: DimensionFlyoutState; + setFlyoutState: (newState: DimensionFlyoutState) => void; groups: VisualizationDimensionGroupConfig[]; accessor: string; groupId: string; @@ -38,12 +38,12 @@ export function DimensionPopover({ panel: React.ReactElement; panelTitle: React.ReactNode; }) { - const [openByCreation, setIsOpenByCreation] = useState(popoverState.openId === accessor); + const [openByCreation, setIsOpenByCreation] = useState(flyoutState.openId === accessor); - const noMatch = popoverState.isOpen ? !groups.some((d) => d.accessors.includes(accessor)) : false; + const noMatch = flyoutState.isOpen ? !groups.some((d) => d.accessors.includes(accessor)) : false; const closeFlyout = () => { - setPopoverState({ + setFlyoutState({ isOpen: false, openId: null, addingToGroupId: null, @@ -52,21 +52,21 @@ export function DimensionPopover({ }; const flyout = - popoverState.isOpen && - (popoverState.openId === accessor || (noMatch && popoverState.addingToGroupId === groupId)) ? ( + flyoutState.isOpen && + (flyoutState.openId === accessor || (noMatch && flyoutState.addingToGroupId === groupId)) ? (
- + @@ -77,7 +77,7 @@ export function DimensionPopover({ {panel} - + {i18n.translate('xpack.lens.dimensionFlyout.close', { defaultMessage: 'Close', @@ -89,7 +89,7 @@ export function DimensionPopover({ return ( <> -
{trigger}
+
{trigger}
{flyout} ); diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx index ddb9e86dea444..f75665e4b7d32 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx @@ -221,7 +221,7 @@ describe('LayerPanel', () => { const component = mountWithIntl(); - const group = component.find('DimensionPopover'); + const group = component.find('DimensionFlyout'); const panel = mount(group.prop('panel')); expect(panel.children()).toHaveLength(2); @@ -230,7 +230,7 @@ describe('LayerPanel', () => { it('should keep the flyout open when configuring a new dimension', () => { /** * The ID generation system for new dimensions has been messy before, so - * this tests that the ID used in the first render is used to keep the popover + * this tests that the ID used in the first render is used to keep the flyout * open in future renders */ (generateId as jest.Mock).mockReturnValueOnce(`newid`); @@ -264,7 +264,7 @@ describe('LayerPanel', () => { const component = mountWithIntl(); - const group = component.find('DimensionPopover'); + const group = component.find('DimensionFlyout'); const triggerButton = mountWithIntl(group.prop('trigger')); act(() => { triggerButton.find('[data-test-subj="lns-empty-dimension"]').first().simulate('click'); @@ -274,10 +274,10 @@ describe('LayerPanel', () => { expect(component.find('EuiFlyoutHeader').exists()).toBe(true); }); - it('should close the popover when the active visualization changes', () => { + it('should close the flyout when the active visualization changes', () => { /** * The ID generation system for new dimensions has been messy before, so - * this tests that the ID used in the first render is used to keep the popover + * this tests that the ID used in the first render is used to keep the flyout * open in future renders */ @@ -312,7 +312,7 @@ describe('LayerPanel', () => { const component = mountWithIntl(); - const group = component.find('DimensionPopover'); + const group = component.find('DimensionFlyout'); const triggerButton = mountWithIntl(group.prop('trigger')); act(() => { triggerButton.find('[data-test-subj="lns-empty-dimension"]').first().simulate('click'); diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx index 67ab251176123..fff9107443884 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx @@ -23,10 +23,10 @@ import { DragContext, DragDrop, ChildDragDropProvider } from '../../../drag_drop import { LayerSettings } from './layer_settings'; import { trackUiEvent } from '../../../lens_ui_telemetry'; import { generateId } from '../../../id_generator'; -import { ConfigPanelWrapperProps, DimensionPopoverState } from './types'; -import { DimensionPopover } from './dimension_popover'; +import { ConfigPanelWrapperProps, DimensionFlyoutState } from './types'; +import { DimensionFlyout } from './dimension_flyout'; -const initialPopoverState = { +const initialFlyoutState = { isOpen: false, openId: null, addingToGroupId: null, @@ -48,13 +48,13 @@ export function LayerPanel( } ) { const dragDropContext = useContext(DragContext); - const [popoverState, setPopoverState] = useState(initialPopoverState); + const [flyoutState, setFlyoutState] = useState(initialFlyoutState); const { framePublicAPI, layerId, isOnlyLayer, onRemoveLayer, dataTestSubj } = props; const datasourcePublicAPI = framePublicAPI.datasourceLayers[layerId]; useEffect(() => { - setPopoverState(initialPopoverState); + setFlyoutState(initialFlyoutState); }, [props.activeVisualizationId]); if ( @@ -250,9 +250,9 @@ export function LayerPanel( } }} > - { - if (popoverState.isOpen) { - setPopoverState(initialPopoverState); + onClick: () => { + if (flyoutState.isOpen) { + setFlyoutState(initialFlyoutState); } else { - setPopoverState({ + setFlyoutState({ isOpen: true, openId: accessor, addingToGroupId: null, // not set for existing dimension @@ -293,7 +293,7 @@ export function LayerPanel( /> - { - if (popoverState.isOpen) { - setPopoverState(initialPopoverState); + if (flyoutState.isOpen) { + setFlyoutState(initialFlyoutState); } else { - setPopoverState({ + setFlyoutState({ isOpen: true, openId: newId, addingToGroupId: group.groupId, @@ -429,7 +429,7 @@ export function LayerPanel( prevState: props.visualizationState, }) ); - setPopoverState({ + setFlyoutState({ isOpen: true, openId: newId, addingToGroupId: null, // clear now that dimension exists diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/types.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/types.ts index df510d3648f8c..ffa8b7ec116b3 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/types.ts +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/types.ts @@ -30,7 +30,7 @@ export interface ConfigPanelWrapperProps { core: DatasourceDimensionEditorProps['core']; } -export interface DimensionPopoverState { +export interface DimensionFlyoutState { isOpen: boolean; openId: string | null; addingToGroupId: string | null; diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/_field_item.scss b/x-pack/plugins/lens/public/indexpattern_datasource/_field_item.scss index d194c694abdf8..7039d64d176ef 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/_field_item.scss +++ b/x-pack/plugins/lens/public/indexpattern_datasource/_field_item.scss @@ -37,12 +37,12 @@ } } -.lnsFieldItem__fieldPopoverPanel { +.lnsFieldItem__fieldFlyoutPanel { min-width: 260px; max-width: 300px; } -.lnsFieldItem__popoverButtonGroup { - // Enforce lowercase for buttons or else some browsers inherit all caps from popover title +.lnsFieldItem__flyoutButtonGroup { + // Enforce lowercase for buttons or else some browsers inherit all caps from flyout title text-transform: none; } diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.scss b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.scss similarity index 100% rename from x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.scss rename to x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.scss diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx similarity index 98% rename from x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx rename to x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx index 5500c2bc8ebc9..d2277e2da1b7a 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import './popover_editor.scss'; +import './dimension_editor.scss'; import _ from 'lodash'; import React, { useState, useMemo, useEffect } from 'react'; import { i18n } from '@kbn/i18n'; @@ -34,7 +34,7 @@ import { FormatSelector } from './format_selector'; const operationPanels = getOperationDisplay(); -export interface PopoverEditorProps extends IndexPatternDimensionEditorProps { +export interface DimensionEditorProps extends IndexPatternDimensionEditorProps { selectedColumn?: IndexPatternColumn; operationFieldSupportMatrix: OperationFieldSupportMatrix; currentIndexPattern: IndexPattern; @@ -78,7 +78,7 @@ const LabelInput = ({ value, onChange }: { value: string; onChange: (value: stri ); }; -export function PopoverEditor(props: PopoverEditorProps) { +export function DimensionEditor(props: DimensionEditorProps) { const { selectedColumn, operationFieldSupportMatrix, diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.tsx index 1fbbefd8f1117..923f7145d1c64 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.tsx @@ -20,7 +20,7 @@ import { import { DataPublicPluginStart } from '../../../../../../src/plugins/data/public'; import { IndexPatternColumn, OperationType } from '../indexpattern'; import { getAvailableOperationsByMetadata, buildColumn, changeField } from '../operations'; -import { PopoverEditor } from './popover_editor'; +import { DimensionEditor } from './dimension_editor'; import { changeColumn } from '../state_helpers'; import { isDraggedField, hasField } from '../utils'; import { IndexPatternPrivateState, IndexPatternField } from '../types'; @@ -239,9 +239,7 @@ export const IndexPatternDimensionTriggerComponent = function IndexPatternDimens { - props.togglePopover(); - }} + onClick={props.onClick} data-test-subj="lns-dimensionTrigger" aria-label={i18n.translate('xpack.lens.configure.editConfig', { defaultMessage: 'Edit configuration', @@ -267,7 +265,7 @@ export const IndexPatternDimensionEditorComponent = function IndexPatternDimensi props.state.layers[layerId].columns[props.columnId] || null; return ( - setOpen(false)} anchorPosition="rightUp" - panelClassName="lnsFieldItem__fieldPopoverPanel" + panelClassName="lnsFieldItem__fieldFlyoutPanel" > @@ -316,7 +316,7 @@ function FieldItemPopoverContents(props: State & FieldItemProps) { if (histogram && histogram.buckets.length && topValues && topValues.buckets.length) { title = ( { }); }); - describe('popover param editor', () => { + describe('param editor', () => { it('should render current order by value and options', () => { const setStateSpy = jest.fn(); const instance = shallow( diff --git a/x-pack/plugins/lens/public/types.ts b/x-pack/plugins/lens/public/types.ts index d8b77afdfe004..676e9534f56cb 100644 --- a/x-pack/plugins/lens/public/types.ts +++ b/x-pack/plugins/lens/public/types.ts @@ -221,7 +221,7 @@ export type DatasourceDimensionEditorProps = DatasourceDimensionPro export type DatasourceDimensionTriggerProps = DatasourceDimensionProps & { dragDropContext: DragContextState; - togglePopover: () => void; + onClick: () => void; }; export interface DatasourceLayerPanelProps { diff --git a/x-pack/test/functional/page_objects/lens_page.ts b/x-pack/test/functional/page_objects/lens_page.ts index 06cf1c943622f..2e971a08952af 100644 --- a/x-pack/test/functional/page_objects/lens_page.ts +++ b/x-pack/test/functional/page_objects/lens_page.ts @@ -112,7 +112,7 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont * Removes the dimension matching a specific test subject */ async removeDimension(dimensionTestSubj: string) { - await testSubjects.click(`${dimensionTestSubj} > indexPattern-dimensionPopover-remove`); + await testSubjects.click(`${dimensionTestSubj} > indexPattern-dimensionFlyout-remove`); }, /** From e541bb415c05fe8fe2c6c811d3de70d2590f8548 Mon Sep 17 00:00:00 2001 From: Marta Bondyra Date: Wed, 9 Sep 2020 15:18:56 +0200 Subject: [PATCH 19/28] fix: double flyout --- .../editor_frame/config_panel/dimension_flyout.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_flyout.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_flyout.tsx index c41a027b188f2..14624b64fc415 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_flyout.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_flyout.tsx @@ -56,7 +56,7 @@ export function DimensionFlyout({ (flyoutState.openId === accessor || (noMatch && flyoutState.addingToGroupId === groupId)) ? ( } - panelTitle={group.groupLabel} + panelTitle={i18n.translate('xpack.lens.configure.configurePanelTitle', { + defaultMessage: '{groupLabel} configuration', + values: { + groupLabel: group.groupLabel, + }, + })} panel={ Date: Wed, 9 Sep 2020 16:51:19 +0200 Subject: [PATCH 22/28] refactor names --- ..._flyout.scss => _dimension_container.scss} | 10 +++---- .../editor_frame/config_panel/_index.scss | 2 +- ...ion_flyout.tsx => dimension_container.tsx} | 26 +++++++++---------- .../config_panel/layer_panel.test.tsx | 6 ++--- .../editor_frame/config_panel/layer_panel.tsx | 12 ++++----- .../editor_frame/config_panel/types.ts | 2 +- .../indexpattern_datasource/_field_item.scss | 4 +-- .../indexpattern_datasource/field_item.tsx | 4 +-- .../test/functional/page_objects/lens_page.ts | 4 +-- 9 files changed, 35 insertions(+), 35 deletions(-) rename x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/{_dimension_flyout.scss => _dimension_container.scss} (80%) rename x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/{dimension_flyout.tsx => dimension_container.tsx} (74%) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_dimension_flyout.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_dimension_container.scss similarity index 80% rename from x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_dimension_flyout.scss rename to x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_dimension_container.scss index bb620711360bf..68fb71fa175a7 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_dimension_flyout.scss +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_dimension_container.scss @@ -1,7 +1,7 @@ @import '@elastic/eui/src/components/flyout/variables'; @import '@elastic/eui/src/components/flyout/mixins'; -.lnsDimensionFlyout { +.lnsDimensionContainer { // Use the EuiFlyout style @include euiFlyout; // But with custom positioning to keep it within the sidebar contents @@ -13,16 +13,16 @@ animation: euiFlyout $euiAnimSpeedNormal $euiAnimSlightResistance; } -.lnsDimensionFlyout--noAnimation { +.lnsDimensionContainer--noAnimation { animation: none; } -.lnsDimensionFlyout__footer, -.lnsDimensionFlyout__header { +.lnsDimensionContainer__footer, +.lnsDimensionContainer__header { padding: $euiSizeS; } -.lnsDimensionFlyout__trigger { +.lnsDimensionContainer__trigger { width: 100%; display: block; word-break: break-word; diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_index.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_index.scss index 19d3bc55b3168..3b55ea5de7faf 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_index.scss +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_index.scss @@ -1,3 +1,3 @@ @import 'config_panel'; -@import 'dimension_flyout'; +@import 'dimension_container'; @import 'layer_panel'; diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_flyout.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx similarity index 74% rename from x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_flyout.tsx rename to x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx index 14624b64fc415..233adcc8277d6 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_flyout.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx @@ -17,9 +17,9 @@ import { import classNames from 'classnames'; import { i18n } from '@kbn/i18n'; import { VisualizationDimensionGroupConfig } from '../../../types'; -import { DimensionFlyoutState } from './types'; +import { FlyoutState } from './types'; -export function DimensionFlyout({ +export function DimensionContainer({ flyoutState, setFlyoutState, groups, @@ -29,8 +29,8 @@ export function DimensionFlyout({ panel, panelTitle, }: { - flyoutState: DimensionFlyoutState; - setFlyoutState: (newState: DimensionFlyoutState) => void; + flyoutState: FlyoutState; + setFlyoutState: (newState: FlyoutState) => void; groups: VisualizationDimensionGroupConfig[]; accessor: string; groupId: string; @@ -56,17 +56,17 @@ export function DimensionFlyout({ (flyoutState.openId === accessor || (noMatch && flyoutState.addingToGroupId === groupId)) ? (
- + @@ -77,9 +77,9 @@ export function DimensionFlyout({ {panel} - + - {i18n.translate('xpack.lens.dimensionFlyout.close', { + {i18n.translate('xpack.lens.dimensionContainer.close', { defaultMessage: 'Close', })} @@ -89,7 +89,7 @@ export function DimensionFlyout({ return ( <> -
{trigger}
+
{trigger}
{flyout} ); diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx index f75665e4b7d32..4e5e5e6016650 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx @@ -221,7 +221,7 @@ describe('LayerPanel', () => { const component = mountWithIntl(); - const group = component.find('DimensionFlyout'); + const group = component.find('DimensionContainer'); const panel = mount(group.prop('panel')); expect(panel.children()).toHaveLength(2); @@ -264,7 +264,7 @@ describe('LayerPanel', () => { const component = mountWithIntl(); - const group = component.find('DimensionFlyout'); + const group = component.find('DimensionContainer'); const triggerButton = mountWithIntl(group.prop('trigger')); act(() => { triggerButton.find('[data-test-subj="lns-empty-dimension"]').first().simulate('click'); @@ -312,7 +312,7 @@ describe('LayerPanel', () => { const component = mountWithIntl(); - const group = component.find('DimensionFlyout'); + const group = component.find('DimensionContainer'); const triggerButton = mountWithIntl(group.prop('trigger')); act(() => { triggerButton.find('[data-test-subj="lns-empty-dimension"]').first().simulate('click'); diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx index fb079acd29c62..8a2ae4c4a4c72 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx @@ -23,8 +23,8 @@ import { DragContext, DragDrop, ChildDragDropProvider } from '../../../drag_drop import { LayerSettings } from './layer_settings'; import { trackUiEvent } from '../../../lens_ui_telemetry'; import { generateId } from '../../../id_generator'; -import { ConfigPanelWrapperProps, DimensionFlyoutState } from './types'; -import { DimensionFlyout } from './dimension_flyout'; +import { ConfigPanelWrapperProps, FlyoutState } from './types'; +import { DimensionContainer } from './dimension_container'; const initialFlyoutState = { isOpen: false, @@ -48,7 +48,7 @@ export function LayerPanel( } ) { const dragDropContext = useContext(DragContext); - const [flyoutState, setFlyoutState] = useState(initialFlyoutState); + const [flyoutState, setFlyoutState] = useState(initialFlyoutState); const { framePublicAPI, layerId, isOnlyLayer, onRemoveLayer, dataTestSubj } = props; const datasourcePublicAPI = framePublicAPI.datasourceLayers[layerId]; @@ -250,7 +250,7 @@ export function LayerPanel( } }} > - - setOpen(false)} anchorPosition="rightUp" - panelClassName="lnsFieldItem__fieldFlyoutPanel" + panelClassName="lnsFieldItem__fieldPanel" > @@ -316,7 +316,7 @@ function FieldItemPopoverContents(props: State & FieldItemProps) { if (histogram && histogram.buckets.length && topValues && topValues.buckets.length) { title = ( indexPattern-dimensionFlyout-remove`); + await testSubjects.click(`${dimensionTestSubj} > indexPattern-dimension-remove`); }, /** From e2e128b2e563eee12ddd451f77b013c674bbd54d Mon Sep 17 00:00:00 2001 From: Marta Bondyra Date: Wed, 9 Sep 2020 17:00:58 +0200 Subject: [PATCH 23/28] controversial state naming changed --- .../config_panel/dimension_container.tsx | 25 ++++++++------ .../config_panel/layer_panel.test.tsx | 10 +++--- .../editor_frame/config_panel/layer_panel.tsx | 34 ++++++++++--------- .../editor_frame/config_panel/types.ts | 2 +- 4 files changed, 39 insertions(+), 32 deletions(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx index 233adcc8277d6..b55bd39eb94e4 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx @@ -17,11 +17,11 @@ import { import classNames from 'classnames'; import { i18n } from '@kbn/i18n'; import { VisualizationDimensionGroupConfig } from '../../../types'; -import { FlyoutState } from './types'; +import { DimensionContainerState } from './types'; export function DimensionContainer({ - flyoutState, - setFlyoutState, + dimensionContainerState, + setDimensionContainerState, groups, accessor, groupId, @@ -29,8 +29,8 @@ export function DimensionContainer({ panel, panelTitle, }: { - flyoutState: FlyoutState; - setFlyoutState: (newState: FlyoutState) => void; + dimensionContainerState: DimensionContainerState; + setDimensionContainerState: (newState: DimensionContainerState) => void; groups: VisualizationDimensionGroupConfig[]; accessor: string; groupId: string; @@ -38,12 +38,16 @@ export function DimensionContainer({ panel: React.ReactElement; panelTitle: React.ReactNode; }) { - const [openByCreation, setIsOpenByCreation] = useState(flyoutState.openId === accessor); + const [openByCreation, setIsOpenByCreation] = useState( + dimensionContainerState.openId === accessor + ); - const noMatch = flyoutState.isOpen ? !groups.some((d) => d.accessors.includes(accessor)) : false; + const noMatch = dimensionContainerState.isOpen + ? !groups.some((d) => d.accessors.includes(accessor)) + : false; const closeFlyout = () => { - setFlyoutState({ + setDimensionContainerState({ isOpen: false, openId: null, addingToGroupId: null, @@ -52,8 +56,9 @@ export function DimensionContainer({ }; const flyout = - flyoutState.isOpen && - (flyoutState.openId === accessor || (noMatch && flyoutState.addingToGroupId === groupId)) ? ( + dimensionContainerState.isOpen && + (dimensionContainerState.openId === accessor || + (noMatch && dimensionContainerState.addingToGroupId === groupId)) ? (
{ expect(group).toHaveLength(1); }); - it('should render the datasource and visualization panels inside the dimension flyout', () => { + it('should render the datasource and visualization panels inside the dimension container', () => { mockVisualization.getConfiguration.mockReturnValueOnce({ groups: [ { @@ -227,10 +227,10 @@ describe('LayerPanel', () => { expect(panel.children()).toHaveLength(2); }); - it('should keep the flyout open when configuring a new dimension', () => { + it('should keep the DimensionContainer open when configuring a new dimension', () => { /** * The ID generation system for new dimensions has been messy before, so - * this tests that the ID used in the first render is used to keep the flyout + * this tests that the ID used in the first render is used to keep the container * open in future renders */ (generateId as jest.Mock).mockReturnValueOnce(`newid`); @@ -274,10 +274,10 @@ describe('LayerPanel', () => { expect(component.find('EuiFlyoutHeader').exists()).toBe(true); }); - it('should close the flyout when the active visualization changes', () => { + it('should close the DimensionContainer when the active visualization changes', () => { /** * The ID generation system for new dimensions has been messy before, so - * this tests that the ID used in the first render is used to keep the flyout + * this tests that the ID used in the first render is used to keep the container * open in future renders */ diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx index 8a2ae4c4a4c72..33df179081c4b 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx @@ -23,10 +23,10 @@ import { DragContext, DragDrop, ChildDragDropProvider } from '../../../drag_drop import { LayerSettings } from './layer_settings'; import { trackUiEvent } from '../../../lens_ui_telemetry'; import { generateId } from '../../../id_generator'; -import { ConfigPanelWrapperProps, FlyoutState } from './types'; +import { ConfigPanelWrapperProps, DimensionContainerState } from './types'; import { DimensionContainer } from './dimension_container'; -const initialFlyoutState = { +const initialDimensionContainerState = { isOpen: false, openId: null, addingToGroupId: null, @@ -48,13 +48,15 @@ export function LayerPanel( } ) { const dragDropContext = useContext(DragContext); - const [flyoutState, setFlyoutState] = useState(initialFlyoutState); + const [dimensionContainerState, setDimensionContainerState] = useState( + initialDimensionContainerState + ); const { framePublicAPI, layerId, isOnlyLayer, onRemoveLayer, dataTestSubj } = props; const datasourcePublicAPI = framePublicAPI.datasourceLayers[layerId]; useEffect(() => { - setFlyoutState(initialFlyoutState); + setDimensionContainerState(initialDimensionContainerState); }, [props.activeVisualizationId]); if ( @@ -216,7 +218,7 @@ export function LayerPanel( return ''; }} data-test-subj={group.dataTestSubj} - draggable={!flyoutState.isOpen} + draggable={!dimensionContainerState.isOpen} value={{ columnId: accessor, groupId: group.groupId, layerId }} label={group.groupLabel} droppable={ @@ -251,8 +253,8 @@ export function LayerPanel( }} > { - if (flyoutState.isOpen) { - setFlyoutState(initialFlyoutState); + if (dimensionContainerState.isOpen) { + setDimensionContainerState(initialDimensionContainerState); } else { - setFlyoutState({ + setDimensionContainerState({ isOpen: true, openId: accessor, addingToGroupId: null, // not set for existing dimension @@ -371,8 +373,8 @@ export function LayerPanel( }} > { - if (flyoutState.isOpen) { - setFlyoutState(initialFlyoutState); + if (dimensionContainerState.isOpen) { + setDimensionContainerState(initialDimensionContainerState); } else { - setFlyoutState({ + setDimensionContainerState({ isOpen: true, openId: newId, addingToGroupId: group.groupId, @@ -434,7 +436,7 @@ export function LayerPanel( prevState: props.visualizationState, }) ); - setFlyoutState({ + setDimensionContainerState({ isOpen: true, openId: newId, addingToGroupId: null, // clear now that dimension exists diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/types.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/types.ts index 2231adb8fe0de..d42c5c3b99e53 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/types.ts +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/types.ts @@ -30,7 +30,7 @@ export interface ConfigPanelWrapperProps { core: DatasourceDimensionEditorProps['core']; } -export interface FlyoutState { +export interface DimensionContainerState { isOpen: boolean; openId: string | null; addingToGroupId: string | null; From b6d416e1b4a90960204c011f6e854f3a05f19b6c Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 9 Sep 2020 17:24:41 -0400 Subject: [PATCH 24/28] Fixing keyboard navigation/a11y --- .../config_panel/dimension_container.tsx | 33 +++++++-- .../editor_frame/config_panel/layer_panel.tsx | 1 + .../dimension_panel/bucket_nesting_editor.tsx | 1 + .../dimension_panel/dimension_editor.tsx | 68 +++++++++---------- .../dimension_panel/field_select.tsx | 12 +++- 5 files changed, 73 insertions(+), 42 deletions(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx index b55bd39eb94e4..95cdc499f9010 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx @@ -5,13 +5,14 @@ */ import './dimension_popover.scss'; -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { EuiFlyoutHeader, EuiFlyoutFooter, EuiTitle, EuiButtonEmpty, EuiFlexItem, + EuiFocusTrap, } from '@elastic/eui'; import classNames from 'classnames'; @@ -41,6 +42,8 @@ export function DimensionContainer({ 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)) @@ -53,12 +56,29 @@ export function DimensionContainer({ addingToGroupId: null, }); setIsOpenByCreation(false); + setFocusTrapIsEnabled(false); + setFlyoutIsVisible(false); }; - const flyout = - dimensionContainerState.isOpen && - (dimensionContainerState.openId === accessor || - (noMatch && dimensionContainerState.addingToGroupId === groupId)) ? ( + const openFlyout = () => { + setFlyoutIsVisible(true); + setTimeout(() => { + setFocusTrapIsEnabled(true); + }, 255); + }; + + useEffect(() => { + if ( + dimensionContainerState.isOpen && + (dimensionContainerState.openId === accessor || + (noMatch && dimensionContainerState.addingToGroupId === groupId)) + ) { + openFlyout(); + } + }); + + const flyout = flyoutIsVisible && ( +
- ) : null; + + ); return ( <> diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx index 33df179081c4b..7f40372abcd14 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx @@ -161,6 +161,7 @@ export function LayerPanel( className="lnsLayerPanel__row" fullWidth label={group.groupLabel} + labelType="legend" key={index} isInvalid={isMissing} error={ diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/bucket_nesting_editor.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/bucket_nesting_editor.tsx index 10ae1936291c4..281c72915e46e 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/bucket_nesting_editor.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/bucket_nesting_editor.tsx @@ -99,6 +99,7 @@ export function BucketNestingEditor({ label={i18n.translate('xpack.lens.indexPattern.groupingControlLabel', { defaultMessage: 'Grouping', })} + labelType="legend" > <> + + + ); }; @@ -344,37 +353,28 @@ export function DimensionEditor(props: DimensionEditorProps) {
{!incompatibleSelectedOperationType && selectedColumn && ( - - { - setState({ - ...state, - layers: { - ...state.layers, - [layerId]: { - ...state.layers[layerId], - columns: { - ...state.layers[layerId].columns, - [columnId]: { - ...selectedColumn, - label: value, - customLabel: true, - }, + { + setState({ + ...state, + layers: { + ...state.layers, + [layerId]: { + ...state.layers[layerId], + columns: { + ...state.layers[layerId].columns, + [columnId]: { + ...selectedColumn, + label: value, + customLabel: true, }, }, }, - }); - }} - /> - + }, + }); + }} + /> )} {!hideGrouping && ( diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/field_select.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/field_select.tsx index 2b4db4bfd59c5..60f60d7cb80c1 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/field_select.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/field_select.tsx @@ -8,7 +8,13 @@ import './field_select.scss'; import _ from 'lodash'; import React, { useMemo } from 'react'; import { i18n } from '@kbn/i18n'; -import { EuiComboBox, EuiFlexGroup, EuiFlexItem, EuiComboBoxOptionOption } from '@elastic/eui'; +import { + EuiComboBox, + EuiFlexGroup, + EuiFlexItem, + EuiComboBoxOptionOption, + EuiComboBoxProps, +} from '@elastic/eui'; import classNames from 'classnames'; import { EuiHighlight } from '@elastic/eui'; import { OperationType } from '../indexpattern'; @@ -25,7 +31,7 @@ export interface FieldChoice { operationType?: OperationType; } -export interface FieldSelectProps { +export interface FieldSelectProps extends EuiComboBoxProps<{}> { currentIndexPattern: IndexPattern; fieldMap: Record; incompatibleSelectedOperationType: OperationType | null; @@ -47,6 +53,7 @@ export function FieldSelect({ onChoose, onDeleteColumn, existingFields, + ...rest }: FieldSelectProps) { const { operationByField } = operationFieldSupportMatrix; const memoizedFieldOptions = useMemo(() => { @@ -194,6 +201,7 @@ export function FieldSelect({ ); }} + {...rest} /> ); } From fb38c81c624cc5d66a3040ec35c11a61cb6b3b92 Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Thu, 10 Sep 2020 11:09:57 +0200 Subject: [PATCH 25/28] fix double flyout --- .../config_panel/dimension_container.tsx | 22 ++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx index 95cdc499f9010..5a891d8dd9f78 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx @@ -67,16 +67,28 @@ export function DimensionContainer({ }, 255); }; + const flyoutShouldBeOpen = + dimensionContainerState.isOpen && + (dimensionContainerState.openId === accessor || + (noMatch && dimensionContainerState.addingToGroupId === groupId)); + useEffect(() => { - if ( - dimensionContainerState.isOpen && - (dimensionContainerState.openId === accessor || - (noMatch && dimensionContainerState.addingToGroupId === groupId)) - ) { + if (flyoutShouldBeOpen) { openFlyout(); } }); + useEffect(() => { + if (!flyoutShouldBeOpen) { + if (flyoutIsVisible) { + setFlyoutIsVisible(false); + } + if (focusTrapIsEnabled) { + setFocusTrapIsEnabled(false); + } + } + }, [flyoutShouldBeOpen, flyoutIsVisible, focusTrapIsEnabled]); + const flyout = flyoutIsVisible && (
Date: Thu, 10 Sep 2020 10:32:59 -0400 Subject: [PATCH 26/28] i18n --- .../dimension_panel/dimension_editor.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx index 797fa4ae30351..98e9389a85819 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx @@ -232,7 +232,11 @@ export function DimensionEditor(props: DimensionEditorProps) { return (
- Choose a function + + {i18n.translate('xpack.lens.indexPattern.functionsLabel', { + defaultMessage: 'Choose a function', + })} + 3 ? 'lnsIndexPatternDimensionEditor__columns' : ''} From 8c617298d87a5ece23d10387dfdc013adcbc409b Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 10 Sep 2020 18:50:20 -0400 Subject: [PATCH 27/28] Fix other conflicts --- .../editor_frame/config_panel/_index.scss | 3 --- .../config_panel/{_config_panel.scss => config_panel.scss} | 0 .../editor_frame/config_panel/config_panel.tsx | 1 + ...{_dimension_container.scss => dimension_container.scss} | 7 ------- .../editor_frame/config_panel/dimension_container.tsx | 2 +- .../config_panel/{_layer_panel.scss => layer_panel.scss} | 0 .../editor_frame/config_panel/layer_panel.tsx | 1 + .../public/editor_frame_service/editor_frame/index.scss | 1 - 8 files changed, 3 insertions(+), 12 deletions(-) delete mode 100644 x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_index.scss rename x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/{_config_panel.scss => config_panel.scss} (100%) rename x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/{_dimension_container.scss => dimension_container.scss} (77%) rename x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/{_layer_panel.scss => layer_panel.scss} (100%) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_index.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_index.scss deleted file mode 100644 index 3b55ea5de7faf..0000000000000 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_index.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'config_panel'; -@import 'dimension_container'; -@import 'layer_panel'; diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_config_panel.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.scss similarity index 100% rename from x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_config_panel.scss rename to x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.scss diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.tsx index 446f5b44c2e50..ad16038f44911 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.tsx @@ -3,6 +3,7 @@ * or more contributor license agreements. Licensed under the Elastic License; * you may not use this file except in compliance with the Elastic License. */ +import './config_panel.scss'; import React, { useMemo, memo } from 'react'; import { EuiFlexItem, EuiToolTip, EuiButton, EuiForm } from '@elastic/eui'; diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_dimension_container.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.scss similarity index 77% rename from x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_dimension_container.scss rename to x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.scss index 68fb71fa175a7..f200e25453a2a 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_dimension_container.scss +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.scss @@ -27,10 +27,3 @@ display: block; word-break: break-word; } - -// todo: remove after closing https://github.com/elastic/eui/issues/3548 -.lnsDimensionPopover__fixTranslateDnd { - // sass-lint:disable-block no-important - transform: none !important; -} - diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx index 5a891d8dd9f78..d6b395ac74cce 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx @@ -3,7 +3,7 @@ * or more contributor license agreements. Licensed under the Elastic License; * you may not use this file except in compliance with the Elastic License. */ -import './dimension_popover.scss'; +import './dimension_container.scss'; import React, { useState, useEffect } from 'react'; import { diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.scss similarity index 100% rename from x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss rename to x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.scss diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx index 7f40372abcd14..258aadc82fbf2 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx @@ -3,6 +3,7 @@ * or more contributor license agreements. Licensed under the Elastic License; * you may not use this file except in compliance with the Elastic License. */ +import './layer_panel.scss'; import React, { useContext, useState, useEffect } from 'react'; import { diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/index.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/index.scss index 5e3726c953f11..ea58a51073d53 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/index.scss +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/index.scss @@ -1,4 +1,3 @@ -@import 'config_panel/index'; @import 'data_panel_wrapper'; @import 'expression_renderer'; @import 'frame_layout'; From 82743f085f4fd3862e4f1eafcd6895cb9ac5a487 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 14 Sep 2020 15:55:51 -0400 Subject: [PATCH 28/28] Update readme --- x-pack/plugins/lens/readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/lens/readme.md b/x-pack/plugins/lens/readme.md index e69ba9ec9506d..98bb60827af42 100644 --- a/x-pack/plugins/lens/readme.md +++ b/x-pack/plugins/lens/readme.md @@ -30,7 +30,7 @@ Lens has a lot of UI elements – to make it easier to refer to them in issues o * **Config panel** Panel to the right showing configuration of the current chart, separated by layers * **Layer panel** One of multiple panels in the config panel, holding configuration for separate layers * **Dimension trigger** Chart dimension like "X axis", "Break down by" or "Slice by" in the config panel - * **Dimension popover** Popover shown when clicking a dimension trigger + * **Dimension container** Container shown when clicking a dimension trigger and contains the dimension settints * **Layer settings popover** Popover shown when clicking the button in the top left of a layer panel * **Workspace panel** Center panel containing the chart preview, title and toolbar * **Chart preview** Full-sized rendered chart in the center of the screen