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
2019-03-27 17:12:54 -07:00 · 2019-03-27 17:12:54 -07:00 · b9c933a429
parent 0cfc048c7b
commit b9c933a429
70 changed files with 293 additions and 374 deletions
--- a/ui/src/clockface/components/card_select/CardSelectCard.tsx
+++ b/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,
  }
--- a/ui/src/clockface/components/card_select/ProtoboardIcon.tsx
+++ b/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: '',
  }

--- a/ui/src/clockface/components/color_picker/ColorPicker.tsx
+++ b/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',
  }
--- a/ui/src/clockface/components/confirmation_button/ConfirmationButton.tsx
+++ b/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,
--- a/ui/src/clockface/components/context_menu/Context.tsx
+++ b/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,
  }

--- a/ui/src/clockface/components/context_menu/ContextMenu.tsx
+++ b/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: '',
--- a/ui/src/clockface/components/context_menu/ContextMenuItem.tsx
+++ b/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 = {
-    description: null,
+  public static defaultProps = {
+    description: '',
    testID: 'context-menu-item',
  }

--- a/ui/src/clockface/components/draggable_resizer/DraggableResizerPanel.tsx
+++ b/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,
  }

--- a/ui/src/clockface/components/dropdowns/Dropdown.tsx
+++ b/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
-  buttonTestID: string
+  testID?: 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
--- a/ui/src/clockface/components/dropdowns/DropdownButton.tsx
+++ b/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
-  active?: boolean
-  color?: ComponentColor
-  size?: ComponentSize
+  status: ComponentStatus
+  color: ComponentColor
+  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,
--- a/ui/src/clockface/components/dropdowns/DropdownDivider.tsx
+++ b/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: '',
  }

--- a/ui/src/clockface/components/dropdowns/DropdownItem.tsx
+++ b/ui/src/clockface/components/dropdowns/DropdownItem.tsx
@ -11,15 +11,15 @@ interface Props {
  id: string
  children: DropdownChild
  value: any
-  selected?: boolean
-  checkbox?: boolean
+  selected: 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,
  }
--- a/ui/src/clockface/components/dropdowns/MultiSelectDropdown.tsx
+++ b/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
-  buttonSize?: ComponentSize
-  menuColor?: DropdownMenuColors
+  buttonColor: ComponentColor
+  buttonSize: ComponentSize
+  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,
--- a/ui/src/clockface/components/dropdowns/test/snapshots/MultiSelectDropdown.test.tsx.snap
+++ b/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]}
--- a/ui/src/clockface/components/empty_state/EmptyState.tsx
+++ b/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',
  }
--- a/ui/src/clockface/components/form_layout/Form.tsx
+++ b/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',
  }

--- a/ui/src/clockface/components/form_layout/FormFooter.tsx
+++ b/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,
  }

--- a/ui/src/clockface/components/grid_layout/GridColumn.tsx
+++ b/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,
  }

--- a/ui/src/clockface/components/grid_sizer/GridSizer.tsx
+++ b/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
-  recalculateFlag?: string
-  width?: number
-  wait?: number
+  cellWidth: number
+  recalculateFlag: string
+  width: 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,
--- a/ui/src/clockface/components/grid_sizer/ResponsiveGridSizer.tsx
+++ b/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,
  }

--- a/ui/src/clockface/components/index_views/IndexListRow.tsx
+++ b/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',
  }
--- a/ui/src/clockface/components/index_views/IndexListRowCell.tsx
+++ b/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
-  revealOnHover?: boolean
-  testID?: string
+  alignment: Alignment
+  revealOnHover: boolean
+  testID: string
 }

@ErrorHandling
 class IndexListRowCell extends Component<Props> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps = {
    alignment: Alignment.Left,
    revealOnHover: false,
    testID: 'table-cell',
--- a/ui/src/clockface/components/inputs/TextArea.tsx
+++ b/ui/src/clockface/components/inputs/TextArea.tsx
@ -33,24 +33,25 @@ export enum Wrap {
 }

 interface Props {
-  autocapitalize?: AutoCapitalize
-  autocomplete?: AutoComplete
-  autofocus?: boolean
-  cols?: number
-  disabled?: boolean
-  form?: string
-  maxlength?: number
-  minlength?: number
-  name?: string
-  placeholder?: string
-  readOnly?: boolean
-  required?: boolean
-  rows?: number
-  spellCheck?: boolean
-  wrap?: Wrap.Off
+  autocapitalize: AutoCapitalize
+  autocomplete: AutoComplete
+  autofocus: boolean
+  cols: number
+  disabled: boolean
+  form: string
+  maxlength: number
+  minlength: number
+  name: string
+  placeholder: string
+  readOnly: boolean
+  required: boolean
+  rows: number
+  spellCheck: boolean
+  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,
--- a/ui/src/clockface/components/label/Label.tsx
+++ b/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
-}
-
-interface DefaultProps {
-  size?: ComponentSize
-  testID?: string
+  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',
  }
--- a/ui/src/clockface/components/overlays/OverlayContainer.tsx
+++ b/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,
  }

