Improve 'mobx' performance by adding `@observer`

Adding `@observer` to all React components can have a great positive
impact on performance.
This is due to the 'mobx' architecture which can re-render only the
components which actually use the observable data. By not declaring a
component `@observer`, the parent component may also have to re-render
when an observable data changes.

An official recommendation can be found here:
https://github.com/mobxjs/mobx-react#which-components-should-be-marked-with-observer

src/components/atoms/Arrow/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   static defaultProps: Props = {
     orientation: 'right',

src/components/atoms/Checkbox/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   handleClick() {
     if (this.props.disabled || !this.props.onChange) {

src/components/atoms/CopyButton/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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 (

src/components/atoms/CopyValue/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   handleCopyIdClick(e: Event) {
     e.stopPropagation()

src/components/atoms/EndpointLogos/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   static defaultProps: Props = {
     height: 64,

src/components/atoms/InfoIcon/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   render() {
     return (

src/components/atoms/PasswordValue/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props, State> {
   constructor() {
     super()

src/components/atoms/ProgressBar/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   render() {
     return (

src/components/atoms/RadioInput/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   render() {
     return (

src/components/atoms/ReloadButton/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   wrapper: HTMLElement
   timeout: ?TimeoutID

src/components/atoms/SearchButton/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   render() {
     return (

src/components/atoms/StatusIcon/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   render() {
     return (

src/components/atoms/StatusImage/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   static defaultProps: $Shape<Props> = {
     status: 'RUNNING',

src/components/atoms/StatusPill/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   static defaultProps: $Shape<Props> = {
     status: 'INFO',

src/components/atoms/Switch/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props, State> {
   static defaultProps: $Shape<Props> = {
     checkedLabel: 'Yes',

src/components/atoms/TextArea/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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 (

src/components/atoms/ToggleButtonBar/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   render() {
     if (!this.props.items) {

src/components/atoms/Tooltip/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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()

src/components/molecules/AssessedVmListItem/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   getColumnWidth(index: number) {
     let width = parseInt(this.props.columnsWidths[index], 10)

src/components/molecules/AssessmentListItem/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   render() {
     let status = this.props.item.properties.status.toUpperCase()

src/components/molecules/DatetimePicker/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props, State> {
   itemMouseDown: boolean
 

src/components/molecules/DetailsNavigation/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   renderItems() {
     return (

src/components/molecules/Dropdown/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props, State> {
   static defaultProps: $Shape<Props> = {
     noSelectionMessage: 'Select an item',

src/components/molecules/DropdownFilter/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props, State> {
   static defaultProps: $Shape<Props> = {
     searchPlaceholder: 'Filter',

src/components/molecules/DropdownLink/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props, State> {
   static defaultProps: $Shape<Props> = {
     selectItemLabel: 'Select',

src/components/molecules/EndpointField/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   renderSwitch() {
     return (

src/components/molecules/LoadingButton/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   render() {
     return (

src/components/molecules/MainListFilter/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   renderFilterGroup() {
     let renderCustomComponent = () => {

src/components/molecules/Modal/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   static defaultProps: $Shape<Props> = {
     topBottomMargin: 8,

src/components/molecules/NewItemDropdown/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props, State> {
   itemMouseDown: boolean
 

src/components/molecules/NotificationDropdown/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props, State> {
   itemMouseDown: boolean
 

src/components/molecules/PropertiesTable/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   renderSwitch(prop: PropertyType) {
     return (

src/components/molecules/ScheduleItem/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   getFieldValue(items: Field[], fieldName: string, zeroBasedIndex?: boolean, defaultSelectedIndex?: number) {
     if (this.props.item.schedule === null || this.props.item.schedule === undefined) {

src/components/molecules/SearchInput/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props, State> {
   static defaultProps: $Shape<Props> = {
     placeholder: 'Search',

src/components/molecules/SideMenu/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props, State> {
   constructor() {
     super()

src/components/molecules/Table/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   static defaultProps: $Shape<Props> = {
     columnsWidths: [],

src/components/molecules/TaskItem/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   getLastMessage() {
     let message

src/components/molecules/Timeline/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   itemsRef: HTMLElement
   progressLineRef: HTMLElement

src/components/molecules/UserDropdown/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props, State> {
   itemMouseDown: boolean
 

src/components/molecules/WizardBreadcrumbs/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   render() {
     let pages = wizardConfig.pages.filter(p => !p.excludeFrom || p.excludeFrom !== this.props.wizardType)

src/components/molecules/WizardType/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   render() {
     return (

src/components/organisms/AlertModal/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   static defaultProps: $Shape<Props> = {
     type: 'confirmation',

src/components/organisms/AssessmentMigrationOptions/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props, State> {
   constructor() {
     super()

src/components/organisms/ChooseProvider/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   renderLoading() {
     if (!this.props.loading) {

src/components/organisms/DetailsContentHeader/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   getLastExecution(): ?MainItem | ?Execution {
     if (this.props.item && this.props.item.executions && this.props.item.executions.length) {

src/components/organisms/DropdownFilterGroup/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<typeof DropdownLink>[]
 }
+@observer
 class DropdownFilterGroup extends React.Component<Props> {
   renderDropdowns() {
     return (

src/components/organisms/EndpointDetailsContent/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   renderedKeys: { [string]: boolean }
 

src/components/organisms/EndpointValidation/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   handleCopyClick(message: string) {
     let succesful = DomUtils.copyTextToClipboard(message)

src/components/organisms/Executions/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props, State> {
   constructor() {
     super()

src/components/organisms/FilterList/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props, State> {
   constructor() {
     super()

src/components/organisms/LoginForm/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props, State> {
   static defaultProps = {
     className: '',

src/components/organisms/MainDetails/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   getSourceEndpoint(): ?Endpoint {
     let endpoint = this.props.endpoints.find(e => this.props.item && e.id === this.props.item.origin_endpoint_id)

src/components/organisms/MainList/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   renderList() {
     if (!this.props.items || this.props.items.length === 0) {

src/components/organisms/MigrationDetailsContent/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   renderBottomControls() {
     return (

src/components/organisms/Navigation/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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 (

src/components/organisms/Notifications/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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

src/components/organisms/ReplicaExecutionOptions/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props, State> {
   static defaultProps: $Shape<Props> = {
     executionLabel: 'Execute',

src/components/organisms/ReplicaMigrationOptions/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props, State> {
   constructor() {
     super()

src/components/organisms/Tasks/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props, State> {
   dragStartPosition: ?{ x: number, y: number }
 

src/components/organisms/WizardEndpointList/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   handleOnChange(selectedItem: ?Endpoint, provider: string) {
     if (selectedItem && selectedItem.id !== 'addNew') {

src/components/organisms/WizardInstances/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props, State> {
   timeout: TimeoutID
 

src/components/organisms/WizardNetworks/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   isLoading() {
     return this.props.loadingInstancesDetails || this.props.loading

src/components/organisms/WizardSummary/index.jsx

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @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<Props> {
   getDefaultOption(fieldName: string) {
     if (this.props.data.options && this.props.data.options[fieldName] === false) {