chore(ui): remove Partial<Props> (#12956)

* chore(ui): add default props to ThresholdItem

* chore(ui): remove Partial<Props> pattern

* chore(ui): remove Partial<Props> pattern from Dygraphs

* chore(ui): remove DefaultProp interface

* test: update snapshots

ui/src/clockface/components/card_select/CardSelectCard.tsx

@@ -6,17 +6,17 @@ import ProtoboardIcon from 'src/clockface/components/card_select/ProtoboardIcon'
 
 interface Props {
   id: string
-  name?: string
   label: string
-  image?: StatelessComponent
-  checked?: boolean
-  disabled?: boolean
   onClick: () => void
+  name?: string
+  image?: StatelessComponent
+  checked: boolean
+  disabled: boolean
 }
 
 @ErrorHandling
 class CardSelectCard extends PureComponent<Props> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     checked: false,
     disabled: false,
   }

ui/src/clockface/components/card_select/ProtoboardIcon.tsx

@@ -2,11 +2,11 @@
 import React, {PureComponent} from 'react'
 
 interface Props {
-  displayText?: string
+  displayText: string
 }
 
 class ProtoboardIcon extends PureComponent<Props> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     displayText: '',
   }
 

ui/src/clockface/components/color_picker/ColorPicker.tsx

@@ -22,24 +22,19 @@ import {validateHexCode} from 'src/configuration/utils/labels'
 // Styles
 import 'src/clockface/components/color_picker/ColorPicker.scss'
 
