From d075af2b674176ecace3613a1e5d6fdc0d0e7671 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Tue, 19 Mar 2019 13:14:32 +0100
Subject: [PATCH] adding story and fixing tests

---
 .../ThresholdsEditor.story.tsx                |  16 +
 .../ThresholdsEditor.test.tsx                 |  31 +-
 .../ThresholdsEditor/ThresholdsEditor.tsx     |   4 +-
 .../ThresholdsEditor.test.tsx.snap            | 446 +++++++++++++++++-
 4 files changed, 477 insertions(+), 20 deletions(-)
 create mode 100644 packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.story.tsx

diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.story.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.story.tsx
new file mode 100644
index 00000000000..8d6112130e7
--- /dev/null
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.story.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { ThresholdsEditor } from './ThresholdsEditor';
+
+const ThresholdsEditorStories = storiesOf('UI/ThresholdsEditor', module);
+const thresholds = [{ index: 0, value: -Infinity, color: 'green' }, { index: 1, value: 50, color: 'red' }];
+
+ThresholdsEditorStories.add('default', () => {
+  return <ThresholdsEditor thresholds={[]} onChange={action('Thresholds changed')} />;
+});
+
+ThresholdsEditorStories.add('with thresholds', () => {
+  return <ThresholdsEditor thresholds={thresholds} onChange={action('Thresholds changed')} />;
+});
diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
index 38cd8e5c763..db494053d6e 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
@@ -1,6 +1,7 @@
 import React, { ChangeEvent } from 'react';
 import { mount } from 'enzyme';
 import { ThresholdsEditor, Props } from './ThresholdsEditor';
