Style config panels

elastic · Mar 11, 2020 · 1160987 · 1160987
1 parent 5877a7f
commit 1160987
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 92 deletions.
diff --git a/...cy/plugins/lens/public/_config_panel.scss → ...e/editor_frame/_config_panel_wrapper.scss b/...cy/plugins/lens/public/_config_panel.scss → ...e/editor_frame/_config_panel_wrapper.scss
@@ -2,7 +2,7 @@
   margin-bottom: $euiSizeS;
 }
 
-.lnsConfigPanel__axis {
+.lnsConfigPanel__row {
   background: $euiColorLightestShade;
   padding: $euiSizeS;
   border-radius: $euiBorderRadius;
@@ -22,10 +22,28 @@
 
 .lnsConfigPanel__dimension {
   @include euiFontSizeS;
-  background-color: $euiColorEmptyShade;
+  background: lightOrDarkTheme($euiColorEmptyShade, $euiColorLightestShade);
   border-radius: $euiBorderRadius;
   display: flex;
   align-items: center;
   margin-top: $euiSizeXS;
   overflow: hidden;
 }
+
+.lnsConfigPanel__trigger {
+  max-width: 100%;
+  display: block;
+}
+
+.lnsConfigPanel__triggerLink {
+  padding: $euiSizeS;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  min-height: $euiSizeXXL;
+}
+
+.lnsConfigPanel__popover {
+  line-height: 0;
+  flex-grow: 1;
+}
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/config_panel_wrapper.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/config_panel_wrapper.tsx
@@ -255,6 +255,8 @@ function LayerPanel(
     const noMatch = popoverState.isOpen ? !dimensions.some(d => d.accessors.includes(id)) : false;
     return (
       <EuiPopover
+        className="lnsConfigPanel__popover"
+        anchorClassName="lnsConfigPanel__trigger"
         isOpen={
           popoverState.isOpen &&
           (popoverState.openId === id ||
@@ -264,7 +266,6 @@ function LayerPanel(
           setPopoverState({ isOpen: false, openId: null, addingToDimensionId: null });
         }}
         button={trigger}
-        display="block"
         anchorPosition="leftUp"
         withTitle
         panelPaddingSize="s"
@@ -303,7 +304,7 @@ function LayerPanel(
           const isMissing = !isEmptyLayer && dimension.required && dimension.accessors.length === 0;
           return (
             <EuiFormRow
-              className="lnsConfigPanel__axis"
+              className="lnsConfigPanel__row"
               label={dimension.dimensionLabel}
               key={index}
               isInvalid={isMissing}
@@ -412,7 +413,7 @@ function LayerPanel(
                 ))}
                 {dimension.supportsMoreColumns ? (
                   <DragDrop
-                    className="lnsIndexPatternDimensionPanel"
+                    className="lnsConfigPanel__dimension"
                     data-test-subj={dimension.dataTestSubj}
                     droppable={
                       dragDropContext.dragging &&
@@ -444,37 +445,39 @@ function LayerPanel(
                     {wrapInPopover(
                       newId,
                       dimension.dimensionId,
-                      <EuiButtonEmpty
-                        iconType="plusInCircleFilled"
-                        data-test-subj="lns-empty-dimension"
-                        aria-label={i18n.translate('xpack.lens.configure.addConfig', {
-                          defaultMessage: 'Add a configuration',
-                        })}
-                        title={i18n.translate('xpack.lens.configure.addConfig', {
-                          defaultMessage: 'Add a configuration',
-                        })}
-                        onClick={() => {
-                          if (popoverState.isOpen) {
-                            setPopoverState({
-                              isOpen: false,
-                              openId: null,
-                              addingToDimensionId: null,
-                            });
-                          } else {
-                            setPopoverState({
-                              isOpen: true,
-                              openId: newId,
-                              addingToDimensionId: dimension.dimensionId,
-                            });
-                          }
-                        }}
-                        size="xs"
-                      >
-                        <FormattedMessage
-                          id="xpack.lens.configure.emptyConfig"
-                          defaultMessage="Drop a field here"
-                        />
-                      </EuiButtonEmpty>,
+                      <div className="lnsConfigPanel__triggerLink">
+                        <EuiButtonEmpty
+                          iconType="plusInCircleFilled"
+                          data-test-subj="lns-empty-dimension"
+                          aria-label={i18n.translate('xpack.lens.configure.addConfig', {
+                            defaultMessage: 'Add a configuration',
+                          })}
+                          title={i18n.translate('xpack.lens.configure.addConfig', {
+                            defaultMessage: 'Add a configuration',
+                          })}
+                          onClick={() => {
+                            if (popoverState.isOpen) {
+                              setPopoverState({
+                                isOpen: false,
+                                openId: null,
+                                addingToDimensionId: null,
+                              });
+                            } else {
+                              setPopoverState({
+                                isOpen: true,
+                                openId: newId,
+                                addingToDimensionId: dimension.dimensionId,
+                              });
+                            }
+                          }}
+                          size="xs"
+                        >
+                          <FormattedMessage
+                            id="xpack.lens.configure.emptyConfig"
+                            defaultMessage="Drop a field here"
+                          />
+                        </EuiButtonEmpty>
+                      </div>,
                       <NativeRenderer
                         render={props.datasourceMap[datasourceId].renderDimensionEditor}
                         nativeProps={{

diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.test.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.test.tsx
@@ -199,11 +199,9 @@ describe('editor_frame', () => {
             ExpressionRenderer={expressionRendererMock}
           />
         );
-        expect(mockVisualization.renderLayerConfigPanel).not.toHaveBeenCalled();
         expect(mockDatasource.renderDataPanel).not.toHaveBeenCalled();
       });
-      expect(mockVisualization.getLayerOptions).not.toHaveBeenCalled();
-      expect(mockDatasource.renderDataPanel).not.toHaveBeenCalled();
+      expect(mockDatasource.renderDataPanel).toHaveBeenCalled();
     });
 
     it('should not initialize visualization before datasource is initialized', async () => {

diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/index.scss b/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/index.scss
@@ -1,4 +1,5 @@
 @import './chart_switch';
+@import './config_panel_wrapper';
 @import './data_panel_wrapper';
 @import './expression_renderer';
 @import './frame_layout';

diff --git a/x-pack/legacy/plugins/lens/public/index.scss b/x-pack/legacy/plugins/lens/public/index.scss
@@ -4,8 +4,6 @@
 @import './variables';
 @import './mixins';
 
-@import './config_panel';
-
 @import './app_plugin/index';
 @import 'datatable_visualization/index';
 @import './drag_drop/index';

diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/_index.scss b/x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/_index.scss
@@ -1,3 +1,2 @@
-@import './dimension_panel';
 @import './field_select';
 @import './popover';
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/_popover.scss b/x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/_popover.scss
@@ -1,37 +1,24 @@
-.lnsPopoverEditor {
+.lnsIndexPatternDimensionEditor {
   flex-grow: 1;
   line-height: 0;
   overflow: hidden;
 }
 
-.lnsPopoverEditor__anchor {
-  max-width: 100%;
-  display: block;
-}
-
-.lnsPopoverEditor__link {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  padding: $euiSizeS;
-  min-height: $euiSizeXXL;
-}
-
-.lnsPopoverEditor__left,
-.lnsPopoverEditor__right {
+.lnsIndexPatternDimensionEditor__left,
+.lnsIndexPatternDimensionEditor__right {
   padding: $euiSizeS;
 }
 
-.lnsPopoverEditor__left {
+.lnsIndexPatternDimensionEditor__left {
   padding-top: 0;
   background-color: $euiPageBackgroundColor;
 }
 
-.lnsPopoverEditor__right {
+.lnsIndexPatternDimensionEditor__right {
   width: $euiSize * 20;
 }
 
-.lnsPopoverEditor__operation {
+.lnsIndexPatternDimensionEditor__operation {
   @include euiFontSizeS;
   color: $euiColorPrimary;
 
@@ -41,11 +28,11 @@
   }
 }
 
-.lnsPopoverEditor__operation--selected {
+.lnsIndexPatternDimensionEditor__operation--selected {
   font-weight: bold;
   color: $euiTextColor;
 }
 
-.lnsPopoverEditor__operation--incompatible {
+.lnsIndexPatternDimensionEditor__operation--incompatible {
   color: $euiColorMediumShade;
 }
diff --git a/...ck/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.tsx b/...ck/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.tsx
@@ -186,32 +186,26 @@ export const IndexPatternDimensionTriggerComponent = function IndexPatternDimens
     props.state.layers[layerId].columns[props.columnId] || null;
 
   const { columnId, uniqueLabel } = props;
+  if (!selectedColumn) {
+    return null;
+  }
   return (
-    <div
+    <EuiLink
       id={columnId}
-      className={[
-        'lnsPopoverEditor',
-        selectedColumn ? 'lnsPopoverEditor__anchor' : 'lnsPopoverEditor__link',
-      ].join(' ')}
+      className="lnsConfigPanel__triggerLink"
+      onClick={() => {
+        props.togglePopover();
+      }}
+      data-test-subj="lns-dimensionTrigger"
+      aria-label={i18n.translate('xpack.lens.configure.editConfig', {
+        defaultMessage: 'Edit configuration',
+      })}
+      title={i18n.translate('xpack.lens.configure.editConfig', {
+        defaultMessage: 'Edit configuration',
+      })}
     >
-      {selectedColumn ? (
-        <EuiLink
-          className="lnsPopoverEditor__link"
-          onClick={() => {
-            props.togglePopover();
-          }}
-          data-test-subj="lns-dimensionTrigger"
-          aria-label={i18n.translate('xpack.lens.configure.editConfig', {
-            defaultMessage: 'Edit configuration',
-          })}
-          title={i18n.translate('xpack.lens.configure.editConfig', {
-            defaultMessage: 'Edit configuration',
-          })}
-        >
-          {uniqueLabel}
-        </EuiLink>
-      ) : null}
-    </div>
+      {uniqueLabel}
+    </EuiLink>
   );
 };
 

diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx
@@ -109,14 +109,14 @@ export function PopoverEditor(props: PopoverEditorProps) {
         items: getOperationTypes().map(({ operationType, compatibleWithCurrentField }) => ({
           name: operationPanels[operationType].displayName,
           id: operationType as string,
-          className: classNames('lnsPopoverEditor__operation', {
-            'lnsPopoverEditor__operation--selected': Boolean(
+          className: classNames('lnsIndexPatternDimensionEditor__operation', {
+            'lnsIndexPatternDimensionEditor__operation--selected': Boolean(
               incompatibleSelectedOperationType === operationType ||
                 (!incompatibleSelectedOperationType &&
                   selectedColumn &&
                   selectedColumn.operationType === operationType)
             ),
-            'lnsPopoverEditor__operation--incompatible': !compatibleWithCurrentField,
+            'lnsIndexPatternDimensionEditor__operation--incompatible': !compatibleWithCurrentField,
           }),
           'data-test-subj': `lns-indexPatternDimension${
             compatibleWithCurrentField ? '' : 'Incompatible'
@@ -182,7 +182,7 @@ export function PopoverEditor(props: PopoverEditorProps) {
   }
 
   return (
-    <div id={columnId} className="lnsPopoverEditor">
+    <div id={columnId} className="lnsIndexPatternDimensionEditor">
       <EuiFlexGroup gutterSize="s" direction="column">
         <EuiFlexItem>
           <FieldSelect
@@ -258,10 +258,10 @@ export function PopoverEditor(props: PopoverEditorProps) {
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiFlexGroup gutterSize="s">
-            <EuiFlexItem grow={null} className={classNames('lnsPopoverEditor__left')}>
+            <EuiFlexItem grow={null} className={classNames('lnsIndexPatternDimensionEditor__left')}>
               <EuiSideNav items={getSideNavItems()} />
             </EuiFlexItem>
-            <EuiFlexItem grow={true} className="lnsPopoverEditor__right">
+            <EuiFlexItem grow={true} className="lnsIndexPatternDimensionEditor__right">
               {incompatibleSelectedOperationType && selectedColumn && (
                 <EuiCallOut
                   data-test-subj="indexPattern-invalid-operation"