Thresholds: get theme from context automatically (#22025)

* get theme from context for thresholds

* remove theme

* use theme context

* remove theme from gauge/bargauge

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

@@ -3,7 +3,6 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { action } from '@storybook/addon-actions';
 
 
 import { ThresholdsEditor } from './ThresholdsEditor';
 import { ThresholdsEditor } from './ThresholdsEditor';
-import { getTheme } from '../../themes';
 import { ThresholdsMode, ThresholdsConfig } from '@grafana/data';
 import { ThresholdsMode, ThresholdsConfig } from '@grafana/data';
 
 
 const ThresholdsEditorStories = storiesOf('Panel/ThresholdsEditor', module);
 const ThresholdsEditorStories = storiesOf('Panel/ThresholdsEditor', module);
@@ -16,11 +15,9 @@ const thresholds: ThresholdsConfig = {
 };
 };
 
 
 ThresholdsEditorStories.add('default', () => {
 ThresholdsEditorStories.add('default', () => {
-  return (
-    <ThresholdsEditor theme={getTheme()} thresholds={{} as ThresholdsConfig} onChange={action('Thresholds changed')} />
-  );
+  return <ThresholdsEditor thresholds={{} as ThresholdsConfig} onChange={action('Thresholds changed')} />;
 });
 });
 
 
 ThresholdsEditorStories.add('with thresholds', () => {
 ThresholdsEditorStories.add('with thresholds', () => {
-  return <ThresholdsEditor theme={getTheme()} thresholds={thresholds} onChange={action('Thresholds changed')} />;
+  return <ThresholdsEditor thresholds={thresholds} onChange={action('Thresholds changed')} />;
 });
 });

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

@@ -2,9 +2,9 @@ import React, { PureComponent, ChangeEvent } from 'react';
 import { Threshold, sortThresholds, ThresholdsConfig, ThresholdsMode, SelectableValue } from '@grafana/data';
 import { Threshold, sortThresholds, ThresholdsConfig, ThresholdsMode, SelectableValue } from '@grafana/data';
 import { colors } from '../../utils';
 import { colors } from '../../utils';
 import { getColorFromHexRgbOrName } from '@grafana/data';
 import { getColorFromHexRgbOrName } from '@grafana/data';
+import { ThemeContext } from '../../themes/ThemeContext';
 import { Input } from '../Input/Input';
 import { Input } from '../Input/Input';
 import { ColorPicker } from '../ColorPicker/ColorPicker';
 import { ColorPicker } from '../ColorPicker/ColorPicker';
-import { Themeable } from '../../types';
 import { css } from 'emotion';
 import { css } from 'emotion';
 import Select from '../Select/Select';
 import Select from '../Select/Select';
 import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';
 import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';
@@ -18,7 +18,7 @@ const modes: Array<SelectableValue<ThresholdsMode>> = [
   },
   },
 ];
 ];
 
 
-export interface Props extends Themeable {
+export interface Props {
   showAlphaUI?: boolean;
   showAlphaUI?: boolean;
   thresholds: ThresholdsConfig;
   thresholds: ThresholdsConfig;
   onChange: (thresholds: ThresholdsConfig) => void;
   onChange: (thresholds: ThresholdsConfig) => void;
@@ -218,10 +218,11 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
 
 
   render() {
   render() {
     const { steps } = this.state;
     const { steps } = this.state;
-    const { theme } = this.props;
     const t = this.props.thresholds;
     const t = this.props.thresholds;
     return (
     return (
       <PanelOptionsGroup title="Thresholds">
       <PanelOptionsGroup title="Thresholds">
+        <ThemeContext.Consumer>
+          {theme => (
             <>
             <>
               <div className="thresholds">
               <div className="thresholds">
                 {steps
                 {steps
@@ -249,6 +250,8 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
                 </div>
                 </div>
               )}
               )}
             </>
             </>
+          )}
+        </ThemeContext.Consumer>
       </PanelOptionsGroup>
       </PanelOptionsGroup>
     );
     );
   }
   }

public/app/plugins/panel/bargauge/BarGaugePanelEditor.tsx

@@ -127,7 +127,6 @@ export class BarGaugePanelEditor extends PureComponent<PanelEditorProps<BarGauge
           <ThresholdsEditor
           <ThresholdsEditor
             onChange={this.onThresholdsChanged}
             onChange={this.onThresholdsChanged}
             thresholds={defaults.thresholds}
             thresholds={defaults.thresholds}
-            theme={config.theme}
             showAlphaUI={config.featureToggles.newEdit}
             showAlphaUI={config.featureToggles.newEdit}
           />
           />
         </PanelOptionsGrid>
         </PanelOptionsGrid>

public/app/plugins/panel/gauge/GaugePanelEditor.tsx

@@ -133,7 +133,6 @@ export class GaugePanelEditor extends PureComponent<PanelEditorProps<GaugeOption
           <ThresholdsEditor
           <ThresholdsEditor
             onChange={this.onThresholdsChanged}
             onChange={this.onThresholdsChanged}
             thresholds={defaults.thresholds}
             thresholds={defaults.thresholds}
-            theme={config.theme}
             showAlphaUI={config.featureToggles.newEdit}
             showAlphaUI={config.featureToggles.newEdit}
           />
           />
         </PanelOptionsGrid>
         </PanelOptionsGrid>

public/app/plugins/panel/stat/StatPanelEditor.tsx

@@ -140,7 +140,6 @@ export class StatPanelEditor extends PureComponent<PanelEditorProps<StatPanelOpt
           <ThresholdsEditor
           <ThresholdsEditor
             onChange={this.onThresholdsChanged}
             onChange={this.onThresholdsChanged}
             thresholds={defaults.thresholds}
             thresholds={defaults.thresholds}
-            theme={config.theme}
             showAlphaUI={config.featureToggles.newEdit}
             showAlphaUI={config.featureToggles.newEdit}
           />
           />
         </PanelOptionsGrid>
         </PanelOptionsGrid>