Graph: Fixes so users can not add annotations in readonly dash (#29990)

public/app/plugins/panel/graph/graph.ts

@@ -24,7 +24,7 @@ import ReactDOM from 'react-dom';
 import { GraphLegendProps, Legend } from './Legend/Legend';
 
 import { GraphCtrl } from './module';
-import { MenuItem, MenuItemsGroup, graphTimeFormat, graphTickFormatter, IconName } from '@grafana/ui';
+import { graphTickFormatter, graphTimeFormat, IconName, MenuItem, MenuItemsGroup } from '@grafana/ui';
 import { getCurrentTheme, provideTheme } from 'app/core/utils/ConfigProvider';
 import {
   DataFrame,
@@ -47,6 +47,7 @@ import { GraphContextMenuCtrl } from './GraphContextMenuCtrl';
 import { TimeSrv } from 'app/features/dashboard/services/TimeSrv';
 import { ContextSrv } from 'app/core/services/context_srv';
 import { getFieldLinksSupplier } from 'app/features/panel/panellinks/linkSuppliers';
+import { DashboardModel } from '../../../features/dashboard/state';
 
 const LegendWithThemeProvider = provideTheme(Legend);
 
@@ -54,7 +55,7 @@ class GraphElement {
   ctrl: GraphCtrl;
   contextMenu: GraphContextMenuCtrl;
   tooltip: any;
-  dashboard: any;
+  dashboard: DashboardModel;
   annotations: object[];
   panel: any;
   plot: any;
@@ -200,17 +201,19 @@ class GraphElement {
   ): (() => MenuItemsGroup[]) => {
     return () => {
       // Fixed context menu items
-      const items: MenuItemsGroup[] = [
-        {
-          items: [
+      const items: MenuItemsGroup[] = this.dashboard?.editable
+        ? [
             {
-              label: 'Add annotation',
-              icon: 'comment-alt',
-              onClick: () => this.eventManager.updateTime({ from: flotPosition.x, to: null }),
+              items: [
+                {
+                  label: 'Add annotation',
+                  icon: 'comment-alt',
+                  onClick: () => this.eventManager.updateTime({ from: flotPosition.x, to: null }),
+                },
+              ],
             },
-          ],
-        },
-      ];
+          ]
+        : [];
 
       if (!linksSupplier) {
         return items;

public/app/plugins/panel/graph/specs/graph.test.ts

@@ -24,7 +24,7 @@ import config from 'app/core/config';
 
 import TimeSeries from 'app/core/time_series2';
 import $ from 'jquery';
-import { graphDirective } from '../graph';
+import { graphDirective, GraphElement } from '../graph';
 import { dateTime, EventBusSrv } from '@grafana/data';
 
 const ctx = {} as any;
@@ -1286,4 +1286,46 @@ describe('grafanaGraph', () => {
       ).toBe(300);
     });
   });
+
+  describe('getContextMenuItemsSupplier', () => {
+    function getGraphElement({ editable }: { editable?: boolean } = {}) {
+      const element = new GraphElement(
+        {
+          ctrl: {
+            contextMenuCtrl: {},
+            dashboard: { editable, events: { on: jest.fn() } },
+            events: { on: jest.fn() },
+          },
+        },
+        { mouseleave: jest.fn(), bind: jest.fn() } as any,
+        {} as any
+      );
+
+      return element;
+    }
+
+    describe('when called and dashboard is editable', () => {
+      it('then the correct menu items should be returned', () => {
+        const element = getGraphElement({ editable: true });
+
+        const result = element.getContextMenuItemsSupplier({ x: 1, y: 1 })();
+
+        expect(result.length).toEqual(1);
+        expect(result[0].items.length).toEqual(1);
+        expect(result[0].items[0].label).toEqual('Add annotation');
+        expect(result[0].items[0].icon).toEqual('comment-alt');
+        expect(result[0].items[0].onClick).toBeDefined();
+      });
+    });
+
+    describe('when called and dashboard is not editable', () => {
+      it('then the correct menu items should be returned', () => {
+        const element = getGraphElement({ editable: false });
+
+        const result = element.getContextMenuItemsSupplier({ x: 1, y: 1 })();
+
+        expect(result.length).toEqual(0);
+      });
+    });
+  });
 });