--- a/ui/src/clockface/components/radio_buttons/RadioButton.tsx
+++ b/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
-  testID?: string
+  disabledTitleText: 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',
  }

--- a/ui/src/clockface/components/radio_buttons/RadioButtons.tsx
+++ b/ui/src/clockface/components/radio_buttons/RadioButtons.tsx
@ -17,14 +17,14 @@ import './RadioButtons.scss'
 interface Props {
  children: JSX.Element[]
  customClass?: string
-  color?: ComponentColor
-  size?: ComponentSize
-  shape?: ButtonShape
+  color: ComponentColor
+  size: ComponentSize
+  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,
--- a/ui/src/clockface/components/resource_list/ResourceCard.tsx
+++ b/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,
--- a/ui/src/clockface/components/resource_list/ResourceName.tsx
+++ b/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',
--- a/ui/src/clockface/components/wizard/WizardOverlay.tsx
+++ b/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,
  }

--- a/ui/src/dashboards/components/DashboardHeader.tsx
+++ b/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 {
-  zoomedTimeRange: QueriesModels.TimeRange
-}
-
-interface Props extends DefaultProps {
+interface Props {
  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,
--- a/ui/src/dashboards/constants/cellEditor.ts
+++ b/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 {Color} from 'src/types/colors'
+import {ViewType, Axis, Axes, Color, Base, Scale} from 'src/types'

 export const initializeOptions = (type: ViewType) => {
  switch (type) {
@ -13,10 +12,10 @@ export const initializeOptions = (type: ViewType) => {
 }

 export const AXES_SCALE_OPTIONS = {
-  LINEAR: 'linear',
-  LOG: 'log',
-  BASE_2: '2',
-  BASE_10: '10',
+  LINEAR: Scale.Linear,
+  LOG: Scale.Log,
+  BASE_2: Base.Two,
+  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 = {
--- a/ui/src/dashboards/resources.ts
+++ b/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',
-    scale: 'linear',
+    base: Base.Ten,
+    scale: Scale.Linear,
  },
  y: {
    bounds: ['', ''],
    label: '',
    prefix: '',
    suffix: '',
-    base: '10',
-    scale: 'linear',
+    base: Base.Ten,
+    scale: Scale.Linear,
  },
 }

--- a/ui/src/dataExplorer/components/SaveAsOverlay.tsx
+++ b/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}
--- a/ui/src/dataLoaders/components/lineProtocolWizard/configure/snapshots/LineProtocol.test.tsx.snap
+++ b/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]}
--- a/ui/src/dataLoaders/components/side_bar/snapshots/SideBar.test.tsx.snap
+++ b/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]}
--- a/ui/src/onboarding/components/snapshots/AdminStep.test.tsx.snap
+++ b/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]}
--- a/ui/src/onboarding/components/snapshots/CompletionStep.test.tsx.snap
+++ b/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]}
--- a/ui/src/organizations/components/Retention.tsx
+++ b/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}
--- a/ui/src/pageLayout/components/PageHeader.tsx
+++ b/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,
  }

--- a/ui/src/pageLayout/components/PageHeaderCenter.tsx
+++ b/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,
  }

--- a/ui/src/pageLayout/components/PageHeaderLeft.tsx
+++ b/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,
  }

--- a/ui/src/pageLayout/components/PageHeaderRight.tsx
+++ b/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,
  }

--- a/ui/src/shared/components/CodeSnippet.tsx
+++ b/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',
  }

--- a/ui/src/shared/components/ConfirmButton.tsx
+++ b/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
-  size?: string
-  square?: boolean
+  type: string
+  size: string
+  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',
--- a/ui/src/shared/components/CopyButton.tsx
+++ b/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

--- a/ui/src/shared/components/DragAndDrop.tsx
+++ b/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
-  submitOnDrop?: boolean
-  submitOnUpload?: boolean
-  compact?: boolean
+  submitText: string
+  submitOnDrop: boolean
+  submitOnUpload: 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,
--- a/ui/src/shared/components/EditableName.tsx
+++ b/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',
  }
