From b9c933a4290946b6d80f99ee3b55dc5652bdf28b Mon Sep 17 00:00:00 2001 From: Andrew Watkins Date: Wed, 27 Mar 2019 17:12:54 -0700 Subject: [PATCH] chore(ui): remove Partial (#12956) * chore(ui): add default props to ThresholdItem * chore(ui): remove Partial pattern * chore(ui): remove Partial pattern from Dygraphs * chore(ui): remove DefaultProp interface * test: update snapshots --- .../components/card_select/CardSelectCard.tsx | 10 +-- .../components/card_select/ProtoboardIcon.tsx | 4 +- .../components/color_picker/ColorPicker.tsx | 13 ++-- .../ConfirmationButton.tsx | 10 +-- .../components/context_menu/Context.tsx | 4 +- .../components/context_menu/ContextMenu.tsx | 17 ++--- .../context_menu/ContextMenuItem.tsx | 17 ++--- .../DraggableResizerPanel.tsx | 4 +- .../components/dropdowns/Dropdown.tsx | 15 +++-- .../components/dropdowns/DropdownButton.tsx | 12 ++-- .../components/dropdowns/DropdownDivider.tsx | 6 +- .../components/dropdowns/DropdownItem.tsx | 6 +- .../dropdowns/MultiSelectDropdown.tsx | 20 +++--- .../MultiSelectDropdown.test.tsx.snap | 1 + .../components/empty_state/EmptyState.tsx | 13 ++-- .../clockface/components/form_layout/Form.tsx | 10 +-- .../components/form_layout/FormFooter.tsx | 4 +- .../components/grid_layout/GridColumn.tsx | 4 +- .../components/grid_sizer/GridSizer.tsx | 10 +-- .../grid_sizer/ResponsiveGridSizer.tsx | 11 +--- .../components/index_views/IndexListRow.tsx | 4 +- .../index_views/IndexListRowCell.tsx | 8 +-- .../clockface/components/inputs/TextArea.tsx | 34 +++++----- ui/src/clockface/components/label/Label.tsx | 13 ++-- .../components/overlays/OverlayContainer.tsx | 4 +- .../components/radio_buttons/RadioButton.tsx | 9 +-- .../components/radio_buttons/RadioButtons.tsx | 8 +-- .../components/resource_list/ResourceCard.tsx | 21 +++---- .../components/resource_list/ResourceName.tsx | 17 ++--- .../components/wizard/WizardOverlay.tsx | 4 +- .../dashboards/components/DashboardHeader.tsx | 9 +-- ui/src/dashboards/constants/cellEditor.ts | 13 ++-- ui/src/dashboards/resources.ts | 10 +-- .../dataExplorer/components/SaveAsOverlay.tsx | 3 + .../__snapshots__/LineProtocol.test.tsx.snap | 1 + .../__snapshots__/SideBar.test.tsx.snap | 2 + .../__snapshots__/AdminStep.test.tsx.snap | 1 + .../CompletionStep.test.tsx.snap | 1 + ui/src/organizations/components/Retention.tsx | 2 + ui/src/pageLayout/components/PageHeader.tsx | 4 +- .../components/PageHeaderCenter.tsx | 4 +- .../pageLayout/components/PageHeaderLeft.tsx | 4 +- .../pageLayout/components/PageHeaderRight.tsx | 4 +- ui/src/shared/components/CodeSnippet.tsx | 11 +--- ui/src/shared/components/ConfirmButton.tsx | 12 ++-- ui/src/shared/components/CopyButton.tsx | 8 +-- ui/src/shared/components/DragAndDrop.tsx | 10 +-- ui/src/shared/components/EditableName.tsx | 15 ++--- ui/src/shared/components/ExportOverlay.tsx | 9 +-- ui/src/shared/components/InputClickToEdit.tsx | 4 +- ui/src/shared/components/LoadingDots.tsx | 24 ------- .../shared/components/MenuTooltipButton.tsx | 4 +- ui/src/shared/components/RefreshingView.tsx | 2 +- .../shared/components/SearchableDropdown.tsx | 3 +- .../AutoRefreshDropdown.tsx | 4 +- ui/src/shared/components/dygraph/Dygraph.tsx | 63 ++++++++----------- .../fancy_scrollbar/FancyScrollbar.tsx | 20 +++--- .../notifications/Notifications.tsx | 5 +- .../permissionsWidget/PermissionsWidget.tsx | 4 +- .../components/search_widget/SearchWidget.tsx | 6 +- .../shared/components/threesizer/Division.tsx | 8 +-- .../components/threesizer/Threesizer.tsx | 4 +- ui/src/shared/utils/view.ts | 18 ++---- ui/src/tasks/components/TaskForm.tsx | 15 +++-- ui/src/tasks/containers/TaskPage.tsx | 2 +- ui/src/timeMachine/components/TagSelector.tsx | 4 +- ui/src/timeMachine/components/ToolbarTab.tsx | 11 +--- .../fluxFunctionsToolbar/ToolbarFunction.tsx | 4 +- .../components/view_options/ThresholdItem.tsx | 10 +-- ui/src/types/dashboards.ts | 16 ++++- 70 files changed, 293 insertions(+), 374 deletions(-) delete mode 100644 ui/src/shared/components/LoadingDots.tsx diff --git a/ui/src/clockface/components/card_select/CardSelectCard.tsx b/ui/src/clockface/components/card_select/CardSelectCard.tsx index bfe4d23721..bed0590cb8 100644 --- 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 { - public static defaultProps: Partial = { + public static defaultProps = { checked: false, disabled: false, } diff --git a/ui/src/clockface/components/card_select/ProtoboardIcon.tsx b/ui/src/clockface/components/card_select/ProtoboardIcon.tsx index 552fa6112e..338a88a283 100644 --- 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 { - public static defaultProps: Partial = { + public static defaultProps = { displayText: '', } diff --git a/ui/src/clockface/components/color_picker/ColorPicker.tsx b/ui/src/clockface/components/color_picker/ColorPicker.tsx index 65005ac947..8f42017480 100644 --- 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 { - public static defaultProps: DefaultProps = { + public static defaultProps = { maintainInputFocus: false, testID: 'color-picker', } diff --git a/ui/src/clockface/components/confirmation_button/ConfirmationButton.tsx b/ui/src/clockface/components/confirmation_button/ConfirmationButton.tsx index 6ac992549c..b7a44973e2 100644 --- 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 { - public static defaultProps: Partial = { + public static defaultProps = { size: ComponentSize.Small, shape: ButtonShape.Default, status: ComponentStatus.Default, diff --git a/ui/src/clockface/components/context_menu/Context.tsx b/ui/src/clockface/components/context_menu/Context.tsx index f4e28a0b59..4b6f7ec0e6 100644 --- 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 { - public static defaultProps: Partial = { + public static defaultProps = { align: Alignment.Right, } diff --git a/ui/src/clockface/components/context_menu/ContextMenu.tsx b/ui/src/clockface/components/context_menu/ContextMenu.tsx index 20bda35936..3df5d08316 100644 --- 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 { - public static defaultProps: DefaultProps = { + public static defaultProps = { color: ComponentColor.Primary, shape: ButtonShape.Square, text: '', diff --git a/ui/src/clockface/components/context_menu/ContextMenuItem.tsx b/ui/src/clockface/components/context_menu/ContextMenuItem.tsx index 02e8073662..fcf4d078e2 100644 --- 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 { - public static defaultProps: DefaultProps = { - description: null, + public static defaultProps = { + description: '', testID: 'context-menu-item', } diff --git a/ui/src/clockface/components/draggable_resizer/DraggableResizerPanel.tsx b/ui/src/clockface/components/draggable_resizer/DraggableResizerPanel.tsx index 11106187ea..ce9789a26b 100644 --- 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 { - public static defaultProps: Partial = { + public static defaultProps = { minSizePixels: 0, } diff --git a/ui/src/clockface/components/dropdowns/Dropdown.tsx b/ui/src/clockface/components/dropdowns/Dropdown.tsx index 7f445e5faf..670f3c095e 100644 --- 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 { - public static defaultProps: Partial = { + public static defaultProps: DefaultProps = { buttonColor: ComponentColor.Default, buttonSize: ComponentSize.Small, status: ComponentStatus.Default, @@ -61,6 +66,8 @@ class Dropdown extends Component { menuColor: DropdownMenuColors.Sapphire, mode: DropdownMode.Radio, titleText: '', + testID: 'dropdown', + buttonTestID: 'dropdown-button', } public static Button = DropdownButton diff --git a/ui/src/clockface/components/dropdowns/DropdownButton.tsx b/ui/src/clockface/components/dropdowns/DropdownButton.tsx index bc5afb64c5..d3165ba793 100644 --- 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) => 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 { - public static defaultProps: Partial = { + public static defaultProps = { color: ComponentColor.Default, size: ComponentSize.Small, status: ComponentStatus.Default, diff --git a/ui/src/clockface/components/dropdowns/DropdownDivider.tsx b/ui/src/clockface/components/dropdowns/DropdownDivider.tsx index 7c1af86110..1fd90115b6 100644 --- 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 { - public static defaultProps: Partial = { + public static defaultProps = { text: '', } diff --git a/ui/src/clockface/components/dropdowns/DropdownItem.tsx b/ui/src/clockface/components/dropdowns/DropdownItem.tsx index dc423d3d90..94a6fd2db7 100644 --- 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 { - public static defaultProps: Partial = { + public static defaultProps = { checkbox: false, selected: false, } diff --git a/ui/src/clockface/components/dropdowns/MultiSelectDropdown.tsx b/ui/src/clockface/components/dropdowns/MultiSelectDropdown.tsx index 203836b6a5..5357b050b8 100644 --- 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 { - public static defaultProps: Partial = { + public static defaultProps = { buttonColor: ComponentColor.Default, buttonSize: ComponentSize.Small, status: ComponentStatus.Default, diff --git a/ui/src/clockface/components/dropdowns/test/__snapshots__/MultiSelectDropdown.test.tsx.snap b/ui/src/clockface/components/dropdowns/test/__snapshots__/MultiSelectDropdown.test.tsx.snap index 7f62d707d2..7b8081ab21 100644 --- 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`] = ` { - public static defaultProps: DefaultProps = { + public static defaultProps = { size: ComponentSize.Small, testID: 'empty-state', } diff --git a/ui/src/clockface/components/form_layout/Form.tsx b/ui/src/clockface/components/form_layout/Form.tsx index 0a3a227325..d3990b22b4 100644 --- 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 { public static Divider = FormDivider public static Footer = FormFooter - public static defaultProps: DefaultProps = { + public static defaultProps = { testID: 'form-container', } diff --git a/ui/src/clockface/components/form_layout/FormFooter.tsx b/ui/src/clockface/components/form_layout/FormFooter.tsx index 4d63340a93..43a2c47209 100644 --- 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 { - public static defaultProps: Partial = { + public static defaultProps = { colsXS: Columns.Twelve, } diff --git a/ui/src/clockface/components/grid_layout/GridColumn.tsx b/ui/src/clockface/components/grid_layout/GridColumn.tsx index aa3289fe12..186fede750 100644 --- 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 { - public static defaultProps: Partial = { + public static defaultProps = { widthXS: Columns.Twelve, } diff --git a/ui/src/clockface/components/grid_sizer/GridSizer.tsx b/ui/src/clockface/components/grid_sizer/GridSizer.tsx index 2fac0abfdf..e07b12339d 100644 --- 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 { - public static defaultProps: Partial = { + public static defaultProps = { cellWidth: 150, recalculateFlag: '', width: null, diff --git a/ui/src/clockface/components/grid_sizer/ResponsiveGridSizer.tsx b/ui/src/clockface/components/grid_sizer/ResponsiveGridSizer.tsx index 254238a690..52d5c38fc5 100644 --- 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 { - public static defaultProps: DefaultProps = { + public static defaultProps = { gutter: 4, } diff --git a/ui/src/clockface/components/index_views/IndexListRow.tsx b/ui/src/clockface/components/index_views/IndexListRow.tsx index f9e1436b24..f211dee8e0 100644 --- 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 { - public static defaultProps: Partial = { + public static defaultProps = { disabled: false, testID: 'table-row', } diff --git a/ui/src/clockface/components/index_views/IndexListRowCell.tsx b/ui/src/clockface/components/index_views/IndexListRowCell.tsx index 3968e3b25b..c406597425 100644 --- 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 { - public static defaultProps: Partial = { + public static defaultProps = { alignment: Alignment.Left, revealOnHover: false, testID: 'table-cell', diff --git a/ui/src/clockface/components/inputs/TextArea.tsx b/ui/src/clockface/components/inputs/TextArea.tsx index 5770bcadbf..b640ca0144 100644 --- 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) => void @@ -58,11 +59,10 @@ interface Props { onKeyPress?: (e: KeyboardEvent) => void onKeyUp?: (e: KeyboardEvent) => void onKeyDown?: (e: KeyboardEvent) => void - value?: string } class TextArea extends Component { - public static defaultProps: Partial = { + public static defaultProps = { autocapitalize: AutoCapitalize.Off, autocomplete: AutoComplete.Off, autofocus: false, diff --git a/ui/src/clockface/components/label/Label.tsx b/ui/src/clockface/components/label/Label.tsx index 28a9d56ad3..c4b6ae017b 100644 --- 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 { - public static defaultProps: DefaultProps = { + public static defaultProps = { size: ComponentSize.ExtraSmall, testID: 'label--pill', } diff --git a/ui/src/clockface/components/overlays/OverlayContainer.tsx b/ui/src/clockface/components/overlays/OverlayContainer.tsx index fef0e63a34..42ba9262b1 100644 --- 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 { - public static defaultProps: Partial = { + public static defaultProps = { maxWidth: 800, } diff --git a/ui/src/clockface/components/radio_buttons/RadioButton.tsx b/ui/src/clockface/components/radio_buttons/RadioButton.tsx index 1ba057158b..3e97267baa 100644 --- 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 { - public static defaultProps: Partial = { + public static defaultProps = { disabled: false, disabledTitleText: 'This option is disabled', + titleText: '', testID: 'radio-button', } diff --git a/ui/src/clockface/components/radio_buttons/RadioButtons.tsx b/ui/src/clockface/components/radio_buttons/RadioButtons.tsx index 74c57fffbf..0d7215a7c4 100644 --- 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 { - public static defaultProps: Partial = { + public static defaultProps = { color: ComponentColor.Primary, size: ComponentSize.Small, shape: ButtonShape.Default, diff --git a/ui/src/clockface/components/resource_list/ResourceCard.tsx b/ui/src/clockface/components/resource_list/ResourceCard.tsx index a265783951..79bff5b883 100644 --- 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 { - public static defaultProps: DefaultProps = { + public static defaultProps = { testID: 'resource-card', description: () => null, labels: () => null, diff --git a/ui/src/clockface/components/resource_list/ResourceName.tsx b/ui/src/clockface/components/resource_list/ResourceName.tsx index 1fc343e59b..56498a4c96 100644 --- 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) => 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 { - public static defaultProps: DefaultProps = { + public static defaultProps = { parentTestID: 'resource-name', buttonTestID: 'resource-name--button', inputTestID: 'resource-name--input', diff --git a/ui/src/clockface/components/wizard/WizardOverlay.tsx b/ui/src/clockface/components/wizard/WizardOverlay.tsx index 412ce896c7..0b63f4b169 100644 --- 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 { - public static defaultProps: Partial = { + public static defaultProps = { maxWidth: 1200, } diff --git a/ui/src/dashboards/components/DashboardHeader.tsx b/ui/src/dashboards/components/DashboardHeader.tsx index 822eeb7e19..6c6ee298cf 100644 --- 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 { - public static defaultProps: DefaultProps = { + public static defaultProps = { zoomedTimeRange: { upper: null, lower: null, diff --git a/ui/src/dashboards/constants/cellEditor.ts b/ui/src/dashboards/constants/cellEditor.ts index 7f987b0a59..1c5abcd2a3 100644 --- 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> @@ -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 = { diff --git a/ui/src/dashboards/resources.ts b/ui/src/dashboards/resources.ts index 33e1567f8c..65ec52e53a 100644 --- 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, }, } diff --git a/ui/src/dataExplorer/components/SaveAsOverlay.tsx b/ui/src/dataExplorer/components/SaveAsOverlay.tsx index ca58201a4e..13f12d9798 100644 --- a/ui/src/dataExplorer/components/SaveAsOverlay.tsx +++ b/ui/src/dataExplorer/components/SaveAsOverlay.tsx @@ -33,6 +33,7 @@ class SaveAsOverlay extends PureComponent {
{ Dashboard Cell { Task { <> { Never { - public static defaultProps: Partial = { + public static defaultProps = { inPresentationMode: false, } diff --git a/ui/src/pageLayout/components/PageHeaderCenter.tsx b/ui/src/pageLayout/components/PageHeaderCenter.tsx index e2fe915339..3e76cc544e 100644 --- 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 { - public static defaultProps: Partial = { + public static defaultProps = { widthPixels: DEFAULT_PAGE_HEADER_CENTER_WIDTH, } diff --git a/ui/src/pageLayout/components/PageHeaderLeft.tsx b/ui/src/pageLayout/components/PageHeaderLeft.tsx index 43215f41d1..671ef186af 100644 --- 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 { - public static defaultProps: Partial = { + public static defaultProps = { offsetPixels: DEFAULT_OFFSET, } diff --git a/ui/src/pageLayout/components/PageHeaderRight.tsx b/ui/src/pageLayout/components/PageHeaderRight.tsx index aa5a64a2ab..c2bf72ff78 100644 --- 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 { - public static defaultProps: Partial = { + public static defaultProps = { offsetPixels: DEFAULT_OFFSET, } diff --git a/ui/src/shared/components/CodeSnippet.tsx b/ui/src/shared/components/CodeSnippet.tsx index 8c9710562e..beb8d8e675 100644 --- 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 { - public static defaultProps: DefaultProps = { + public static defaultProps = { label: 'Code Snippet', } diff --git a/ui/src/shared/components/ConfirmButton.tsx b/ui/src/shared/components/ConfirmButton.tsx index 4674697be2..9dde09b13f 100644 --- 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 { - public static defaultProps: Partial = { + public static defaultProps = { confirmText: 'Confirm', type: 'btn-default', size: 'btn-sm', diff --git a/ui/src/shared/components/CopyButton.tsx b/ui/src/shared/components/CopyButton.tsx index 6b52f5e5de..d74822ec43 100644 --- 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 { - public static defaultProps: DefaultProps = { + public static defaultProps = { size: ComponentSize.ExtraSmall, color: ComponentColor.Secondary, } + public render() { const {textToCopy, color, size} = this.props diff --git a/ui/src/shared/components/DragAndDrop.tsx b/ui/src/shared/components/DragAndDrop.tsx index a0cfa8c4dd..44490cf2eb 100644 --- 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 { - public static defaultProps: Partial = { + public static defaultProps = { submitText: 'Write this File', submitOnDrop: false, submitOnUpload: false, diff --git a/ui/src/shared/components/EditableName.tsx b/ui/src/shared/components/EditableName.tsx index 0ac50b136f..beb0733be8 100644 --- 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) => 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 { - public static defaultProps: DefaultProps = { + public static defaultProps = { hrefValue: '#', testID: 'editable-name', } diff --git a/ui/src/shared/components/ExportOverlay.tsx b/ui/src/shared/components/ExportOverlay.tsx index 2d80243ad2..bda82a5cc6 100644 --- 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 { - public static defaultProps: DefaultProps = { + public static defaultProps = { isVisible: true, } diff --git a/ui/src/shared/components/InputClickToEdit.tsx b/ui/src/shared/components/InputClickToEdit.tsx index a2a1323aae..7afc8833e8 100644 --- 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 { - public static defaultProps: Partial = { + public static defaultProps = { tabIndex: 0, } diff --git a/ui/src/shared/components/LoadingDots.tsx b/ui/src/shared/components/LoadingDots.tsx deleted file mode 100644 index 9ec4c07ddd..0000000000 --- a/ui/src/shared/components/LoadingDots.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React, {Component} from 'react' - -interface Props { - className?: string -} -class LoadingDots extends Component { - public static defaultProps: Partial = { - className: '', - } - - public render() { - const {className} = this.props - - return ( -
-
-
-
-
- ) - } -} - -export default LoadingDots diff --git a/ui/src/shared/components/MenuTooltipButton.tsx b/ui/src/shared/components/MenuTooltipButton.tsx index 01b8eec22d..8e9c588e10 100644 --- 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 { - public static defaultProps: Partial = { + public static defaultProps = { theme: 'default', } diff --git a/ui/src/shared/components/RefreshingView.tsx b/ui/src/shared/components/RefreshingView.tsx index dcbb6d9afe..2ec0e0c4bd 100644 --- 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 { - public static defaultProps: Partial = { + public static defaultProps = { inView: true, manualRefresh: 0, } diff --git a/ui/src/shared/components/SearchableDropdown.tsx b/ui/src/shared/components/SearchableDropdown.tsx index 831ea09013..15d38240e9 100644 --- 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 { - public static defaultProps: Partial = { + public static defaultProps = { buttonSize: ComponentSize.Small, } diff --git a/ui/src/shared/components/dropdown_auto_refresh/AutoRefreshDropdown.tsx b/ui/src/shared/components/dropdown_auto_refresh/AutoRefreshDropdown.tsx index b830853c81..469b917b21 100644 --- 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 { - public static defaultProps: Partial = { + public static defaultProps = { showManualRefresh: true, } diff --git a/ui/src/shared/components/dygraph/Dygraph.tsx b/ui/src/shared/components/dygraph/Dygraph.tsx index d1d1829760..d11f782b63 100644 --- 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 colors: Color[] - timeRange?: TimeRange - axes?: Axes - isGraphFilled?: boolean - onZoom?: (timeRange: TimeRange) => void + labels: string[] + timeSeries: DygraphData + options: Partial + 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 { - public static defaultProps: Partial = { + 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 { 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 { const { labels, axes: {y}, - underlayCallback, - isGraphFilled, options: passedOptions, } = this.props @@ -298,18 +286,17 @@ class Dygraph extends Component { 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 { } } -export default withHoverTime(Dygraph) +export default withHoverTime(Dygraph) diff --git a/ui/src/shared/components/fancy_scrollbar/FancyScrollbar.tsx b/ui/src/shared/components/fancy_scrollbar/FancyScrollbar.tsx index 092e2930b2..c290d521b9 100644 --- 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) => void style: React.CSSProperties - hideTracksWhenNotNeeded?: boolean -} - -interface Props { - className?: string + hideTracksWhenNotNeeded: boolean + setScrollTop: (value: React.MouseEvent) => void scrollTop?: number scrollLeft?: number thumbStartColor?: string @@ -25,11 +22,12 @@ interface Props { } @ErrorHandling -class FancyScrollbar extends Component> { - public static defaultProps: DefaultProps = { +class FancyScrollbar extends Component { + public static defaultProps = { + className: '', autoHide: true, - hideTracksWhenNotNeeded: true, autoHeight: false, + hideTracksWhenNotNeeded: true, maxHeight: null, style: {}, setScrollTop: () => {}, diff --git a/ui/src/shared/components/notifications/Notifications.tsx b/ui/src/shared/components/notifications/Notifications.tsx index 0d9bd9ecce..3b6f95c48f 100644 --- 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 { - public static defaultProps: Partial = { + public static defaultProps = { inPresentationMode: false, + notifications: [], } public render() { diff --git a/ui/src/shared/components/permissionsWidget/PermissionsWidget.tsx b/ui/src/shared/components/permissionsWidget/PermissionsWidget.tsx index f4ffbfc479..aa865dfb8e 100644 --- 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 { - public static defaultProps: Partial = { + public static defaultProps = { heightPixels: 500, } diff --git a/ui/src/shared/components/search_widget/SearchWidget.tsx b/ui/src/shared/components/search_widget/SearchWidget.tsx index 1d0584e965..3a9aeb71b2 100644 --- 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 { - public static defaultProps: Partial = { + public static defaultProps = { widthPixels: 440, placeholderText: 'Search...', searchTerm: '', diff --git a/ui/src/shared/components/threesizer/Division.tsx b/ui/src/shared/components/threesizer/Division.tsx index 0719e15233..bcce5cec5a 100644 --- 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 @@ -37,7 +37,7 @@ interface Props { } class Division extends PureComponent { - public static defaultProps: Partial = { + public static defaultProps = { name: '', handleDisplay: 'visible', style: {}, diff --git a/ui/src/shared/components/threesizer/Threesizer.tsx b/ui/src/shared/components/threesizer/Threesizer.tsx index d7a50578f1..bdd836bee0 100644 --- 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 { - public static defaultProps: Partial = { + public static defaultProps = { orientation: HANDLE_HORIZONTAL, containerClass: '', } diff --git a/ui/src/shared/utils/view.ts b/ui/src/shared/utils/view.ts index 4fee26823d..6ba63725fe 100644 --- 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, }, }, } diff --git a/ui/src/tasks/components/TaskForm.tsx b/ui/src/tasks/components/TaskForm.tsx index 44d14ef03e..4dd5e265bd 100644 --- 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) => 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 { - public static defaultProps: Partial = { + public static defaultProps = { isInOverlay: false, - onSubmit: () => {}, canSubmit: true, + onSubmit: () => {}, dismiss: () => {}, + onChangeToBucketName: () => {}, + onChangeToOrgName: () => {}, } + constructor(props: Props) { super(props) diff --git a/ui/src/tasks/containers/TaskPage.tsx b/ui/src/tasks/containers/TaskPage.tsx index 0074ea8eff..08e45887ad 100644 --- a/ui/src/tasks/containers/TaskPage.tsx +++ b/ui/src/tasks/containers/TaskPage.tsx @@ -88,8 +88,8 @@ class TaskPage extends PureComponent<
{ > diff --git a/ui/src/timeMachine/components/ToolbarTab.tsx b/ui/src/timeMachine/components/ToolbarTab.tsx index fa700438ea..70f4f4f9a2 100644 --- 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 { - public static defaultProps: DefaultProps = { + public static defaultProps = { testID: 'toolbar-tab', } diff --git a/ui/src/timeMachine/components/fluxFunctionsToolbar/ToolbarFunction.tsx b/ui/src/timeMachine/components/fluxFunctionsToolbar/ToolbarFunction.tsx index 3ca98fc272..a111262161 100644 --- 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 { - public static defaultProps: Partial = { + public static defaultProps = { testID: 'toolbar-function', } diff --git a/ui/src/timeMachine/components/view_options/ThresholdItem.tsx b/ui/src/timeMachine/components/view_options/ThresholdItem.tsx index ccbb40bb59..6c4dddb1bb 100644 --- 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 { - public static defaultProps: Partial = { + public static defaultProps = { label: 'Value is <=', disableColor: false, isDeletable: true, diff --git a/ui/src/types/dashboards.ts b/ui/src/types/dashboards.ts index c86e32cfeb..f40c4968e4 100644 --- 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