[Lens] Refactor little things in preparation for gauges (#117868)

* change chart menu order, group and copy * add params to vis toolbar: handleClose() and panelClassname. Move Default classname to more appropriate place (not xy because it's used everywhere) * move supportStaticValue and supportFieldFormat on group level, add paramEditorCustomProps to pass label for reference line value. Refactor tabs * priority sorted out * CR Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Nov 10, 2021 · cecfc35 · cecfc35
1 parent f716387
commit cecfc35
Show file tree

Hide file tree

Showing 20 changed files with 123 additions and 133 deletions.
diff --git a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx b/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx
@@ -49,9 +49,9 @@ export const getDatatableVisualization = ({
       icon: LensIconChartDatatable,
       label: visualizationLabel,
       groupLabel: i18n.translate('xpack.lens.datatable.groupLabel', {
-        defaultMessage: 'Tabular and single value',
+        defaultMessage: 'Tabular',
       }),
-      sortPriority: 1,
+      sortPriority: 5,
     },
   ],
 

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
@@ -125,11 +125,7 @@ export function LayerPanel(
     dateRange,
   };
 
-  const {
-    groups,
-    supportStaticValue,
-    supportFieldFormat = true,
-  } = useMemo(
+  const { groups } = useMemo(
     () => activeVisualization.getConfiguration(layerVisualizationConfigProps),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
@@ -518,7 +514,7 @@ export function LayerPanel(
                         setActiveDimension({
                           activeGroup: group,
                           activeId: id,
-                          isNew: !supportStaticValue,
+                          isNew: !group.supportStaticValue,
                         });
                       }}
                       onDrop={onDrop}
@@ -575,8 +571,9 @@ export function LayerPanel(
                   toggleFullscreen,
                   isFullscreen,
                   setState: updateDataLayerState,
-                  supportStaticValue: Boolean(supportStaticValue),
-                  supportFieldFormat: Boolean(supportFieldFormat),
+                  supportStaticValue: Boolean(activeGroup.supportStaticValue),
+                  paramEditorCustomProps: activeGroup.paramEditorCustomProps,
+                  supportFieldFormat: activeGroup.supportFieldFormat !== false,
                   layerType: activeVisualization.getLayerType(layerId, visualizationState),
                 }}
               />

diff --git a/x-pack/plugins/lens/public/heatmap_visualization/visualization.tsx b/x-pack/plugins/lens/public/heatmap_visualization/visualization.tsx
@@ -33,8 +33,8 @@ import { getSafePaletteParams } from './utils';
 import type { CustomPaletteParams } from '../../common';
 import { layerTypes } from '../../common';
 
-const groupLabelForBar = i18n.translate('xpack.lens.heatmapVisualization.heatmapGroupLabel', {
-  defaultMessage: 'Heatmap',
+const groupLabelForHeatmap = i18n.translate('xpack.lens.heatmapVisualization.heatmapGroupLabel', {
+  defaultMessage: 'Magnitude',
 });
 
 interface HeatmapVisualizationDeps {
@@ -105,8 +105,9 @@ export const getHeatmapVisualization = ({
       label: i18n.translate('xpack.lens.heatmapVisualization.heatmapLabel', {
         defaultMessage: 'Heatmap',
       }),
-      groupLabel: groupLabelForBar,
+      groupLabel: groupLabelForHeatmap,
       showExperimentalBadge: true,
+      sortPriority: 1,
     },
   ],
 

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
@@ -55,6 +55,7 @@ import {
   CalloutWarning,
   LabelInput,
   getErrorMessage,
+  DimensionEditorTab,
 } from './dimensions_editor_helpers';
 import type { TemporaryState } from './dimensions_editor_helpers';
 
@@ -84,6 +85,7 @@ export function DimensionEditor(props: DimensionEditorProps) {
     supportStaticValue,
     supportFieldFormat = true,
     layerType,
+    paramEditorCustomProps,
   } = props;
   const services = {
     data: props.data,
@@ -478,6 +480,7 @@ export function DimensionEditor(props: DimensionEditorProps) {
                   isFullscreen={isFullscreen}
                   toggleFullscreen={toggleFullscreen}
                   setIsCloseable={setIsCloseable}
+                  paramEditorCustomProps={paramEditorCustomProps}
                   {...services}
                 />
               );
@@ -559,6 +562,7 @@ export function DimensionEditor(props: DimensionEditorProps) {
             toggleFullscreen={toggleFullscreen}
             isFullscreen={isFullscreen}
             setIsCloseable={setIsCloseable}
+            paramEditorCustomProps={paramEditorCustomProps}
             {...services}
           />
         )}
@@ -674,6 +678,7 @@ export function DimensionEditor(props: DimensionEditorProps) {
         toggleFullscreen={toggleFullscreen}
         isFullscreen={isFullscreen}
         setIsCloseable={setIsCloseable}
+        paramEditorCustomProps={paramEditorCustomProps}
         {...services}
       />
     </>
@@ -700,57 +705,64 @@ export function DimensionEditor(props: DimensionEditorProps) {
 
   const hasTabs = !isFullscreen && (hasFormula || supportStaticValue);
 
+  const tabs: DimensionEditorTab[] = [
+    {
+      id: staticValueOperationName,
+      enabled: Boolean(supportStaticValue),
+      state: showStaticValueFunction,
+      onClick: () => {
+        if (selectedColumn?.operationType === formulaOperationName) {
+          return setTemporaryState(staticValueOperationName);
+        }
+        setTemporaryState('none');
+        setStateWrapper(addStaticValueColumn());
+        return;
+      },
+      label: i18n.translate('xpack.lens.indexPattern.staticValueLabel', {
+        defaultMessage: 'Static value',
+      }),
+    },
+    {
+      id: quickFunctionsName,
+      enabled: true,
+      state: showQuickFunctions,
+      onClick: () => {
+        if (selectedColumn && !isQuickFunction(selectedColumn.operationType)) {
+          setTemporaryState(quickFunctionsName);
+          return;
+        }
+      },
+      label: i18n.translate('xpack.lens.indexPattern.quickFunctionsLabel', {
+        defaultMessage: 'Quick functions',
+      }),
+    },
+    {
+      id: formulaOperationName,
+      enabled: hasFormula,
+      state: temporaryState === 'none' && selectedColumn?.operationType === formulaOperationName,
+      onClick: () => {
+        setTemporaryState('none');
+        if (selectedColumn?.operationType !== formulaOperationName) {
+          const newLayer = insertOrReplaceColumn({
+            layer: props.state.layers[props.layerId],
+            indexPattern: currentIndexPattern,
+            columnId,
+            op: formulaOperationName,
+            visualizationGroups: dimensionGroups,
+          });
+          setStateWrapper(newLayer);
+          trackUiEvent(`indexpattern_dimension_operation_formula`);
+        }
+      },
+      label: i18n.translate('xpack.lens.indexPattern.formulaLabel', {
+        defaultMessage: 'Formula',
+      }),
+    },
+  ];
+
   return (
     <div id={columnId}>
-      {hasTabs ? (
-        <DimensionEditorTabs
-          tabsEnabled={{
-            static_value: supportStaticValue,
-            formula: hasFormula,
-            quickFunctions: true,
-          }}
-          tabsState={{
-            static_value: showStaticValueFunction,
-            quickFunctions: showQuickFunctions,
-            formula:
-              temporaryState === 'none' && selectedColumn?.operationType === formulaOperationName,
-          }}
-          onClick={(tabClicked) => {
-            if (tabClicked === 'quickFunctions') {
-              if (selectedColumn && !isQuickFunction(selectedColumn.operationType)) {
-                setTemporaryState(quickFunctionsName);
-                return;
-              }
-            }
-
-            if (tabClicked === 'static_value') {
-              // when coming from a formula, set a temporary state
-              if (selectedColumn?.operationType === formulaOperationName) {
-                return setTemporaryState(staticValueOperationName);
-              }
-              setTemporaryState('none');
-              setStateWrapper(addStaticValueColumn());
-              return;
-            }
-
-            if (tabClicked === 'formula') {
-              setTemporaryState('none');
-              if (selectedColumn?.operationType !== formulaOperationName) {
-                const newLayer = insertOrReplaceColumn({
-                  layer: props.state.layers[props.layerId],
-                  indexPattern: currentIndexPattern,
-                  columnId,
-                  op: formulaOperationName,
-                  visualizationGroups: dimensionGroups,
-                });
-                setStateWrapper(newLayer);
-                trackUiEvent(`indexpattern_dimension_operation_formula`);
-              }
-            }
-          }}
-        />
-      ) : null}
-
+      {hasTabs ? <DimensionEditorTabs tabs={tabs} /> : null}
       <CalloutWarning
         currentOperationType={selectedColumn?.operationType}
         temporaryStateType={temporaryState}

diff --git a/...plugins/lens/public/indexpattern_datasource/dimension_panel/dimensions_editor_helpers.tsx b/...plugins/lens/public/indexpattern_datasource/dimension_panel/dimensions_editor_helpers.tsx
@@ -144,57 +144,28 @@ export const CalloutWarning = ({
   );
 };
 
-type DimensionEditorTabsType =
-  | typeof quickFunctionsName
-  | typeof staticValueOperationName
-  | typeof formulaOperationName;
+export interface DimensionEditorTab {
+  enabled: boolean;
+  state: boolean;
+  onClick: () => void;
+  id: typeof quickFunctionsName | typeof staticValueOperationName | typeof formulaOperationName;
+  label: string;
+}
 
-export const DimensionEditorTabs = ({
-  tabsEnabled,
-  tabsState,
-  onClick,
-}: {
-  tabsEnabled: Record<DimensionEditorTabsType, boolean>;
-  tabsState: Record<DimensionEditorTabsType, boolean>;
-  onClick: (tabClicked: DimensionEditorTabsType) => void;
-}) => {
+export const DimensionEditorTabs = ({ tabs }: { tabs: DimensionEditorTab[] }) => {
   return (
     <EuiTabs
       size="s"
       className="lnsIndexPatternDimensionEditor__header"
       data-test-subj="lens-dimensionTabs"
     >
-      {tabsEnabled.static_value ? (
-        <EuiTab
-          isSelected={tabsState.static_value}
-          data-test-subj="lens-dimensionTabs-static_value"
-          onClick={() => onClick(staticValueOperationName)}
-        >
-          {i18n.translate('xpack.lens.indexPattern.staticValueLabel', {
-            defaultMessage: 'Static value',
-          })}
-        </EuiTab>
-      ) : null}
-      <EuiTab
-        isSelected={tabsState.quickFunctions}
-        data-test-subj="lens-dimensionTabs-quickFunctions"
-        onClick={() => onClick(quickFunctionsName)}
-      >
-        {i18n.translate('xpack.lens.indexPattern.quickFunctionsLabel', {
-          defaultMessage: 'Quick functions',
-        })}
-      </EuiTab>
-      {tabsEnabled.formula ? (
-        <EuiTab
-          isSelected={tabsState.formula}
-          data-test-subj="lens-dimensionTabs-formula"
-          onClick={() => onClick(formulaOperationName)}
-        >
-          {i18n.translate('xpack.lens.indexPattern.formulaLabel', {
-            defaultMessage: 'Formula',
-          })}
-        </EuiTab>
-      ) : null}
+      {tabs.map(({ id, enabled, state, onClick, label }) => {
+        return enabled ? (
+          <EuiTab isSelected={state} data-test-subj={`lens-dimensionTabs-${id}`} onClick={onClick}>
+            {label}
+          </EuiTab>
+        ) : null;
+      })}
     </EuiTabs>
   );
 };

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/reference_editor.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/reference_editor.tsx
@@ -34,7 +34,7 @@ import { FieldSelect } from './field_select';
 import { hasField } from '../utils';
 import type { IndexPattern, IndexPatternLayer, IndexPatternPrivateState } from '../types';
 import { trackUiEvent } from '../../lens_ui_telemetry';
-import { VisualizationDimensionGroupConfig } from '../../types';
+import { ParamEditorCustomProps, VisualizationDimensionGroupConfig } from '../../types';
 import { IndexPatternDimensionEditorProps } from './dimension_panel';
 
 const operationPanels = getOperationDisplay();
@@ -65,6 +65,7 @@ export interface ReferenceEditorProps {
   savedObjectsClient: SavedObjectsClientContract;
   http: HttpSetup;
   data: DataPublicPluginStart;
+  paramEditorCustomProps?: ParamEditorCustomProps;
 }
 
 export function ReferenceEditor(props: ReferenceEditorProps) {
@@ -84,6 +85,7 @@ export function ReferenceEditor(props: ReferenceEditorProps) {
     isFullscreen,
     toggleFullscreen,
     setIsCloseable,
+    paramEditorCustomProps,
     ...services
   } = props;
 
@@ -364,6 +366,7 @@ export function ReferenceEditor(props: ReferenceEditorProps) {
               isFullscreen={isFullscreen}
               toggleFullscreen={toggleFullscreen}
               setIsCloseable={setIsCloseable}
+              paramEditorCustomProps={paramEditorCustomProps}
               {...services}
             />
           </>

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/index.ts b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/index.ts
@@ -51,7 +51,7 @@ import {
 } from './formula';
 import { staticValueOperation, StaticValueIndexPatternColumn } from './static_value';
 import { lastValueOperation, LastValueIndexPatternColumn } from './last_value';
-import { FrameDatasourceAPI, OperationMetadata } from '../../../types';
+import { FrameDatasourceAPI, OperationMetadata, ParamEditorCustomProps } from '../../../types';
 import type { BaseIndexPatternColumn, ReferenceBasedIndexPatternColumn } from './column_types';
 import { IndexPattern, IndexPatternField, IndexPatternLayer } from '../../types';
 import { DateRange, LayerType } from '../../../../common';
@@ -197,6 +197,7 @@ export interface ParamEditorProps<C> {
   data: DataPublicPluginStart;
   activeData?: IndexPatternDimensionEditorProps['activeData'];
   operationDefinitionMap: Record<string, GenericOperationDefinition>;
+  paramEditorCustomProps?: ParamEditorCustomProps;
 }
 
 export interface HelpProps<C> {

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/static_value.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/static_value.tsx
@@ -137,13 +137,12 @@ export const staticValueOperation: OperationDefinition<
   },
 
   paramEditor: function StaticValueEditor({
-    layer,
     updateLayer,
     currentColumn,
     columnId,
     activeData,
     layerId,
-    indexPattern,
+    paramEditorCustomProps,
   }) {
     const onChange = useCallback(
       (newValue) => {
@@ -201,11 +200,7 @@ export const staticValueOperation: OperationDefinition<
 
     return (
       <div className="lnsIndexPatternDimensionEditor__section lnsIndexPatternDimensionEditor__section--padded lnsIndexPatternDimensionEditor__section--shaded">
-        <EuiFormLabel>
-          {i18n.translate('xpack.lens.indexPattern.staticValue.label', {
-            defaultMessage: 'Reference line value',
-          })}
-        </EuiFormLabel>
+        <EuiFormLabel>{paramEditorCustomProps?.label || defaultLabel}</EuiFormLabel>
         <EuiSpacer size="s" />
         <EuiFieldNumber
           data-test-subj="lns-indexPattern-static_value-input"

diff --git a/x-pack/plugins/lens/public/metric_visualization/visualization.tsx b/x-pack/plugins/lens/public/metric_visualization/visualization.tsx
@@ -54,9 +54,9 @@ export const metricVisualization: Visualization<MetricState> = {
         defaultMessage: 'Metric',
       }),
       groupLabel: i18n.translate('xpack.lens.metric.groupLabel', {
-        defaultMessage: 'Tabular and single value',
+        defaultMessage: 'Single value',
       }),
-      sortPriority: 1,
+      sortPriority: 3,
     },
   ],
 

diff --git a/x-pack/plugins/lens/public/shared_components/toolbar_popover.scss b/x-pack/plugins/lens/public/shared_components/toolbar_popover.scss
@@ -0,0 +1,3 @@
+.lnsVisToolbar__popover {
+  width: 365px;
+}