+import { colors } from '../../utils';
 
 const setup = (propOverrides?: Partial<Props>) => {
   const props: Props = {
@@ -31,7 +32,7 @@ describe('Initialization', () => {
   it('should add a base threshold if missing', () => {
     const { instance } = setup();
 
-    expect(instance.state.thresholds).toEqual([{ index: 0, value: -Infinity, color: '#7EB26D' }]);
+    expect(instance.state.thresholds).toEqual([{ index: 0, value: -Infinity, color: colors[0] }]);
   });
 });
 
@@ -41,7 +42,7 @@ describe('Add threshold', () => {
 
     instance.onAddThreshold(0);
 
-    expect(instance.state.thresholds).toEqual([{ index: 0, value: -Infinity, color: '#7EB26D' }]);
+    expect(instance.state.thresholds).toEqual([{ index: 0, value: -Infinity, color: colors[0] }]);
   });
 
   it('should add threshold', () => {
@@ -50,41 +51,41 @@ describe('Add threshold', () => {
     instance.onAddThreshold(1);
 
     expect(instance.state.thresholds).toEqual([
-      { index: 0, value: -Infinity, color: '#7EB26D' },
-      { index: 1, value: 50, color: '#EAB839' },
+      { index: 0, value: -Infinity, color: colors[0] },
+      { index: 1, value: 50, color: colors[2] },
     ]);
   });
 
   it('should add another threshold above a first', () => {
     const { instance } = setup({
-      thresholds: [{ index: 0, value: -Infinity, color: '#7EB26D' }, { index: 1, value: 50, color: '#EAB839' }],
+      thresholds: [{ index: 0, value: -Infinity, color: colors[0] }, { index: 1, value: 50, color: colors[2] }],
     });
 
     instance.onAddThreshold(2);
 
     expect(instance.state.thresholds).toEqual([
-      { index: 0, value: -Infinity, color: '#7EB26D' },
-      { index: 1, value: 50, color: '#EAB839' },
-      { index: 2, value: 75, color: '#6ED0E0' },
+      { index: 0, value: -Infinity, color: colors[0] },
+      { index: 1, value: 50, color: colors[2] },
+      { index: 2, value: 75, color: colors[3] },
     ]);
   });
 
   it('should add another threshold between first and second index', () => {
     const { instance } = setup({
       thresholds: [
-        { index: 0, value: -Infinity, color: '#7EB26D' },
-        { index: 1, value: 50, color: '#EAB839' },
-        { index: 2, value: 75, color: '#6ED0E0' },
+        { index: 0, value: -Infinity, color: colors[0] },
+        { index: 1, value: 50, color: colors[2] },
+        { index: 2, value: 75, color: colors[3] },
       ],
     });
 
     instance.onAddThreshold(2);
 
     expect(instance.state.thresholds).toEqual([
-      { index: 0, value: -Infinity, color: '#7EB26D' },
-      { index: 1, value: 50, color: '#EAB839' },
-      { index: 2, value: 62.5, color: '#EF843C' },
-      { index: 3, value: 75, color: '#6ED0E0' },
+      { index: 0, value: -Infinity, color: colors[0] },
+      { index: 1, value: 50, color: colors[2] },
+      { index: 2, value: 62.5, color: colors[4] },
+      { index: 3, value: 75, color: colors[3] },
     ]);
   });
 });
diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
index 3361e1bee46..adacf393a09 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
@@ -3,8 +3,8 @@ import { Threshold } from '../../types';
 import { ColorPicker } from '..';
 import { PanelOptionsGroup } from '..';
 import { colors } from '../../utils';
-import { ThemeContext } from '../../themes/ThemeContext';
-import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
+import { ThemeContext } from '../../themes';
+import { getColorFromHexRgbOrName } from '../../utils';
 
 export interface Props {
   thresholds: Threshold[];
diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap b/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap
index b0dc025090b..bd0ab03bf51 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap
@@ -1,7 +1,447 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Render should render with base threshold 1`] = `
-<ContextConsumer>
-  <Component />
-</ContextConsumer>
+<ThresholdsEditor
+  onChange={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          Array [
+            Object {
+              "color": "#7EB26D",
+              "index": 0,
+              "value": -Infinity,
+            },
+          ],
+        ],
+      ],
+      "results": Array [
+        Object {
+          "isThrow": false,
+          "value": undefined,
+        },
+      ],
+    }
+  }
+  thresholds={Array []}
+>
+  <Component
+    title="Thresholds"
+  >
+    <div
+      className="panel-options-group"
+    >
+      <div
+        className="panel-options-group__header"
+      >
+        <span
+          className="panel-options-group__title"
+        >
+          Thresholds
+        </span>
+      </div>
+      <div
+        className="panel-options-group__body"
+      >
+        <div
+          className="thresholds"
+        >
+          <div
+            className="thresholds-row"
+            key="0-0"
+          >
+            <div
+              className="thresholds-row-add-button"
+              onClick={[Function]}
+            >
+              <i
+                className="fa fa-plus"
+              />
+            </div>
+            <div
+              className="thresholds-row-color-indicator"
+              style={
+                Object {
+                  "backgroundColor": "#7EB26D",
+                }
+              }
+            />
+            <div
+              className="thresholds-row-input"
+            >
+              <div
+                className="thresholds-row-input-inner"
+              >
+                <span
+                  className="thresholds-row-input-inner-arrow"
+                />
+                <div
+                  className="thresholds-row-input-inner-color"
+                >
+                  <div
+                    className="thresholds-row-input-inner-color-colorpicker"
+                  >
+                    <WithTheme(ColorPicker)
+                      color="#7EB26D"
+                      onChange={[Function]}
+                    >
+                      <ColorPicker
+                        color="#7EB26D"
+                        onChange={[Function]}
+                        theme={
+                          Object {
+                            "background": Object {
+                              "dropdown": "#1f1f20",
+                              "scrollbar": "#343436",
+                              "scrollbar2": "#343436",
+                            },
+                            "border": Object {
+                              "radius": Object {
+                                "lg": "5px",
+                                "md": "3px",
+                                "sm": "2px",
+                              },
+                              "width": Object {
+                                "sm": "1px",
+                              },
+                            },
+                            "breakpoints": Object {
+                              "lg": "992px",
+                              "md": "768px",
+                              "sm": "544px",
+                              "xl": "1200px",
+                              "xs": "0",
+                            },
+                            "colors": Object {
+                              "black": "#000000",
+                              "blue": "#33b5e5",
+                              "blueBase": "#3274d9",
+                              "blueFaint": "#041126",
+                              "blueLight": "#5794f2",
+                              "blueShade": "#1f60c4",
+                              "body": "#d8d9da",
+                              "bodyBg": "#161719",
+                              "brandDanger": "#e02f44",
+                              "brandPrimary": "#eb7b18",
+                              "brandSuccess": "#299c46",
+                              "brandWarning": "#eb7b18",
+                              "critical": "#e02f44",
+                              "dark1": "#141414",
+                              "dark10": "#424345",
+                              "dark2": "#161719",
+                              "dark3": "#1f1f20",
+                              "dark4": "#212124",
+                              "dark5": "#222426",
+                              "dark6": "#262628",
+                              "dark7": "#292a2d",
+                              "dark8": "#2f2f32",
+                              "dark9": "#343436",
+                              "gray1": "#555555",
+                              "gray2": "#8e8e8e",
+                              "gray3": "#b3b3b3",
+                              "gray4": "#d8d9da",
+                              "gray5": "#ececec",
+                              "gray6": "#f4f5f8",
+                              "gray7": "#fbfbfb",
+                              "grayBlue": "#212327",
+                              "greenBase": "#299c46",
+                              "greenShade": "#23843b",
+                              "headingColor": "#e3e3e3",
+                              "inputBlack": "#09090b",
+                              "link": "#e3e3e3",
+                              "linkDisabled": "#e3e3e3",
+                              "linkExternal": "#33b5e5",
+                              "linkHover": "#ffffff",
+                              "online": "#299c46",
+                              "orange": "#eb7b18",
+                              "pageBg": "#161719",
+                              "purple": "#9933cc",
+                              "queryGreen": "#74e680",
+                              "queryKeyword": "#66d9ef",
+                              "queryOrange": "#eb7b18",
+                              "queryPurple": "#fe85fc",
+                              "queryRed": "#e02f44",
+                              "red": "#d44a3a",
+                              "redBase": "#e02f44",
+                              "redShade": "#c4162a",
+                              "text": "#d8d9da",
+                              "textEmphasis": "#ececec",
+                              "textFaint": "#222426",
+                              "textStrong": "#ffffff",
+                              "textWeak": "#8e8e8e",
+                              "variable": "#32d1df",
+                              "warn": "#f79520",
+                              "white": "#ffffff",
+                              "yellow": "#ecbb13",
+                            },
+                            "name": "Grafana Dark",
+                            "panelPadding": Object {
+                              "horizontal": 10,
+                              "vertical": 5,
+                            },
+                            "spacing": Object {
+                              "d": "14px",
+                              "gutter": "30px",
+                              "lg": "24px",
+                              "md": "16px",
+                              "sm": "8px",
+                              "xl": "32px",
+                              "xs": "4px",
+                              "xxs": "2px",
+                            },
+                            "type": "dark",
+                            "typography": Object {
+                              "fontFamily": Object {
+                                "monospace": "Menlo, Monaco, Consolas, 'Courier New', monospace",
+                                "sansSerif": "'Roboto', Helvetica, Arial, sans-serif",
+                              },
+                              "heading": Object {
+                                "h1": "28px",
+                                "h2": "24px",
+                                "h3": "21px",
+                                "h4": "18px",
+                                "h5": "16px",
+                                "h6": "14px",
+                              },
+                              "lineHeight": Object {
+                                "lg": 1.5,
+                                "md": 1.3333333333333333,
+                                "sm": 1.1,
+                                "xs": 1,
+                              },
+                              "size": Object {
+                                "base": "13px",
+                                "lg": "18px",
+                                "md": "14px",
+                                "root": "14px",
+                                "sm": "12px",
+                                "xs": "10px",
+                              },
+                              "weight": Object {
+                                "light": 300,
+                                "regular": 400,
+                                "semibold": 500,
+                              },
+                            },
+                          }
+                        }
+                      >
+                        <PopperController
+                          content={
+                            <ColorPickerPopover
+                              color="#7EB26D"
+                              onChange={[Function]}
+                              theme={
+                                Object {
+                                  "background": Object {
+                                    "dropdown": "#1f1f20",
+                                    "scrollbar": "#343436",
+                                    "scrollbar2": "#343436",
+                                  },
+                                  "border": Object {
+                                    "radius": Object {
+                                      "lg": "5px",
+                                      "md": "3px",
+                                      "sm": "2px",
+                                    },
+                                    "width": Object {
+                                      "sm": "1px",
+                                    },
+                                  },
+                                  "breakpoints": Object {
+                                    "lg": "992px",
+                                    "md": "768px",
+                                    "sm": "544px",
+                                    "xl": "1200px",
+                                    "xs": "0",
+                                  },
+                                  "colors": Object {
+                                    "black": "#000000",
+                                    "blue": "#33b5e5",
+                                    "blueBase": "#3274d9",
+                                    "blueFaint": "#041126",
+                                    "blueLight": "#5794f2",
+                                    "blueShade": "#1f60c4",
+                                    "body": "#d8d9da",
+                                    "bodyBg": "#161719",
+                                    "brandDanger": "#e02f44",
+                                    "brandPrimary": "#eb7b18",
+                                    "brandSuccess": "#299c46",
+                                    "brandWarning": "#eb7b18",
+                                    "critical": "#e02f44",
+                                    "dark1": "#141414",
+                                    "dark10": "#424345",
+                                    "dark2": "#161719",
+                                    "dark3": "#1f1f20",
+                                    "dark4": "#212124",
+                                    "dark5": "#222426",
+                                    "dark6": "#262628",
+                                    "dark7": "#292a2d",
+                                    "dark8": "#2f2f32",
+                                    "dark9": "#343436",
+                                    "gray1": "#555555",
+                                    "gray2": "#8e8e8e",
+                                    "gray3": "#b3b3b3",
+                                    "gray4": "#d8d9da",
+                                    "gray5": "#ececec",
+                                    "gray6": "#f4f5f8",
+                                    "gray7": "#fbfbfb",
+                                    "grayBlue": "#212327",
+                                    "greenBase": "#299c46",
+                                    "greenShade": "#23843b",
+                                    "headingColor": "#e3e3e3",
+                                    "inputBlack": "#09090b",
+                                    "link": "#e3e3e3",
+                                    "linkDisabled": "#e3e3e3",
+                                    "linkExternal": "#33b5e5",
+                                    "linkHover": "#ffffff",
+                                    "online": "#299c46",
+                                    "orange": "#eb7b18",
+                                    "pageBg": "#161719",
+                                    "purple": "#9933cc",
+                                    "queryGreen": "#74e680",
+                                    "queryKeyword": "#66d9ef",
+                                    "queryOrange": "#eb7b18",
+                                    "queryPurple": "#fe85fc",
+                                    "queryRed": "#e02f44",
+                                    "red": "#d44a3a",
+                                    "redBase": "#e02f44",
+                                    "redShade": "#c4162a",
+                                    "text": "#d8d9da",
+                                    "textEmphasis": "#ececec",
+                                    "textFaint": "#222426",
+                                    "textStrong": "#ffffff",
+                                    "textWeak": "#8e8e8e",
+                                    "variable": "#32d1df",
+                                    "warn": "#f79520",
+                                    "white": "#ffffff",
+                                    "yellow": "#ecbb13",
+                                  },
+                                  "name": "Grafana Dark",
+                                  "panelPadding": Object {
+                                    "horizontal": 10,
+                                    "vertical": 5,
+                                  },
+                                  "spacing": Object {
+                                    "d": "14px",
+                                    "gutter": "30px",
+                                    "lg": "24px",
+                                    "md": "16px",
+                                    "sm": "8px",
+                                    "xl": "32px",
+                                    "xs": "4px",
+                                    "xxs": "2px",
+                                  },
+                                  "type": "dark",
+                                  "typography": Object {
+                                    "fontFamily": Object {
+                                      "monospace": "Menlo, Monaco, Consolas, 'Courier New', monospace",
+                                      "sansSerif": "'Roboto', Helvetica, Arial, sans-serif",
+                                    },
+                                    "heading": Object {
+                                      "h1": "28px",
+                                      "h2": "24px",
+                                      "h3": "21px",
+                                      "h4": "18px",
+                                      "h5": "16px",
+                                      "h6": "14px",
+                                    },
+                                    "lineHeight": Object {
+                                      "lg": 1.5,
+                                      "md": 1.3333333333333333,
+                                      "sm": 1.1,
+                                      "xs": 1,
+                                    },
+                                    "size": Object {
+                                      "base": "13px",
+                                      "lg": "18px",
+                                      "md": "14px",
+                                      "root": "14px",
+                                      "sm": "12px",
+                                      "xs": "10px",
+                                    },
+                                    "weight": Object {
+                                      "light": 300,
+                                      "regular": 400,
+                                      "semibold": 500,
+                                    },
+                                  },
+                                }
+                              }
+                            />
+                          }
+                          hideAfter={300}
+                        >
+                          <ForwardRef(ColorPickerTrigger)
+                            color="#7EB26D"
+                            onClick={[Function]}
+                            onMouseLeave={[Function]}
+                          >
+                            <div
+                              onClick={[Function]}
+                              onMouseLeave={[Function]}
+                              style={
+                                Object {
+                                  "background": "inherit",
+                                  "border": "none",
+                                  "borderRadius": 10,
+                                  "color": "inherit",
+                                  "cursor": "pointer",
+                                  "overflow": "hidden",
+                                  "padding": 0,
+                                }
+                              }
+                            >
+                              <div
+                                style={
+                                  Object {
+                                    "backgroundImage": "url(data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)",
+                                    "border": "none",
+                                    "float": "left",
+                                    "height": 15,
+                                    "margin": 0,
+                                    "position": "relative",
+                                    "width": 15,
+                                    "zIndex": 0,
+                                  }
+                                }
+                              >
+                                <div
+                                  style={
+                                    Object {
+                                      "backgroundColor": "#7EB26D",
+                                      "bottom": 0,
+                                      "display": "block",
+                                      "left": 0,
+                                      "position": "absolute",
+                                      "right": 0,
+                                      "top": 0,
+                                    }
+                                  }
+                                />
+                              </div>
+                            </div>
+                          </ForwardRef(ColorPickerTrigger)>
+                        </PopperController>
+                      </ColorPicker>
+                    </WithTheme(ColorPicker)>
+                  </div>
+                </div>
+                <div
+                  className="thresholds-row-input-inner-value"
+                >
+                  <input
+                    readOnly={true}
+                    type="text"
+                    value="Base"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Component>
+</ThresholdsEditor>
 `;