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

…188664) ## Summary Fixes #184544
elastic · Jul 22, 2024 · b7b3260 · b7b3260
1 parent 76c6f55
commit b7b3260
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 15 deletions.
diff --git a/x-pack/plugins/lens/public/visualizations/metric/dimension_editor.test.tsx b/x-pack/plugins/lens/public/visualizations/metric/dimension_editor.test.tsx
@@ -249,9 +249,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,
@@ -266,6 +266,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;
@@ -280,19 +285,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();
  });
 
@@ -301,9 +306,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);
  });
 
@@ -316,12 +321,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 })
  );

diff --git a/x-pack/plugins/lens/public/visualizations/metric/dimension_editor.tsx b/x-pack/plugins/lens/public/visualizations/metric/dimension_editor.tsx
@@ -131,7 +131,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 (