[Lens] small visual flyouts adjustments

x-pack/plugins/lens/public/datatable_visualization/visualization.tsx

@@ -311,7 +311,7 @@ export const getDatatableVisualization = ({
       {
         type: layerTypes.DATA,
         label: i18n.translate('xpack.lens.datatable.addLayer', {
-          defaultMessage: 'Add visualization layer',
+          defaultMessage: 'Visualization',
         }),
       },
     ];

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/add_layer.tsx

@@ -6,14 +6,7 @@
  */
 
 import React, { useState, useMemo } from 'react';
-import {
-  EuiToolTip,
-  EuiButton,
-  EuiPopover,
-  EuiContextMenuItem,
-  EuiContextMenuPanel,
-  EuiIcon,
-} from '@elastic/eui';
+import { EuiToolTip, EuiButton, EuiPopover, EuiIcon, EuiContextMenu } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { LayerType, layerTypes } from '../../../../common';
@@ -106,25 +99,29 @@ export function AddLayerButton({
       closePopover={() => toggleLayersChoice(false)}
       panelPaddingSize="none"
     >
-      <EuiContextMenuPanel
-        size="s"
-        items={supportedLayers.map(({ type, label, icon, disabled, tooltipContent }) => {
-          return (
-            <EuiContextMenuItem
-              key={type}
-              data-test-subj={`lnsLayerAddButton-${type}`}
-              onClick={() => {
-                onAddLayerClick(type);
-                toggleLayersChoice(false);
-              }}
-              icon={icon && <EuiIcon size="m" type={icon} />}
-              disabled={disabled}
-              toolTipContent={tooltipContent}
-            >
-              {label}
-            </EuiContextMenuItem>
-          );
-        })}
+      <EuiContextMenu
+        initialPanelId={0}
+        panels={[
+          {
+            id: 0,
+            title: i18n.translate('xpack.lens.configPanel.selectLayerType', {
+              defaultMessage: 'Select layer type',
+            }),
+            items: supportedLayers.map(({ type, label, icon, disabled, tooltipContent }) => {
+              return {
+                tooltipContent,
+                disabled,
+                name: label,
+                icon: icon && <EuiIcon size="m" type={icon} />,
+                ['data-test-subj']: `lnsLayerAddButton-${type}`,
+                onClick: () => {
+                  onAddLayerClick(type);
+                  toggleLayersChoice(false);
+                },
+              };
+            }),
+          },
+        ]}
       />
     </EuiPopover>
   );

x-pack/plugins/lens/public/heatmap_visualization/visualization.tsx

@@ -285,7 +285,7 @@ export const getHeatmapVisualization = ({
       {
         type: layerTypes.DATA,
         label: i18n.translate('xpack.lens.heatmap.addLayer', {
-          defaultMessage: 'Add visualization layer',
+          defaultMessage: 'Visualization',
         }),
       },
     ];

x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/advanced_options.tsx

@@ -9,16 +9,16 @@ import { EuiLink, EuiText, EuiPopover, EuiButtonEmpty, EuiSpacer } from '@elasti
 import { i18n } from '@kbn/i18n';
 import React, { useState } from 'react';
 
-export function AdvancedOptions(props: {
-  options: Array<{
-    title: string;
-    dataTestSubj: string;
-    onClick: () => void;
-    showInPopover: boolean;
-    inlineElement: React.ReactElement | null;
-    helpPopup?: string | null;
-  }>;
-}) {
+interface AdvancedOption {
+  title: string;
+  dataTestSubj: string;
+  onClick: () => void;
+  showInPopover: boolean;
+  inlineElement: React.ReactElement | null;
+  helpPopup?: string | null;
+}
+
+export function AdvancedOptions(props: { options: AdvancedOption[] }) {
   const [popoverOpen, setPopoverOpen] = useState(false);
   const popoverOptions = props.options.filter((option) => option.showInPopover);
   const inlineOptions = props.options.filter((option) => option.inlineElement);

x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx

@@ -405,7 +405,20 @@ export function DimensionEditor(props: DimensionEditorProps) {
     !currentFieldIsInvalid &&
     !incompleteInfo &&
     selectedColumn &&
-    isQuickFunction(selectedColumn.operationType);
+    isQuickFunction(selectedColumn.operationType) &&
+    ParamEditor;
+
+  const shouldDisplayReferenceEditor =
+    !incompleteInfo &&
+    selectedColumn &&
+    'references' in selectedColumn &&
+    selectedOperationDefinition?.input === 'fullReference';
+
+  const shouldDisplayFieldInput =
+    !selectedColumn ||
+    selectedOperationDefinition?.input === 'field' ||
+    (incompleteOperation && operationDefinitionMap[incompleteOperation]?.input === 'field') ||
+    temporaryQuickFunction;
 
   const FieldInputComponent = selectedOperationDefinition?.renderFieldInput || FieldInput;
 
@@ -431,10 +444,7 @@ export function DimensionEditor(props: DimensionEditorProps) {
       </div>
 
       <div className="lnsIndexPatternDimensionEditor__section lnsIndexPatternDimensionEditor__section--padded lnsIndexPatternDimensionEditor__section--shaded">
-        {!incompleteInfo &&
-        selectedColumn &&
-        'references' in selectedColumn &&
-        selectedOperationDefinition?.input === 'fullReference' ? (
+        {shouldDisplayReferenceEditor ? (
           <>
             {selectedColumn.references.map((referenceId, index) => {
               const validation = selectedOperationDefinition.requiredReferences[index];
@@ -478,10 +488,7 @@ export function DimensionEditor(props: DimensionEditorProps) {
           </>
         ) : null}
 
-        {!selectedColumn ||
-        selectedOperationDefinition?.input === 'field' ||
-        (incompleteOperation && operationDefinitionMap[incompleteOperation]?.input === 'field') ||
-        temporaryQuickFunction ? (
+        {shouldDisplayFieldInput ? (
           <FieldInputComponent
             layer={state.layers[layerId]}
             selectedColumn={selectedColumn as FieldBasedIndexPatternColumn}
@@ -510,7 +517,7 @@ export function DimensionEditor(props: DimensionEditorProps) {
           />
         ) : null}
 
-        {shouldDisplayExtraOptions && ParamEditor && (
+        {shouldDisplayExtraOptions && (
           <ParamEditor
             layer={state.layers[layerId]}
             layerId={layerId}
@@ -647,6 +654,17 @@ export function DimensionEditor(props: DimensionEditorProps) {
     [layerId, selectedColumn, state.indexPatterns, state.layers]
   );
 
+  const shouldDisplayAdvancedOptions =
+    !isFullscreen &&
+    !currentFieldIsInvalid &&
+    !incompleteInfo &&
+    selectedColumn &&
+    temporaryState === 'none' &&
+    selectedOperationDefinition &&
+    (selectedOperationDefinition.timeScalingMode ||
+      selectedOperationDefinition.filterable ||
+      selectedOperationDefinition.shiftable);
+
   return (
     <div id={columnId}>
       {hasTabs ? <DimensionEditorTabs tabs={tabs} /> : null}
@@ -656,108 +674,103 @@ export function DimensionEditor(props: DimensionEditorProps) {
       />
       {TabContent}
 
-      {!isFullscreen &&
-        !currentFieldIsInvalid &&
-        !incompleteInfo &&
-        selectedColumn &&
-        temporaryState === 'none' &&
-        selectedOperationDefinition && (
-          <div className="lnsIndexPatternDimensionEditor__section lnsIndexPatternDimensionEditor__section--padded lnsIndexPatternDimensionEditor__section--shaded">
-            <AdvancedOptions
-              options={[
-                {
-                  title: i18n.translate('xpack.lens.indexPattern.timeScale.enableTimeScale', {
-                    defaultMessage: 'Normalize by unit',
-                  }),
-                  dataTestSubj: 'indexPattern-time-scaling-enable',
-                  onClick: () => {
-                    setStateWrapper(
-                      setTimeScaling(columnId, state.layers[layerId], DEFAULT_TIME_SCALE)
-                    );
-                  },
-                  showInPopover: Boolean(
-                    selectedOperationDefinition.timeScalingMode &&
-                      selectedOperationDefinition.timeScalingMode !== 'disabled' &&
+      {shouldDisplayAdvancedOptions && (
+        <div className="lnsIndexPatternDimensionEditor__section lnsIndexPatternDimensionEditor__section--padded lnsIndexPatternDimensionEditor__section--shaded">
+          <AdvancedOptions
+            options={[
+              {
+                title: i18n.translate('xpack.lens.indexPattern.timeScale.enableTimeScale', {
+                  defaultMessage: 'Normalize by unit',
+                }),
+                dataTestSubj: 'indexPattern-time-scaling-enable',
+                onClick: () => {
+                  setStateWrapper(
+                    setTimeScaling(columnId, state.layers[layerId], DEFAULT_TIME_SCALE)
+                  );
+                },
+                showInPopover: Boolean(
+                  selectedOperationDefinition.timeScalingMode &&
+                    selectedOperationDefinition.timeScalingMode !== 'disabled' &&
+                    Object.values(state.layers[layerId].columns).some(
+                      (col) => col.operationType === 'date_histogram'
+                    ) &&
+                    !selectedColumn.timeScale
+                ),
+                inlineElement: selectedOperationDefinition.timeScalingMode ? (
+                  <TimeScaling
+                    selectedColumn={selectedColumn}
+                    columnId={columnId}
+                    layer={state.layers[layerId]}
+                    updateLayer={setStateWrapper}
+                  />
+                ) : null,
+              },
+              {
+                title: i18n.translate('xpack.lens.indexPattern.filterBy.label', {
+                  defaultMessage: 'Filter by',
+                }),
+                dataTestSubj: 'indexPattern-filter-by-enable',
+                onClick: () => {
+                  setFilterByOpenInitally(true);
+                  setStateWrapper(setFilter(columnId, state.layers[layerId], defaultFilter));
+                },
+                showInPopover: Boolean(
+                  selectedOperationDefinition.filterable && !selectedColumn.filter
+                ),
+                inlineElement:
+                  selectedOperationDefinition.filterable && selectedColumn.filter ? (
+                    <Filtering
+                      indexPattern={currentIndexPattern}
+                      selectedColumn={selectedColumn}
+                      columnId={columnId}
+                      layer={state.layers[layerId]}
+                      updateLayer={setStateWrapper}
+                      isInitiallyOpen={filterByOpenInitially}
+                      helpMessage={
+                        selectedOperationDefinition.filterable &&
+                        typeof selectedOperationDefinition.filterable !== 'boolean'
+                          ? selectedOperationDefinition.filterable.helpMessage
+                          : null
+                      }
+                    />
+                  ) : null,
+              },
+              {
+                title: i18n.translate('xpack.lens.indexPattern.timeShift.label', {
+                  defaultMessage: 'Time shift',
+                }),
+                dataTestSubj: 'indexPattern-time-shift-enable',
+                onClick: () => {
+                  setTimeShiftFocused(true);
+                  setStateWrapper(setTimeShift(columnId, state.layers[layerId], ''));
+                },
+                showInPopover: Boolean(
+                  selectedOperationDefinition.shiftable &&
+                    selectedColumn.timeShift === undefined &&
+                    (currentIndexPattern.timeFieldName ||
                       Object.values(state.layers[layerId].columns).some(
                         (col) => col.operationType === 'date_histogram'
-                      ) &&
-                      !selectedColumn.timeScale
-                  ),
-                  inlineElement: (
-                    <TimeScaling
+                      ))
+                ),
+                inlineElement:
+                  selectedOperationDefinition.shiftable &&
+                  selectedColumn.timeShift !== undefined ? (
+                    <TimeShift
+                      indexPattern={currentIndexPattern}
                       selectedColumn={selectedColumn}
                       columnId={columnId}
                       layer={state.layers[layerId]}
                       updateLayer={setStateWrapper}
+                      isFocused={timeShiftedFocused}
+                      activeData={props.activeData}
+                      layerId={layerId}
                     />
-                  ),
-                },
-                {
-                  title: i18n.translate('xpack.lens.indexPattern.filterBy.label', {
-                    defaultMessage: 'Filter by',
-                  }),
-                  dataTestSubj: 'indexPattern-filter-by-enable',
-                  onClick: () => {
-                    setFilterByOpenInitally(true);
-                    setStateWrapper(setFilter(columnId, state.layers[layerId], defaultFilter));
-                  },
-                  showInPopover: Boolean(
-                    selectedOperationDefinition.filterable && !selectedColumn.filter
-                  ),
-                  inlineElement:
-                    selectedOperationDefinition.filterable && selectedColumn.filter ? (
-                      <Filtering
-                        indexPattern={currentIndexPattern}
-                        selectedColumn={selectedColumn}
-                        columnId={columnId}
-                        layer={state.layers[layerId]}
-                        updateLayer={setStateWrapper}
-                        isInitiallyOpen={filterByOpenInitially}
-                        helpMessage={
-                          selectedOperationDefinition.filterable &&
-                          typeof selectedOperationDefinition.filterable !== 'boolean'
-                            ? selectedOperationDefinition.filterable.helpMessage
-                            : null
-                        }
-                      />
-                    ) : null,
-                },
-                {
-                  title: i18n.translate('xpack.lens.indexPattern.timeShift.label', {
-                    defaultMessage: 'Time shift',
-                  }),
-                  dataTestSubj: 'indexPattern-time-shift-enable',
-                  onClick: () => {
-                    setTimeShiftFocused(true);
-                    setStateWrapper(setTimeShift(columnId, state.layers[layerId], ''));
-                  },
-                  showInPopover: Boolean(
-                    selectedOperationDefinition.shiftable &&
-                      selectedColumn.timeShift === undefined &&
-                      (currentIndexPattern.timeFieldName ||
-                        Object.values(state.layers[layerId].columns).some(
-                          (col) => col.operationType === 'date_histogram'
-                        ))
-                  ),
-                  inlineElement:
-                    selectedOperationDefinition.shiftable &&
-                    selectedColumn.timeShift !== undefined ? (
-                      <TimeShift
-                        indexPattern={currentIndexPattern}
-                        selectedColumn={selectedColumn}
-                        columnId={columnId}
-                        layer={state.layers[layerId]}
-                        updateLayer={setStateWrapper}
-                        isFocused={timeShiftedFocused}
-                        activeData={props.activeData}
-                        layerId={layerId}
-                      />
-                    ) : null,
-                },
-              ]}
-            />
-          </div>
-        )}
+                  ) : null,
+              },
+            ]}
+          />
+        </div>
+      )}
 
       {!isFullscreen && !currentFieldIsInvalid && (
         <div className="lnsIndexPatternDimensionEditor__section lnsIndexPatternDimensionEditor__section--padded  lnsIndexPatternDimensionEditor__section--collapseNext">

x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimensions_editor_helpers.tsx

@@ -48,8 +48,8 @@ export const LabelInput = ({
   return (
     <EuiFormRow
       label={i18n.translate('xpack.lens.indexPattern.columnLabel', {
-        defaultMessage: 'Display name',
-        description: 'Display name of a column of data',
+        defaultMessage: 'Name',
+        description: 'Name of a column of data',
       })}
       display="columnCompressed"
       fullWidth