Rename colorsPalette util to namedColorsPalette

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

@@ -3,7 +3,7 @@ import PopperController from '../Tooltip/PopperController';
 import Popper, { RenderPopperArrowFn } from '../Tooltip/Popper';
 import { ColorPickerPopover } from './ColorPickerPopover';
 import { Themeable, GrafanaTheme } from '../../types';
-import { getColorFromHexRgbOrName } from '../../utils/colorsPalette';
+import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
 import { SeriesColorPickerPopover } from './SeriesColorPickerPopover';
 import propDeprecationWarning from '../../utils/propDeprecationWarning';
 
@@ -61,7 +61,7 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
       };
 
       return (
-        <PopperController content={popoverElement} hideAfter={500}>
+        <PopperController content={popoverElement} hideAfter={500000}>
           {(showPopper, hidePopper, popperProps) => {
             return (
               <>
@@ -83,7 +83,12 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
                     onMouseLeave: hidePopper,
                   })
                 ) : (
-                  <div ref={this.pickerTriggerRef} onClick={showPopper} onMouseLeave={hidePopper} className="sp-replacer sp-light">
+                  <div
+                    ref={this.pickerTriggerRef}
+                    onClick={showPopper}
+                    onMouseLeave={hidePopper}
+                    className="sp-replacer sp-light"
+                  >
                     <div className="sp-preview">
                       <div
                         className="sp-preview-inner"

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import NamedColorsPicker from './NamedColorsPalette';
-import { getColorName, getColorFromHexRgbOrName } from '../..//utils/colorsPalette';
+import { getColorName, getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
 import { ColorPickerProps, handleColorPickerPropsDeprecation } from './ColorPicker';
 import { GrafanaTheme, Themeable } from '../../types';
 import { PopperContentProps } from '../Tooltip/PopperController';

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

@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from 'react';
 import { Themeable, GrafanaTheme } from '../../types';
-import { ColorDefinition, getColorForTheme } from '../../utils/colorsPalette';
+import { ColorDefinition, getColorForTheme } from '../../utils/namedColorsPalette';
 import { Color } from 'csstype';
 import { find, upperFirst } from 'lodash';
 

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

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import { storiesOf } from '@storybook/react';
 import NamedColorsPalette from './NamedColorsPalette';
-import { getColorName } from '@grafana/ui/src/utils/colorsPalette';
+import { getColorName } from '../../utils/namedColorsPalette';
 import { withKnobs, select } from '@storybook/addon-knobs';
 
 const CenteredStory: FunctionComponent<{}> = ({ children }) => {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Color, ColorsPalette } from '../../utils/colorsPalette';
+import { Color, ColorsPalette } from '../../utils/namedColorsPalette';
 import { Themeable } from '../../types/index';
 import NamedColorsGroup from './NamedColorsGroup';
 

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { CustomPicker, ColorResult } from 'react-color';
 
 import { Saturation, Hue, Alpha } from 'react-color/lib/components/common';
-import { getColorFromHexRgbOrName } from '../../utils/colorsPalette';
+import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
 import tinycolor from 'tinycolor2';
 import ColorInput from './ColorInput';
 import { Themeable, GrafanaTheme } from '../../types';

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

@@ -1,18 +1,11 @@
 import React, { PureComponent } from 'react';
 import $ from 'jquery';
 
-import {
-  ValueMapping,
-  Threshold,
-  MappingType,
-  BasicGaugeColor,
-  ValueMap,
-  RangeMap,
-} from '../../types/panel';
+import { ValueMapping, Threshold, MappingType, BasicGaugeColor, ValueMap, RangeMap } from '../../types/panel';
 import { TimeSeriesVMs } from '../../types/series';
 import { getValueFormat } from '../../utils/valueFormats/valueFormats';
-import { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette';
-import { GrafanaTheme } from '@grafana/ui/src/types';
+import { GrafanaTheme } from '../../types';
+import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
 
 type TimeSeriesValue = string | number | null;
 

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

@@ -3,7 +3,7 @@ import { Threshold, Themeable } from '../../types';
 import { ColorPicker } from '../ColorPicker/ColorPicker';
 import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';
 import { colors } from '../../utils';
-import { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette';
+import { getColorFromHexRgbOrName } from '@grafana/ui';
 
 export interface Props extends Themeable {
   thresholds: Threshold[];

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

@@ -1,3 +1,4 @@
 export * from './processTimeSeries';
 export * from './valueFormats/valueFormats';
 export * from './colors';
+export * from './namedColorsPalette';

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

@@ -1,8 +1,13 @@
-import { getColorName, getColorDefinition, getColorByName, SemiDarkBlue, getColorFromHexRgbOrName } from './colorsPalette';
-import { GrafanaTheme } from '../types';
+import {
+  getColorName,
+  getColorDefinition,
+  getColorByName,
+  SemiDarkBlue,
+  getColorFromHexRgbOrName,
+} from './namedColorsPalette';
+import { GrafanaTheme } from '../types/index';
 
 describe('colors', () => {
-
   describe('getColorDefinition', () => {
     it('returns undefined for unknown hex', () => {
       expect(getColorDefinition('#ff0000')).toBeUndefined();
@@ -33,7 +38,6 @@ describe('colors', () => {
     it('returns color definiton for known color', () => {
       expect(getColorByName(SemiDarkBlue.name)).toBe(SemiDarkBlue);
     });
-
   });
   describe('getColorFromHexRgbOrName', () => {
     it('returns undefined for unknown color', () => {
@@ -44,7 +48,7 @@ describe('colors', () => {
       expect(getColorFromHexRgbOrName(SemiDarkBlue.name)).toBe(SemiDarkBlue.variants.dark);
     });
 
-    it('returns correct variant\'s hex for known color if theme specified', () => {
+    it("returns correct variant's hex for known color if theme specified", () => {
       expect(getColorFromHexRgbOrName(SemiDarkBlue.name, GrafanaTheme.Light)).toBe(SemiDarkBlue.variants.light);
     });
 

public/app/plugins/panel/graph/data_processor.ts

@@ -1,8 +1,6 @@
 import _ from 'lodash';
-import { colors, GrafanaTheme } from '@grafana/ui';
-
+import { colors, GrafanaTheme, getColorFromHexRgbOrName } from '@grafana/ui';
 import TimeSeries from 'app/core/time_series2';
-import { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette';
 import config from 'app/core/config';
 
 export class DataProcessor {

public/app/plugins/panel/graph/module.ts

@@ -9,9 +9,8 @@ import _ from 'lodash';
 import { MetricsPanelCtrl } from 'app/plugins/sdk';
 import { DataProcessor } from './data_processor';
 import { axesEditorComponent } from './axes_editor';
-import { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette';
 import config from 'app/core/config';
-import { GrafanaTheme } from '@grafana/ui';
+import { GrafanaTheme, getColorFromHexRgbOrName } from '@grafana/ui';
 
 class GraphCtrl extends MetricsPanelCtrl {
   static template = template;

public/app/plugins/panel/graph/threshold_manager.ts

@@ -1,7 +1,7 @@
 import 'vendor/flot/jquery.flot';
 import $ from 'jquery';
 import _ from 'lodash';
-import { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette';
+import { getColorFromHexRgbOrName } from '@grafana/ui';
 
 export class ThresholdManager {
   plot: any;

public/app/plugins/panel/graph/time_region_manager.ts

@@ -1,8 +1,7 @@
 import 'vendor/flot/jquery.flot';
 import _ from 'lodash';
 import moment from 'moment';
-import { GrafanaTheme } from '@grafana/ui';
-import { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette';
+import { GrafanaTheme, getColorFromHexRgbOrName } from '@grafana/ui';
 
 type TimeRegionColorDefinition = {
   fill: string;

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

@@ -5,8 +5,7 @@ import { contextSrv } from 'app/core/core';
 import { tickStep } from 'app/core/utils/ticks';
 import { getColorScale, getOpacityScale } from './color_scale';
 import coreModule from 'app/core/core_module';
-import { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette';
-import { GrafanaTheme } from '@grafana/ui';
+import { GrafanaTheme, getColorFromHexRgbOrName } from '@grafana/ui';
 
 const LEGEND_HEIGHT_PX = 6;
 const LEGEND_WIDTH_PX = 100;

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

@@ -8,8 +8,7 @@ import * as ticksUtils from 'app/core/utils/ticks';
 import { HeatmapTooltip } from './heatmap_tooltip';
 import { mergeZeroBuckets } from './heatmap_data_converter';
 import { getColorScale, getOpacityScale } from './color_scale';
-import { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette';
-import { GrafanaTheme } from '@grafana/ui';
+import { GrafanaTheme, getColorFromHexRgbOrName } from '@grafana/ui';
 
 const MIN_CARD_SIZE = 1,
   CARD_PADDING = 1,
@@ -663,12 +662,10 @@ export class HeatmapRenderer {
 
   getCardColor(d) {
     if (this.panel.color.mode === 'opacity') {
-
       return getColorFromHexRgbOrName(
         this.panel.color.cardColor,
         contextSrv.user.lightTheme ? GrafanaTheme.Light : GrafanaTheme.Dark
       );
-
     } else {
       return this.colorScale(d.count);
     }

public/app/plugins/panel/singlestat/module.ts

@@ -8,7 +8,7 @@ import kbn from 'app/core/utils/kbn';
 import config from 'app/core/config';
 import TimeSeries from 'app/core/time_series2';
 import { MetricsPanelCtrl } from 'app/plugins/sdk';
-import { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette';
+import { getColorFromHexRgbOrName } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/ui';
 
 class SingleStatCtrl extends MetricsPanelCtrl {

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

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import moment from 'moment';
 import kbn from 'app/core/utils/kbn';
-import { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette';
+import { getColorFromHexRgbOrName } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/ui';
 
 export class TableRenderer {

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

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import TableModel from 'app/core/table_model';
 import { TableRenderer } from '../renderer';
-import { SemiDarkOrange } from '@grafana/ui/src/utils/colorsPalette';
+import { SemiDarkOrange } from '@grafana/ui';
 
 describe('when rendering table', () => {
   describe('given 13 columns', () => {