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

packages/grafana-ui/src/components/Graph/GraphWithLegend.story.internal.tsx

@@ -119,13 +119,7 @@ export const WithLegend: Story<StoryProps> = ({ rightAxisSeries, displayMode, le
 
   return (
     <GraphWithLegend
-      legendDisplayMode={
-        displayMode === 'hidden'
-          ? LegendDisplayMode.Hidden
-          : displayMode === 'table'
-          ? LegendDisplayMode.Table
-          : LegendDisplayMode.List
-      }
+      legendDisplayMode={displayMode === 'table' ? LegendDisplayMode.Table : LegendDisplayMode.List}
       {...args}
       {...props}
     />

packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx

@@ -15,6 +15,7 @@ import { Graph, GraphProps } from './Graph';
 
 export interface GraphWithLegendProps extends GraphProps {
   legendDisplayMode: LegendDisplayMode;
+  legendVisibility: boolean;
   placement: LegendPlacement;
   hideEmpty?: boolean;
   hideZero?: boolean;
@@ -58,6 +59,7 @@ export const GraphWithLegend: React.FunctionComponent<GraphWithLegendProps> = (p
     sortLegendBy,
     sortLegendDesc,
     legendDisplayMode,
+    legendVisibility,
     placement,
     onSeriesToggle,
     onToggleSort,
@@ -106,7 +108,7 @@ export const GraphWithLegend: React.FunctionComponent<GraphWithLegendProps> = (p
         </Graph>
       </div>
 
-      {legendDisplayMode !== LegendDisplayMode.Hidden && (
+      {legendVisibility && (
         <div className={legendContainer}>
           <CustomScrollbar hideHorizontalTrack>
             <VizLegend

packages/grafana-ui/src/components/TimeSeries/TimeSeries.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import { DataFrame, TimeRange } from '@grafana/data';
-import { LegendDisplayMode } from '@grafana/schema';
 
 import { PropDiffFn } from '../../../../../packages/grafana-ui/src/components/GraphNG/GraphNG';
 import { withTheme2 } from '../../themes/ThemeContext';
@@ -41,7 +40,8 @@ export class UnthemedTimeSeries extends React.Component<TimeSeriesProps> {
   renderLegend = (config: UPlotConfigBuilder) => {
     const { legend, frames } = this.props;
 
-    if (!config || (legend && legend.displayMode === LegendDisplayMode.Hidden)) {
+    //hides and shows the legend ON the uPlot graph
+    if (!config || (legend && !legend.showLegend)) {
       return null;
     }
 

packages/grafana-ui/src/options/builder/legend.tsx

@@ -9,9 +9,16 @@ export function addLegendOptions<T extends OptionsWithLegend>(
   includeLegendCalcs = true
 ) {
   builder
+    .addBooleanSwitch({
+      path: 'legend.showLegend',
+      name: 'Visibility',
+      category: ['Legend'],
+      description: '',
+      defaultValue: true,
+    })
     .addRadio({
       path: 'legend.displayMode',
-      name: 'Legend mode',
+      name: 'Mode',
       category: ['Legend'],
       description: '',
       defaultValue: LegendDisplayMode.List,
@@ -19,13 +26,13 @@ export function addLegendOptions<T extends OptionsWithLegend>(
         options: [
           { value: LegendDisplayMode.List, label: 'List' },
           { value: LegendDisplayMode.Table, label: 'Table' },
-          { value: LegendDisplayMode.Hidden, label: 'Hidden' },
         ],
       },
+      showIf: (c) => c.legend.showLegend,
     })
     .addRadio({
       path: 'legend.placement',
-      name: 'Legend placement',
+      name: 'Placement',
       category: ['Legend'],
       description: '',
       defaultValue: 'bottom',
@@ -35,7 +42,7 @@ export function addLegendOptions<T extends OptionsWithLegend>(
           { value: 'right', label: 'Right' },
         ],
       },
-      showIf: (c) => c.legend.displayMode !== LegendDisplayMode.Hidden,
+      showIf: (c) => c.legend.showLegend,
     })
     .addNumberInput({
       path: 'legend.width',
@@ -44,14 +51,14 @@ export function addLegendOptions<T extends OptionsWithLegend>(
       settings: {
         placeholder: 'Auto',
       },
-      showIf: (c) => c.legend.displayMode !== LegendDisplayMode.Hidden && c.legend.placement === 'right',
+      showIf: (c) => c.legend.showLegend && c.legend.placement === 'right',
     });
 
   if (includeLegendCalcs) {
     builder.addCustomEditor<StatsPickerConfigSettings, string[]>({
       id: 'legend.calcs',
       path: 'legend.calcs',
-      name: 'Legend values',
+      name: 'Values',
       category: ['Legend'],
       description: 'Select values or calculations to show in legend',
       editor: standardEditorsRegistry.get('stats-picker').editor as any,
@@ -59,7 +66,7 @@ export function addLegendOptions<T extends OptionsWithLegend>(
       settings: {
         allowMultiple: true,
       },
-      showIf: (currentConfig) => currentConfig.legend.displayMode !== LegendDisplayMode.Hidden,
+      showIf: (currentConfig) => currentConfig.legend.showLegend !== false,
     });
   }
 }