-interface PassedProps {
+interface Props {
   color: string
   onChange: (color: string, status?: ComponentStatus) => void
+  testID: string
+  maintainInputFocus: boolean
 }
 
-interface DefaultProps {
-  maintainInputFocus?: boolean
-  testID?: string
-}
-
-type Props = PassedProps & DefaultProps
-
 interface State {
   errorMessage: string
 }
 
 export default class ColorPicker extends Component<Props, State> {
-  public static defaultProps: DefaultProps = {
+  public static defaultProps = {
     maintainInputFocus: false,
     testID: 'color-picker',
   }

ui/src/clockface/components/confirmation_button/ConfirmationButton.tsx

@@ -24,16 +24,16 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 interface Props {
   confirmText: string
   onConfirm: (returnValue?: any) => void
+  size: ComponentSize
+  shape: ButtonShape
+  testID: string
+  status: ComponentStatus
   returnValue?: any
   text?: string
-  size?: ComponentSize
-  shape?: ButtonShape
   icon?: IconFont
-  status?: ComponentStatus
   titleText?: string
   tabIndex?: number
   className?: string
-  testID?: string
 }
 
 interface State {
@@ -42,7 +42,7 @@ interface State {
 
 @ErrorHandling
 class ConfirmationButton extends Component<Props, State> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     size: ComponentSize.Small,
     shape: ButtonShape.Default,
     status: ComponentStatus.Default,

ui/src/clockface/components/context_menu/Context.tsx

@@ -16,7 +16,7 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {
   children: JSX.Element | JSX.Element[]
-  align?: Alignment
+  align: Alignment
   className?: string
 }
 
@@ -26,7 +26,7 @@ interface State {
 
 @ErrorHandling
 class Context extends PureComponent<Props, State> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     align: Alignment.Right,
   }
 

ui/src/clockface/components/context_menu/ContextMenu.tsx

@@ -17,28 +17,23 @@ import {
 
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
-interface PassedProps {
+interface Props {
   children: JSX.Element | JSX.Element[]
   icon: IconFont
   onBoostZIndex?: (boostZIndex: boolean) => void
+  text: string
+  color: ComponentColor
+  shape: ButtonShape
+  testID: string
 }
 
-interface DefaultProps {
-  text?: string
-  color?: ComponentColor
-  shape?: ButtonShape
-  testID?: string
-}
-
-type Props = PassedProps & DefaultProps
-
 interface State {
   isExpanded: boolean
 }
 
 @ErrorHandling
 class ContextMenu extends Component<Props, State> {
-  public static defaultProps: DefaultProps = {
+  public static defaultProps = {
     color: ComponentColor.Primary,
     shape: ButtonShape.Square,
     text: '',

ui/src/clockface/components/context_menu/ContextMenuItem.tsx

@@ -2,24 +2,19 @@
 import React, {Component} from 'react'
 import classnames from 'classnames'
 
-interface PassedProps {
+interface Props {
   label: string
   action: (value?: any) => void
+  description: string
+  testID: string
   value?: any
-  onCollapseMenu?: () => void
   disabled?: boolean
+  onCollapseMenu?: () => void
 }
 
-interface DefaultProps {
-  description?: string
-  testID?: string
-}
-
-type Props = PassedProps & DefaultProps
-
 class ContextMenuItem extends Component<Props> {
-  public static defaultProps: DefaultProps = {
+  public static defaultProps = {
-    description: null,
+    description: '',
     testID: 'context-menu-item',
   }
 

ui/src/clockface/components/draggable_resizer/DraggableResizerPanel.tsx

@@ -6,13 +6,13 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {
   children: JSX.Element
-  minSizePixels?: number
+  minSizePixels: number
   sizePercent?: number
 }
 
 @ErrorHandling
 class DraggableResizerPanel extends Component<Props> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     minSizePixels: 0,
   }
 

ui/src/clockface/components/dropdowns/Dropdown.tsx

@@ -26,9 +26,13 @@ export enum DropdownMode {
   Radio = 'radio',
 }
 
-export interface Props {
+interface OwnProps {
   children: JSX.Element[]
   onChange: (value: any) => void
+}
+
+interface DefaultProps {
+  buttonTestID?: string
   selectedID?: string
   buttonColor?: ComponentColor
   buttonSize?: ComponentSize
@@ -42,17 +46,18 @@ export interface Props {
   mode?: DropdownMode
   titleText?: string
   menuHeader?: JSX.Element
-  testID: string
+  testID?: string
-  buttonTestID: string
 }
 
+export type Props = OwnProps & DefaultProps
+
 interface State {
   expanded: boolean
 }
 
 @ErrorHandling
 class Dropdown extends Component<Props, State> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps: DefaultProps = {
     buttonColor: ComponentColor.Default,
     buttonSize: ComponentSize.Small,
     status: ComponentStatus.Default,
@@ -61,6 +66,8 @@ class Dropdown extends Component<Props, State> {
     menuColor: DropdownMenuColors.Sapphire,
     mode: DropdownMode.Radio,
     titleText: '',
+    testID: 'dropdown',
+    buttonTestID: 'dropdown-button',
   }
 
   public static Button = DropdownButton

ui/src/clockface/components/dropdowns/DropdownButton.tsx

@@ -17,18 +17,18 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 interface Props {
   children: DropdownChild
   onClick: (e: MouseEvent<HTMLElement>) => void
-  status?: ComponentStatus
+  status: ComponentStatus
-  active?: boolean
+  color: ComponentColor
-  color?: ComponentColor
+  size: ComponentSize
-  size?: ComponentSize
+  active: boolean
   icon?: IconFont
   title?: string
-  testID: string
+  testID?: string
 }
 
 @ErrorHandling
 class DropdownButton extends Component<Props> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     color: ComponentColor.Default,
     size: ComponentSize.Small,
     status: ComponentStatus.Default,

ui/src/clockface/components/dropdowns/DropdownDivider.tsx

@@ -8,14 +8,14 @@ import {DropdownChild} from 'src/clockface/types'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {
-  children?: DropdownChild
   id: string
-  text?: string
+  text: string
+  children?: DropdownChild
 }
 
 @ErrorHandling
 class DropdownDivider extends Component<Props> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     text: '',
   }
 

ui/src/clockface/components/dropdowns/DropdownItem.tsx

@@ -11,15 +11,15 @@ interface Props {
   id: string
   children: DropdownChild
   value: any
-  selected?: boolean
+  selected: boolean
-  checkbox?: boolean
+  checkbox: boolean
   onClick?: (value: any) => void
   testID?: string
 }
 
 @ErrorHandling
 class DropdownItem extends Component<Props> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     checkbox: false,
     selected: false,
   }

ui/src/clockface/components/dropdowns/MultiSelectDropdown.tsx

@@ -24,19 +24,19 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 interface Props {
   children: JSX.Element[]
   onChange: (selectedIDs: string[], value: any) => void
-  onCollapse?: () => void
   selectedIDs: string[]
-  buttonColor?: ComponentColor
+  buttonColor: ComponentColor
-  buttonSize?: ComponentSize
+  buttonSize: ComponentSize
-  menuColor?: DropdownMenuColors
+  menuColor: DropdownMenuColors
+  wrapText: boolean
+  maxMenuHeight: number
+  emptyText: string
+  separatorText: string
+  customClass?: string
+  onCollapse?: () => void
   status?: ComponentStatus
   widthPixels?: number
   icon?: IconFont
-  wrapText?: boolean
-  customClass?: string
-  maxMenuHeight?: number
-  emptyText?: string
-  separatorText?: string
 }
 
 interface State {
@@ -45,7 +45,7 @@ interface State {
 
 @ErrorHandling
 class MultiSelectDropdown extends Component<Props, State> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     buttonColor: ComponentColor.Default,
     buttonSize: ComponentSize.Small,
     status: ComponentStatus.Default,

ui/src/clockface/components/dropdowns/test/__snapshots__/MultiSelectDropdown.test.tsx.snap

@@ -57,6 +57,7 @@ exports[`MultiSelectDropdown with menu expanded matches snapshot 1`] = `
       <FancyScrollbar
         autoHeight={true}
         autoHide={false}
+        className=""
         hideTracksWhenNotNeeded={true}
         maxHeight={250}
         setScrollTop={[Function]}

ui/src/clockface/components/empty_state/EmptyState.tsx

@@ -15,21 +15,16 @@ import 'src/clockface/components/empty_state/EmptyState.scss'
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
-interface PassedProps {
+interface Props {
   children: JSX.Element | JSX.Element[]
+  size: ComponentSize
+  testID: string
   customClass?: string
 }
 
-interface DefaultProps {
-  size?: ComponentSize
-  testID?: string
-}
-
-type Props = PassedProps & DefaultProps
-
 @ErrorHandling
 class EmptyState extends Component<Props> {
-  public static defaultProps: DefaultProps = {
+  public static defaultProps = {
     size: ComponentSize.Small,
     testID: 'empty-state',
   }

ui/src/clockface/components/form_layout/Form.tsx

@@ -11,17 +11,13 @@ import FormFooter from 'src/clockface/components/form_layout/FormFooter'
 
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
-interface PassedProps {
+interface Props {
   children: JSX.Element[] | JSX.Element
   style?: React.CSSProperties
   className?: string
   onSubmit?: (e: React.FormEvent) => void
+  testID: string
 }
-interface DefaultProps {
-  testID?: string
-}
-
-type Props = PassedProps & DefaultProps
 
 interface BoxProps {
   children: JSX.Element | JSX.Element[]
@@ -36,7 +32,7 @@ class Form extends Component<Props> {
   public static Divider = FormDivider
   public static Footer = FormFooter
 
-  public static defaultProps: DefaultProps = {
+  public static defaultProps = {
     testID: 'form-container',
   }
 

ui/src/clockface/components/form_layout/FormFooter.tsx

@@ -9,7 +9,7 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {
   children: JSX.Element | JSX.Element[]
-  colsXS?: Columns
+  colsXS: Columns
   colsSM?: Columns
   colsMD?: Columns
   colsLG?: Columns
@@ -21,7 +21,7 @@ interface Props {
 
 @ErrorHandling
 class FormFooter extends Component<Props> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     colsXS: Columns.Twelve,
   }
 

ui/src/clockface/components/grid_layout/GridColumn.tsx

@@ -7,7 +7,7 @@ import {Columns} from 'src/clockface/types'
 
 interface Props {
   children: JSX.Element[] | JSX.Element
-  widthXS?: Columns
+  widthXS: Columns
   widthSM?: Columns
   widthMD?: Columns
   widthLG?: Columns
@@ -18,7 +18,7 @@ interface Props {
 }
 
 class GridColumn extends Component<Props> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     widthXS: Columns.Twelve,
   }
 

ui/src/clockface/components/grid_sizer/GridSizer.tsx

@@ -7,10 +7,10 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {
   children?: JSX.Element[]
-  cellWidth?: number
+  cellWidth: number
-  recalculateFlag?: string
+  recalculateFlag: string
-  width?: number
+  width: number
-  wait?: number
+  wait: number
 }
 
 interface State {
@@ -22,7 +22,7 @@ interface State {
 }
 @ErrorHandling
 class GridSizer extends PureComponent<Props, State> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     cellWidth: 150,
     recalculateFlag: '',
     width: null,

ui/src/clockface/components/grid_sizer/ResponsiveGridSizer.tsx

@@ -8,20 +8,15 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 // Styles
 import 'src/clockface/components/grid_sizer/ResponsiveGridSizer.scss'
 
-interface PassedProps {
+interface Props {
   children: JSX.Element[]
   columns: number
+  gutter: number
 }
 
-interface DefaultProps {
-  gutter?: number
-}
-
-type Props = PassedProps & DefaultProps
-
 @ErrorHandling
 class ResponsiveGridSizer extends PureComponent<Props> {
-  public static defaultProps: DefaultProps = {
+  public static defaultProps = {
     gutter: 4,
   }
 

ui/src/clockface/components/index_views/IndexListRow.tsx

@@ -6,7 +6,7 @@ import classnames from 'classnames'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {
-  disabled?: boolean
+  disabled: boolean
   children: JSX.Element[] | JSX.Element
   customClass?: string
   testID: string
@@ -14,7 +14,7 @@ interface Props {
 
 @ErrorHandling
 class IndexListRow extends Component<Props> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     disabled: false,
     testID: 'table-row',
   }

ui/src/clockface/components/index_views/IndexListRowCell.tsx

@@ -10,14 +10,14 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {
   children: any
-  alignment?: Alignment
+  alignment: Alignment
-  revealOnHover?: boolean
+  revealOnHover: boolean
-  testID?: string
+  testID: string
 }
 
 @ErrorHandling
 class IndexListRowCell extends Component<Props> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     alignment: Alignment.Left,
     revealOnHover: false,
     testID: 'table-cell',

ui/src/clockface/components/inputs/TextArea.tsx

@@ -33,24 +33,25 @@ export enum Wrap {
 }
 
 interface Props {
-  autocapitalize?: AutoCapitalize
+  autocapitalize: AutoCapitalize
-  autocomplete?: AutoComplete
+  autocomplete: AutoComplete
-  autofocus?: boolean
+  autofocus: boolean
-  cols?: number
+  cols: number
-  disabled?: boolean
+  disabled: boolean
-  form?: string
+  form: string
-  maxlength?: number
+  maxlength: number
-  minlength?: number
+  minlength: number
-  name?: string
+  name: string
-  placeholder?: string
+  placeholder: string
-  readOnly?: boolean
+  readOnly: boolean
-  required?: boolean
+  required: boolean
-  rows?: number
+  rows: number
-  spellCheck?: boolean
+  spellCheck: boolean
-  wrap?: Wrap.Off
+  wrap: Wrap.Off
   widthPixels?: number
   size?: ComponentSize
   status?: ComponentStatus
+  value: string
   customClass?: string
   onChange?: (s: string) => void
   onBlur?: (e?: ChangeEvent<HTMLTextAreaElement>) => void
@@ -58,11 +59,10 @@ interface Props {
   onKeyPress?: (e: KeyboardEvent<HTMLTextAreaElement>) => void
   onKeyUp?: (e: KeyboardEvent<HTMLTextAreaElement>) => void
   onKeyDown?: (e: KeyboardEvent<HTMLTextAreaElement>) => void
-  value?: string
 }
 
 class TextArea extends Component<Props> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     autocapitalize: AutoCapitalize.Off,
     autocomplete: AutoComplete.Off,
     autofocus: false,

ui/src/clockface/components/label/Label.tsx

@@ -11,29 +11,24 @@ import './Label.scss'
 
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
-interface PassedProps {
+interface Props {
   id: string
   name: string
   description: string
   colorHex: string
   onClick?: (id: string) => void
   onDelete?: (id: string) => void
-}
+  size: ComponentSize
-
+  testID: string
-interface DefaultProps {
-  size?: ComponentSize
-  testID?: string
 }
 
 interface State {
   isMouseOver: boolean
 }
 
-type Props = PassedProps & DefaultProps
-
 @ErrorHandling
 class Label extends Component<Props, State> {
-  public static defaultProps: DefaultProps = {
+  public static defaultProps = {
     size: ComponentSize.ExtraSmall,
     testID: 'label--pill',
   }

ui/src/clockface/components/overlays/OverlayContainer.tsx

@@ -3,12 +3,12 @@ import classnames from 'classnames'
 
 interface Props {
   children: ReactNode
-  maxWidth?: number
+  maxWidth: number
   customClass?: string
 }
 
 class OverlayContainer extends Component<Props> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     maxWidth: 800,
   }
 

ui/src/clockface/components/radio_buttons/RadioButton.tsx

@@ -11,17 +11,18 @@ interface Props {
   value: any
   children: JSX.Element | string | number
   onClick: (value: any) => void
-  disabled?: boolean
+  disabled: boolean
   titleText: string
-  disabledTitleText?: string
+  disabledTitleText: string
-  testID?: string
+  testID: string
 }
 
 @ErrorHandling
 class RadioButton extends Component<Props> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     disabled: false,
     disabledTitleText: 'This option is disabled',
+    titleText: '',
     testID: 'radio-button',
   }
 

ui/src/clockface/components/radio_buttons/RadioButtons.tsx

@@ -17,14 +17,14 @@ import './RadioButtons.scss'
 interface Props {
   children: JSX.Element[]
   customClass?: string
-  color?: ComponentColor
+  color: ComponentColor
-  size?: ComponentSize
+  size: ComponentSize
-  shape?: ButtonShape
+  shape: ButtonShape
 }
 
 @ErrorHandling
 class Radio extends Component<Props> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     color: ComponentColor.Primary,
     size: ComponentSize.Small,
     shape: ButtonShape.Default,

ui/src/clockface/components/resource_list/ResourceCard.tsx

@@ -7,27 +7,22 @@ import classnames from 'classnames'
 // Constants
 import {UPDATED_AT_TIME_FORMAT} from 'src/dashboards/constants'
 
-interface PassedProps {
+interface Props {
   name: () => JSX.Element
   updatedAt?: string
   owner?: {id: string; name: string}
   children?: JSX.Element[] | JSX.Element
   disabled?: boolean
+  testID: string
+  description: () => JSX.Element
+  labels: () => JSX.Element
+  metaData: () => JSX.Element[]
+  contextMenu: () => JSX.Element
+  toggle: () => JSX.Element
 }
 
-interface DefaultProps {
-  testID?: string
-  description?: () => JSX.Element
-  labels?: () => JSX.Element
-  metaData?: () => JSX.Element[]
-  contextMenu?: () => JSX.Element
-  toggle?: () => JSX.Element
-}
-
-type Props = PassedProps & DefaultProps
-
 export default class ResourceListCard extends PureComponent<Props> {
-  public static defaultProps: DefaultProps = {
+  public static defaultProps = {
     testID: 'resource-card',
     description: () => null,
     labels: () => null,

ui/src/clockface/components/resource_list/ResourceName.tsx

@@ -16,23 +16,18 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 // Styles
 import 'src/clockface/components/resource_list/ResourceName.scss'
 
-interface PassedProps {
+interface Props {
   onUpdate: (name: string) => void
   name: string
   onClick?: (e: MouseEvent<HTMLAnchorElement>) => void
   placeholder?: string
   noNameString: string
+  parentTestID: string
+  buttonTestID: string
+  inputTestID: string
+  hrefValue: string
 }
 
-interface DefaultProps {
-  parentTestID?: string
-  buttonTestID?: string
-  inputTestID?: string
-  hrefValue?: string
-}
-
-type Props = PassedProps & DefaultProps
-
 interface State {
   isEditing: boolean
   workingName: string
@@ -41,7 +36,7 @@ interface State {
 
 @ErrorHandling
 class ResourceName extends Component<Props, State> {
-  public static defaultProps: DefaultProps = {
+  public static defaultProps = {
     parentTestID: 'resource-name',
     buttonTestID: 'resource-name--button',
     inputTestID: 'resource-name--input',

ui/src/clockface/components/wizard/WizardOverlay.tsx

@@ -10,13 +10,13 @@ interface Props {
   children: any
   visible: boolean
   title: string
-  maxWidth?: number
+  maxWidth: number
   onDismiss: () => void
 }
 
 @ErrorHandling
 class WizardOverlay extends PureComponent<Props> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     maxWidth: 1200,
   }
 

ui/src/dashboards/components/DashboardHeader.tsx

@@ -25,11 +25,7 @@ import * as AppActions from 'src/types/actions/app'
 import * as QueriesModels from 'src/types/queries'
 import {Dashboard} from '@influxdata/influx'
 
-interface DefaultProps {
+interface Props {
-  zoomedTimeRange: QueriesModels.TimeRange
-}
-
-interface Props extends DefaultProps {
   activeDashboard: string
   dashboard: Dashboard
   timeRange: QueriesModels.TimeRange
@@ -44,10 +40,11 @@ interface Props extends DefaultProps {
   isShowingVariablesControlBar: boolean
   isHidden: boolean
   onAddNote: () => void
+  zoomedTimeRange: QueriesModels.TimeRange
 }
 
 export default class DashboardHeader extends Component<Props> {
-  public static defaultProps: DefaultProps = {
+  public static defaultProps = {
     zoomedTimeRange: {
       upper: null,
       lower: null,

ui/src/dashboards/constants/cellEditor.ts

@@ -1,7 +1,6 @@
 import {DEFAULT_TABLE_OPTIONS} from 'src/dashboards/constants'
 import {stringifyColorValues} from 'src/shared/constants/colorOperations'
-import {ViewType, Axis, Axes} from 'src/types/dashboards'
+import {ViewType, Axis, Axes, Color, Base, Scale} from 'src/types'
-import {Color} from 'src/types/colors'
 
 export const initializeOptions = (type: ViewType) => {
   switch (type) {
@@ -13,10 +12,10 @@ export const initializeOptions = (type: ViewType) => {
 }
 
 export const AXES_SCALE_OPTIONS = {
-  LINEAR: 'linear',
+  LINEAR: Scale.Linear,
-  LOG: 'log',
+  LOG: Scale.Log,
-  BASE_2: '2',
+  BASE_2: Base.Two,
-  BASE_10: '10',
+  BASE_10: Base.Ten,
 }
 
 type DefaultAxis = Pick<Axis, Exclude<keyof Axis, 'bounds'>>
@@ -31,7 +30,7 @@ export const DEFAULT_AXIS: DefaultAxis = {
 
 export const FULL_DEFAULT_AXIS: Axis = {
   ...DEFAULT_AXIS,
-  bounds: ['', ''],
+  bounds: ['', ''] as [string, string],
 }
 
 export const DEFAULT_AXES: Axes = {

ui/src/dashboards/resources.ts

@@ -12,6 +12,8 @@ import {
   SourceLinks,
   TimeRange,
   QueryConfig,
+  Scale,
+  Base,
 } from 'src/types'
 
 export const dashboard: Dashboard = {
@@ -131,16 +133,16 @@ export const axes: Axes = {
     label: '',
     prefix: '',
     suffix: '',
-    base: '10',
+    base: Base.Ten,
-    scale: 'linear',
+    scale: Scale.Linear,
   },
   y: {
     bounds: ['', ''],
     label: '',
     prefix: '',
     suffix: '',
-    base: '10',
+    base: Base.Ten,
-    scale: 'linear',
+    scale: Scale.Linear,
   },
 }
 

ui/src/dataExplorer/components/SaveAsOverlay.tsx

@@ -33,6 +33,7 @@ class SaveAsOverlay extends PureComponent<WithRouterProps, State> {
             <div className="save-as--options">
               <Radio>
                 <Radio.Button
+                  id="save-as-dashboard"
                   active={saveAsOption === SaveAsOption.Dashboard}
                   value={SaveAsOption.Dashboard}
                   onClick={this.handleSetSaveAsOption}
@@ -41,6 +42,7 @@ class SaveAsOverlay extends PureComponent<WithRouterProps, State> {
                   Dashboard Cell
                 </Radio.Button>
                 <Radio.Button
+                  id="save-as-task"
                   active={saveAsOption === SaveAsOption.Task}
                   value={SaveAsOption.Task}
                   onClick={this.handleSetSaveAsOption}
@@ -49,6 +51,7 @@ class SaveAsOverlay extends PureComponent<WithRouterProps, State> {
                   Task
                 </Radio.Button>
                 <Radio.Button
+                  id="save-as-variable"
                   active={saveAsOption === SaveAsOption.Variable}
                   value={SaveAsOption.Variable}
                   onClick={this.handleSetSaveAsOption}

ui/src/dataLoaders/components/lineProtocolWizard/configure/__snapshots__/LineProtocol.test.tsx.snap

@@ -13,6 +13,7 @@ exports[`LineProtocol rendering renders! 1`] = `
       <FancyScrollbar
         autoHeight={false}
         autoHide={false}
+        className=""
         hideTracksWhenNotNeeded={true}
         maxHeight={null}
         setScrollTop={[Function]}

ui/src/dataLoaders/components/side_bar/__snapshots__/SideBar.test.tsx.snap

@@ -15,6 +15,7 @@ exports[`SideBar rendering renders with children, and renders its children 1`] =
     <FancyScrollbar
       autoHeight={false}
       autoHide={false}
+      className=""
       hideTracksWhenNotNeeded={true}
       maxHeight={null}
       setScrollTop={[Function]}
@@ -60,6 +61,7 @@ exports[`SideBar rendering renders with no children 1`] = `
     <FancyScrollbar
       autoHeight={false}
       autoHide={false}
+      className=""
       hideTracksWhenNotNeeded={true}
       maxHeight={null}
       setScrollTop={[Function]}

ui/src/onboarding/components/__snapshots__/AdminStep.test.tsx.snap

@@ -13,6 +13,7 @@ exports[`Onboarding.Components.AdminStep renders 1`] = `
       <FancyScrollbar
         autoHeight={false}
         autoHide={false}
+        className=""
         hideTracksWhenNotNeeded={true}
         maxHeight={null}
         setScrollTop={[Function]}

ui/src/onboarding/components/__snapshots__/CompletionStep.test.tsx.snap

@@ -10,6 +10,7 @@ exports[`Onboarding.Components.CompletionStep renders 1`] = `
     <FancyScrollbar
       autoHeight={false}
       autoHide={false}
+      className=""
       hideTracksWhenNotNeeded={true}
       maxHeight={null}
       setScrollTop={[Function]}

ui/src/organizations/components/Retention.tsx

@@ -31,6 +31,7 @@ export default class Retention extends PureComponent<Props> {
       <>
         <Radio shape={ButtonShape.StretchToFit} customClass="retention--radio">
           <Radio.Button
+            id="never"
             active={type === null}
             onClick={this.handleRadioClick}
             value={null}
@@ -38,6 +39,7 @@ export default class Retention extends PureComponent<Props> {
             Never
           </Radio.Button>
           <Radio.Button
+            id="intervals"
             active={type === BucketRetentionRules.TypeEnum.Expire}
             onClick={this.handleRadioClick}
             value={BucketRetentionRules.TypeEnum.Expire}

ui/src/pageLayout/components/PageHeader.tsx

@@ -13,12 +13,12 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 interface Props {
   children: JSX.Element[]
   fullWidth: boolean
-  inPresentationMode?: boolean
+  inPresentationMode: boolean
 }
 
 @ErrorHandling
 class PageHeader extends Component<Props> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     inPresentationMode: false,
   }
 

ui/src/pageLayout/components/PageHeaderCenter.tsx

@@ -12,12 +12,12 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {
   children: JSX.Element[] | JSX.Element | string | number
-  widthPixels?: number
+  widthPixels: number
 }
 
 @ErrorHandling
 class PageHeaderCenter extends Component<Props> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     widthPixels: DEFAULT_PAGE_HEADER_CENTER_WIDTH,
   }
 

ui/src/pageLayout/components/PageHeaderLeft.tsx

@@ -9,12 +9,12 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {
   children: JSX.Element[] | JSX.Element | string | number
-  offsetPixels?: number
+  offsetPixels: number
 }
 
 @ErrorHandling
 class PageHeaderLeft extends Component<Props> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     offsetPixels: DEFAULT_OFFSET,
   }
 

ui/src/pageLayout/components/PageHeaderRight.tsx

@@ -9,12 +9,12 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {
   children?: JSX.Element[] | JSX.Element | string | number
-  offsetPixels?: number
+  offsetPixels: number
 }
 
 @ErrorHandling
 class PageHeaderRight extends Component<Props> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     offsetPixels: DEFAULT_OFFSET,
   }
 

ui/src/shared/components/CodeSnippet.tsx

@@ -12,19 +12,14 @@ import CopyButton from 'src/shared/components/CopyButton'
 // Styles
 import 'src/shared/components/CodeSnippet.scss'
 
-export interface PassedProps {
+export interface Props {
   copyText: string
+  label: string
 }
 
-interface DefaultProps {
-  label?: string
-}
-
-type Props = PassedProps & DefaultProps
-
 @ErrorHandling
 class CodeSnippet extends PureComponent<Props> {
-  public static defaultProps: DefaultProps = {
+  public static defaultProps = {
     label: 'Code Snippet',
   }
 

ui/src/shared/components/ConfirmButton.tsx

@@ -6,12 +6,12 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 type Position = 'top' | 'bottom' | 'left' | 'right'
 
 interface Props {
-  text?: string
+  confirmText: string
-  confirmText?: string
   confirmAction: () => void
-  type?: string
+  type: string
-  size?: string
+  size: string
-  square?: boolean
+  square: boolean
+  text?: string
   icon?: string
   disabled?: boolean
   customClass?: string
@@ -24,7 +24,7 @@ interface State {
 
 @ErrorHandling
 class ConfirmButton extends PureComponent<Props, State> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     confirmText: 'Confirm',
     type: 'btn-default',
     size: 'btn-sm',

ui/src/shared/components/CopyButton.tsx

@@ -18,11 +18,6 @@ import {notify as notifyAction} from 'src/shared/actions/notifications'
 interface OwnProps {
   textToCopy: string
   contentName: string // if copying a script, its "script"
-  size?: ComponentSize
-  color?: ComponentColor
-}
-
-interface DefaultProps {
   size: ComponentSize
   color: ComponentColor
 }
@@ -34,10 +29,11 @@ interface DispatchProps {
 type Props = OwnProps & DispatchProps
 
 class CopyButton extends PureComponent<Props> {
-  public static defaultProps: DefaultProps = {
+  public static defaultProps = {
     size: ComponentSize.ExtraSmall,
     color: ComponentColor.Secondary,
   }
+
   public render() {
     const {textToCopy, color, size} = this.props
 

ui/src/shared/components/DragAndDrop.tsx

@@ -11,10 +11,10 @@ interface Props {
   fileTypesToAccept?: string
   containerClass?: string
   handleSubmit: (uploadContent: string | ArrayBuffer, fileName: string) => void
-  submitText?: string
+  submitText: string
-  submitOnDrop?: boolean
+  submitOnDrop: boolean
-  submitOnUpload?: boolean
+  submitOnUpload: boolean
-  compact?: boolean
+  compact: boolean
   onCancel?: () => void
 }
 
@@ -27,7 +27,7 @@ interface State {
 
 let dragCounter = 0
 class DragAndDrop extends PureComponent<Props, State> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     submitText: 'Write this File',
     submitOnDrop: false,
     submitOnUpload: false,

ui/src/shared/components/EditableName.tsx

@@ -14,21 +14,16 @@ import {RemoteDataState} from 'src/types'
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
-interface PassedProps {
+interface Props {
   onUpdate: (name: string) => void
   name: string
+  noNameString: string
+  hrefValue: string
+  testID: string
   onEditName?: (e?: MouseEvent<HTMLAnchorElement>) => void
   placeholder?: string
-  noNameString: string
 }
 
-interface DefaultProps {
-  hrefValue?: string
-  testID?: string
-}
-
-type Props = PassedProps & DefaultProps
-
 interface State {
   isEditing: boolean
   workingName: string
@@ -37,7 +32,7 @@ interface State {
 
 @ErrorHandling
 class EditableName extends Component<Props, State> {
-  public static defaultProps: DefaultProps = {
+  public static defaultProps = {
     hrefValue: '#',
     testID: 'editable-name',
   }

ui/src/shared/components/ExportOverlay.tsx

@@ -32,16 +32,13 @@ import {DocumentCreate} from '@influxdata/influx'
 import {ComponentColor, ComponentSize} from '@influxdata/clockface'
 import {RemoteDataState} from 'src/types'
 
-interface OwnProps extends DefaultProps {
+interface OwnProps {
   onDismissOverlay: () => void
   resource: DocumentCreate
   resourceName: string
   orgID: string
   status: RemoteDataState
-}
+  isVisible: boolean
-
-interface DefaultProps {
-  isVisible?: boolean
 }
 
 interface DispatchProps {
@@ -51,7 +48,7 @@ interface DispatchProps {
 type Props = OwnProps & DispatchProps
 
 class ExportOverlay extends PureComponent<Props> {
-  public static defaultProps: DefaultProps = {
+  public static defaultProps = {
     isVisible: true,
   }
 

ui/src/shared/components/InputClickToEdit.tsx

@@ -3,12 +3,12 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {
   wrapperClass: string
+  tabIndex: number
   value?: string
   onChange?: (value: string) => void
   onKeyDown?: (value: string) => void
   onBlur: (value: string) => void
   disabled?: boolean
-  tabIndex?: number
   placeholder?: string
   appearAsNormalInput?: boolean
 }
@@ -20,7 +20,7 @@ interface State {
 
 @ErrorHandling
 class InputClickToEdit extends PureComponent<Props, State> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     tabIndex: 0,
   }
 

ui/src/shared/components/LoadingDots.tsx

@@ -1,24 +0,0 @@
-import React, {Component} from 'react'
-
-interface Props {
-  className?: string
-}
-class LoadingDots extends Component<Props> {
-  public static defaultProps: Partial<Props> = {
-    className: '',
-  }
-
-  public render() {
-    const {className} = this.props
-
-    return (
-      <div className={`loading-dots ${className}`}>
-        <div />
-        <div />
-        <div />
-      </div>
-    )
-  }
-}
-
-export default LoadingDots

ui/src/shared/components/MenuTooltipButton.tsx

@@ -12,7 +12,7 @@ export interface MenuItem {
 }
 
 interface Props {
-  theme?: string
+  theme: string
   icon: string
   informParent: () => void
   menuItems: MenuItem[]
@@ -24,7 +24,7 @@ interface State {
 
 @ErrorHandling
 export default class MenuTooltipButton extends Component<Props, State> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     theme: 'default',
   }
 

ui/src/shared/components/RefreshingView.tsx

@@ -44,7 +44,7 @@ interface State {
 type Props = OwnProps & StateProps
 
 class RefreshingView extends PureComponent<Props, State> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     inView: true,
     manualRefresh: 0,
   }

ui/src/shared/components/SearchableDropdown.tsx

@@ -18,11 +18,12 @@ interface Props extends DropdownProps {
   searchTerm?: string
   searchPlaceholder?: string
   onChangeSearchTerm?: (value: string) => void
+  buttonSize: ComponentSize
 }
 
 @ErrorHandling
 export default class SearchableDropdown extends Component<Props> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     buttonSize: ComponentSize.Small,
   }
 

ui/src/shared/components/dropdown_auto_refresh/AutoRefreshDropdown.tsx

@@ -17,13 +17,13 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 interface Props {
   selected: number
   onChoose: (milliseconds: number) => void
-  showManualRefresh?: boolean
+  showManualRefresh: boolean
   onManualRefresh?: () => void
 }
 
 @ErrorHandling
 class AutoRefreshDropdown extends Component<Props> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     showManualRefresh: true,
   }
 

ui/src/shared/components/dygraph/Dygraph.tsx

@@ -19,22 +19,15 @@ import {withHoverTime, InjectedHoverProps} from 'src/dashboards/utils/hoverTime'
 // Constants
 import {LINE_COLORS, LABEL_WIDTH, CHAR_PIXELS} from 'src/shared/graphs/helpers'
 import {getLineColorsHexes} from 'src/shared/constants/graphColorPalettes'
-import {
+import {DEFAULT_AXIS} from 'src/dashboards/constants/cellEditor'
-  AXES_SCALE_OPTIONS,
-  DEFAULT_AXIS,
-} from 'src/dashboards/constants/cellEditor'
 
 // Types
-import {Axes, TimeRange} from 'src/types'
+import {Axes, TimeRange, Base, Scale, DashboardQuery, Color} from 'src/types'
 import {DygraphData, Options, SeriesLegendData} from 'src/external/dygraph'
-import {Color} from 'src/types/colors'
-import {DashboardQuery} from 'src/types/dashboards'
 import {SeriesDescription} from 'src/shared/parsing/flux/spreadTables'
 
 const getRangeMemoizedY = memoizeOne(getRange)
 
-const {LOG, BASE_10, BASE_2} = AXES_SCALE_OPTIONS
-
 const DEFAULT_DYGRAPH_OPTIONS = {
   yRangePad: 10,
   labelsKMB: true,
@@ -55,20 +48,18 @@ interface LegendData {
 }
 
 interface OwnProps {
+  axes: Axes
   viewID: string
-  queries?: DashboardQuery[]
-  timeSeries: DygraphData
-  labels: string[]
-  seriesDescriptions: SeriesDescription[]
-  options?: Partial<Options>
   colors: Color[]
-  timeRange?: TimeRange
+  labels: string[]
-  axes?: Axes
+  timeSeries: DygraphData
-  isGraphFilled?: boolean
+  options: Partial<Options>
-  onZoom?: (timeRange: TimeRange) => void
+  seriesDescriptions: SeriesDescription[]
+  onZoom: (timeRange: TimeRange) => void
   mode?: string
-  underlayCallback?: () => void
+  timeRange?: TimeRange
   children?: JSX.Element
+  queries?: DashboardQuery[]
 }
 
 type Props = OwnProps & InjectedHoverProps
@@ -85,24 +76,23 @@ interface State {
 
 @ErrorHandling
 class Dygraph extends Component<Props, State> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
+    onZoom: () => {},
     axes: {
       x: {
-        bounds: [null, null],
+        prefix: '',
+        suffix: '',
+        base: Base.Ten,
+        scale: Scale.Linear,
+        label: '',
         ...DEFAULT_AXIS,
+        bounds: [null, null] as [null, null],
       },
       y: {
-        bounds: [null, null],
-        ...DEFAULT_AXIS,
-      },
-      y2: {
-        bounds: undefined,
         ...DEFAULT_AXIS,
+        bounds: [null, null] as [null, null],
       },
     },
-    isGraphFilled: true,
-    onZoom: () => {},
-    underlayCallback: () => {},
     options: {},
   }
 
@@ -244,7 +234,7 @@ class Dygraph extends Component<Props, State> {
     const [min, max] = range
 
     // Bug in Dygraph calculates a negative range for logscale when min range is 0
-    if (y.scale === LOG && min <= 0) {
+    if (y.scale === Scale.Log && min <= 0) {
       range = [0.01, max]
     }
 
@@ -282,8 +272,6 @@ class Dygraph extends Component<Props, State> {
     const {
       labels,
       axes: {y},
-      underlayCallback,
-      isGraphFilled,
       options: passedOptions,
     } = this.props
 
@@ -298,18 +286,17 @@ class Dygraph extends Component<Props, State> {
 
     const options = {
       labels,
-      underlayCallback,
       colors,
       file: timeSeries as any,
       zoomCallback: handleZoom,
-      fillGraph: isGraphFilled,
+      fillGraph: true,
-      logscale: y.scale === LOG,
+      logscale: y.scale === Scale.Log,
       ylabel: yLabel,
       axes: {
         y: {
           axisLabelWidth: labelWidth,
-          labelsKMB: y.base === BASE_10,
+          labelsKMB: y.base === Base.Ten,
-          labelsKMG2: y.base === BASE_2,
+          labelsKMG2: y.base === Base.Two,
           axisLabelFormatter: formatYVal,
           valueRange: this.getYRange(timeSeries),
         },
@@ -400,4 +387,4 @@ class Dygraph extends Component<Props, State> {
   }
 }
 
-export default withHoverTime(Dygraph)
+export default withHoverTime<OwnProps>(Dygraph)

ui/src/shared/components/fancy_scrollbar/FancyScrollbar.tsx

@@ -7,17 +7,14 @@ import {Scrollbars} from '@influxdata/react-custom-scrollbars'
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
-interface DefaultProps {
+interface Props {
+  className: string
+  maxHeight: number
   autoHide: boolean
   autoHeight: boolean
-  maxHeight: number
-  setScrollTop: (value: React.MouseEvent<HTMLElement>) => void
   style: React.CSSProperties
-  hideTracksWhenNotNeeded?: boolean
+  hideTracksWhenNotNeeded: boolean
-}
+  setScrollTop: (value: React.MouseEvent<HTMLElement>) => void
-
-interface Props {
-  className?: string
   scrollTop?: number
   scrollLeft?: number
   thumbStartColor?: string
@@ -25,11 +22,12 @@ interface Props {
 }
 
 @ErrorHandling
-class FancyScrollbar extends Component<Props & Partial<DefaultProps>> {
+class FancyScrollbar extends Component<Props> {
-  public static defaultProps: DefaultProps = {
+  public static defaultProps = {
+    className: '',
     autoHide: true,
-    hideTracksWhenNotNeeded: true,
     autoHeight: false,
+    hideTracksWhenNotNeeded: true,
     maxHeight: null,
     style: {},
     setScrollTop: () => {},

ui/src/shared/components/notifications/Notifications.tsx

@@ -4,13 +4,14 @@ import {Notification as NotificationType} from 'src/types/notifications'
 import Notification from 'src/shared/components/notifications/Notification'
 
 interface Props {
-  inPresentationMode?: boolean
   notifications: NotificationType[]
+  inPresentationMode: boolean
 }
 
 class Notifications extends PureComponent<Props> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     inPresentationMode: false,
+    notifications: [],
   }
 
   public render() {

ui/src/shared/components/permissionsWidget/PermissionsWidget.tsx

@@ -19,12 +19,12 @@ export enum PermissionsWidgetSelection {
 interface Props {
   children: JSX.Element[] | JSX.Element
   mode: PermissionsWidgetMode
-  heightPixels?: number
+  heightPixels: number
   className?: string
 }
 
 class PermissionsWidget extends Component<Props> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     heightPixels: 500,
   }
 

ui/src/shared/components/search_widget/SearchWidget.tsx

@@ -13,8 +13,8 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {
   onSearch: (searchTerm: string) => void
-  widthPixels?: number
+  widthPixels: number
-  placeholderText?: string
+  placeholderText: string
   searchTerm: string
 }
 
@@ -24,7 +24,7 @@ interface State {
 
 @ErrorHandling
 class SearchWidget extends Component<Props, State> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     widthPixels: 440,
     placeholderText: 'Search...',
     searchTerm: '',

ui/src/shared/components/threesizer/Division.tsx

@@ -17,15 +17,15 @@ import {
 const NOOP = () => {}
 
 interface Props {
-  name?: string
-  handleDisplay?: string
-  style?: CSSProperties
   handlePixels: number
   id: string
   size: number
+  name: string
   offset: number
   draggable: boolean
   orientation: string
+  handleDisplay: string
+  style: CSSProperties
   activeHandleID: string
   headerOrientation: string
   render: (visibility: string, pixels: number) => ReactElement<any>
@@ -37,7 +37,7 @@ interface Props {
 }
 
 class Division extends PureComponent<Props> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     name: '',
     handleDisplay: 'visible',
     style: {},

ui/src/shared/components/threesizer/Threesizer.tsx

@@ -48,12 +48,12 @@ interface DivisionState extends DivisionProps {
 interface Props {
   divisions: DivisionProps[]
   orientation: string
-  containerClass?: string
+  containerClass: string
 }
 
 @ErrorHandling
 class Threesizer extends Component<Props, State> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     orientation: HANDLE_HORIZONTAL,
     containerClass: '',
   }

ui/src/shared/utils/view.ts

@@ -7,7 +7,7 @@ import {
 } from 'src/shared/constants/thresholds'
 
 // Types
-import {ViewType, ViewShape} from 'src/types'
+import {ViewType, ViewShape, Base, Scale} from 'src/types'
 import {HistogramPosition} from 'src/minard'
 import {
   XYView,
@@ -56,24 +56,16 @@ function defaultLineViewProperties() {
         label: '',
         prefix: '',
         suffix: '',
-        base: '10',
+        base: Base.Ten,
-        scale: 'linear',
+        scale: Scale.Linear,
       },
       y: {
         bounds: ['', ''] as [string, string],
         label: '',
         prefix: '',
         suffix: '',
-        base: '10',
+        base: Base.Ten,
-        scale: 'linear',
+        scale: Scale.Linear,
-      },
-      y2: {
-        bounds: ['', ''] as [string, string],
-        label: '',
-        prefix: '',
-        suffix: '',
-        base: '10',
-        scale: 'linear',
       },
     },
   }

ui/src/tasks/components/TaskForm.tsx

@@ -36,15 +36,15 @@ import {TaskOptions, TaskSchedule} from 'src/utils/taskOptionsToFluxScript'
 interface Props {
   orgs: Organization[]
   taskOptions: TaskOptions
+  isInOverlay: boolean
+  canSubmit: boolean
+  onSubmit: () => void
+  dismiss: () => void
   onChangeScheduleType: (schedule: TaskSchedule) => void
   onChangeInput: (e: ChangeEvent<HTMLInputElement>) => void
   onChangeTaskOrgID: (orgID: string) => void
   onChangeToOrgName: (orgName: string) => void
   onChangeToBucketName: (bucketName: string) => void
-  isInOverlay?: boolean
-  onSubmit?: () => void
-  canSubmit?: boolean
-  dismiss?: () => void
 }
 
 interface State {
@@ -54,12 +54,15 @@ interface State {
 const getBuckets = (org: Organization) => client.buckets.getAllByOrg(org.name)
 
 export default class TaskForm extends PureComponent<Props, State> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     isInOverlay: false,
-    onSubmit: () => {},
     canSubmit: true,
+    onSubmit: () => {},
     dismiss: () => {},
+    onChangeToBucketName: () => {},
+    onChangeToOrgName: () => {},
   }
+
   constructor(props: Props) {
     super(props)
 

ui/src/tasks/containers/TaskPage.tsx

@@ -88,8 +88,8 @@ class TaskPage extends PureComponent<
             <div className="task-form--options">
               <TaskForm
                 orgs={orgs}
-                canSubmit={this.isFormValid}
                 taskOptions={taskOptions}
+                canSubmit={this.isFormValid}
                 onChangeInput={this.handleChangeInput}
                 onChangeScheduleType={this.handleChangeScheduleType}
                 onChangeTaskOrgID={this.handleChangeTaskOrgID}

ui/src/timeMachine/components/TagSelector.tsx

@@ -113,12 +113,12 @@ class TagSelector extends PureComponent<Props> {
         >
           <SearchableDropdown
             searchTerm={keysSearchTerm}
+            titleText="No Tags Found"
             searchPlaceholder="Search keys..."
-            onChangeSearchTerm={this.handleKeysSearch}
             selectedID={selectedKey}
             onChange={this.handleSelectTag}
             status={toComponentStatus(keysStatus)}
-            titleText="No Tags Found"
+            onChangeSearchTerm={this.handleKeysSearch}
             testID="tag-selector--dropdown"
             buttonTestID="tag-selector--dropdown-button"
           >

ui/src/timeMachine/components/ToolbarTab.tsx

@@ -1,20 +1,15 @@
 // Libraries
 import React, {PureComponent} from 'react'
 
-interface PassedProps {
+interface Props {
   onSetActive: () => void
   name: string
   active: boolean
+  testID: string
 }
 
-interface DefaultProps {
-  testID?: string
-}
-
-type Props = PassedProps & DefaultProps
-
 export default class ToolbarTab extends PureComponent<Props> {
-  public static defaultProps: DefaultProps = {
+  public static defaultProps = {
     testID: 'toolbar-tab',
   }
 

ui/src/timeMachine/components/fluxFunctionsToolbar/ToolbarFunction.tsx

@@ -11,7 +11,7 @@ import {FluxToolbarFunction} from 'src/types/shared'
 interface Props {
   func: FluxToolbarFunction
   onClickFunction: (name: string, example: string) => void
-  testID?: string
+  testID: string
 }
 
 interface State {
@@ -19,7 +19,7 @@ interface State {
 }
 
 class ToolbarFunction extends PureComponent<Props, State> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     testID: 'toolbar-function',
   }
 

ui/src/timeMachine/components/view_options/ThresholdItem.tsx

@@ -22,11 +22,11 @@ import {SeverityColor, SeverityColorOptions} from 'src/types/logs'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {
-  label?: string
   threshold: Color
-  isBase?: boolean
+  label: string
-  isDeletable?: boolean
+  isBase: boolean
-  disableColor?: boolean
+  isDeletable: boolean
+  disableColor: boolean
   onChooseColor: (threshold: Color) => void
   onValidateColorValue: (threshold: Color, targetValue: number) => boolean
   onUpdateColorValue: (threshold: Color, targetValue: number) => void
@@ -40,7 +40,7 @@ interface State {
 
 @ErrorHandling
 class Threshold extends PureComponent<Props, State> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
     label: 'Value is <=',
     disableColor: false,
     isDeletable: true,

ui/src/types/dashboards.ts

@@ -7,13 +7,23 @@ import {
   Cell as CellAPI,
 } from '@influxdata/influx'
 
+export enum Scale {
+  Linear = 'linear',
+  Log = 'log',
+}
+
+export enum Base {
+  Two = '2',
+  Ten = '10',
+}
+
 export interface Axis {
   label: string
   prefix: string
   suffix: string
-  base: string
+  base: Base
-  scale: string
+  scale: Scale
-  bounds: [string, string]
+  bounds: [string, string] | [null, null]
 }
 
 export type TimeSeriesValue = string | number | null | undefined