Fixed issue with color name retrieval not being aware of current theme

packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx

@@ -40,7 +40,7 @@ export class ColorPickerPopover extends React.Component<Props, State> {
     return activePicker === 'spectrum' ? (
       <SpectrumPalette color={color} onChange={this.handleChange}  theme={theme} />
     ) : (
-      <NamedColorsPicker color={getColorName(color)} onChange={this.handleChange} theme={theme} />
+      <NamedColorsPicker color={getColorName(color, theme)} onChange={this.handleChange} theme={theme} />
     );
   };
 

packages/grafana-ui/src/utils/namedColorsPalette.test.ts

@@ -10,12 +10,13 @@ import { GrafanaTheme } from '../types/index';
 describe('colors', () => {
   describe('getColorDefinition', () => {
     it('returns undefined for unknown hex', () => {
-      expect(getColorDefinition('#ff0000')).toBeUndefined();
+      expect(getColorDefinition('#ff0000', GrafanaTheme.Light)).toBeUndefined();
+      expect(getColorDefinition('#ff0000', GrafanaTheme.Dark)).toBeUndefined();
     });
 
     it('returns definition for known hex', () => {
-      expect(getColorDefinition(SemiDarkBlue.variants.light)).toEqual(SemiDarkBlue);
-      expect(getColorDefinition(SemiDarkBlue.variants.dark)).toEqual(SemiDarkBlue);
+      expect(getColorDefinition(SemiDarkBlue.variants.light, GrafanaTheme.Light)).toEqual(SemiDarkBlue);
+      expect(getColorDefinition(SemiDarkBlue.variants.dark, GrafanaTheme.Dark)).toEqual(SemiDarkBlue);
     });
   });
 
@@ -25,8 +26,8 @@ describe('colors', () => {
     });
 
     it('returns name for known hex', () => {
-      expect(getColorName(SemiDarkBlue.variants.light)).toEqual(SemiDarkBlue.name);
-      expect(getColorName(SemiDarkBlue.variants.dark)).toEqual(SemiDarkBlue.name);
+      expect(getColorName(SemiDarkBlue.variants.light, GrafanaTheme.Light)).toEqual(SemiDarkBlue.name);
+      expect(getColorName(SemiDarkBlue.variants.dark, GrafanaTheme.Dark)).toEqual(SemiDarkBlue.name);
     });
   });
 
@@ -39,6 +40,7 @@ describe('colors', () => {
       expect(getColorByName(SemiDarkBlue.name)).toBe(SemiDarkBlue);
     });
   });
+
   describe('getColorFromHexRgbOrName', () => {
     it('returns undefined for unknown color', () => {
       expect(() => getColorFromHexRgbOrName('aruba-sunshine')).toThrow();

packages/grafana-ui/src/utils/namedColorsPalette.ts

@@ -1,4 +1,4 @@
-import { flatten, some, values } from 'lodash';
+import { flatten } from 'lodash';
 import { GrafanaTheme } from '../types';
 
 type Hue = 'green' | 'yellow' | 'red' | 'blue' | 'orange' | 'purple';
@@ -114,10 +114,8 @@ ColorsPalette.set('blue', blues);
 ColorsPalette.set('orange', oranges);
 ColorsPalette.set('purple', purples);
 
-export const getColorDefinition = (hex: string): ColorDefinition | undefined => {
-  return flatten(Array.from(ColorsPalette.values())).filter(definition =>
-    some(values(definition.variants), color => color === hex)
-  )[0];
+export const getColorDefinition = (hex: string, theme: GrafanaTheme): ColorDefinition | undefined => {
+  return flatten(Array.from(ColorsPalette.values())).filter(definition => definition.variants[theme]  === hex)[0];
 };
 
 const isHex = (color: string) => {
@@ -125,7 +123,7 @@ const isHex = (color: string) => {
   return hexRegex.test(color);
 };
 
-export const getColorName = (color?: string): Color | undefined => {
+export const getColorName = (color?: string, theme?: GrafanaTheme): Color | undefined => {
   if (!color) {
     return undefined;
   }
@@ -134,7 +132,7 @@ export const getColorName = (color?: string): Color | undefined => {
     return undefined;
   }
   if (isHex(color)) {
-    const definition = getColorDefinition(color);
+    const definition = getColorDefinition(color, theme || GrafanaTheme.Dark);
     return definition ? definition.name : undefined;
   }