From a08ee057eb4cad9349f2168f01ebfeb7a042bfa0 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Wed, 2 Jun 2021 15:39:20 +0200
Subject: [PATCH] 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>
---
 .../src/components/VizLegend/VizLegend.tsx          |  3 +++
 .../src/components/VizLegend/VizLegendList.tsx      |  2 ++
 .../src/components/VizLegend/VizLegendListItem.tsx  |  8 +++++---
 .../components/VizLegend/VizLegendSeriesIcon.tsx    |  5 +++--
 .../src/components/VizLegend/VizLegendTable.tsx     |  2 ++
 .../src/components/VizLegend/VizLegendTableItem.tsx | 13 +++++++++----
 .../grafana-ui/src/components/VizLegend/types.ts    |  1 +
 .../plugins/panel/state-timeline/TimelineChart.tsx  |  2 +-
 8 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegend.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegend.tsx
index f9dca417753..d1cffb0fc43 100644
--- a/packages/grafana-ui/src/components/VizLegend/VizLegend.tsx
+++ b/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:
diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx
index bbc0083b174..a701431caa7 100644
--- a/packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx
+++ b/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}
       />
     );
   }
diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx
index d30f944fca5..90daa1c59d0 100644
--- a/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx
+++ b/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>
diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendSeriesIcon.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendSeriesIcon.tsx
index 3cdd3e80327..943eb6d1ac4 100644
--- a/packages/grafana-ui/src/components/VizLegend/VizLegendSeriesIcon.tsx
+++ b/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 }) => (
diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx
index 1cdd2ca5eb8..8e3ea829c12 100644
--- a/packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx
+++ b/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}
       />
     );
   }
diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx
index 641c8380730..8994301911d 100644
--- a/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx
+++ b/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;
diff --git a/packages/grafana-ui/src/components/VizLegend/types.ts b/packages/grafana-ui/src/components/VizLegend/types.ts
index 961615ae82e..9f51d61cad7 100644
--- a/packages/grafana-ui/src/components/VizLegend/types.ts
+++ b/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> {
diff --git a/public/app/plugins/panel/state-timeline/TimelineChart.tsx b/public/app/plugins/panel/state-timeline/TimelineChart.tsx
index e78042e3748..bf073ad7701 100755
--- a/public/app/plugins/panel/state-timeline/TimelineChart.tsx
+++ b/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>
     );
   };