Updated table tests to new behavior for colors (values are always rendered as hex/rgb)

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

@@ -4,6 +4,7 @@ import Popper, { RenderPopperArrowFn } from '../Tooltip/Popper';
 import { ColorPickerPopover } from './ColorPickerPopover';
 import { Themeable, GrafanaTheme } from '../../types';
 import { getColorFromHexRgbOrName } from '../../utils/colorsPalette';
+import { SeriesColorPickerPopover } from './SeriesColorPickerPopover';
 
 export interface ColorPickerProps extends Themeable {
   color: string;
@@ -78,4 +79,5 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
   };
 };
 
-export default colorPickerFactory(ColorPickerPopover, 'ColorPicker');
+export const ColorPicker =  colorPickerFactory(ColorPickerPopover, 'ColorPicker');
+export const SeriesColorPicker = colorPickerFactory(SeriesColorPickerPopover, 'SeriesColorPicker');

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

@@ -1,11 +0,0 @@
-import { SeriesColorPickerPopover } from './SeriesColorPickerPopover';
-import { ColorPickerProps, colorPickerFactory } from './ColorPicker';
-
-export interface SeriesColorPickerProps extends ColorPickerProps {
-  yaxis?: number;
-  optionalClass?: string;
-  onToggleAxis?: () => void;
-  children: JSX.Element;
-}
-
-export default colorPickerFactory(SeriesColorPickerPopover ,'SeriesColorPicker')

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

@@ -1,8 +1,6 @@
 import React, { PureComponent } from 'react';
-// import tinycolor, { ColorInput } from 'tinycolor2';
-
 import { Threshold } from '../../types';
-import ColorPicker  from '../ColorPicker/ColorPicker';
+import { ColorPicker } from '../ColorPicker/ColorPicker';
 import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';
 import { colors } from '../../utils';
 

packages/grafana-ui/src/components/index.ts

@@ -14,9 +14,8 @@ export { FormLabel } from './FormLabel/FormLabel';
 export { FormField } from './FormField/FormField';
 
 export { LoadingPlaceholder } from './LoadingPlaceholder/LoadingPlaceholder';
-export { default as ColorPicker } from './ColorPicker/ColorPicker';
+export {  ColorPicker, SeriesColorPicker } from './ColorPicker/ColorPicker';
 export { SeriesColorPickerPopover } from './ColorPicker/SeriesColorPickerPopover';
-export { default as SeriesColorPicker } from './ColorPicker/SeriesColorPicker';
 export { ThresholdsEditor } from './ThresholdsEditor/ThresholdsEditor';
 export { Graph } from './Graph/Graph';
 export { PanelOptionsGroup } from './PanelOptionsGroup/PanelOptionsGroup';

public/app/plugins/panel/heatmap/heatmap_ctrl.ts

@@ -304,7 +304,6 @@ export class HeatmapCtrl extends MetricsPanelCtrl {
   }
 
   onCardColorChange(newColor) {
-    console.log(newColor)
     this.panel.color.cardColor = newColor;
     this.render();
   }

public/app/plugins/panel/table/specs/renderer.test.ts

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import TableModel from 'app/core/table_model';
 import { TableRenderer } from '../renderer';
