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

## Summary

Fixes #184544

(cherry picked from commit b7b3260)

Author: mbondyra

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 (