[8.x] [Lens] Disable config axis side and color picker when groupid is breakdown and collaseFn enable (#195845) (#196247)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Lens] Disable config axis side and color picker when groupid is
breakdown and collaseFn enable
(#195845)](https://github.com/elastic/kibana/pull/195845)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Linghao
Su","email":"linghao.su@daocloud.io"},"sourceCommit":{"committedDate":"2024-10-14T07:54:11Z","message":"[Lens]
Disable config axis side and color picker when groupid is breakdown and
collaseFn enable (#195845)\n\n## Summary\r\nFixes
https://github.com/elastic/kibana/issues/195481\r\n\r\nFor XY charts
only, when opening the breakdown dimension editor, we\r\ndisable the
color picker and axis side configuration.\r\n\r\n##
Before\r\n\r\n\r\n![image](https://github.com/user-attachments/assets/62f03481-45aa-402c-8d53-d30a8b02d11c)\r\n\r\n##
After\r\n\r\n\r\n![image](05ee0e8e-713b-4eb3-a1ef-bf7418226409\r\n\r\n---------\r\n\r\nCo-authored-by:
Marta Bondyra
<4283304+mbondyra@users.noreply.github.com>\r\nCo-authored-by: Nick
Partridge
<nicholas.partridge@elastic.co>","sha":"4c4cb1e1678130c300c93e00061f0478047aff28","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Visualizations","Feature:Lens","💝community","v9.0.0","backport:prev-minor","v8.16.0"],"title":"[Lens]
Disable config axis side and color picker when groupid is breakdown and
collaseFn
enable","number":195845,"url":"https://github.com/elastic/kibana/pull/195845","mergeCommit":{"message":"[Lens]
Disable config axis side and color picker when groupid is breakdown and
collaseFn enable (#195845)\n\n## Summary\r\nFixes
https://github.com/elastic/kibana/issues/195481\r\n\r\nFor XY charts
only, when opening the breakdown dimension editor, we\r\ndisable the
color picker and axis side configuration.\r\n\r\n##
Before\r\n\r\n\r\n![image](https://github.com/user-attachments/assets/62f03481-45aa-402c-8d53-d30a8b02d11c)\r\n\r\n##
After\r\n\r\n\r\n![image](05ee0e8e-713b-4eb3-a1ef-bf7418226409\r\n\r\n---------\r\n\r\nCo-authored-by:
Marta Bondyra
<4283304+mbondyra@users.noreply.github.com>\r\nCo-authored-by: Nick
Partridge
<nicholas.partridge@elastic.co>","sha":"4c4cb1e1678130c300c93e00061f0478047aff28"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/195845","number":195845,"mergeCommit":{"message":"[Lens]
Disable config axis side and color picker when groupid is breakdown and
collaseFn enable (#195845)\n\n## Summary\r\nFixes
https://github.com/elastic/kibana/issues/195481\r\n\r\nFor XY charts
only, when opening the breakdown dimension editor, we\r\ndisable the
color picker and axis side configuration.\r\n\r\n##
Before\r\n\r\n\r\n![image](https://github.com/user-attachments/assets/62f03481-45aa-402c-8d53-d30a8b02d11c)\r\n\r\n##
After\r\n\r\n\r\n![image](05ee0e8e-713b-4eb3-a1ef-bf7418226409\r\n\r\n---------\r\n\r\nCo-authored-by:
Marta Bondyra
<4283304+mbondyra@users.noreply.github.com>\r\nCo-authored-by: Nick
Partridge
<nicholas.partridge@elastic.co>","sha":"4c4cb1e1678130c300c93e00061f0478047aff28"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Linghao Su <linghao.su@daocloud.io>

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) {
+  if (props.groupId === 'breakdown') {
-    return (
+    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);