VizLegend: add readonly prop (#35096)

* VizLegend: add readonly prop

* Update packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx

Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>

Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>

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

@@ -21,6 +21,7 @@ export function VizLegend<T>({
   placement,
   className,
   itemRenderer,
+  readonly,
 }: LegendProps<T>) {
   const { eventBus, onToggleSeriesVisibility } = usePanelContext();
 
@@ -85,6 +86,7 @@ export function VizLegend<T>({
           onLabelMouseEnter={onMouseEnter}
           onLabelMouseOut={onMouseOut}
           itemRenderer={itemRenderer}
+          readonly={readonly}
         />
       );
     case LegendDisplayMode.List:
@@ -97,6 +99,7 @@ export function VizLegend<T>({
           onLabelMouseOut={onMouseOut}
           onLabelClick={onLegendLabelClick}
           itemRenderer={itemRenderer}
+          readonly={readonly}
         />
       );
     default:

packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx

@@ -20,6 +20,7 @@ export const VizLegendList = <T extends unknown>({
   onLabelClick,
   placement,
   className,
+  readonly,
 }: Props<T>) => {
   const styles = useStyles(getStyles);
 
@@ -31,6 +32,7 @@ export const VizLegendList = <T extends unknown>({
         onLabelClick={onLabelClick}
         onLabelMouseEnter={onLabelMouseEnter}
         onLabelMouseOut={onLabelMouseOut}
+        readonly={readonly}
       />
     );
   }

packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx

@@ -13,6 +13,7 @@ export interface Props<T> {
   onLabelClick?: (item: VizLegendItem<T>, event: React.MouseEvent<HTMLDivElement>) => void;
   onLabelMouseEnter?: (item: VizLegendItem, event: React.MouseEvent<HTMLDivElement>) => void;
   onLabelMouseOut?: (item: VizLegendItem, event: React.MouseEvent<HTMLDivElement>) => void;
+  readonly?: boolean;
 }
 
 /**
@@ -24,6 +25,7 @@ export const VizLegendListItem = <T extends unknown = any>({
   onLabelMouseEnter,
   onLabelMouseOut,
   className,
+  readonly,
 }: Props<T>) => {
   const styles = useStyles(getStyles);
 
@@ -59,12 +61,12 @@ export const VizLegendListItem = <T extends unknown = any>({
       className={cx(styles.itemWrapper, className)}
       aria-label={selectors.components.VizLegend.seriesName(item.label)}
     >
-      <VizLegendSeriesIcon seriesName={item.label} color={item.color} gradient={item.gradient} />
+      <VizLegendSeriesIcon seriesName={item.label} color={item.color} gradient={item.gradient} readonly={readonly} />
       <div
         onMouseEnter={onMouseEnter}
         onMouseOut={onMouseOut}
-        onClick={onClick}
-        className={cx(styles.label, item.disabled && styles.labelDisabled, onLabelClick && styles.clickable)}
+        onClick={!readonly ? onClick : undefined}
+        className={cx(styles.label, item.disabled && styles.labelDisabled, !readonly && styles.clickable)}
       >
         {item.label}
       </div>

packages/grafana-ui/src/components/VizLegend/VizLegendSeriesIcon.tsx

@@ -7,12 +7,13 @@ interface Props {
   seriesName: string;
   color?: string;
   gradient?: string;
+  readonly?: boolean;
 }
 
 /**
  * @internal
  */
-export const VizLegendSeriesIcon: React.FunctionComponent<Props> = ({ seriesName, color, gradient }) => {
+export const VizLegendSeriesIcon: React.FunctionComponent<Props> = ({ seriesName, color, gradient, readonly }) => {
   const { onSeriesColorChange } = usePanelContext();
   const onChange = useCallback(
     (color: string) => {
@@ -21,7 +22,7 @@ export const VizLegendSeriesIcon: React.FunctionComponent<Props> = ({ seriesName
     [seriesName, onSeriesColorChange]
   );
 
-  if (seriesName && onSeriesColorChange && color) {
+  if (seriesName && onSeriesColorChange && color && !readonly) {
     return (
       <SeriesColorPicker color={color} onChange={onChange} enableNamedColors>
         {({ ref, showColorPicker, hideColorPicker }) => (

packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx

@@ -20,6 +20,7 @@ export const VizLegendTable = <T extends unknown>({
   onLabelClick,
   onLabelMouseEnter,
   onLabelMouseOut,
+  readonly,
 }: VizLegendTableProps<T>): JSX.Element => {
   const styles = useStyles(getStyles);
 
@@ -59,6 +60,7 @@ export const VizLegendTable = <T extends unknown>({
         onLabelClick={onLabelClick}
         onLabelMouseEnter={onLabelMouseEnter}
         onLabelMouseOut={onLabelMouseOut}
+        readonly={readonly}
       />
     );
   }

packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx

@@ -13,6 +13,7 @@ export interface Props {
   onLabelClick?: (item: VizLegendItem, event: React.MouseEvent<HTMLDivElement>) => void;
   onLabelMouseEnter?: (item: VizLegendItem, event: React.MouseEvent<HTMLDivElement>) => void;
   onLabelMouseOut?: (item: VizLegendItem, event: React.MouseEvent<HTMLDivElement>) => void;
+  readonly?: boolean;
 }
 
 /**
@@ -24,6 +25,7 @@ export const LegendTableItem: React.FunctionComponent<Props> = ({
   onLabelMouseEnter,
   onLabelMouseOut,
   className,
+  readonly,
 }) => {
   const styles = useStyles(getStyles);
 
@@ -58,12 +60,12 @@ export const LegendTableItem: React.FunctionComponent<Props> = ({
     <tr className={cx(styles.row, className)}>
       <td>
         <span className={styles.itemWrapper}>
-          <VizLegendSeriesIcon color={item.color} seriesName={item.label} />
+          <VizLegendSeriesIcon color={item.color} seriesName={item.label} readonly={readonly} />
           <div
             onMouseEnter={onMouseEnter}
             onMouseOut={onMouseOut}
-            onClick={onClick}
-            className={cx(styles.label, item.disabled && styles.labelDisabled)}
+            onClick={!readonly ? onClick : undefined}
+            className={cx(styles.label, item.disabled && styles.labelDisabled, !readonly && styles.clickable)}
           >
             {item.label} {item.yAxis === 2 && <span className={styles.yAxisLabel}>(right y-axis)</span>}
           </div>
@@ -102,13 +104,16 @@ const getStyles = (theme: GrafanaTheme) => {
     `,
     label: css`
       label: LegendLabel;
-      cursor: pointer;
       white-space: nowrap;
     `,
     labelDisabled: css`
       label: LegendLabelDisabled;
       color: ${theme.colors.linkDisabled};
     `,
+    clickable: css`
+      label: LegendClickable;
+      cursor: pointer;
+    `,
     itemWrapper: css`
       display: flex;
       white-space: nowrap;

packages/grafana-ui/src/components/VizLegend/types.ts

@@ -16,6 +16,7 @@ export interface VizLegendBaseProps<T> {
   itemRenderer?: (item: VizLegendItem<T>, index: number) => JSX.Element;
   onLabelMouseEnter?: (item: VizLegendItem, event: React.MouseEvent<HTMLElement>) => void;
   onLabelMouseOut?: (item: VizLegendItem, event: React.MouseEvent<HTMLElement>) => void;
+  readonly?: boolean;
 }
 
 export interface VizLegendTableProps<T> extends VizLegendBaseProps<T> {

public/app/plugins/panel/state-timeline/TimelineChart.tsx

@@ -57,7 +57,7 @@ export class TimelineChart extends React.Component<TimelineProps> {
 
     return (
       <VizLayout.Legend placement={legend.placement}>
-        <VizLegend placement={legend.placement} items={legendItems} displayMode={legend.displayMode} />
+        <VizLegend placement={legend.placement} items={legendItems} displayMode={legend.displayMode} readonly />
       </VizLayout.Legend>
     );
   };