--- a/ui/src/shared/components/ExportOverlay.tsx
+++ b/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
-}
-
-interface DefaultProps {
-  isVisible?: boolean
+  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,
  }

--- a/ui/src/shared/components/InputClickToEdit.tsx
+++ b/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,
  }

--- a/ui/src/shared/components/LoadingDots.tsx
+++ b/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
--- a/ui/src/shared/components/MenuTooltipButton.tsx
+++ b/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',
  }

--- a/ui/src/shared/components/RefreshingView.tsx
+++ b/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,
  }
--- a/ui/src/shared/components/SearchableDropdown.tsx
+++ b/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,
  }

--- a/ui/src/shared/components/dropdown_auto_refresh/AutoRefreshDropdown.tsx
+++ b/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,
  }

--- a/ui/src/shared/components/dygraph/Dygraph.tsx
+++ b/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 {
-  AXES_SCALE_OPTIONS,
-  DEFAULT_AXIS,
-} from 'src/dashboards/constants/cellEditor'
+import {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
-  axes?: Axes
-  isGraphFilled?: boolean
-  onZoom?: (timeRange: TimeRange) => void
+  labels: string[]
+  timeSeries: DygraphData
+  options: Partial<Options>
+  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,
-      logscale: y.scale === LOG,
+      fillGraph: true,
+      logscale: y.scale === Scale.Log,
      ylabel: yLabel,
      axes: {
        y: {
          axisLabelWidth: labelWidth,
-          labelsKMB: y.base === BASE_10,
-          labelsKMG2: y.base === BASE_2,
+          labelsKMB: y.base === Base.Ten,
+          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)
--- a/ui/src/shared/components/fancy_scrollbar/FancyScrollbar.tsx
+++ b/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
-}
-
-interface Props {
-  className?: string
+  hideTracksWhenNotNeeded: boolean
+  setScrollTop: (value: React.MouseEvent<HTMLElement>) => void
  scrollTop?: number
  scrollLeft?: number
  thumbStartColor?: string
@ -25,11 +22,12 @@ interface Props {
 }

@ErrorHandling
-class FancyScrollbar extends Component<Props & Partial<DefaultProps>> {
-  public static defaultProps: DefaultProps = {
+class FancyScrollbar extends Component<Props> {
+  public static defaultProps = {
+    className: '',
    autoHide: true,
-    hideTracksWhenNotNeeded: true,
    autoHeight: false,
+    hideTracksWhenNotNeeded: true,
    maxHeight: null,
    style: {},
    setScrollTop: () => {},
--- a/ui/src/shared/components/notifications/Notifications.tsx
+++ b/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() {
--- a/ui/src/shared/components/permissionsWidget/PermissionsWidget.tsx
+++ b/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,
  }

--- a/ui/src/shared/components/search_widget/SearchWidget.tsx
+++ b/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
-  placeholderText?: string
+  widthPixels: number
+  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: '',
--- a/ui/src/shared/components/threesizer/Division.tsx
+++ b/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: {},
--- a/ui/src/shared/components/threesizer/Threesizer.tsx
+++ b/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: '',
  }
--- a/ui/src/shared/utils/view.ts
+++ b/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',
-        scale: 'linear',
+        base: Base.Ten,
+        scale: Scale.Linear,
      },
      y: {
        bounds: ['', ''] as [string, string],
        label: '',
        prefix: '',
        suffix: '',
-        base: '10',
-        scale: 'linear',
-      },
-      y2: {
-        bounds: ['', ''] as [string, string],
-        label: '',
-        prefix: '',
-        suffix: '',
-        base: '10',
-        scale: 'linear',
+        base: Base.Ten,
+        scale: Scale.Linear,
      },
    },
  }
--- a/ui/src/tasks/components/TaskForm.tsx
+++ b/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)

--- a/ui/src/tasks/containers/TaskPage.tsx
+++ b/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}
--- a/ui/src/timeMachine/components/TagSelector.tsx
+++ b/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"
          >
--- a/ui/src/timeMachine/components/ToolbarTab.tsx
+++ b/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',
  }

--- a/ui/src/timeMachine/components/fluxFunctionsToolbar/ToolbarFunction.tsx
+++ b/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',
  }

--- a/ui/src/timeMachine/components/view_options/ThresholdItem.tsx
+++ b/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
-  isDeletable?: boolean
-  disableColor?: boolean
+  label: string
+  isBase: 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,
--- a/ui/src/types/dashboards.ts
+++ b/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
-  scale: string
-  bounds: [string, string]
+  base: Base
+  scale: Scale
+  bounds: [string, string] | [null, null]
 }

 export type TimeSeriesValue = string | number | null | undefined