[8.15] [Dashboard][ES|QL] Unable to load page error on edit/add ES|QL…

… panel (#188664) (#188857)

# Backport

This will backport the following commits from `main` to `8.15`:
- [[Dashboard][ES|QL] Unable to load page error on edit/add ES|QL panel
(#188664)](#188664)

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

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

<!--BACKPORT [{"author":{"name":"Marta
Bondyra","email":"4283304+mbondyra@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-07-22T14:59:40Z","message":"[Dashboard][ES|QL]
Unable to load page error on edit/add ES|QL panel (#188664)\n\n##
Summary\r\n\r\nFixes
https://github.com/elastic/kibana/issues/184544","sha":"b7b3260db2b150911f283351655a721d7f16e711","branchLabelMapping":{"^v8.16.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Visualizations","Feature:Lens","backport:prev-minor","v8.16.0"],"title":"[Dashboard][ES|QL]
Unable to load page error on edit/add ES|QL
panel","number":188664,"url":"https://github.com/elastic/kibana/pull/188664","mergeCommit":{"message":"[Dashboard][ES|QL]
Unable to load page error on edit/add ES|QL panel (#188664)\n\n##
Summary\r\n\r\nFixes
https://github.com/elastic/kibana/issues/184544","sha":"b7b3260db2b150911f283351655a721d7f16e711"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/188664","number":188664,"mergeCommit":{"message":"[Dashboard][ES|QL]
Unable to load page error on edit/add ES|QL panel (#188664)\n\n##
Summary\r\n\r\nFixes
https://github.com/elastic/kibana/issues/184544","sha":"b7b3260db2b150911f283351655a721d7f16e711"}}]}]
BACKPORT-->

Co-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>

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

@@ -245,9 +245,9 @@ describe('dimension editor', () => {
  userEvent.type(customPrefixTextbox, prefix);
  };
  return {
- settingNone: screen.getByTitle(/none/i),
- settingAuto: screen.getByTitle(/auto/i),
- settingCustom: screen.getByTitle(/custom/i),
+ settingNone: () => screen.getByTitle(/none/i),
+ settingAuto: () => screen.getByTitle(/auto/i),
+ settingCustom: () => screen.getByTitle(/custom/i),
  customPrefixTextbox,
  typePrefix,
  ...rtlRender,
@@ -262,6 +262,11 @@ describe('dimension editor', () => {
  expect(screen.queryByTestId(SELECTORS.BREAKDOWN_EDITOR)).not.toBeInTheDocument();
  });
 
+ it(`doesn't break when layer data is missing`, () => {
+ renderSecondaryMetricEditor({ frame: { activeData: { first: undefined } } });
+ expect(screen.getByTestId(SELECTORS.SECONDARY_METRIC_EDITOR)).toBeInTheDocument();
+ });
+
  describe('metric prefix', () => {
  const NONE_PREFIX = '';
  const AUTO_PREFIX = undefined;
@@ -276,19 +281,19 @@ describe('dimension editor', () => {
  state: localState,
  });
 
- expect(settingAuto).toHaveAttribute('aria-pressed', 'true');
- expect(settingNone).toHaveAttribute('aria-pressed', 'false');
- expect(settingCustom).toHaveAttribute('aria-pressed', 'false');
+ expect(settingAuto()).toHaveAttribute('aria-pressed', 'true');
+ expect(settingNone()).toHaveAttribute('aria-pressed', 'false');
+ expect(settingCustom()).toHaveAttribute('aria-pressed', 'false');
  expect(customPrefixTextbox).not.toBeInTheDocument();
  });
 
  it('correctly renders chosen none prefix', () => {
  const { settingAuto, settingCustom, settingNone, customPrefixTextbox } =
  renderSecondaryMetricEditor({ state: { ...localState, secondaryPrefix: NONE_PREFIX } });
 
- expect(settingNone).toHaveAttribute('aria-pressed', 'true');
- expect(settingAuto).toHaveAttribute('aria-pressed', 'false');
- expect(settingCustom).toHaveAttribute('aria-pressed', 'false');
+ expect(settingNone()).toHaveAttribute('aria-pressed', 'true');
+ expect(settingAuto()).toHaveAttribute('aria-pressed', 'false');
+ expect(settingCustom()).toHaveAttribute('aria-pressed', 'false');
  expect(customPrefixTextbox).not.toBeInTheDocument();
  });
 
@@ -297,9 +302,9 @@ describe('dimension editor', () => {
  const { settingAuto, settingCustom, settingNone, customPrefixTextbox } =
  renderSecondaryMetricEditor({ state: customPrefixState });
 
- expect(settingAuto).toHaveAttribute('aria-pressed', 'false');
- expect(settingNone).toHaveAttribute('aria-pressed', 'false');
- expect(settingCustom).toHaveAttribute('aria-pressed', 'true');
+ expect(settingAuto()).toHaveAttribute('aria-pressed', 'false');
+ expect(settingNone()).toHaveAttribute('aria-pressed', 'false');
+ expect(settingCustom()).toHaveAttribute('aria-pressed', 'true');
  expect(customPrefixTextbox).toHaveValue(customPrefixState.secondaryPrefix);
  });
 
@@ -312,12 +317,12 @@ describe('dimension editor', () => {
  state: { ...localState, secondaryPrefix: customPrefix },
  });
 
- userEvent.click(settingNone);
+ userEvent.click(settingNone());
  expect(setState).toHaveBeenCalledWith(
  expect.objectContaining({ secondaryPrefix: NONE_PREFIX })
  );
 
- userEvent.click(settingAuto);
+ userEvent.click(settingAuto());
  expect(setState).toHaveBeenCalledWith(
  expect.objectContaining({ secondaryPrefix: AUTO_PREFIX })
  );

x-pack/plugins/lens/public/visualizations/metric/dimension_editor.tsx

@@ -134,7 +134,7 @@ function MaximumEditor({ setState, state, idPrefix }: SubProps) {
 }
 
 function SecondaryMetricEditor({ accessor, idPrefix, frame, layerId, setState, state }: SubProps) {
- const columnName = getColumnByAccessor(accessor, frame.activeData?.[layerId].columns)?.name;
+ const columnName = getColumnByAccessor(accessor, frame.activeData?.[layerId]?.columns)?.name;
  const defaultPrefix = columnName || '';
 
  return (