Feature/upgrade react

frontend/lib/js/AppRoot.js

@@ -1,20 +1,20 @@
 // @flow
+
 import React                           from 'react';
-import PropTypes                       from 'prop-types';
 import { Provider }                    from 'react-redux';
 import { hot }                         from 'react-hot-loader'
 
 import AppRouter                       from './app/AppRouter';
 
-const AppRoot = ({store, browserHistory}) => (
+type PropsType = {
+  store: Object,
+  browserHistory: Object
+};
+
+const AppRoot = ({ store, browserHistory }: PropsType) => (
   <Provider store={store}>
     <AppRouter history={browserHistory} />
   </Provider>
 );
 
-AppRoot.propTypes = {
-  store: PropTypes.object.isRequired,
-  browserHistory: PropTypes.object.isRequired,
-};
-
 export default hot(module)(AppRoot);

frontend/lib/js/form-components/EditableTags.js

@@ -1,11 +1,23 @@
-import React                 from 'react';
-import PropTypes             from 'prop-types';
+// @flow
+
+import * as React            from 'react';
 import classnames            from 'classnames';
 
 import { Tags }              from '../tags';
 import EditableTagsForm      from './EditableTagsForm';
 
-const EditableTags = (props) => {
+type PropsType = {
+  className: string,
+  tags?: string[],
+  editing: boolean,
+  loading: boolean,
+  tagComponent?: React.Node,
+  onSubmit: () => void,
+  onToggleEdit: () => void,
+  availableTags: string[]
+};
+
+const EditableTags = (props: PropsType) => {
   return props.editing
     ? <EditableTagsForm
         className={classnames(props.className, "editable-tags", "editable-tags__form")}
@@ -33,15 +45,4 @@ const EditableTags = (props) => {
       </div>;
 };
 
-EditableTags.propTypes = {
-  className: PropTypes.string,
-  tags: PropTypes.arrayOf(PropTypes.string),
-  editing: PropTypes.bool.isRequired,
-  loading: PropTypes.bool.isRequired,
-  tagComponent: PropTypes.element,
-  onSubmit: PropTypes.func.isRequired,
-  onToggleEdit: PropTypes.func.isRequired,
-  availableTags: PropTypes.arrayOf(PropTypes.string),
-}
-
 export default EditableTags;

frontend/lib/js/form-components/EditableTagsForm.js

@@ -1,14 +1,24 @@
+// @flow
+
 import React            from 'react';
-import PropTypes        from 'prop-types';
 import T                from 'i18n-react';
 import classnames       from 'classnames';
 import clickOutside     from 'react-onclickoutside';
 
 // A multi-select where new items can be created
 import { Creatable as Select}  from 'react-select';
 
-class EditableTagsForm extends React.Component {
-  constructor(props) {
+type PropsType = {
+  className?: string,
+  tags?: string[],
+  loading: boolean,
+  onSubmit: () => void,
+  onCancel: () => void,
+  availableTags?: string[],
+};
+
+class EditableTagsForm extends React.Component<PropsType> {
+  constructor(props: PropsType) {
     super(props);
     this.state = {
       values: (props.tags && props.tags.map(t => ({ label: t, value: t}))) || []
@@ -61,13 +71,4 @@ class EditableTagsForm extends React.Component {
   }
 };
 
-EditableTagsForm.propTypes = {
-  className: PropTypes.string,
-  tags: PropTypes.arrayOf(PropTypes.string),
-  loading: PropTypes.bool.isRequired,
-  onSubmit: PropTypes.func.isRequired,
-  onCancel: PropTypes.func.isRequired,
-  availableTags: PropTypes.arrayOf(PropTypes.string),
-};
-
 export default clickOutside(EditableTagsForm);

frontend/lib/js/form-components/EditableText.js

@@ -1,10 +1,21 @@
+// @flow
+
 import React                from 'react';
-import PropTypes            from 'prop-types';
 
 import { SelectableLabel }  from '../selectable-label';
 import EditableTextForm     from './EditableTextForm';
 
-class EditableText extends React.Component {
+type PropsType = {
+  className?: string,
+  loading: boolean,
+  editing: boolean,
+  text: string,
+  selectTextOnMount: boolean,
+  onSubmit: () => void,
+  onToggleEdit: () => void,
+};
+
+class EditableText extends React.Component<PropsType> {
   render() {
     return this.props.editing
       ? <EditableTextForm
@@ -29,14 +40,4 @@ class EditableText extends React.Component {
   }
 };
 
-EditableText.propTypes = {
-  className: PropTypes.string,
-  loading: PropTypes.bool.isRequired,
-  editing: PropTypes.bool.isRequired,
-  text: PropTypes.string.isRequired,
-  selectTextOnMount: PropTypes.bool.isRequired,
-  onSubmit: PropTypes.func.isRequired,
-  onToggleEdit: PropTypes.func.isRequired,
-};
-
 export default EditableText;

frontend/lib/js/form-components/SearchBox.js

@@ -1,11 +1,24 @@
+// @flow
+
 import React                    from 'react';
 import { Dot }                  from 'react-animated-dots';
-import PropTypes                from 'prop-types';
 import T                        from 'i18n-react';
 import { Creatable as Select }  from 'react-select';
 import { isEmpty, duration }    from '../common/helpers';
 
-const SearchBox = (props) => {
+type PropsType = {
+  search: string[],
+  onSearch: string => void,
+  onChange: () => void,
+  onClearQuery: () => void,
+  options: string[],
+  isMulti: boolean,
+  searchResult: Object,
+  datasetId: string,
+  searchConfig: Object
+};
+
+const SearchBox = (props: PropsType) => {
   const { searchResult, searchConfig } = props;
 
   return props.isMulti
@@ -82,16 +95,4 @@ const SearchBox = (props) => {
       </div>
 };
 
-SearchBox.propTypes = {
-  search: PropTypes.arrayOf(PropTypes.string),
-  onSearch: PropTypes.func.isRequired,
-  onChange: PropTypes.func,
-  onClearQuery: PropTypes.func,
-  options: PropTypes.arrayOf(PropTypes.string),
-  isMulti: PropTypes.bool,
-  searchResult: PropTypes.object,
-  datasetId: PropTypes.string,
-  searchConfig: PropTypes.object
-};
-
 export default SearchBox;

frontend/lib/js/form-components/VerticalToggleButton.js

@@ -1,8 +1,18 @@
+// @flow
+
 import React                from 'react';
-import PropTypes            from 'prop-types';
 import classnames           from 'classnames';
 
-const VerticalToggleButton = (props) => {
+type PropsType = {
+  onToggle: string => void,
+  activeValue: string,
+  options: {
+    label: string,
+    value: string,
+  }[]
+};
+
+const VerticalToggleButton = (props: PropsType) => {
   return (
     <p className="vertical-toggle-button">
       {
@@ -28,13 +38,4 @@ const VerticalToggleButton = (props) => {
   );
 };
 
-VerticalToggleButton.propTypes = {
-  onToggle: PropTypes.func.isRequired,
-  activeValue: PropTypes.string.isRequired,
-  options: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.string,
-    value: PropTypes.string,
-  })).isRequired,
-};
-
 export default VerticalToggleButton;

frontend/lib/js/header/Header.js

@@ -1,9 +1,15 @@
+// @flow
+
 import React           from 'react';
-import PropTypes       from 'prop-types';
 import T               from 'i18n-react';
 import { connect }     from 'react-redux';
 
-class Header extends React.Component {
+type PropsType = {
+  version: string,
+  isDevelopment: boolean,
+};
+
+class Header extends React.Component<PropsType> {
   render() {
     return (
       <header className="header">
@@ -24,11 +30,6 @@ class Header extends React.Component {
   }
 }
 
-Header.propTypes = {
-  version: PropTypes.string,
-  isDevelopment: PropTypes.bool
-};
-
 const mapStateToProps = (state, ownProps) => {
   return {
     version: state.startup.config.version || '',

frontend/lib/js/previous-queries/delete-modal/DeletePreviousQueryModal.js

@@ -1,5 +1,6 @@
+// @flow
+
 import React                from 'react';
-import PropTypes            from 'prop-types';
 import T                    from 'i18n-react';
 import { connect }          from 'react-redux';
 
@@ -11,8 +12,13 @@ import {
   deletePreviousQueryModalClose,
 }                           from './actions';
 
+type PropsType = {
+  queryId: string | number,
+  onCloseModal: () => void,
+  onDeletePreviousQuery: () => void,
+};
 
-const DeletePreviousQueryModal = (props) => {
+const DeletePreviousQueryModal = (props: PropsType) => {
   return !!props.queryId && (
     <Modal closeModal={props.onCloseModal}>
       <div className="delete-previous-query-modal">
@@ -36,12 +42,6 @@ const DeletePreviousQueryModal = (props) => {
   );
 };
 
-DeletePreviousQueryModal.propTypes = {
-  queryId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  onCloseModal: PropTypes.func.isRequired,
-  onDeletePreviousQuery: PropTypes.func.isRequired,
-};
-
 const mapStateToProps = (state) => ({
   queryId: state.deletePreviousQueryModal.queryId,
 });

frontend/lib/js/previous-queries/list/PreviousQueries.js

@@ -1,21 +1,21 @@
+// @flow
+
 import React, { Component }            from 'react';
-import PropTypes                       from 'prop-types'
 import T                               from 'i18n-react';
 import ReactList                       from 'react-list';
 
 import { ErrorMessage }                from '../../error-message';
 import PreviousQuery                   from './PreviousQuery';
 
+type PropsType = {
+  datasetId: string,
+  queries: [],
+  loading: boolean,
+  error: string,
+  loadQueries: () => void,
+};
 
-class PreviousQueries extends Component {
-  static propTypes = {
-    datasetId: PropTypes.string,
-    queries: PropTypes.array.isRequired,
-    loading: PropTypes.bool,
-    error: PropTypes.string,
-    loadQueries: PropTypes.func.isRequired,
-  }
-
+class PreviousQueries extends Component<PropsType> {
   componentDidMount() {
     this.props.loadQueries();
   }

frontend/lib/js/previous-queries/list/PreviousQueriesContainer.js

@@ -1,12 +1,21 @@
+// @flow
+
 import React                     from 'react';
-import PropTypes                 from 'prop-types';
 import { connect }               from 'react-redux';
 
 import { loadPreviousQueries }   from './actions';
 import { selectPreviousQueries } from './selector';
 import PreviousQueries           from './PreviousQueries';
 
-const PreviousQueriesContainer = (props) => {
+type PropsType = {
+  datasetId: string,
+  queries: [],
+  loading: boolean,
+  error: string,
+  loadQueries: () => void,
+}
+
+const PreviousQueriesContainer = (props: PropsType) => {
   return (
     <PreviousQueries
       datasetId={props.datasetId}
@@ -18,14 +27,6 @@ const PreviousQueriesContainer = (props) => {
   );
 };
 
-PreviousQueriesContainer.propTypes = {
-  datasetId: PropTypes.string.isRequired,
-  queries: PropTypes.array.isRequired,
-  loading: PropTypes.bool,
-  error: PropTypes.string,
-  loadQueries: PropTypes.func.isRequired,
-};
-
 const mapStateToProps = (state) => ({
   queries: selectPreviousQueries(
     state.previousQueries.queries,