From e7710f0c668784d0a9b532d03a9b7a425871c4a2 Mon Sep 17 00:00:00 2001
From: Ryan McKinley <ryantxu@gmail.com>
Date: Sat, 8 Feb 2020 13:59:26 +0100
Subject: [PATCH] Thresholds: get theme from context automatically (#22025)

* get theme from context for thresholds

* remove theme

* use theme context

* remove theme from gauge/bargauge
---
 .../ThresholdsEditor.story.tsx                |  7 +--
 .../ThresholdsEditor/ThresholdsEditor.tsx     | 59 ++++++++++---------
 .../panel/bargauge/BarGaugePanelEditor.tsx    |  1 -
 .../plugins/panel/gauge/GaugePanelEditor.tsx  |  1 -
 .../plugins/panel/stat/StatPanelEditor.tsx    |  1 -
 5 files changed, 33 insertions(+), 36 deletions(-)

diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.story.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.story.tsx
index d83bb7260b4..968b56e3467 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.story.tsx
+++ b/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')} />;
 });
diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
index 0389942b75a..6cfbc7e00ec 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
+++ b/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>
     );
   }
diff --git a/public/app/plugins/panel/bargauge/BarGaugePanelEditor.tsx b/public/app/plugins/panel/bargauge/BarGaugePanelEditor.tsx
index 9899a10a779..0b5955070b3 100644
--- a/public/app/plugins/panel/bargauge/BarGaugePanelEditor.tsx
+++ b/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>
diff --git a/public/app/plugins/panel/gauge/GaugePanelEditor.tsx b/public/app/plugins/panel/gauge/GaugePanelEditor.tsx
index 4028d841806..8ccf9b7d9eb 100644
--- a/public/app/plugins/panel/gauge/GaugePanelEditor.tsx
+++ b/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>
diff --git a/public/app/plugins/panel/stat/StatPanelEditor.tsx b/public/app/plugins/panel/stat/StatPanelEditor.tsx
index 76655ec6726..70ed03b6152 100644
--- a/public/app/plugins/panel/stat/StatPanelEditor.tsx
+++ b/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>