[Lens] Disable config axis side and color picker when groupid is brea…

…kdown and collaseFn enable (#195845)

## Summary
Fixes #195481

For XY charts only, when opening the breakdown dimension editor, we
disable the color picker and axis side configuration.

## Before


![image](https://github.com/user-attachments/assets/62f03481-45aa-402c-8d53-d30a8b02d11c)

## After


![image](https://github.com/user-attachments/assets/f48abdca-ab3f-40bb-b9fa-8266416b915c)

![image](https://github.com/user-attachments/assets/c0f62b62-b9ef-4fe4-917f-77246fd0066b)


https://github.com/user-attachments/assets/05ee0e8e-713b-4eb3-a1ef-bf7418226409

---------

Co-authored-by: Marta Bondyra <[email protected]>
Co-authored-by: Nick Partridge <[email protected]>

x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/dimension_editor.test.tsx

@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { mountWithIntl as mount } from '@kbn/test-jest-helpers';
+import { render, screen } from '@testing-library/react';
 import { EuiButtonGroupProps, EuiButtonGroup } from '@elastic/eui';
 import { DataDimensionEditor } from './dimension_editor';
 import { FramePublicAPI, DatasourcePublicAPI } from '../../../types';
@@ -195,6 +196,65 @@ describe('XY Config panels', () => {
 
       expect(component.find(EuiColorPicker).prop('color')).toEqual('red');
     });
+    test.each<{ collapseFn?: string; shouldDisplay?: boolean }>([
+      // should display color picker
+      { shouldDisplay: true },
+      // should not display color picker
+      { collapseFn: 'sum', shouldDisplay: false },
+    ])(
+      'should only show color picker when collapseFn is defined for breakdown group',
+      ({ collapseFn = undefined, shouldDisplay = true }) => {
+        const state = {
+          ...testState(),
+          layers: [
+            {
+              collapseFn,
+              seriesType: 'bar',
+              layerType: LayerTypes.DATA,
+              layerId: 'first',
+              splitAccessor: 'breakdownAccessor',
+              xAccessor: 'foo',
+              accessors: ['bar'],
+              yConfig: [{ forAccessor: 'bar', color: 'red' }],
+            },
+          ],
+        } as XYState;
+
+        render(
+          <DataDimensionEditor
+            layerId={state.layers[0].layerId}
+            frame={{
+              ...frame,
+              activeData: {
+                first: {
+                  type: 'datatable',
+                  columns: [],
+                  rows: [{ bar: 123 }],
+                },
+              },
+            }}
+            setState={jest.fn()}
+            accessor="breakdownAccessor"
+            groupId={'breakdown'}
+            state={state}
+            formatFactory={jest.fn()}
+            paletteService={chartPluginMock.createPaletteRegistry()}
+            panelRef={React.createRef()}
+            addLayer={jest.fn()}
+            removeLayer={jest.fn()}
+            datasource={{} as DatasourcePublicAPI}
+            isDarkMode={false}
+          />
+        );
+        const colorPickerUi = screen.queryByLabelText('Edit colors');
+
+        if (shouldDisplay) {
+          expect(colorPickerUi).toBeInTheDocument();
+        } else {
+          expect(colorPickerUi).not.toBeInTheDocument();
+        }
+      }
+    );
     test('does not apply incorrect color', () => {
       jest.useFakeTimers();
       const setState = jest.fn();

x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/dimension_editor.tsx

@@ -134,8 +134,8 @@ export function DataDimensionEditor(
   const { splitAccessor } = layer;
   const splitCategories = getColorCategories(table?.rows ?? [], splitAccessor);
 
-  if (props.groupId === 'breakdown' && !layer.collapseFn) {
-    return (
+  if (props.groupId === 'breakdown') {
+    return !layer.collapseFn ? (
       <ColorMappingByTerms
         isDarkMode={isDarkMode}
         colorMapping={layer.colorMapping}
@@ -147,7 +147,7 @@ export function DataDimensionEditor(
         panelRef={props.panelRef}
         categories={splitCategories}
       />
-    );
+    ) : null;
   }
 
   const isHorizontal = isHorizontalChart(state.layers);