Fix color type bug

ui/src/dashboards/components/Threshold.tsx

@@ -3,30 +3,16 @@ import React, {PureComponent, ChangeEvent, KeyboardEvent} from 'react'
 import ColorDropdown from 'src/shared/components/ColorDropdown'
 import {THRESHOLD_COLORS} from 'src/shared/constants/thresholds'
 import {ErrorHandling} from 'src/shared/decorators/errors'
-
-interface SelectedColor {
-  hex: string
-  name: string
-}
-interface ThresholdProps {
-  type: string
-  hex: string
-  id: string
-  name: string
-  value: number
-}
+import {ColorNumber, ThresholdColor} from 'src/types/colors'
 
 interface Props {
   visualizationType: string
-  threshold: ThresholdProps
+  threshold: ColorNumber
   disableMaxColor: boolean
-  onChooseColor: (threshold: ThresholdProps) => void
-  onValidateColorValue: (
-    threshold: ThresholdProps,
-    targetValue: number
-  ) => boolean
-  onUpdateColorValue: (threshold: ThresholdProps, targetValue: number) => void
-  onDeleteThreshold: (threshold: ThresholdProps) => void
+  onChooseColor: (threshold: ColorNumber) => void
+  onValidateColorValue: (threshold: ColorNumber, targetValue: number) => boolean
+  onUpdateColorValue: (threshold: ColorNumber, targetValue: number) => void
+  onDeleteThreshold: (threshold: ColorNumber) => void
   isMin: boolean
   isMax: boolean
 }
@@ -50,7 +36,7 @@ class Threshold extends PureComponent<Props, State> {
   }
 
   public render() {
-    const {threshold, disableMaxColor, onChooseColor, isMax} = this.props
+    const {disableMaxColor, isMax} = this.props
     const {workingValue} = this.state
 
     return (
@@ -76,18 +62,25 @@ class Threshold extends PureComponent<Props, State> {
         <ColorDropdown
           colors={THRESHOLD_COLORS}
           selected={this.selectedColor}
-          onChoose={onChooseColor(threshold)}
+          onChoose={this.handleChooseColor}
           disabled={isMax && disableMaxColor}
         />
       </div>
     )
   }
 
-  private get selectedColor(): SelectedColor {
+  private handleChooseColor = (color: ThresholdColor): void => {
+    const {onChooseColor, threshold} = this.props
+    const {hex, name} = color
+
+    onChooseColor({...threshold, hex, name})
+  }
+
+  private get selectedColor(): ColorNumber {
     const {
-      threshold: {hex, name},
+      threshold: {hex, name, type, value, id},
     } = this.props
-    return {hex, name}
+    return {hex, name, type, value, id}
   }
 
   private get inputClass(): string {

ui/src/shared/components/ColorDropdown.tsx

@@ -4,15 +4,15 @@ import classnames from 'classnames'
 import {ClickOutside} from 'src/shared/components/ClickOutside'
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 import {ErrorHandling} from 'src/shared/decorators/errors'
-import {ColorNumber} from 'src/types/colors'
+import {ColorNumber, ThresholdColor} from 'src/types/colors'
 import {DROPDOWN_MENU_MAX_HEIGHT} from 'src/shared/constants/index'
 
 interface Props {
   selected: ColorNumber
-  disabled: boolean
-  stretchToFit: boolean
-  colors: ColorNumber[]
-  onChoose: (colors: ColorNumber[]) => void
+  disabled?: boolean
+  stretchToFit?: boolean
+  colors: ThresholdColor[]
+  onChoose: (colors: ThresholdColor) => void
 }
 
 interface State {
@@ -21,6 +21,11 @@ interface State {
 
 @ErrorHandling
 export default class ColorDropdown extends Component<Props, State> {
+  public static defaultProps: Partial<Props> = {
+    stretchToFit: false,
+    disabled: false,
+  }
+
   constructor(props) {
     super(props)
 

ui/src/shared/components/ThresholdsList.js

@@ -21,11 +21,6 @@ import {
 } from 'shared/constants/thresholds'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
-const formatColor = color => {
-  const {hex, name} = color
-  return {hex, name}
-}
-
 @ErrorHandling
 class ThresholdsList extends Component {
   handleAddThreshold = () => {
@@ -85,14 +80,23 @@ class ThresholdsList extends Component {
     onResetFocus()
   }
 
-  handleChooseColor = threshold => chosenColor => {
+  handleChangeBaseColor = updatedColor => {
     const {handleUpdateThresholdsListColors} = this.props
+    const {hex, name} = updatedColor
 
     const thresholdsListColors = this.props.thresholdsListColors.map(
       color =>
-        color.id === threshold.id
-          ? {...color, hex: chosenColor.hex, name: chosenColor.name}
-          : color
+        color.id === THRESHOLD_TYPE_BASE ? {...color, hex, name} : color
+    )
+
+    handleUpdateThresholdsListColors(thresholdsListColors)
+  }
+
+  handleChooseColor = updatedColor => {
+    const {handleUpdateThresholdsListColors} = this.props
+
+    const thresholdsListColors = this.props.thresholdsListColors.map(
+      color => (color.id === updatedColor.id ? updatedColor : color)
     )
 
     handleUpdateThresholdsListColors(thresholdsListColors)
@@ -147,8 +151,8 @@ class ThresholdsList extends Component {
                 <div className="threshold-item--label">Base Color</div>
                 <ColorDropdown
                   colors={THRESHOLD_COLORS}
-                  selected={formatColor(color)}
-                  onChoose={this.handleChooseColor(color)}
+                  selected={color}
+                  onChoose={this.handleChangeBaseColor}
                   stretchToFit={true}
                 />
               </div>

ui/src/types/colors.ts

@@ -7,3 +7,8 @@ interface ColorBase {
 
 export type ColorString = ColorBase & {value: string}
 export type ColorNumber = ColorBase & {value: number}
+
+export interface ThresholdColor {
+  hex: string
+  name: string
+}