+import { SemiDarkOrange } from '@grafana/ui/src/utils/colorsPalette';
 
 describe('when rendering table', () => {
   describe('given 13 columns', () => {
@@ -47,7 +48,7 @@ describe('when rendering table', () => {
           decimals: 1,
           colorMode: 'value',
           thresholds: [50, 80],
-          colors: ['green', 'orange', 'red'],
+          colors: ['#00ff00', SemiDarkOrange.name, 'rgb(1,0,0)'],
         },
         {
           pattern: 'String',
@@ -138,7 +139,7 @@ describe('when rendering table', () => {
           ],
           colorMode: 'value',
           thresholds: [1, 2],
-          colors: ['green', 'orange', 'red'],
+          colors: ['#00ff00', SemiDarkOrange.name, 'rgb(1,0,0)'],
         },
         {
           pattern: 'RangeMappingColored',
@@ -158,7 +159,7 @@ describe('when rendering table', () => {
           ],
           colorMode: 'value',
           thresholds: [2, 5],
-          colors: ['green', 'orange', 'red'],
+          colors: ['#00ff00', SemiDarkOrange.name, 'rgb(1,0,0)'],
         },
       ],
     };
@@ -226,19 +227,19 @@ describe('when rendering table', () => {
       expect(html).toBe('<td>asd</td>');
     });
 
-    it('colored cell should have style', () => {
+    it('colored cell should have style (handles HEX color values)', () => {
       const html = renderer.renderCell(2, 0, 40);
-      expect(html).toBe('<td style="color:green">40.0</td>');
+      expect(html).toBe('<td style="color:#00ff00">40.0</td>');
     });
 
-    it('colored cell should have style', () => {
+    it('colored cell should have style (handles named color values', () => {
       const html = renderer.renderCell(2, 0, 55);
-      expect(html).toBe('<td style="color:orange">55.0</td>');
+      expect(html).toBe(`<td style="color:${SemiDarkOrange.variants.dark}">55.0</td>`);
     });
 
-    it('colored cell should have style', () => {
+    it('colored cell should have style handles(rgb color values)', () => {
       const html = renderer.renderCell(2, 0, 85);
-      expect(html).toBe('<td style="color:red">85.0</td>');
+      expect(html).toBe('<td style="color:rgb(1,0,0)">85.0</td>');
     });
 
     it('unformated undefined should be rendered as string', () => {
@@ -333,47 +334,47 @@ describe('when rendering table', () => {
 
     it('value should be mapped to text and colored cell should have style', () => {
       const html = renderer.renderCell(11, 0, 1);
-      expect(html).toBe('<td style="color:orange">on</td>');
+      expect(html).toBe(`<td style="color:${SemiDarkOrange.variants.dark}">on</td>`);
     });
 
     it('value should be mapped to text and colored cell should have style', () => {
       const html = renderer.renderCell(11, 0, '1');
-      expect(html).toBe('<td style="color:orange">on</td>');
+      expect(html).toBe(`<td style="color:${SemiDarkOrange.variants.dark}">on</td>`);
     });
 
     it('value should be mapped to text and colored cell should have style', () => {
       const html = renderer.renderCell(11, 0, 0);
-      expect(html).toBe('<td style="color:green">off</td>');
+      expect(html).toBe('<td style="color:#00ff00">off</td>');
     });
 
     it('value should be mapped to text and colored cell should have style', () => {
       const html = renderer.renderCell(11, 0, '0');
-      expect(html).toBe('<td style="color:green">off</td>');
+      expect(html).toBe('<td style="color:#00ff00">off</td>');
     });
 
     it('value should be mapped to text and colored cell should have style', () => {
       const html = renderer.renderCell(11, 0, '2.1');
-      expect(html).toBe('<td style="color:red">2.1</td>');
+      expect(html).toBe('<td style="color:rgb(1,0,0)">2.1</td>');
     });
 
     it('value should be mapped to text (range) and colored cell should have style', () => {
       const html = renderer.renderCell(12, 0, 0);
-      expect(html).toBe('<td style="color:green">0</td>');
+      expect(html).toBe('<td style="color:#00ff00">0</td>');
     });
 
     it('value should be mapped to text (range) and colored cell should have style', () => {
       const html = renderer.renderCell(12, 0, 1);
-      expect(html).toBe('<td style="color:green">on</td>');
+      expect(html).toBe('<td style="color:#00ff00">on</td>');
     });
 
     it('value should be mapped to text (range) and colored cell should have style', () => {
       const html = renderer.renderCell(12, 0, 4);
-      expect(html).toBe('<td style="color:orange">off</td>');
+      expect(html).toBe(`<td style="color:${SemiDarkOrange.variants.dark}">off</td>`);
     });
 
     it('value should be mapped to text (range) and colored cell should have style', () => {
       const html = renderer.renderCell(12, 0, '7.1');
-      expect(html).toBe('<td style="color:red">7.1</td>');
+      expect(html).toBe('<td style="color:rgb(1,0,0)">7.1</td>');
     });
   });
 });