From a7880534cb6b6d7a309d78877199aa2c93863747 Mon Sep 17 00:00:00 2001 From: cchaos <caroline.horn@elastic.co> Date: Tue, 29 Sep 2020 16:46:35 -0400 Subject: [PATCH 1/4] A few other minor fixes --- .../lens/public/indexpattern_datasource/field_item.tsx | 2 +- .../definitions/shared_components/buckets.tsx | 10 ++++++++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx index 05d732b1f5def..f139bf4def7c1 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx @@ -512,7 +512,7 @@ function FieldItemPopoverContents(props: State & FieldItemProps) { </EuiFlexItem> <EuiFlexItem grow={false} className="eui-textTruncate"> - <EuiText size="s" color="subdued"> + <EuiText size="xs" color="subdued"> {Math.round((otherCount / props.sampledValues!) * 100)}% </EuiText> </EuiFlexItem> diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/shared_components/buckets.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/shared_components/buckets.tsx index 47380f7865578..50471ca84c0d8 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/shared_components/buckets.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/shared_components/buckets.tsx @@ -96,7 +96,13 @@ export const DraggableBucketContainer = ({ children: React.ReactNode; } & BucketContainerProps) => { return ( - <EuiDraggable spacing="m" index={idx} draggableId={id} disableInteractiveElementBlocking> + <EuiDraggable + style={{ marginBottom: 4 }} + spacing="none" + index={idx} + draggableId={id} + disableInteractiveElementBlocking + > {(provided) => <BucketContainer {...bucketContainerProps}>{children}</BucketContainer>} </EuiDraggable> ); @@ -134,7 +140,7 @@ export const DragDropBuckets = ({ }; return ( <EuiDragDropContext onDragEnd={handleDragEnd} onDragStart={onDragStart}> - <EuiDroppable droppableId={droppableId} spacing="s"> + <EuiDroppable droppableId={droppableId} spacing="none"> {children} </EuiDroppable> </EuiDragDropContext> From 97ddc8cef24ad1636e994a295421cf1832c11a7b Mon Sep 17 00:00:00 2001 From: Joe Reuter <johannes.reuter@elastic.co> Date: Wed, 30 Sep 2020 10:19:16 +0200 Subject: [PATCH 2/4] stuff --- x-pack/plugins/lens/public/drag_drop/_index.scss | 1 - .../drag_drop/{_drag_drop.scss => drag_drop.scss} | 3 +++ x-pack/plugins/lens/public/drag_drop/drag_drop.tsx | 13 +++++++++++-- .../editor_frame/config_panel/layer_panel.tsx | 14 ++++++++++++++ x-pack/plugins/lens/public/index.scss | 14 -------------- x-pack/plugins/lens/public/plugin.ts | 1 - 6 files changed, 28 insertions(+), 18 deletions(-) delete mode 100644 x-pack/plugins/lens/public/drag_drop/_index.scss rename x-pack/plugins/lens/public/drag_drop/{_drag_drop.scss => drag_drop.scss} (95%) delete mode 100644 x-pack/plugins/lens/public/index.scss diff --git a/x-pack/plugins/lens/public/drag_drop/_index.scss b/x-pack/plugins/lens/public/drag_drop/_index.scss deleted file mode 100644 index ddf9b9aa3e429..0000000000000 --- a/x-pack/plugins/lens/public/drag_drop/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'drag_drop'; diff --git a/x-pack/plugins/lens/public/drag_drop/_drag_drop.scss b/x-pack/plugins/lens/public/drag_drop/drag_drop.scss similarity index 95% rename from x-pack/plugins/lens/public/drag_drop/_drag_drop.scss rename to x-pack/plugins/lens/public/drag_drop/drag_drop.scss index 0bcdf7b2c8908..410aaef9a5195 100644 --- a/x-pack/plugins/lens/public/drag_drop/_drag_drop.scss +++ b/x-pack/plugins/lens/public/drag_drop/drag_drop.scss @@ -1,3 +1,6 @@ +@import '../variables'; +@import '../mixins'; + .lnsDragDrop { transition: background-color $euiAnimSpeedFast ease-in-out, border-color $euiAnimSpeedFast ease-in-out; } diff --git a/x-pack/plugins/lens/public/drag_drop/drag_drop.tsx b/x-pack/plugins/lens/public/drag_drop/drag_drop.tsx index d4a4d04d03852..685ae7b36f229 100644 --- a/x-pack/plugins/lens/public/drag_drop/drag_drop.tsx +++ b/x-pack/plugins/lens/public/drag_drop/drag_drop.tsx @@ -4,6 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ +import './drag_drop.scss'; + import React, { useState, useContext } from 'react'; import classNames from 'classnames'; import { DragContext } from './providers'; @@ -38,6 +40,11 @@ interface BaseProps { */ value?: unknown; + /** + * Optional comparison function to check whether a value is the dragged one + */ + isValueEqual?: (value1: unknown, value2: unknown) => boolean; + /** * The React element which will be passed the draggable handlers */ @@ -108,12 +115,14 @@ type Props = DraggableProps | NonDraggableProps; export const DragDrop = (props: Props) => { const { dragging, setDragging } = useContext(DragContext); - const { value, draggable, droppable } = props; + const { value, draggable, droppable, isValueEqual } = props; return ( <DragDropInner {...props} dragging={droppable ? dragging : undefined} - isDragging={!!(draggable && value === dragging)} + isDragging={ + !!(draggable && ((isValueEqual && isValueEqual(value, dragging)) || value === dragging)) + } isNotDroppable={ // If the configuration has provided a droppable flag, but this particular item is not // droppable, then it should be less prominent. Ignores items that are both 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 fef170dfa8d84..5609e0e9f47ad 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 @@ -32,6 +32,19 @@ const initialDimensionContainerState = { addingToGroupId: null, }; +// { columnId: accessor, groupId: group.groupId, layerId } +function isSameConfiguration(config1: unknown, config2: unknown) { + return ( + config1 && + config2 && + typeof config1 === 'object' && + typeof config2 === 'object' && + config1.columnId === config2.columnId && + config1.groupId === config2.groupId && + config1.layerId === config2.layerId + ); +} + export function LayerPanel( props: Exclude<ConfigPanelWrapperProps, 'state' | 'setState'> & { layerId: string; @@ -217,6 +230,7 @@ export function LayerPanel( data-test-subj={group.dataTestSubj} draggable={!dimensionContainerState.isOpen} value={{ columnId: accessor, groupId: group.groupId, layerId }} + isValueEqual={isSameConfiguration} label={group.groupLabel} droppable={ Boolean(dragDropContext.dragging) && diff --git a/x-pack/plugins/lens/public/index.scss b/x-pack/plugins/lens/public/index.scss deleted file mode 100644 index 67bbac12be8c3..0000000000000 --- a/x-pack/plugins/lens/public/index.scss +++ /dev/null @@ -1,14 +0,0 @@ -// Import the EUI global scope so we can use EUI constants -@import '@elastic/eui/src/global_styling/variables/index'; -@import '@elastic/eui/src/global_styling/mixins/index'; - -@import 'variables'; -@import 'mixins'; - -@import 'app_plugin/index'; -@import 'datatable_visualization/index'; -@import 'drag_drop/index'; -@import 'editor_frame_service/index'; -@import 'indexpattern_datasource/index'; -@import 'xy_visualization/index'; -@import 'metric_visualization/index'; diff --git a/x-pack/plugins/lens/public/plugin.ts b/x-pack/plugins/lens/public/plugin.ts index 1655a571721f5..d23c9febec29d 100644 --- a/x-pack/plugins/lens/public/plugin.ts +++ b/x-pack/plugins/lens/public/plugin.ts @@ -35,7 +35,6 @@ import { EditorFrameStart } from './types'; import { getLensAliasConfig } from './vis_type_alias'; import { getSearchProvider } from './search_provider'; -import './index.scss'; import { getLensAttributeService, LensAttributeService } from './lens_attribute_service'; export interface LensPluginSetupDependencies { From 645974da2d9e501dad8980ecf315e6d41e121d7f Mon Sep 17 00:00:00 2001 From: Joe Reuter <johannes.reuter@elastic.co> Date: Wed, 30 Sep 2020 10:46:27 +0200 Subject: [PATCH 3/4] fix bugs and styles --- .../lens/public/drag_drop/drag_drop.tsx | 6 ++++-- .../editor_frame/config_panel/layer_panel.tsx | 19 ++++++++++++++----- .../workspace_panel_wrapper.scss | 2 ++ .../indexpattern_datasource/field_item.tsx | 2 +- 4 files changed, 21 insertions(+), 8 deletions(-) diff --git a/x-pack/plugins/lens/public/drag_drop/drag_drop.tsx b/x-pack/plugins/lens/public/drag_drop/drag_drop.tsx index 685ae7b36f229..b36415fee5b15 100644 --- a/x-pack/plugins/lens/public/drag_drop/drag_drop.tsx +++ b/x-pack/plugins/lens/public/drag_drop/drag_drop.tsx @@ -161,16 +161,18 @@ const DragDropInner = React.memo(function DragDropInner( dropType = 'add', } = props; + const isMoveDragging = isDragging && dragType === 'move'; + const classes = classNames( 'lnsDragDrop', { 'lnsDragDrop-isDraggable': draggable, 'lnsDragDrop-isDragging': isDragging, - 'lnsDragDrop-isHidden': isDragging && dragType === 'move', + 'lnsDragDrop-isHidden': isMoveDragging, 'lnsDragDrop-isDroppable': !draggable, 'lnsDragDrop-isDropTarget': droppable, 'lnsDragDrop-isActiveDropTarget': droppable && state.isActive, - 'lnsDragDrop-isNotDroppable': isNotDroppable, + 'lnsDragDrop-isNotDroppable': !isMoveDragging && isNotDroppable, 'lnsDragDrop-isReplacing': droppable && state.isActive && dropType === 'replace', }, className, 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 5609e0e9f47ad..ce2955da890d7 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 @@ -32,13 +32,22 @@ const initialDimensionContainerState = { addingToGroupId: null, }; -// { columnId: accessor, groupId: group.groupId, layerId } +function isConfiguration( + value: unknown +): value is { columnId: string; groupId: string; layerId: string } { + return ( + value && + typeof value === 'object' && + 'columnId' in value && + 'groupId' in value && + 'layerId' in value + ); +} + function isSameConfiguration(config1: unknown, config2: unknown) { return ( - config1 && - config2 && - typeof config1 === 'object' && - typeof config2 === 'object' && + isConfiguration(config1) && + isConfiguration(config2) && config1.columnId === config2.columnId && config1.groupId === config2.groupId && config1.layerId === config2.layerId diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss index d19985003f512..33b9b2fe1dbf0 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss @@ -1,3 +1,5 @@ +@import '../../../mixins'; + .lnsWorkspacePanelWrapper { @include euiScrollBar; overflow: hidden; diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx index af6b10124fffa..2fbe23f9085f2 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx @@ -185,7 +185,7 @@ export const InnerFieldItem = function InnerFieldItem(props: FieldItemProps) { ownFocus className="lnsFieldItem__popoverAnchor" display="block" - data-test-sub="lnsFieldListPanelField" + data-test-subj="lnsFieldListPanelField" container={document.querySelector<HTMLElement>('.application') || undefined} button={ <DragDrop From a6c954edb09712395acc0f17bc8b9fedeb40b604 Mon Sep 17 00:00:00 2001 From: cchaos <caroline.horn@elastic.co> Date: Wed, 30 Sep 2020 09:37:54 -0400 Subject: [PATCH 4/4] One last fix to fields list --- .../plugins/lens/public/indexpattern_datasource/datapanel.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.scss b/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.scss index 155b954e9cf17..df73789eadedf 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.scss +++ b/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.scss @@ -12,7 +12,7 @@ .lnsInnerIndexPatternDataPanel__fieldItems { // Quick fix for making sure the shadow and focus rings are visible outside the accordion bounds - padding: $euiSizeXS $euiSizeXS 0; + padding: $euiSizeXS; } .lnsInnerIndexPatternDataPanel__textField {