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 { ThresholdsEditor } from './ThresholdsEditor';
-import { getTheme } from '../../themes';
 import { ThresholdsMode, ThresholdsConfig } from '@grafana/data';
 
 const ThresholdsEditorStories = storiesOf('Panel/ThresholdsEditor', module);
@@ -16,11 +15,9 @@ const thresholds: ThresholdsConfig = {
 };
 
 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', () => {
-  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 { colors } from '../../utils';
 import { getColorFromHexRgbOrName } from '@grafana/data';
+import { ThemeContext } from '../../themes/ThemeContext';
 import { Input } from '../Input/Input';
 import { ColorPicker } from '../ColorPicker/ColorPicker';
-import { Themeable } from '../../types';
 import { css } from 'emotion';
 import Select from '../Select/Select';
 import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';
@@ -18,7 +18,7 @@ const modes: Array<SelectableValue<ThresholdsMode>> = [
   },
 ];
 
-export interface Props extends Themeable {
+export interface Props {
   showAlphaUI?: boolean;
   thresholds: ThresholdsConfig;
   onChange: (thresholds: ThresholdsConfig) => void;
@@ -218,37 +218,40 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
 
   render() {
     const { steps } = this.state;
-    const { theme } = this.props;
     const t = this.props.thresholds;
     return (
       <PanelOptionsGroup title="Thresholds">
-        <>
-          <div className="thresholds">
-            {steps
-              .slice(0)
-              .reverse()
-              .map(threshold => {
-                return (
-                  <div className="thresholds-row" key={`${threshold.key}`}>
-                    <div className="thresholds-row-add-button" onClick={() => this.onAddThresholdAfter(threshold)}>
-                      <i className="fa fa-plus" />
-                    </div>
-                    <div
-                      className="thresholds-row-color-indicator"
-                      style={{ backgroundColor: getColorFromHexRgbOrName(threshold.color, theme.type) }}
-                    />
-                    <div className="thresholds-row-input">{this.renderInput(threshold)}</div>
-                  </div>
-                );
-              })}
-          </div>
+        <ThemeContext.Consumer>
+          {theme => (
+            <>
+              <div className="thresholds">
+                {steps
+                  .slice(0)
+                  .reverse()
+                  .map(threshold => {
+                    return (
+                      <div className="thresholds-row" key={`${threshold.key}`}>
+                        <div className="thresholds-row-add-button" onClick={() => this.onAddThresholdAfter(threshold)}>
+                          <i className="fa fa-plus" />
+                        </div>
+                        <div
+                          className="thresholds-row-color-indicator"
+                          style={{ backgroundColor: getColorFromHexRgbOrName(threshold.color, theme.type) }}
+                        />
+                        <div className="thresholds-row-input">{this.renderInput(threshold)}</div>
+                      </div>
+                    );
+                  })}
+              </div>
 
-          {this.props.showAlphaUI && (
-            <div>
-              <Select options={modes} value={modes.filter(m => m.value === t.mode)} onChange={this.onModeChanged} />
-            </div>
+              {this.props.showAlphaUI && (
+                <div>
+                  <Select options={modes} value={modes.filter(m => m.value === t.mode)} onChange={this.onModeChanged} />
+                </div>
+              )}
+            </>
           )}
-        </>
+        </ThemeContext.Consumer>
       </PanelOptionsGroup>
     );
   }

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

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

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

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

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

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