Various Panels: Add ability to toggle legend with keyboard shortcut (#52241)

public/app/plugins/panel/piechart/PieChartPanel.test.tsx

@@ -171,6 +171,7 @@ const setup = (propsOverrides?: {}) => {
     displayLabels: [],
     legend: {
       displayMode: LegendDisplayMode.List,
+      showLegend: true,
       placement: 'right',
       calcs: [],
       values: [PieChartLegendValues.Percent],

public/app/plugins/panel/piechart/PieChartPanel.tsx

@@ -27,6 +27,7 @@ import { filterDisplayItems, sumDisplayItemsReducer } from './utils';
 
 const defaultLegendOptions: PieChartLegendOptions = {
   displayMode: LegendDisplayMode.List,
+  showLegend: true,
   placement: 'right',
   calcs: [],
   values: [PieChartLegendValues.Percent],
@@ -77,7 +78,7 @@ export function PieChartPanel(props: Props) {
 function getLegend(props: Props, displayValues: FieldDisplay[]) {
   const legendOptions = props.options.legend ?? defaultLegendOptions;
 
-  if (legendOptions.displayMode === LegendDisplayMode.Hidden) {
+  if (legendOptions.showLegend === false) {
     return undefined;
   }
   const total = displayValues.filter(filterDisplayItems).reduce(sumDisplayItemsReducer, 0);

public/app/plugins/panel/piechart/migrations.test.ts

@@ -1,5 +1,4 @@
 import { FieldColorModeId, FieldConfigProperty, FieldMatcherID, PanelModel } from '@grafana/data';
-import { LegendDisplayMode } from '@grafana/schema';
 
 import { PieChartPanelChangedHandler } from './migrations';
 import { PieChartLabels } from './types';
@@ -71,6 +70,6 @@ describe('PieChart -> PieChartV2 migrations', () => {
       },
     };
     const options = PieChartPanelChangedHandler(panel, 'grafana-piechart-panel', oldPieChartOptions);
-    expect(options).toMatchObject({ legend: { displayMode: LegendDisplayMode.Hidden } });
+    expect(options).toMatchObject({ legend: { showLegend: false } });
   });
 });

public/app/plugins/panel/piechart/migrations.ts

@@ -45,7 +45,13 @@ export const PieChartPanelChangedHandler = (
       },
     };
 
-    options.legend = { placement: 'right', values: [], displayMode: LegendDisplayMode.Table, calcs: [] };
+    options.legend = {
+      placement: 'right',
+      values: [],
+      displayMode: LegendDisplayMode.Table,
+      showLegend: true,
+      calcs: [],
+    };
 
     if (angular.valueName) {
       options.reduceOptions = { calcs: [] };
@@ -88,7 +94,7 @@ export const PieChartPanelChangedHandler = (
 
     if (angular.legend) {
       if (!angular.legend.show) {
-        options.legend.displayMode = LegendDisplayMode.Hidden;
+        options.legend.showLegend = false;
       }
       if (angular.legend.values) {
         options.legend.values.push(PieChartLegendValues.Value);
@@ -98,13 +104,13 @@ export const PieChartPanelChangedHandler = (
       }
       if (!angular.legend.percentage && !angular.legend.values) {
         // If you deselect both value and percentage in the old pie chart plugin, the legend is hidden.
-        options.legend.displayMode = LegendDisplayMode.Hidden;
+        options.legend.showLegend = false;
       }
     }
 
     // Set up labels when the old piechart is using 'on graph', for the legend option.
     if (angular.legendType === 'On graph') {
-      options.legend.displayMode = LegendDisplayMode.Hidden;
+      options.legend.showLegend = false;
       options.displayLabels = [PieChartLabels.Name];
       if (angular.legend.values) {
         options.displayLabels.push(PieChartLabels.Value);

public/app/plugins/panel/piechart/module.tsx

@@ -1,5 +1,4 @@
 import { FieldColorModeId, FieldConfigProperty, PanelPlugin } from '@grafana/data';
-import { LegendDisplayMode } from '@grafana/schema';
 import { commonOptionsBuilder } from '@grafana/ui';
 
 import { addStandardDataReduceOptions } from '../stat/common';
@@ -70,7 +69,7 @@ export const plugin = new PanelPlugin<PieChartOptions>(PieChartPanel)
           { value: PieChartLegendValues.Value, label: 'Value' },
         ],
       },
-      showIf: (c) => c.legend.displayMode !== LegendDisplayMode.Hidden,
+      showIf: (c) => c.legend.showLegend !== false,
     });
   })
   .setSuggestionsSupplier(new PieChartSuggestionsSupplier());

public/app/plugins/panel/piechart/suggestions.ts

@@ -1,5 +1,4 @@
 import { VisualizationSuggestionsBuilder } from '@grafana/data';
-import { LegendDisplayMode } from '@grafana/schema';
 import { SuggestionName } from 'app/types/suggestions';
 
 import { PieChartLabels, PieChartOptions, PieChartType } from './types';
@@ -23,7 +22,7 @@ export class PieChartSuggestionsSupplier {
       cardOptions: {
         previewModifier: (s) => {
           // Hide labels in preview
-          s.options!.legend.displayMode = LegendDisplayMode.Hidden;
+          s.options!.legend.showLegend = false;
         },
       },
     });