[Lens] Color in dimension trigger (#76871) (#83524)

src/plugins/charts/public/services/palettes/mock.ts

@@ -22,7 +22,7 @@ import { PaletteService } from './service';
 import { PaletteDefinition, SeriesLayer } from './types';
 
 export const getPaletteRegistry = () => {
-  const mockPalette: jest.Mocked<PaletteDefinition> = {
+  const mockPalette1: jest.Mocked<PaletteDefinition> = {
     id: 'default',
     title: 'My Palette',
     getColor: jest.fn((_: SeriesLayer[]) => 'black'),
@@ -41,9 +41,28 @@ export const getPaletteRegistry = () => {
     })),
   };
 
+  const mockPalette2: jest.Mocked<PaletteDefinition> = {
+    id: 'mocked',
+    title: 'Mocked Palette',
+    getColor: jest.fn((_: SeriesLayer[]) => 'blue'),
+    getColors: jest.fn((num: number) => ['blue', 'yellow']),
+    toExpression: jest.fn(() => ({
+      type: 'expression',
+      chain: [
+        {
+          type: 'function',
+          function: 'system_palette',
+          arguments: {
+            name: ['mocked'],
+          },
+        },
+      ],
+    })),
+  };
+
   return {
-    get: (_: string) => mockPalette,
-    getAll: () => [mockPalette],
+    get: (name: string) => (name !== 'default' ? mockPalette2 : mockPalette1),
+    getAll: () => [mockPalette1, mockPalette2],
   };
 };
 

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

@@ -284,7 +284,7 @@ describe('Datatable Visualization', () => {
           state: { layers: [layer] },
           frame,
         }).groups[1].accessors
-      ).toEqual(['c', 'b']);
+      ).toEqual([{ columnId: 'c' }, { columnId: 'b' }]);
     });
   });
 

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

@@ -149,9 +149,9 @@ export const datatableVisualization: Visualization<DatatableVisualizationState>
             defaultMessage: 'Break down by',
           }),
           layerId: state.layers[0].layerId,
-          accessors: sortedColumns.filter(
-            (c) => datasource!.getOperationForColumnId(c)?.isBucketed
-          ),
+          accessors: sortedColumns
+            .filter((c) => datasource!.getOperationForColumnId(c)?.isBucketed)
+            .map((accessor) => ({ columnId: accessor })),
           supportsMoreColumns: true,
           filterOperations: (op) => op.isBucketed,
           dataTestSubj: 'lnsDatatable_column',
@@ -162,9 +162,9 @@ export const datatableVisualization: Visualization<DatatableVisualizationState>
             defaultMessage: 'Metrics',
           }),
           layerId: state.layers[0].layerId,
-          accessors: sortedColumns.filter(
-            (c) => !datasource!.getOperationForColumnId(c)?.isBucketed
-          ),
+          accessors: sortedColumns
+            .filter((c) => !datasource!.getOperationForColumnId(c)?.isBucketed)
+            .map((accessor) => ({ columnId: accessor })),
           supportsMoreColumns: true,
           filterOperations: (op) => !op.isBucketed,
           required: true,

x-pack/plugins/lens/public/drag_drop/drag_drop.scss

