From a94c256516b3a63b114a0c460717e7cf654353f7 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Fri, 15 Jan 2021 14:24:21 +0100
Subject: [PATCH] GraphNG: remove y-axis position control from series color
 picker in the legend (#30302)

---
 .../ColorPicker/SeriesColorPickerPopover.tsx   | 14 ++++++--------
 .../components/VizLegend/VizLegendListItem.tsx |  1 -
 .../VizLegend/VizLegendSeriesIcon.tsx          | 18 ++----------------
 .../VizLegend/VizLegendTableItem.tsx           |  1 -
 4 files changed, 8 insertions(+), 26 deletions(-)

diff --git a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
index 26e3f64fdee..ce2ec30996c 100644
--- a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
@@ -12,11 +12,9 @@ export interface SeriesColorPickerPopoverProps extends ColorPickerProps, Popover
 
 export const SeriesColorPickerPopover: FunctionComponent<SeriesColorPickerPopoverProps> = props => {
   const { yaxis, onToggleAxis, color, ...colorPickerProps } = props;
-  return (
-    <ColorPickerPopover
-      {...colorPickerProps}
-      color={color || '#000000'}
-      customPickers={{
+
+  const customPickers = onToggleAxis
+    ? {
         yaxis: {
           name: 'Y-Axis',
           tabComponent() {
@@ -36,9 +34,9 @@ export const SeriesColorPickerPopover: FunctionComponent<SeriesColorPickerPopove
             );
           },
         },
-      }}
-    />
-  );
+      }
+    : undefined;
+  return <ColorPickerPopover {...colorPickerProps} color={color || '#000000'} customPickers={customPickers} />;
 };
 
 interface AxisSelectorProps {
diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx
index 4c65d1e33c0..b7d27c9d3f0 100644
--- a/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx
+++ b/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx
@@ -27,7 +27,6 @@ export const VizLegendListItem: React.FunctionComponent<Props> = ({ item, onSeri
             onSeriesColorChange(item.label, color);
           }
         }}
-        yAxis={item.yAxis}
       />
       <div
         onClick={event => {
diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendSeriesIcon.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendSeriesIcon.tsx
index 52a7ffb8d74..38ebd334880 100644
--- a/packages/grafana-ui/src/components/VizLegend/VizLegendSeriesIcon.tsx
+++ b/packages/grafana-ui/src/components/VizLegend/VizLegendSeriesIcon.tsx
@@ -5,28 +5,14 @@ import { SeriesIcon } from './SeriesIcon';
 interface Props {
   disabled: boolean;
   color: string;
-  yAxis: number;
   onColorChange: (color: string) => void;
-  onToggleAxis?: () => void;
 }
 
-export const VizLegendSeriesIcon: React.FunctionComponent<Props> = ({
-  disabled,
-  yAxis,
-  color,
-  onColorChange,
-  onToggleAxis,
-}) => {
+export const VizLegendSeriesIcon: React.FunctionComponent<Props> = ({ disabled, color, onColorChange }) => {
   return disabled ? (
     <SeriesIcon color={color} />
   ) : (
-    <SeriesColorPicker
-      yaxis={yAxis}
-      color={color}
-      onChange={onColorChange}
-      onToggleAxis={onToggleAxis}
-      enableNamedColors
-    >
+    <SeriesColorPicker color={color} onChange={onColorChange} enableNamedColors>
       {({ ref, showColorPicker, hideColorPicker }) => (
         <SeriesIcon
           color={color}
diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx
index 24b5dbd41ef..8732bf7240b 100644
--- a/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx
+++ b/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx
@@ -35,7 +35,6 @@ export const LegendTableItem: React.FunctionComponent<Props> = ({
                 onSeriesColorChange(item.label, color);
               }
             }}
-            yAxis={item.yAxis}
           />
           <div
             onClick={event => {