Dashboards: Skip inherited object variable names (#79567)

public/app/features/variables/inspect/utils.test.ts

@@ -6,7 +6,13 @@ import { createDataSourceVariableAdapter } from '../datasource/adapter';
 import { createQueryVariableAdapter } from '../query/adapter';
 import { createGraph } from '../state/actions';
 
-import { flattenPanels, getAllAffectedPanelIdsForVariableChange, getPanelVars, getPropsWithVariable } from './utils';
+import {
+  flattenPanels,
+  getAllAffectedPanelIdsForVariableChange,
+  getPanelVars,
+  getPropsWithVariable,
+  getVariableName,
+} from './utils';
 
 describe('getPropsWithVariable', () => {
   it('when called it should return the correct graph', () => {
@@ -303,6 +309,20 @@ describe('flattenPanels', () => {
   });
 });
 
+describe('getVariableName', () => {
+  it('should return undefined if no match is found', () => {
+    expect(getVariableName('no variable here')).toBeUndefined();
+  });
+
+  it('should return undefined if variable matches inherited object prop names', () => {
+    expect(getVariableName('${toString}')).toBeUndefined();
+  });
+
+  it('should return the variable name if it exists and does not match inherited object prop names', () => {
+    expect(getVariableName('${myVariable}')).toBe('myVariable');
+  });
+});
+
 const dashWithRepeatsAndRows = {
   annotations: {
     list: [

public/app/features/variables/inspect/utils.ts

@@ -60,6 +60,12 @@ export function getVariableName(expression: string) {
     return undefined;
   }
   const variableName = match.slice(1).find((match) => match !== undefined);
+
+  // ignore variables that match inherited object prop names
+  if (variableName! in {}) {
+    return undefined;
+  }
+
   return variableName;
 }