@@ -47,7 +47,7 @@
 // Drop area will be replacing existing content
 .lnsDragDrop-isReplacing {
   &,
-  .lnsLayerPanel__triggerLink {
+  .lnsLayerPanel__triggerText {
     text-decoration: line-through;
   }
 }

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

@@ -0,0 +1,71 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { AccessorConfig } from '../../../types';
+
+export function ColorIndicator({
+  accessorConfig,
+  children,
+}: {
+  accessorConfig: AccessorConfig;
+  children: React.ReactChild;
+}) {
+  let indicatorIcon = null;
+  if (accessorConfig.triggerIcon && accessorConfig.triggerIcon !== 'none') {
+    const baseIconProps = {
+      size: 's',
+      className: 'lnsLayerPanel__colorIndicator',
+    } as const;
+
+    indicatorIcon = (
+      <EuiFlexItem grow={false}>
+        {accessorConfig.triggerIcon === 'color' && accessorConfig.color && (
+          <EuiIcon
+            {...baseIconProps}
+            color={accessorConfig.color}
+            type="stopFilled"
+            aria-label={i18n.translate('xpack.lens.editorFrame.colorIndicatorLabel', {
+              defaultMessage: 'Color of this dimension: {hex}',
+              values: {
+                hex: accessorConfig.color,
+              },
+            })}
+          />
+        )}
+        {accessorConfig.triggerIcon === 'disabled' && (
+          <EuiIcon
+            {...baseIconProps}
+            type="stopSlash"
+            color="subdued"
+            aria-label={i18n.translate('xpack.lens.editorFrame.noColorIndicatorLabel', {
+              defaultMessage: 'This dimension does not have an individual color',
+            })}
+          />
+        )}
+        {accessorConfig.triggerIcon === 'colorBy' && (
+          <EuiIcon
+            {...baseIconProps}
+            type="brush"
+            color="text"
+            aria-label={i18n.translate('xpack.lens.editorFrame.paletteColorIndicatorLabel', {
+              defaultMessage: 'This dimension is using a palette',
+            })}
+          />
+        )}
+      </EuiFlexItem>
+    );
+  }
+
+  return (
+    <EuiFlexGroup gutterSize="none" alignItems="center">
+      {indicatorIcon}
+      <EuiFlexItem>{children}</EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.scss

@@ -52,6 +52,7 @@
   align-items: center;
   overflow: hidden;
   min-height: $euiSizeXXL;
+  position: relative;
 
   // NativeRenderer is messing this up
   > div {
@@ -80,28 +81,18 @@
   margin-right: $euiSizeS;
 }
 
-.lnsLayerPanel__triggerLink {
+.lnsLayerPanel__triggerText {
   width: 100%;
   padding: $euiSizeS;
   min-height: $euiSizeXXL - 2;
   word-break: break-word;
-
-  &:focus {
-    background-color: transparent !important; // sass-lint:disable-line no-important
-    outline: none !important; // sass-lint:disable-line no-important
-  }
-
-  &:focus .lnsLayerPanel__triggerLinkLabel,
-  &:focus-within .lnsLayerPanel__triggerLinkLabel {
-    background-color: transparentize($euiColorVis1, .9);
-  }
 }
 
-.lnsLayerPanel__triggerLinkLabel {
+.lnsLayerPanel__triggerTextLabel {
   transition: background-color $euiAnimSpeedFast ease-in-out;
 }
 
-.lnsLayerPanel__triggerLinkContent {
+.lnsLayerPanel__triggerTextContent {
   // Make EUI button content not centered
   justify-content: flex-start;
   padding: 0 !important; // sass-lint:disable-line no-important
@@ -111,3 +102,32 @@
 .lnsLayerPanel__styleEditor {
   padding: 0 $euiSizeS $euiSizeS;
 }
+
+.lnsLayerPanel__colorIndicator {
+  margin-left: $euiSizeS;
+}
+
+.lnsLayerPanel__paletteContainer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.lnsLayerPanel__paletteColor {
+  height: $euiSizeXS;
+}
+
+.lnsLayerPanel__dimensionLink {
+  width: 100%;
+
+  &:focus {
+    background-color: transparent !important; // sass-lint:disable-line no-important
+    outline: none !important; // sass-lint:disable-line no-important
+  }
+
+  &:focus .lnsLayerPanel__triggerTextLabel,
+  &:focus-within .lnsLayerPanel__triggerTextLabel {
+    background-color: transparentize($euiColorVis1, .9);
+  }
+}

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

@@ -137,7 +137,7 @@ describe('LayerPanel', () => {
           {
             groupLabel: 'A',
             groupId: 'a',
-            accessors: ['x'],
+            accessors: [{ columnId: 'x' }],
             filterOperations: () => true,
             supportsMoreColumns: false,
             dataTestSubj: 'lnsGroup',
@@ -177,7 +177,7 @@ describe('LayerPanel', () => {
           {
             groupLabel: 'A',
             groupId: 'a',
-            accessors: ['x'],
+            accessors: [{ columnId: 'x' }],
             filterOperations: () => true,
             supportsMoreColumns: false,
             dataTestSubj: 'lnsGroup',
@@ -209,7 +209,7 @@ describe('LayerPanel', () => {
           {
             groupLabel: 'A',
             groupId: 'a',
-            accessors: ['newid'],
+            accessors: [{ columnId: 'newid' }],
             filterOperations: () => true,
             supportsMoreColumns: true,
             dataTestSubj: 'lnsGroup',
@@ -257,7 +257,7 @@ describe('LayerPanel', () => {
           {
             groupLabel: 'A',
             groupId: 'a',
-            accessors: ['newid'],
+            accessors: [{ columnId: 'newid' }],
             filterOperations: () => true,
             supportsMoreColumns: false,
             dataTestSubj: 'lnsGroup',
@@ -302,7 +302,7 @@ describe('LayerPanel', () => {
           {
             groupLabel: 'A',
             groupId: 'a',
-            accessors: ['newid'],
+            accessors: [{ columnId: 'newid' }],
             filterOperations: () => true,
             supportsMoreColumns: false,
             dataTestSubj: 'lnsGroup',
@@ -377,7 +377,7 @@ describe('LayerPanel', () => {
           {
             groupLabel: 'A',
             groupId: 'a',
-            accessors: ['a'],
+            accessors: [{ columnId: 'a' }],
             filterOperations: () => true,
             supportsMoreColumns: true,
             dataTestSubj: 'lnsGroup',
@@ -416,15 +416,15 @@ describe('LayerPanel', () => {
           {
             groupLabel: 'A',
             groupId: 'a',
-            accessors: ['a'],
+            accessors: [{ columnId: 'a' }],
             filterOperations: () => true,
             supportsMoreColumns: false,
             dataTestSubj: 'lnsGroupA',
           },
           {
             groupLabel: 'B',
             groupId: 'b',
-            accessors: ['b'],
+            accessors: [{ columnId: 'b' }],
             filterOperations: () => true,
             supportsMoreColumns: true,
             dataTestSubj: 'lnsGroupB',
@@ -480,7 +480,7 @@ describe('LayerPanel', () => {
           {
             groupLabel: 'A',
             groupId: 'a',
-            accessors: ['a', 'b'],
+            accessors: [{ columnId: 'a' }, { columnId: 'b' }],
             filterOperations: () => true,
             supportsMoreColumns: true,
             dataTestSubj: 'lnsGroup',