From 6166604cb35bfc16b867cad850ee15fc2a97f685 Mon Sep 17 00:00:00 2001 From: Sergiu Miclea Date: Thu, 29 Mar 2018 13:57:09 +0300 Subject: [PATCH] Improve 'mobx' performance by adding `@observer` Adding `@observer` to all React components can have a great positive impact on performance. You can see more info about it in this discussion with an owner of mobx: https://github.com/mobxjs/mobx/issues/101 --- src/components/atoms/Arrow/index.jsx | 2 ++ src/components/atoms/Checkbox/index.jsx | 2 ++ src/components/atoms/CopyButton/index.jsx | 2 ++ src/components/atoms/CopyValue/index.jsx | 2 ++ src/components/atoms/EndpointLogos/index.jsx | 2 ++ src/components/atoms/InfoIcon/index.jsx | 2 ++ src/components/atoms/PasswordValue/index.jsx | 2 ++ src/components/atoms/ProgressBar/index.jsx | 2 ++ src/components/atoms/RadioInput/index.jsx | 2 ++ src/components/atoms/ReloadButton/index.jsx | 2 ++ src/components/atoms/SearchButton/index.jsx | 2 ++ src/components/atoms/StatusIcon/index.jsx | 2 ++ src/components/atoms/StatusImage/index.jsx | 2 ++ src/components/atoms/StatusPill/index.jsx | 2 ++ src/components/atoms/Switch/index.jsx | 2 ++ src/components/atoms/TextArea/index.jsx | 2 ++ src/components/atoms/ToggleButtonBar/index.jsx | 2 ++ src/components/atoms/Tooltip/index.jsx | 2 ++ src/components/molecules/AssessedVmListItem/index.jsx | 2 ++ src/components/molecules/AssessmentListItem/index.jsx | 2 ++ src/components/molecules/DatetimePicker/index.jsx | 2 ++ src/components/molecules/DetailsNavigation/index.jsx | 2 ++ src/components/molecules/Dropdown/index.jsx | 2 ++ src/components/molecules/DropdownFilter/index.jsx | 2 ++ src/components/molecules/DropdownLink/index.jsx | 2 ++ src/components/molecules/EndpointField/index.jsx | 2 ++ src/components/molecules/LoadingButton/index.jsx | 2 ++ src/components/molecules/MainListFilter/index.jsx | 2 ++ src/components/molecules/Modal/index.jsx | 2 ++ src/components/molecules/NewItemDropdown/index.jsx | 2 ++ src/components/molecules/NotificationDropdown/index.jsx | 2 ++ src/components/molecules/PropertiesTable/index.jsx | 2 ++ src/components/molecules/ScheduleItem/index.jsx | 2 ++ src/components/molecules/SearchInput/index.jsx | 2 ++ src/components/molecules/SideMenu/index.jsx | 2 ++ src/components/molecules/Table/index.jsx | 2 ++ src/components/molecules/TaskItem/index.jsx | 2 ++ src/components/molecules/Timeline/index.jsx | 2 ++ src/components/molecules/UserDropdown/index.jsx | 2 ++ src/components/molecules/WizardBreadcrumbs/index.jsx | 2 ++ src/components/molecules/WizardType/index.jsx | 2 ++ src/components/organisms/AlertModal/index.jsx | 2 ++ src/components/organisms/AssessmentMigrationOptions/index.jsx | 2 ++ src/components/organisms/ChooseProvider/index.jsx | 2 ++ src/components/organisms/DetailsContentHeader/index.jsx | 2 ++ src/components/organisms/DropdownFilterGroup/index.jsx | 2 ++ src/components/organisms/EndpointDetailsContent/index.jsx | 2 ++ src/components/organisms/EndpointValidation/index.jsx | 2 ++ src/components/organisms/Executions/index.jsx | 2 ++ src/components/organisms/FilterList/index.jsx | 2 ++ src/components/organisms/LoginForm/index.jsx | 2 ++ src/components/organisms/MainDetails/index.jsx | 2 ++ src/components/organisms/MainList/index.jsx | 2 ++ src/components/organisms/MigrationDetailsContent/index.jsx | 2 ++ src/components/organisms/Navigation/index.jsx | 2 ++ src/components/organisms/Notifications/index.jsx | 2 ++ src/components/organisms/ReplicaExecutionOptions/index.jsx | 2 ++ src/components/organisms/ReplicaMigrationOptions/index.jsx | 2 ++ src/components/organisms/Tasks/index.jsx | 2 ++ src/components/organisms/WizardEndpointList/index.jsx | 2 ++ src/components/organisms/WizardInstances/index.jsx | 2 ++ src/components/organisms/WizardNetworks/index.jsx | 2 ++ src/components/organisms/WizardSummary/index.jsx | 2 ++ 63 files changed, 126 insertions(+) diff --git a/src/components/atoms/Arrow/index.jsx b/src/components/atoms/Arrow/index.jsx index 2ef2fe601..979441e12 100644 --- a/src/components/atoms/Arrow/index.jsx +++ b/src/components/atoms/Arrow/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import Palette from '../../styleUtils/Palette' @@ -48,6 +49,7 @@ type Props = { disabled?: boolean, } +@observer class Arrow extends React.Component { static defaultProps: Props = { orientation: 'right', diff --git a/src/components/atoms/Checkbox/index.jsx b/src/components/atoms/Checkbox/index.jsx index 69369a1a5..84b16c959 100644 --- a/src/components/atoms/Checkbox/index.jsx +++ b/src/components/atoms/Checkbox/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled, { css } from 'styled-components' import Palette from '../../styleUtils/Palette' @@ -55,6 +56,7 @@ type Props = { disabled?: boolean, onChange?: (checked: boolean) => void, } +@observer class Checkbox extends React.Component { handleClick() { if (this.props.disabled || !this.props.onChange) { diff --git a/src/components/atoms/CopyButton/index.jsx b/src/components/atoms/CopyButton/index.jsx index 50a56f824..2e72cc9f6 100644 --- a/src/components/atoms/CopyButton/index.jsx +++ b/src/components/atoms/CopyButton/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import StyleProps from '../../styleUtils/StyleProps' @@ -31,6 +32,7 @@ const Wrapper = styled.span` transition: all ${StyleProps.animations.swift}; ` +@observer class CopyButton extends React.Component<{}> { render() { return ( diff --git a/src/components/atoms/CopyValue/index.jsx b/src/components/atoms/CopyValue/index.jsx index 217871ab3..912bfd84f 100644 --- a/src/components/atoms/CopyValue/index.jsx +++ b/src/components/atoms/CopyValue/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import CopyButton from '../CopyButton' @@ -43,6 +44,7 @@ type Props = { width?: string, maxWidth?: string, } +@observer class CopyValue extends React.Component { handleCopyIdClick(e: Event) { e.stopPropagation() diff --git a/src/components/atoms/EndpointLogos/index.jsx b/src/components/atoms/EndpointLogos/index.jsx index 92bb18471..f67cd7636 100644 --- a/src/components/atoms/EndpointLogos/index.jsx +++ b/src/components/atoms/EndpointLogos/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled, { css } from 'styled-components' import Generic from './images/Generic' @@ -119,6 +120,7 @@ type Props = { height: number, disabled?: boolean, } +@observer class EndpointLogos extends React.Component { static defaultProps: Props = { height: 64, diff --git a/src/components/atoms/InfoIcon/index.jsx b/src/components/atoms/InfoIcon/index.jsx index 843a7419c..e8cb63d94 100644 --- a/src/components/atoms/InfoIcon/index.jsx +++ b/src/components/atoms/InfoIcon/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import questionImage from './images/question.svg' @@ -35,6 +36,7 @@ type Props = { marginLeft?: number, warning?: boolean, } +@observer class InfoIcon extends React.Component { render() { return ( diff --git a/src/components/atoms/PasswordValue/index.jsx b/src/components/atoms/PasswordValue/index.jsx index 045aeb7cf..5ee64b0cb 100644 --- a/src/components/atoms/PasswordValue/index.jsx +++ b/src/components/atoms/PasswordValue/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import StyleProps from '../../styleUtils/StyleProps' @@ -51,6 +52,7 @@ type Props = { type State = { show: boolean, } +@observer class PasswordValue extends React.Component { constructor() { super() diff --git a/src/components/atoms/ProgressBar/index.jsx b/src/components/atoms/ProgressBar/index.jsx index 43003b40a..0c8b35faa 100644 --- a/src/components/atoms/ProgressBar/index.jsx +++ b/src/components/atoms/ProgressBar/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import Palette from '../../styleUtils/Palette' @@ -35,6 +36,7 @@ const Progress = styled.div` width: ${(props: Props) => props.width}%; ` +@observer class ProgressBar extends React.Component { render() { return ( diff --git a/src/components/atoms/RadioInput/index.jsx b/src/components/atoms/RadioInput/index.jsx index 6e1b3f1b2..855b53b98 100644 --- a/src/components/atoms/RadioInput/index.jsx +++ b/src/components/atoms/RadioInput/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import Palette from '../../styleUtils/Palette' @@ -53,6 +54,7 @@ const InputStyled = styled.input` type Props = { label: string, } +@observer class RadioInput extends React.Component { render() { return ( diff --git a/src/components/atoms/ReloadButton/index.jsx b/src/components/atoms/ReloadButton/index.jsx index 83249837c..b0b6e81ec 100644 --- a/src/components/atoms/ReloadButton/index.jsx +++ b/src/components/atoms/ReloadButton/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled, { injectGlobal } from 'styled-components' import reloadImage from './images/reload.svg' @@ -36,6 +37,7 @@ injectGlobal` type Props = { onClick: () => void, } +@observer class ReloadButton extends React.Component { wrapper: HTMLElement timeout: ?TimeoutID diff --git a/src/components/atoms/SearchButton/index.jsx b/src/components/atoms/SearchButton/index.jsx index 1cc0739ab..e4f6c527e 100644 --- a/src/components/atoms/SearchButton/index.jsx +++ b/src/components/atoms/SearchButton/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import Palette from '../../styleUtils/Palette' @@ -39,6 +40,7 @@ type Props = { primary: boolean, useFilterIcon: boolean, } +@observer class SearchButton extends React.Component { render() { return ( diff --git a/src/components/atoms/StatusIcon/index.jsx b/src/components/atoms/StatusIcon/index.jsx index f8abb246c..ce854f646 100644 --- a/src/components/atoms/StatusIcon/index.jsx +++ b/src/components/atoms/StatusIcon/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled, { css } from 'styled-components' import Palette from '../../styleUtils/Palette' @@ -75,6 +76,7 @@ const Wrapper = styled.div` ${props => statuses(props)[props.status]} ` +@observer class StatusIcon extends React.Component { render() { return ( diff --git a/src/components/atoms/StatusImage/index.jsx b/src/components/atoms/StatusImage/index.jsx index 021f8d50b..c8bbd10b7 100644 --- a/src/components/atoms/StatusImage/index.jsx +++ b/src/components/atoms/StatusImage/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled, { css } from 'styled-components' import StyleProps from '../../styleUtils/StyleProps' import Palette from '../../styleUtils/Palette' @@ -73,6 +74,7 @@ const CircleProgressBar = styled.circle` transition: stroke-dashoffset ${StyleProps.animations.swift}; ` +@observer class StatusImage extends React.Component { static defaultProps: $Shape = { status: 'RUNNING', diff --git a/src/components/atoms/StatusPill/index.jsx b/src/components/atoms/StatusPill/index.jsx index 1f825da3a..855f4432e 100644 --- a/src/components/atoms/StatusPill/index.jsx +++ b/src/components/atoms/StatusPill/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled, { css } from 'styled-components' import Palette from '../../styleUtils/Palette' @@ -102,6 +103,7 @@ type Props = { alert: boolean, small: boolean, } +@observer class StatusPill extends React.Component { static defaultProps: $Shape = { status: 'INFO', diff --git a/src/components/atoms/Switch/index.jsx b/src/components/atoms/Switch/index.jsx index 3d9302c30..be2950c59 100644 --- a/src/components/atoms/Switch/index.jsx +++ b/src/components/atoms/Switch/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import Palette from '../../styleUtils/Palette' @@ -130,6 +131,7 @@ type Props = { type State = { lastChecked: ?boolean, } +@observer class Switch extends React.Component { static defaultProps: $Shape = { checkedLabel: 'Yes', diff --git a/src/components/atoms/TextArea/index.jsx b/src/components/atoms/TextArea/index.jsx index 6a3c29838..d4465cc62 100644 --- a/src/components/atoms/TextArea/index.jsx +++ b/src/components/atoms/TextArea/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import Palette from '../../styleUtils/Palette' import StyleProps from '../../styleUtils/StyleProps' @@ -60,6 +61,7 @@ const Input = styled.textarea` } ` +@observer class TextArea extends React.Component<{}> { render() { return ( diff --git a/src/components/atoms/ToggleButtonBar/index.jsx b/src/components/atoms/ToggleButtonBar/index.jsx index 0afbfbe77..010c8f60f 100644 --- a/src/components/atoms/ToggleButtonBar/index.jsx +++ b/src/components/atoms/ToggleButtonBar/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import Palette from '../../styleUtils/Palette' @@ -57,6 +58,7 @@ type Props = { onChange: (item: ItemType) => void, className?: string, } +@observer class ToggleButtonBar extends React.Component { render() { if (!this.props.items) { diff --git a/src/components/atoms/Tooltip/index.jsx b/src/components/atoms/Tooltip/index.jsx index 92f153cb5..ee943ba4d 100644 --- a/src/components/atoms/Tooltip/index.jsx +++ b/src/components/atoms/Tooltip/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import { injectGlobal } from 'styled-components' import ReactTooltip from 'react-tooltip' @@ -40,6 +41,7 @@ injectGlobal` } ` +@observer class Tooltip extends React.Component<{}> { static rebuild = () => { ReactTooltip.rebuild() diff --git a/src/components/molecules/AssessedVmListItem/index.jsx b/src/components/molecules/AssessedVmListItem/index.jsx index 093138705..a297030bd 100644 --- a/src/components/molecules/AssessedVmListItem/index.jsx +++ b/src/components/molecules/AssessedVmListItem/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import Checkbox from '../../atoms/Checkbox' @@ -67,6 +68,7 @@ type Props = { selectedVmSize: ?VmSize, recommendedVmSize: string, } +@observer class AssessedVmListItem extends React.Component { getColumnWidth(index: number) { let width = parseInt(this.props.columnsWidths[index], 10) diff --git a/src/components/molecules/AssessmentListItem/index.jsx b/src/components/molecules/AssessmentListItem/index.jsx index 70e9d194d..a82d8299a 100644 --- a/src/components/molecules/AssessmentListItem/index.jsx +++ b/src/components/molecules/AssessmentListItem/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import moment from 'moment' @@ -102,6 +103,7 @@ type Props = { item: Assessment, onClick: () => void, } +@observer class AssessmentListItem extends React.Component { render() { let status = this.props.item.properties.status.toUpperCase() diff --git a/src/components/molecules/DatetimePicker/index.jsx b/src/components/molecules/DatetimePicker/index.jsx index c021bb871..720a48569 100644 --- a/src/components/molecules/DatetimePicker/index.jsx +++ b/src/components/molecules/DatetimePicker/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled, { injectGlobal } from 'styled-components' import Datetime from 'react-datetime' import moment from 'moment' @@ -60,6 +61,7 @@ type State = { showPicker: boolean, date: ?moment$Moment, } +@observer class DatetimePicker extends React.Component { itemMouseDown: boolean diff --git a/src/components/molecules/DetailsNavigation/index.jsx b/src/components/molecules/DetailsNavigation/index.jsx index 6cc63acfb..d70f5c9e7 100644 --- a/src/components/molecules/DetailsNavigation/index.jsx +++ b/src/components/molecules/DetailsNavigation/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import Palette from '../../styleUtils/Palette' @@ -40,6 +41,7 @@ type Props = { itemType?: string, customHref?: (item: ItemType) => ?string, } +@observer class DetailsNavigation extends React.Component { renderItems() { return ( diff --git a/src/components/molecules/Dropdown/index.jsx b/src/components/molecules/Dropdown/index.jsx index e01381a93..d9cd8f012 100644 --- a/src/components/molecules/Dropdown/index.jsx +++ b/src/components/molecules/Dropdown/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import ReactDOM from 'react-dom' @@ -113,6 +114,7 @@ type State = { showDropdownList: boolean, firstItemHover: boolean } +@observer class Dropdown extends React.Component { static defaultProps: $Shape = { noSelectionMessage: 'Select an item', diff --git a/src/components/molecules/DropdownFilter/index.jsx b/src/components/molecules/DropdownFilter/index.jsx index 3924c3cc5..5d97f5953 100644 --- a/src/components/molecules/DropdownFilter/index.jsx +++ b/src/components/molecules/DropdownFilter/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import SearchInput from '../SearchInput' @@ -74,6 +75,7 @@ type Props = { type State = { showDropdownList: boolean } +@observer class DropdownFilter extends React.Component { static defaultProps: $Shape = { searchPlaceholder: 'Filter', diff --git a/src/components/molecules/DropdownLink/index.jsx b/src/components/molecules/DropdownLink/index.jsx index 6a28c0b85..c40dd0a71 100644 --- a/src/components/molecules/DropdownLink/index.jsx +++ b/src/components/molecules/DropdownLink/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled, { css } from 'styled-components' import ReactDOM from 'react-dom' @@ -126,6 +127,7 @@ type State = { showDropdownList: boolean, searchText: string, } +@observer class DropdownLink extends React.Component { static defaultProps: $Shape = { selectItemLabel: 'Select', diff --git a/src/components/molecules/EndpointField/index.jsx b/src/components/molecules/EndpointField/index.jsx index 1a3388425..0f348092f 100644 --- a/src/components/molecules/EndpointField/index.jsx +++ b/src/components/molecules/EndpointField/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import Switch from '../../atoms/Switch' @@ -54,6 +55,7 @@ type Props = { disabled: boolean, enum: string[], } +@observer class Field extends React.Component { renderSwitch() { return ( diff --git a/src/components/molecules/LoadingButton/index.jsx b/src/components/molecules/LoadingButton/index.jsx index 18601f50a..568ddaf1e 100644 --- a/src/components/molecules/LoadingButton/index.jsx +++ b/src/components/molecules/LoadingButton/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import * as React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import Button from '../../atoms/Button' @@ -39,6 +40,7 @@ const Loading = styled.span` type Props = { children: React.Node, } +@observer class LoadingButton extends React.Component { render() { return ( diff --git a/src/components/molecules/MainListFilter/index.jsx b/src/components/molecules/MainListFilter/index.jsx index e12dd6943..9fe65eb32 100644 --- a/src/components/molecules/MainListFilter/index.jsx +++ b/src/components/molecules/MainListFilter/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import * as React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import Checkbox from '../../atoms/Checkbox' @@ -89,6 +90,7 @@ type Props = { customFilterComponent?: React.Node, searchValue?: string, } +@observer class MainListFilter extends React.Component { renderFilterGroup() { let renderCustomComponent = () => { diff --git a/src/components/molecules/Modal/index.jsx b/src/components/molecules/Modal/index.jsx index ad4ca834b..735e6e431 100644 --- a/src/components/molecules/Modal/index.jsx +++ b/src/components/molecules/Modal/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import * as React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import Modal from 'react-modal' @@ -40,6 +41,7 @@ type Props = { topBottomMargin: number, title: string, } +@observer class NewModal extends React.Component { static defaultProps: $Shape = { topBottomMargin: 8, diff --git a/src/components/molecules/NewItemDropdown/index.jsx b/src/components/molecules/NewItemDropdown/index.jsx index 94df3c008..7c09bb763 100644 --- a/src/components/molecules/NewItemDropdown/index.jsx +++ b/src/components/molecules/NewItemDropdown/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import DropdownButton from '../../atoms/DropdownButton' @@ -119,6 +120,7 @@ type Props = { type State = { showDropdownList: boolean, } +@observer class NewItemDropdown extends React.Component { itemMouseDown: boolean diff --git a/src/components/molecules/NotificationDropdown/index.jsx b/src/components/molecules/NotificationDropdown/index.jsx index f49df575c..55be69fc5 100644 --- a/src/components/molecules/NotificationDropdown/index.jsx +++ b/src/components/molecules/NotificationDropdown/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import moment from 'moment' @@ -144,6 +145,7 @@ type Props = { type State = { showDropdownList: boolean, } +@observer class NotificationDropdown extends React.Component { itemMouseDown: boolean diff --git a/src/components/molecules/PropertiesTable/index.jsx b/src/components/molecules/PropertiesTable/index.jsx index 04316a4d0..4f4caebb4 100644 --- a/src/components/molecules/PropertiesTable/index.jsx +++ b/src/components/molecules/PropertiesTable/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled, { css } from 'styled-components' import Switch from '../../atoms/Switch' @@ -65,6 +66,7 @@ type Props = { onChange: (property: PropertyType, value: any) => void, valueCallback: (property: PropertyType) => any, } +@observer class PropertiesTable extends React.Component { renderSwitch(prop: PropertyType) { return ( diff --git a/src/components/molecules/ScheduleItem/index.jsx b/src/components/molecules/ScheduleItem/index.jsx index 8b60d8330..af6426460 100644 --- a/src/components/molecules/ScheduleItem/index.jsx +++ b/src/components/molecules/ScheduleItem/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled, { css } from 'styled-components' import moment from 'moment' @@ -105,6 +106,7 @@ type Props = { unsavedSchedules: Schedule[], timezone: TimezoneValue, } +@observer class ScheduleItem extends React.Component { getFieldValue(items: Field[], fieldName: string, zeroBasedIndex?: boolean, defaultSelectedIndex?: number) { if (this.props.item.schedule === null || this.props.item.schedule === undefined) { diff --git a/src/components/molecules/SearchInput/index.jsx b/src/components/molecules/SearchInput/index.jsx index 078ccae4b..0ef33305c 100644 --- a/src/components/molecules/SearchInput/index.jsx +++ b/src/components/molecules/SearchInput/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled, { css } from 'styled-components' import SearchButton from '../../atoms/SearchButton' @@ -70,6 +71,7 @@ type State = { hover?: boolean, focus?: boolean, } +@observer class SearchInput extends React.Component { static defaultProps: $Shape = { placeholder: 'Search', diff --git a/src/components/molecules/SideMenu/index.jsx b/src/components/molecules/SideMenu/index.jsx index dd8709086..b386e85db 100644 --- a/src/components/molecules/SideMenu/index.jsx +++ b/src/components/molecules/SideMenu/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled, { css } from 'styled-components' import StyleProps from '../../styleUtils/StyleProps' @@ -88,6 +89,7 @@ type Props = {} type State = { open: boolean, } +@observer class SideMenu extends React.Component { constructor() { super() diff --git a/src/components/molecules/Table/index.jsx b/src/components/molecules/Table/index.jsx index 7ce70ad01..5712ed677 100644 --- a/src/components/molecules/Table/index.jsx +++ b/src/components/molecules/Table/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import * as React from 'react' +import { observer } from 'mobx-react' import styled, { css } from 'styled-components' import StyleProps from '../../styleUtils/StyleProps' @@ -97,6 +98,7 @@ type Props = { bodyStyle?: any, headerStyle?: any, } +@observer class Table extends React.Component { static defaultProps: $Shape = { columnsWidths: [], diff --git a/src/components/molecules/TaskItem/index.jsx b/src/components/molecules/TaskItem/index.jsx index 2ceba5838..e62584528 100644 --- a/src/components/molecules/TaskItem/index.jsx +++ b/src/components/molecules/TaskItem/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled, { css } from 'styled-components' import { Collapse } from 'react-collapse' @@ -138,6 +139,7 @@ type Props = { open: boolean, onDependsOnClick: (id: string) => void, } +@observer class TaskItem extends React.Component { getLastMessage() { let message diff --git a/src/components/molecules/Timeline/index.jsx b/src/components/molecules/Timeline/index.jsx index 30460ba9d..705eff338 100644 --- a/src/components/molecules/Timeline/index.jsx +++ b/src/components/molecules/Timeline/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import type { Execution } from '../../../types/Execution' @@ -88,6 +89,7 @@ type Props = { onNextClick: () => void, onItemClick: (item: Execution) => void, } +@observer class Timeline extends React.Component { itemsRef: HTMLElement progressLineRef: HTMLElement diff --git a/src/components/molecules/UserDropdown/index.jsx b/src/components/molecules/UserDropdown/index.jsx index 1fd67fd09..dd9a72e89 100644 --- a/src/components/molecules/UserDropdown/index.jsx +++ b/src/components/molecules/UserDropdown/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled, { css } from 'styled-components' import Palette from '../../styleUtils/Palette' @@ -106,6 +107,7 @@ type Props = { type State = { showDropdownList: boolean, } +@observer class UserDropdown extends React.Component { itemMouseDown: boolean diff --git a/src/components/molecules/WizardBreadcrumbs/index.jsx b/src/components/molecules/WizardBreadcrumbs/index.jsx index e0cc24e10..862b1aee3 100644 --- a/src/components/molecules/WizardBreadcrumbs/index.jsx +++ b/src/components/molecules/WizardBreadcrumbs/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import Arrow from '../../atoms/Arrow' @@ -44,6 +45,7 @@ type Props = { selected: { id: string }, wizardType: 'migration' | 'replica', } +@observer class WizardBreadcrumbs extends React.Component { render() { let pages = wizardConfig.pages.filter(p => !p.excludeFrom || p.excludeFrom !== this.props.wizardType) diff --git a/src/components/molecules/WizardType/index.jsx b/src/components/molecules/WizardType/index.jsx index 7a862d5c6..ec30fb77c 100644 --- a/src/components/molecules/WizardType/index.jsx +++ b/src/components/molecules/WizardType/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import Switch from '../../atoms/Switch' @@ -65,6 +66,7 @@ type Props = { selected: 'replica' | 'migration', onChange: (checked: ?boolean) => void, } +@observer class WizardType extends React.Component { render() { return ( diff --git a/src/components/organisms/AlertModal/index.jsx b/src/components/organisms/AlertModal/index.jsx index c6cce8f5b..eecc909de 100644 --- a/src/components/organisms/AlertModal/index.jsx +++ b/src/components/organisms/AlertModal/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import Modal from '../../molecules/Modal' @@ -64,6 +65,7 @@ type Props = { onRequestClose: () => void, onConfirmation: () => void, } +@observer class AlertModal extends React.Component { static defaultProps: $Shape = { type: 'confirmation', diff --git a/src/components/organisms/AssessmentMigrationOptions/index.jsx b/src/components/organisms/AssessmentMigrationOptions/index.jsx index 6de17117b..888b286a5 100644 --- a/src/components/organisms/AssessmentMigrationOptions/index.jsx +++ b/src/components/organisms/AssessmentMigrationOptions/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import Button from '../../atoms/Button' @@ -88,6 +89,7 @@ type State = { migrationFields: Field[], replicaFields: Field[], } +@observer class AssessmentMigrationOptions extends React.Component { constructor() { super() diff --git a/src/components/organisms/ChooseProvider/index.jsx b/src/components/organisms/ChooseProvider/index.jsx index 97fecfd0f..9702b255b 100644 --- a/src/components/organisms/ChooseProvider/index.jsx +++ b/src/components/organisms/ChooseProvider/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import EndpointLogos from '../../atoms/EndpointLogos' @@ -59,6 +60,7 @@ type Props = { onProviderClick: (provider: string) => void, loading: boolean, } +@observer class ChooseProvider extends React.Component { renderLoading() { if (!this.props.loading) { diff --git a/src/components/organisms/DetailsContentHeader/index.jsx b/src/components/organisms/DetailsContentHeader/index.jsx index 5edabdba8..2fdc4c170 100644 --- a/src/components/organisms/DetailsContentHeader/index.jsx +++ b/src/components/organisms/DetailsContentHeader/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import type { MainItem } from '../../../types/MainItem' @@ -87,6 +88,7 @@ type Props = { actionButtonDisabled?: boolean, noSidemenuSpace?: boolean, } +@observer class DetailsContentHeader extends React.Component { getLastExecution(): ?MainItem | ?Execution { if (this.props.item && this.props.item.executions && this.props.item.executions.length) { diff --git a/src/components/organisms/DropdownFilterGroup/index.jsx b/src/components/organisms/DropdownFilterGroup/index.jsx index e28733c32..2f8fb8f59 100644 --- a/src/components/organisms/DropdownFilterGroup/index.jsx +++ b/src/components/organisms/DropdownFilterGroup/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import * as React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import DropdownLink from '../../molecules/DropdownLink' @@ -41,6 +42,7 @@ const DropdownLinkStyled = styled(DropdownLink)` type Props = { items: React.ElementProps[] } +@observer class DropdownFilterGroup extends React.Component { renderDropdowns() { return ( diff --git a/src/components/organisms/EndpointDetailsContent/index.jsx b/src/components/organisms/EndpointDetailsContent/index.jsx index b81b360ab..b170cec35 100644 --- a/src/components/organisms/EndpointDetailsContent/index.jsx +++ b/src/components/organisms/EndpointDetailsContent/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import EndpointLogos from '../../atoms/EndpointLogos' @@ -79,6 +80,7 @@ type Props = { onValidateClick: () => void, onEditClick: () => void, } +@observer class EndpointDetailsContent extends React.Component { renderedKeys: { [string]: boolean } diff --git a/src/components/organisms/EndpointValidation/index.jsx b/src/components/organisms/EndpointValidation/index.jsx index 041f67e1b..79b9d784d 100644 --- a/src/components/organisms/EndpointValidation/index.jsx +++ b/src/components/organisms/EndpointValidation/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled, { css } from 'styled-components' import Button from '../../atoms/Button' @@ -76,6 +77,7 @@ type Props = { onCancelClick: () => void, onRetryClick: () => void, } +@observer class EndpointValidation extends React.Component { handleCopyClick(message: string) { let succesful = DomUtils.copyTextToClipboard(message) diff --git a/src/components/organisms/Executions/index.jsx b/src/components/organisms/Executions/index.jsx index 05f6cdd4f..6f7ad65d2 100644 --- a/src/components/organisms/Executions/index.jsx +++ b/src/components/organisms/Executions/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import StatusPill from '../../atoms/StatusPill' @@ -84,6 +85,7 @@ type Props = { type State = { selectedExecution: ?Execution, } +@observer class Executions extends React.Component { constructor() { super() diff --git a/src/components/organisms/FilterList/index.jsx b/src/components/organisms/FilterList/index.jsx index 80172b201..e7a2e1c93 100644 --- a/src/components/organisms/FilterList/index.jsx +++ b/src/components/organisms/FilterList/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import * as React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import type { MainItem } from '../../../types/MainItem' @@ -50,6 +51,7 @@ type State = { selectedItems: MainItem[], selectAllSelected?: boolean, } +@observer class FilterList extends React.Component { constructor() { super() diff --git a/src/components/organisms/LoginForm/index.jsx b/src/components/organisms/LoginForm/index.jsx index 5f8cae01e..845e83a6d 100644 --- a/src/components/organisms/LoginForm/index.jsx +++ b/src/components/organisms/LoginForm/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled, { css } from 'styled-components' import Button from '../../atoms/Button' @@ -92,6 +93,7 @@ type State = { username: string, password: string, } +@observer class LoginForm extends React.Component { static defaultProps = { className: '', diff --git a/src/components/organisms/MainDetails/index.jsx b/src/components/organisms/MainDetails/index.jsx index f90a1e731..e01d12119 100644 --- a/src/components/organisms/MainDetails/index.jsx +++ b/src/components/organisms/MainDetails/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import * as React from 'react' +import { observer } from 'mobx-react' import styled, { css } from 'styled-components' import EndpointLogos from '../../atoms/EndpointLogos' @@ -111,6 +112,7 @@ type Props = { bottomControls: React.Node, loading: boolean, } +@observer class MainDetails extends React.Component { getSourceEndpoint(): ?Endpoint { let endpoint = this.props.endpoints.find(e => this.props.item && e.id === this.props.item.origin_endpoint_id) diff --git a/src/components/organisms/MainList/index.jsx b/src/components/organisms/MainList/index.jsx index febd5c3ec..1fc230982 100644 --- a/src/components/organisms/MainList/index.jsx +++ b/src/components/organisms/MainList/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import * as React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import StatusImage from '../../atoms/StatusImage' @@ -87,6 +88,7 @@ type Props = { emptyListButtonLabel?: string, onEmptyListButtonClick?: () => void, } +@observer class MainList extends React.Component { renderList() { if (!this.props.items || this.props.items.length === 0) { diff --git a/src/components/organisms/MigrationDetailsContent/index.jsx b/src/components/organisms/MigrationDetailsContent/index.jsx index 50373c78d..85cbd3bf6 100644 --- a/src/components/organisms/MigrationDetailsContent/index.jsx +++ b/src/components/organisms/MigrationDetailsContent/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import Button from '../../atoms/Button' @@ -57,6 +58,7 @@ type Props = { page: string, onDeleteMigrationClick: () => void, } +@observer class MigrationDetailsContent extends React.Component { renderBottomControls() { return ( diff --git a/src/components/organisms/Navigation/index.jsx b/src/components/organisms/Navigation/index.jsx index 310f718b8..60187b8c4 100644 --- a/src/components/organisms/Navigation/index.jsx +++ b/src/components/organisms/Navigation/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import Logo from '../../atoms/Logo' @@ -47,6 +48,7 @@ const MenuItem = styled.a` ` const Footer = styled.div`` +@observer class Navigation extends React.Component<{currentPage: string}> { renderMenu() { return ( diff --git a/src/components/organisms/Notifications/index.jsx b/src/components/organisms/Notifications/index.jsx index bace9ce55..f21528861 100644 --- a/src/components/organisms/Notifications/index.jsx +++ b/src/components/organisms/Notifications/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled, { injectGlobal } from 'styled-components' import NotificationSystem from 'react-notification-system' import { observe } from 'mobx' @@ -30,6 +31,7 @@ injectGlobal` const Wrapper = styled.div`` +@observer class Notifications extends React.Component<{}> { notificationsCount: number notificationSystem: NotificationSystem diff --git a/src/components/organisms/ReplicaExecutionOptions/index.jsx b/src/components/organisms/ReplicaExecutionOptions/index.jsx index dc1e5e5b7..6f394e6c8 100644 --- a/src/components/organisms/ReplicaExecutionOptions/index.jsx +++ b/src/components/organisms/ReplicaExecutionOptions/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import Button from '../../atoms/Button' @@ -62,6 +63,7 @@ type Props = { type State = { fields: Field[], } +@observer class ReplicaExecutionOptions extends React.Component { static defaultProps: $Shape = { executionLabel: 'Execute', diff --git a/src/components/organisms/ReplicaMigrationOptions/index.jsx b/src/components/organisms/ReplicaMigrationOptions/index.jsx index 1a39d876d..b579c5b91 100644 --- a/src/components/organisms/ReplicaMigrationOptions/index.jsx +++ b/src/components/organisms/ReplicaMigrationOptions/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import Button from '../../atoms/Button' @@ -62,6 +63,7 @@ type Props = { type State = { fields: Field[], } +@observer class ReplicaMigrationOptions extends React.Component { constructor() { super() diff --git a/src/components/organisms/Tasks/index.jsx b/src/components/organisms/Tasks/index.jsx index 876059656..0c9f3fad7 100644 --- a/src/components/organisms/Tasks/index.jsx +++ b/src/components/organisms/Tasks/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import TaskItem from '../../molecules/TaskItem' @@ -48,6 +49,7 @@ type Props = { type State = { openedItems: Task[], } +@observer class Tasks extends React.Component { dragStartPosition: ?{ x: number, y: number } diff --git a/src/components/organisms/WizardEndpointList/index.jsx b/src/components/organisms/WizardEndpointList/index.jsx index 788c5d26a..df25536c3 100644 --- a/src/components/organisms/WizardEndpointList/index.jsx +++ b/src/components/organisms/WizardEndpointList/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled, { css } from 'styled-components' import EndpointLogos from '../../atoms/EndpointLogos' @@ -70,6 +71,7 @@ type Props = { onChange: (endpoint: Endpoint) => void, onAddEndpoint: (provider: string) => void, } +@observer class WizardEndpointList extends React.Component { handleOnChange(selectedItem: ?Endpoint, provider: string) { if (selectedItem && selectedItem.id !== 'addNew') { diff --git a/src/components/organisms/WizardInstances/index.jsx b/src/components/organisms/WizardInstances/index.jsx index b02c2c3f9..51a0627b3 100644 --- a/src/components/organisms/WizardInstances/index.jsx +++ b/src/components/organisms/WizardInstances/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled, { css } from 'styled-components' import Checkbox from '../../atoms/Checkbox' @@ -198,6 +199,7 @@ type Props = { type State = { searchText: string, } +@observer class WizardInstances extends React.Component { timeout: TimeoutID diff --git a/src/components/organisms/WizardNetworks/index.jsx b/src/components/organisms/WizardNetworks/index.jsx index f07afd453..f41ddcba5 100644 --- a/src/components/organisms/WizardNetworks/index.jsx +++ b/src/components/organisms/WizardNetworks/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import StatusImage from '../../atoms/StatusImage' @@ -112,6 +113,7 @@ type Props = { selectedNetworks: ?NetworkMap[], onChange: (nic: NicType, network: Network) => void, } +@observer class WizardNetworks extends React.Component { isLoading() { return this.props.loadingInstancesDetails || this.props.loading diff --git a/src/components/organisms/WizardSummary/index.jsx b/src/components/organisms/WizardSummary/index.jsx index af8da431b..523f8e10e 100644 --- a/src/components/organisms/WizardSummary/index.jsx +++ b/src/components/organisms/WizardSummary/index.jsx @@ -15,6 +15,7 @@ along with this program. If not, see . // @flow import React from 'react' +import { observer } from 'mobx-react' import styled from 'styled-components' import moment from 'moment' @@ -124,6 +125,7 @@ type Props = { data: WizardData, wizardType: 'replica' | 'migration', } +@observer class WizardSummary extends React.Component { getDefaultOption(fieldName: string) { if (this.props.data.options && this.props.data.options[fieldName] === false) {