Upgrade to react 16

Issue-ID: AAI-1576
Change-Id: I2a3035c7922ccabdca446e76341adf6ca8785155
Signed-off-by: Arul.Nambi <arul.nambi@amdocs.com>

32 files changed, 153 insertions, 117 deletions

diff --git a/package.json b/package.json
index 4daf2df..211d047 100644
--- a/package.json
+++ b/package.json
@@ -13,39 +13,48 @@
   "license": "Apache-2.0",
   "dependencies": {
     "collapsible-sliding-panel": "1.0.0",
+    "configurable-interactive-layout": "^2.2.14",
     "core-js": "^2.4.0",
     "crypto-js": "^3.1.9-1",
     "d3": "^4.12.0",
     "es6-promise": "^3.2.1",
     "filter-bar-utils": "1.0.0",
+    "gulp-sass": "^3.0.0",
     "jquery": "^2.2.2",
+    "loadable-components": "^2.2.2",
     "lodash": "^4.17.4",
     "lodash.debounce": "^4.0.8",
     "md5": "^2.1.0",
     "moment": "^2.13.0",
     "moment-timezone": "^0.5.5",
     "node-fetch": "^1.5.3",
-    "react": "^15.6.1",
-    "react-autosuggest": "^6.0.4",
+    "prop-types": "^15.6.2",
+    "react": "^16.4.1",
+    "react-autosuggest": "^9.3.4",
+    "react-autowhatever": "^10.1.2",
     "react-bootstrap": "^0.31.2",
     "react-datepicker": "^0.55.0",
-    "react-dom": "^15.6.1",
-    "react-fontawesome": "^0.3.3",
+    "react-dom": "^16.4.1",
+    "react-fontawesome": "^1.6.1",
     "react-grid-layout": "^0.14.4",
-    "react-highlight-words": "^0.4.1",
+    "react-highlight-words": "^0.11.0",
     "react-redux": "^4.4.1",
     "react-router-dom": "^4.1.1",
     "react-select": "^1.2.1",
     "react-spinners": "^0.2.5",
     "react-split-pane": "^0.1.51",
-    "recharts": "^0.20.5",
+    "react-test-renderer": "^16.4.1",
+    "recharts": "^1.1.0",
     "redux": "^3.3.1",
     "redux-form": "^6.2.1",
     "redux-thunk": "^2.1.0",
+    "spinner-container": "^1.0.27",
     "topojson": "^2.2.0",
     "uuid-js": "^0.7.5",
     "validator": "^4.3.0",
-    "vertical-filter-bar": "1.0.4"
+    "velocity-react": "^1.4.1",
+    "vertical-filter-bar": "^1.0.7",
+    "wolfy87-eventemitter": "^5.2.5"
   },
   "devDependencies": {
     "babel-core": "^6.25.0",
@@ -59,7 +68,8 @@
     "crypto-js": "^3.1.9-1",
     "css-loader": "^0.23.1",
     "enzyme": "^3.3.0",
-    "enzyme-adapter-react-15": "^1.0.5",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme-react-16-adapter-setup": "^0.1.0",
     "eslint": "^3.1.1",
     "eslint-loader": "^1.3.0",
     "eslint-plugin-import": "^0.8.1",
@@ -86,12 +96,11 @@
     "json-loader": "^0.5.4",
     "jsx-loader": "^0.13.2",
     "nock": "^8.0.0",
-    "node-sass": "^3.8.0",
+    "node-sass": "^4.8.3",
     "node-watch": "^0.3.5",
     "prompt": "^0.2.14",
     "react-addons-test-utils": "^15.1.0",
     "react-hot-loader": "^3.0.0-beta.6",
-    "react-test-renderer": "^15.6.1",
     "redux-mock-store": "^1.4.0",
     "sass-loader": "^3.1.2",
     "source-map-loader": "^0.1.5",
@@ -102,13 +111,12 @@
   },
   "jest": {
     "verbose": true,
-    "setupTestFrameworkScriptFile": "./scripts/test/setupTests.js",
+    "setupTestFrameworkScriptFile": "./test/setupTests.js",
     "automock": false,
     "moduleNameMapper": {
-      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/scripts/test/fileMock.js",
-      "\\.(css|scss)$": "<rootDir>/scripts/test/styleMock.js"
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/fileMock.js",
+      "\\.(css|scss)$": "<rootDir>/test/styleMock.js"
     },
-    "testURL": "http://localhost",
     "moduleFileExtensions": [
       "js",
       "jsx"
diff --git a/scripts/test/setupTests.js b/scripts/test/setupTests.js
index 7237dc9..2318628 100644
--- a/scripts/test/setupTests.js
+++ b/scripts/test/setupTests.js
@@ -1,5 +1,5 @@
 import { configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-15';
+import Adapter from 'enzyme-adapter-react-16';
 import 'jest-enzyme';
 
 configure({ adapter: new Adapter() });
diff --git a/src/app/MainScreenHeader.jsx b/src/app/MainScreenHeader.jsx
index a3225e7..e485161 100644
--- a/src/app/MainScreenHeader.jsx
+++ b/src/app/MainScreenHeader.jsx
@@ -19,6 +19,7 @@
  * ============LICENSE_END=========================================================
  */
 import React, {Component} from 'react';
+import { PropTypes } from 'prop-types';
 import {connect} from 'react-redux';
 import FontAwesome from 'react-fontawesome';
 import {clearFilters} from 'filter-bar-utils';
@@ -105,11 +106,11 @@ const mapActionsToProps = (dispatch) => {
 
 class MainScreenHeader extends Component {
   static propTypes = {
-    showMenu: React.PropTypes.bool,
-    toggleButtonActive: React.PropTypes.bool,
-    externalRequestFound: React.PropTypes.object,
-    secondaryTitle: React.PropTypes.string,
-    subscriptionPayload: React.PropTypes.object
+    showMenu: PropTypes.bool,
+    toggleButtonActive: PropTypes.bool,
+    externalRequestFound: PropTypes.object,
+    secondaryTitle: PropTypes.string,
+    subscriptionPayload: PropTypes.object
   };
 
   navigationLinkAndCurrentPathMatch(location, to) {
diff --git a/src/app/MainScreenWrapper.jsx b/src/app/MainScreenWrapper.jsx
index 4bffc88..6689af9 100644
--- a/src/app/MainScreenWrapper.jsx
+++ b/src/app/MainScreenWrapper.jsx
@@ -95,15 +95,14 @@ class MainScreenWrapper extends Component {
     let customViewList = [];
     extensibleViews.forEach(function(view,key) {
 
-      let path = ''
-          , extKey = ''
-          ;
+      let path = '',
+        extKey = '';
       if(isEmpty(extensibleViews[key]['viewParams'])){
         path = '/' + view.viewName + '/:extensibleViewParams?';
         extKey = view.viewName + 'Route';
       } else {
         path = '/' + view.viewName  + view.viewParams;
-        extKey = view.viewName + view.viewParams + 'Route'
+        extKey = view.viewName + view.viewParams + 'Route';
       }
 
       var renderComponent = (props) => {
diff --git a/src/app/globalInlineMessageBar/GlobalInlineMessageBar.jsx b/src/app/globalInlineMessageBar/GlobalInlineMessageBar.jsx
index cb8b3df..ff3ccae 100644
--- a/src/app/globalInlineMessageBar/GlobalInlineMessageBar.jsx
+++ b/src/app/globalInlineMessageBar/GlobalInlineMessageBar.jsx
@@ -20,6 +20,7 @@
  */
 import {connect} from 'react-redux';
 import React, {Component} from 'react';
+import { PropTypes } from 'prop-types';
 
 import InlineMessage from 'generic-components/InlineMessage/InlineMessage.jsx';
 
@@ -37,8 +38,8 @@ let mapStateToProps = ({globalInlineMessageBar}) => {
 
 export class GlobalInlineMessageBar extends Component {
   static propTypes = {
-    feedbackMsgText: React.PropTypes.string,
-    feedbackMsgSeverity: React.PropTypes.string
+    feedbackMsgText: PropTypes.string,
+    feedbackMsgSeverity: PropTypes.string
   };
 
   render() {
diff --git a/src/app/tierSupport/TierSupport.jsx b/src/app/tierSupport/TierSupport.jsx
index a081964..5608cd3 100644
--- a/src/app/tierSupport/TierSupport.jsx
+++ b/src/app/tierSupport/TierSupport.jsx
@@ -19,6 +19,7 @@
  * ============LICENSE_END=========================================================
  */
 import React, {Component} from 'react';
+import { PropTypes } from 'prop-types';
 import {connect} from 'react-redux';
 import SplitPane from 'react-split-pane';
 import Spinner from 'utils/SpinnerContainer.jsx';
@@ -125,14 +126,14 @@ let mapActionToProps = (dispatch) => {
 
 class TierSupport extends Component {
   static propTypes = {
-    forceDirectedGraphRawData: React.PropTypes.object,
-    windowWidth: React.PropTypes.number,
-    windowHeight: React.PropTypes.number,
-    graphNodeSelectedMenu: React.PropTypes.string,
-    feedbackMsgText: React.PropTypes.string,
-    feedbackMsgSeverity: React.PropTypes.string,
-    nodeData: React.PropTypes.object,
-    enableBusyFeedback: React.PropTypes.bool
+    forceDirectedGraphRawData: PropTypes.object,
+    windowWidth: PropTypes.number,
+    windowHeight: PropTypes.number,
+    graphNodeSelectedMenu: PropTypes.string,
+    feedbackMsgText: PropTypes.string,
+    feedbackMsgSeverity: PropTypes.string,
+    nodeData: PropTypes.object,
+    enableBusyFeedback: PropTypes.bool
   };
 
   componentWillReceiveProps(nextProps) {
diff --git a/src/app/tierSupport/launchExternalResource/LaunchExternalResource.jsx b/src/app/tierSupport/launchExternalResource/LaunchExternalResource.jsx
index 4e8cec3..d132d3d 100644
--- a/src/app/tierSupport/launchExternalResource/LaunchExternalResource.jsx
+++ b/src/app/tierSupport/launchExternalResource/LaunchExternalResource.jsx
@@ -19,6 +19,7 @@
  * ============LICENSE_END=========================================================
  */
 import {connect} from 'react-redux';
+import { PropTypes } from 'prop-types';
 import React, {Component} from 'react';
 import {isEmpty} from 'lodash';
 import Button from 'react-bootstrap/lib/Button.js';
@@ -33,7 +34,7 @@ let mapStateToProps = ({tierSupport: {launchExternalResourceReducer}}) => {
 
 class LaunchExternalResource extends Component {
   static propTypes = {
-    externalResourcePayload: React.PropTypes.object
+    externalResourcePayload: PropTypes.object
   };
 
   render() {
diff --git a/src/app/tierSupport/selectedNodeDetails/SelectedNodeDetails.jsx b/src/app/tierSupport/selectedNodeDetails/SelectedNodeDetails.jsx
index 5750fd9..6ff0e53 100644
--- a/src/app/tierSupport/selectedNodeDetails/SelectedNodeDetails.jsx
+++ b/src/app/tierSupport/selectedNodeDetails/SelectedNodeDetails.jsx
@@ -20,6 +20,7 @@
  */
 import {connect} from 'react-redux';
 import React, {Component} from 'react';
+import { PropTypes } from 'prop-types';
 import Table from 'react-bootstrap/lib/Table';
 import LaunchInContext from 'app/tierSupport/launchExternalResource/LaunchExternalResource.jsx';
 import i18n from 'utils/i18n/i18n';
@@ -41,9 +42,9 @@ let mapStateToProps = ({tierSupport: {selectedNodeDetails}}) => {
 
 export class SelectedNodeDetails extends Component {
   static propTypes = {
-    nodeData: React.PropTypes.object,
-    nodeType: React.PropTypes.string,
-    uid: React.PropTypes.string
+    nodeData: PropTypes.object,
+    nodeType: PropTypes.string,
+    uid: PropTypes.string
   };
 
   render() {
diff --git a/src/app/vnfSearch/VnfSearch.jsx b/src/app/vnfSearch/VnfSearch.jsx
index a409ce2..edfe8cd 100644
--- a/src/app/vnfSearch/VnfSearch.jsx
+++ b/src/app/vnfSearch/VnfSearch.jsx
@@ -19,6 +19,7 @@
  * ============LICENSE_END=========================================================
  */
 import React, {Component} from 'react';
+import { PropTypes } from 'prop-types';
 import {connect} from 'react-redux';
 
 import {
@@ -159,14 +160,14 @@ let mapActionToProps = (dispatch) => {
 
 export class vnfSearch extends Component {
   static propTypes = {
-    feedbackMsgText: React.PropTypes.string,
-    feedbackSeverity: React.PropTypes.string,
-    vnfFilters: React.PropTypes.object,
-    selectedFilterValues: React.PropTypes.object,
-    vnfFilterValues: React.PropTypes.object,
-    vnfVisualizationPanelClass: React.PropTypes.string,
-    unifiedFilterValues: React.PropTypes.object,
-    nonConvertedFilters: React.PropTypes.object
+    feedbackMsgText: PropTypes.string,
+    feedbackSeverity: PropTypes.string,
+    vnfFilters: PropTypes.object,
+    selectedFilterValues: PropTypes.object,
+    vnfFilterValues: PropTypes.object,
+    vnfVisualizationPanelClass: PropTypes.string,
+    unifiedFilterValues: PropTypes.object,
+    nonConvertedFilters: PropTypes.object
   };
 
   componentWillMount() {
diff --git a/src/app/vnfSearch/VnfSearchNfRoleVisualization.jsx b/src/app/vnfSearch/VnfSearchNfRoleVisualization.jsx
index a71b2ab..93a6695 100644
--- a/src/app/vnfSearch/VnfSearchNfRoleVisualization.jsx
+++ b/src/app/vnfSearch/VnfSearchNfRoleVisualization.jsx
@@ -19,6 +19,7 @@
  * ============LICENSE_END=========================================================
  */
 import React, {Component} from 'react';
+import { PropTypes } from 'prop-types';
 import {connect} from 'react-redux';
 import {
   BarChart,
@@ -50,8 +51,8 @@ let mapStateToProps = ({vnfSearch}) => {
 
 export class VnfSearchNfRoleVisualization extends Component {
   static propTypes = {
-    processedNfRoleCountChartData: React.PropTypes.object,
-    enableBusyFeedback: React.PropTypes.bool
+    processedNfRoleCountChartData: PropTypes.object,
+    enableBusyFeedback: PropTypes.bool
   };
 
   render() {
diff --git a/src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx b/src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx
index 492d1c9..71e85e8 100644
--- a/src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx
+++ b/src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx
@@ -19,6 +19,7 @@
  * ============LICENSE_END=========================================================
  */
 import React, {Component} from 'react';
+import { PropTypes } from 'prop-types';
 import {connect} from 'react-redux';
 import {
   BarChart,
@@ -50,8 +51,8 @@ let mapStateToProps = ({vnfSearch}) => {
 
 export class VnfSearchNfTypeVisualization extends Component {
   static propTypes = {
-    processedNfTypeCountChartData: React.PropTypes.object,
-    enableBusyFeedback: React.PropTypes.bool
+    processedNfTypeCountChartData: PropTypes.object,
+    enableBusyFeedback: PropTypes.bool
   };
 
   render() {
diff --git a/src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx b/src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx
index 8dc25ca..bb42ef2 100644
--- a/src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx
+++ b/src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx
@@ -19,6 +19,7 @@
  * ============LICENSE_END=========================================================
  */
 import React, {Component} from 'react';
+import { PropTypes } from 'prop-types';
 import {connect} from 'react-redux';
 import {
   BarChart,
@@ -50,8 +51,8 @@ let mapStateToProps = ({vnfSearch}) => {
 
 export class VnfSearchOrchStatusVisualizations extends Component {
   static propTypes = {
-    processedOrchStatusCountChartData: React.PropTypes.object,
-    enableBusyFeedback: React.PropTypes.bool
+    processedOrchStatusCountChartData: PropTypes.object,
+    enableBusyFeedback: PropTypes.bool
   };
 
   render() {
diff --git a/src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx b/src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx
index 07ba988..aec5bac 100644
--- a/src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx
+++ b/src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx
@@ -19,6 +19,7 @@
  * ============LICENSE_END=========================================================
  */
 import React, {Component} from 'react';
+import { PropTypes } from 'prop-types';
 import {connect} from 'react-redux';
 import {
   BarChart,
@@ -50,8 +51,8 @@ let mapStateToProps = ({vnfSearch}) => {
 
 export class VnfSearchProvStatusVisualization extends Component {
   static propTypes = {
-    processedProvStatusCountChartData: React.PropTypes.object,
-    enableBusyFeedback: React.PropTypes.bool
+    processedProvStatusCountChartData: PropTypes.object,
+    enableBusyFeedback: PropTypes.bool
   };
 
   render() {
diff --git a/src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx b/src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx
index 3c73d22..e115933 100644
--- a/src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx
+++ b/src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx
@@ -19,6 +19,7 @@
  * ============LICENSE_END=========================================================
  */
 import React, {Component} from 'react';
+import { PropTypes } from 'prop-types';
 import {connect} from 'react-redux';
 
 import i18n from 'utils/i18n/i18n';
@@ -40,11 +41,11 @@ let mapStateToProps = ({vnfSearch}) => {
 
 export class VnfSearchTotalCountVisualization extends Component {
   static propTypes = {
-    count: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.number
+    count: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number
     ]),
-    enableBusyFeedback: React.PropTypes.bool
+    enableBusyFeedback: PropTypes.bool
   };
 
   render() {
diff --git a/src/generic-components/InlineMessage/InlineMessage.jsx b/src/generic-components/InlineMessage/InlineMessage.jsx
index 647b5dd..d634337 100644
--- a/src/generic-components/InlineMessage/InlineMessage.jsx
+++ b/src/generic-components/InlineMessage/InlineMessage.jsx
@@ -18,7 +18,8 @@
  * limitations under the License.
  * ============LICENSE_END=========================================================
  */
-import React, {Component, PropTypes} from 'react';
+import React, {Component} from 'react';
+import { PropTypes } from 'prop-types';
 import FontAwesome from 'react-fontawesome';
 import InlineMessageConstatns from './InlineMessageConstants';
 
diff --git a/src/generic-components/autoCompleteSearchBar/AutoCompleteSearchBar.jsx b/src/generic-components/autoCompleteSearchBar/AutoCompleteSearchBar.jsx
index 2f7b455..b7fca67 100644
--- a/src/generic-components/autoCompleteSearchBar/AutoCompleteSearchBar.jsx
+++ b/src/generic-components/autoCompleteSearchBar/AutoCompleteSearchBar.jsx
@@ -19,6 +19,7 @@
  * ============LICENSE_END=========================================================
  */
 import React, {Component} from 'react';
+import { PropTypes } from 'prop-types';
 import {Button} from 'react-bootstrap';
 import AutoSuggest from 'react-autosuggest';
 import Highlighter from 'react-highlight-words';
@@ -38,10 +39,10 @@ import {
 
 export default class AutoCompleteSearchBar extends Component {
   static propTypes = {
-    value: React.PropTypes.string,
-    suggestions: React.PropTypes.array,
-    cachedSuggestions: React.PropTypes.array,
-    suggestionName: React.PropTypes.string
+    value: PropTypes.string,
+    suggestions: PropTypes.array,
+    cachedSuggestions: PropTypes.array,
+    suggestionName: PropTypes.string
   };
 
   componentWillMount() {
diff --git a/src/generic-components/componentManager/ComponentManagerContainer.jsx b/src/generic-components/componentManager/ComponentManagerContainer.jsx
index 03cba83..02a3eba 100644
--- a/src/generic-components/componentManager/ComponentManagerContainer.jsx
+++ b/src/generic-components/componentManager/ComponentManagerContainer.jsx
@@ -19,6 +19,7 @@
  * ============LICENSE_END=========================================================
  */
 import React, {Component, PropTypes} from 'react';
+import { PropTypes } from 'prop-types';
 import ButtonGroup from 'react-bootstrap/lib/ButtonGroup';
 import Button from 'react-bootstrap/lib/Button';
 
diff --git a/src/generic-components/confirmations/ConfirmationModalView.jsx b/src/generic-components/confirmations/ConfirmationModalView.jsx
index b97c2d4..39fea97 100644
--- a/src/generic-components/confirmations/ConfirmationModalView.jsx
+++ b/src/generic-components/confirmations/ConfirmationModalView.jsx
@@ -19,6 +19,7 @@
  * ============LICENSE_END=========================================================
  */
 import React from 'react';
+import { PropTypes } from 'prop-types';
 import Button from 'react-bootstrap/lib/Button.js';
 
 import i18n from 'utils/i18n/i18n.js';
@@ -35,11 +36,11 @@ let typeClass = {
 class ConfirmationModalView extends React.Component {
 		
 		static propTypes = {
-				show: React.PropTypes.bool,
-				type: React.PropTypes.oneOf(['default', 'error', 'warning', 'success']),
-				msg: React.PropTypes.node,
-				title: React.PropTypes.string,
-				confirmationDetails: React.PropTypes.object
+				show: PropTypes.bool,
+				type: PropTypes.oneOf(['default', 'error', 'warning', 'success']),
+				msg: PropTypes.node,
+				title: PropTypes.string,
+				confirmationDetails: PropTypes.object
 		};
 		
 		static defaultProps = {
diff --git a/src/generic-components/dynamicViewLoader/dynamicViewLoader.jsx b/src/generic-components/dynamicViewLoader/dynamicViewLoader.jsx
index 332cdcf..7732951 100644
--- a/src/generic-components/dynamicViewLoader/dynamicViewLoader.jsx
+++ b/src/generic-components/dynamicViewLoader/dynamicViewLoader.jsx
@@ -19,6 +19,7 @@
  * ============LICENSE_END=========================================================
  */
 import React, {Component} from 'react';
+import { PropTypes } from 'prop-types';
 import {connect} from 'react-redux';
 
 import DateRangeSelector from 'generic-components/dateRangeSelector/DateRangeSelector.jsx';
@@ -54,8 +55,8 @@ let mapActionToProps = (dispatch) => {
 
 class DynamicViewLoader extends Component {
   static propTypes = {
-    viewTitle: React.PropTypes.string,
-    layoutSource: React.PropTypes.object
+    viewTitle: PropTypes.string,
+    layoutSource: PropTypes.object
   };
 
   componentWillMount() {
diff --git a/src/generic-components/graph/ForceDirectedGraph.jsx b/src/generic-components/graph/ForceDirectedGraph.jsx
index 0ec2412..dfebfe3 100644
--- a/src/generic-components/graph/ForceDirectedGraph.jsx
+++ b/src/generic-components/graph/ForceDirectedGraph.jsx
@@ -22,7 +22,8 @@ import {drag} from 'd3-drag';
 import {forceSimulation, forceLink, forceManyBody, forceCenter} from 'd3-force';
 import {interpolateNumber} from 'd3-interpolate';
 import {select, event as currentEvent} from 'd3-selection';
-import React, {Component, PropTypes} from 'react';
+import React, {Component} from 'react';
+import { PropTypes } from 'prop-types';
 import {interval, now} from 'd3-timer';
 import {zoom, zoomIdentity} from 'd3-zoom';
 import NodeConstants from './NodeVisualElementConstants.js';
diff --git a/src/generic-components/graph/Link.jsx b/src/generic-components/graph/Link.jsx
index bebd4b6..aec33b8 100644
--- a/src/generic-components/graph/Link.jsx
+++ b/src/generic-components/graph/Link.jsx
@@ -19,17 +19,18 @@
  * ============LICENSE_END=========================================================
  */
 import React, {Component} from 'react';
+import { PropTypes } from 'prop-types';
 
 import TempCreateAttributes from './TempCreateAttributes.js';
 
 class Link extends Component {
 		
 		static propTypes = {
-				x1: React.PropTypes.number,
-				y1: React.PropTypes.number,
-				x2: React.PropTypes.number,
-				y2: React.PropTypes.number,
-				linkAttributes: React.PropTypes.object
+				x1: PropTypes.number,
+				y1: PropTypes.number,
+				x2: PropTypes.number,
+				y2: PropTypes.number,
+				linkAttributes: PropTypes.object
 		};
 		
 		static defaultProps = {
diff --git a/src/generic-components/graph/Node.jsx b/src/generic-components/graph/Node.jsx
index 0b96f2a..6de4715 100644
--- a/src/generic-components/graph/Node.jsx
+++ b/src/generic-components/graph/Node.jsx
@@ -19,15 +19,16 @@
  * ============LICENSE_END=========================================================
  */
 import React, {Component} from 'react';
+import { PropTypes } from 'prop-types';
 
 class Node extends Component {
 		
 		static propTypes = {
-				x: React.PropTypes.number,
-				y: React.PropTypes.number,
-				nodeClass: React.PropTypes.string,
-				visualElements: React.PropTypes.array,
-				meta: React.PropTypes.object
+				x: PropTypes.number,
+				y: PropTypes.number,
+				nodeClass: PropTypes.string,
+				visualElements: PropTypes.array,
+				meta: PropTypes.object
 		};
 		
 		static defaultProps = {
diff --git a/src/generic-components/graph/SVGShape.jsx b/src/generic-components/graph/SVGShape.jsx
index 0ee31fd..b06c46f 100644
--- a/src/generic-components/graph/SVGShape.jsx
+++ b/src/generic-components/graph/SVGShape.jsx
@@ -19,15 +19,16 @@
  * ============LICENSE_END=========================================================
  */
 import React, {Component} from 'react';
+import { PropTypes } from 'prop-types';
 import NodeVisualElementConstants from './NodeVisualElementConstants';
 
 class SVGShape extends Component {
 		
 		static propTypes = {
-				shapeType: React.PropTypes.string.isRequired,
-				shapeAttributes: React.PropTypes.object.isRequired,
-				shapeClass: React.PropTypes.object.isRequired,
-				textValue: React.PropTypes.string
+				shapeType: PropTypes.string.isRequired,
+				shapeAttributes: PropTypes.object.isRequired,
+				shapeClass: PropTypes.object.isRequired,
+				textValue: PropTypes.string
 		};
 		
 		static defaultProps = {
diff --git a/src/generic-components/input/ToggleInput.jsx b/src/generic-components/input/ToggleInput.jsx
index 980d0ff..49b0376 100644
--- a/src/generic-components/input/ToggleInput.jsx
+++ b/src/generic-components/input/ToggleInput.jsx
@@ -19,15 +19,16 @@
  * ============LICENSE_END=========================================================
  */
 import React from 'react';
+import { PropTypes } from 'prop-types';
 
 export default
 class ToggleInput extends React.Component {
 		
 		static propTypes = {
-				label: React.PropTypes.node,
-				value: React.PropTypes.bool,
-				onChange: React.PropTypes.func,
-				disabled: React.PropTypes.bool
+				label: PropTypes.node,
+				value: PropTypes.bool,
+				onChange: PropTypes.func,
+				disabled: PropTypes.bool
 		}
 		
 		static defaultProps = {
diff --git a/src/generic-components/input/inputOptions/InputOptions.jsx b/src/generic-components/input/inputOptions/InputOptions.jsx
index 61bc33f..bb9d777 100644
--- a/src/generic-components/input/inputOptions/InputOptions.jsx
+++ b/src/generic-components/input/inputOptions/InputOptions.jsx
@@ -19,6 +19,7 @@
  * ============LICENSE_END=========================================================
  */
 import React from 'react';
+import { PropTypes } from 'prop-types';
 import i18n from 'utils/i18n/i18n.js';
 import classNames from 'classnames';
 import Select from 'generic-components/input/SelectInput.jsx';
@@ -28,25 +29,25 @@ export const other = {OTHER: 'Other'};
 class InputOptions extends React.Component {
 		
 		static propTypes = {
-				values: React.PropTypes.arrayOf(React.PropTypes.shape({
-						enum: React.PropTypes.string,
-						title: React.PropTypes.string
+				values: PropTypes.arrayOf(PropTypes.shape({
+						enum: PropTypes.string,
+						title: PropTypes.string
 				})),
-				isEnabledOther: React.PropTypes.bool,
-				title: React.PropTypes.string,
-				selectedValue: React.PropTypes.string,
-				multiSelectedEnum: React.PropTypes.array,
-				selectedEnum: React.PropTypes.string,
-				otherValue: React.PropTypes.string,
-				onEnumChange: React.PropTypes.func,
-				onOtherChange: React.PropTypes.func,
-				isRequired: React.PropTypes.bool,
-				isMultiSelect: React.PropTypes.bool
+				isEnabledOther: PropTypes.bool,
+				title: PropTypes.string,
+				selectedValue: PropTypes.string,
+				multiSelectedEnum: PropTypes.array,
+				selectedEnum: PropTypes.string,
+				otherValue: PropTypes.string,
+				onEnumChange: PropTypes.func,
+				onOtherChange: PropTypes.func,
+				isRequired: PropTypes.bool,
+				isMultiSelect: PropTypes.bool
 		};
 		
 		
 		static contextTypes = {
-				isReadOnlyMode: React.PropTypes.bool
+				isReadOnlyMode: PropTypes.bool
 		};
 		
 		state = {
diff --git a/src/generic-components/map/TopographicMap.jsx b/src/generic-components/map/TopographicMap.jsx
index b72b1be..fc0fb64 100644
--- a/src/generic-components/map/TopographicMap.jsx
+++ b/src/generic-components/map/TopographicMap.jsx
@@ -19,6 +19,7 @@
  * ============LICENSE_END=========================================================
  */
 import React, {Component, PropTypes} from 'react';
+import { PropTypes } from 'prop-types';
 import {geoAlbersUsa, geoEquirectangular, geoPath} from 'd3-geo';
 import {feature, mesh} from 'topojson';
 
diff --git a/src/generic-components/notifications/NotificationModal.jsx b/src/generic-components/notifications/NotificationModal.jsx
index b09212d..1547da3 100644
--- a/src/generic-components/notifications/NotificationModal.jsx
+++ b/src/generic-components/notifications/NotificationModal.jsx
@@ -30,6 +30,7 @@
 	*
 	*/
 import React, {Component, PropTypes} from 'react';
+import { PropTypes } from 'prop-types';
 import {connect} from 'react-redux';
 import Button from 'react-bootstrap/lib/Button.js';
 
diff --git a/src/generic-components/paginatedTable/PaginatedTable.jsx b/src/generic-components/paginatedTable/PaginatedTable.jsx
index cd36f2d..6b6c5e9 100644
--- a/src/generic-components/paginatedTable/PaginatedTable.jsx
+++ b/src/generic-components/paginatedTable/PaginatedTable.jsx
@@ -19,6 +19,7 @@
  * ============LICENSE_END=========================================================
  */
 import React, {Component} from 'react';
+import { PropTypes } from 'prop-types';
 
 import Pagination from 'react-bootstrap/lib/Pagination';
 import Table from 'react-bootstrap/lib/Table';
@@ -28,15 +29,15 @@ const MAX_PAGE_LINKS = 5;
 export default class PaginatedTable extends Component {
 
   static propTypes = {
-    tableHeaders: React.PropTypes.object,
-    tableData: React.PropTypes.array,
-    activePage: React.PropTypes.number,
-    pageCount: React.PropTypes.number,
-    onPageIndexSelected: React.PropTypes.func,
-    paginationClass: React.PropTypes.string,
-    tableClass: React.PropTypes.string,
-    displayHeader: React.PropTypes.bool,
-    maxPaginationLinks: React.PropTypes.number
+    tableHeaders: PropTypes.object,
+    tableData: PropTypes.array,
+    activePage: PropTypes.number,
+    pageCount: PropTypes.number,
+    onPageIndexSelected: PropTypes.func,
+    paginationClass: PropTypes.string,
+    tableClass: PropTypes.string,
+    displayHeader: PropTypes.bool,
+    maxPaginationLinks: PropTypes.number
   }
 
   static defaultProps = {
diff --git a/src/generic-components/panel/SlidePanel.jsx b/src/generic-components/panel/SlidePanel.jsx
index 305fdf5..9580837 100644
--- a/src/generic-components/panel/SlidePanel.jsx
+++ b/src/generic-components/panel/SlidePanel.jsx
@@ -19,16 +19,17 @@
  * ============LICENSE_END=========================================================
  */
 import React from 'react';
+import { PropTypes } from 'prop-types';
 import FontAwesome from 'react-fontawesome';
 import ReactDOM from 'react-dom';
 
 class SlidePanel extends React.Component {
 		
 		static PropTypes = {
-				direction: React.PropTypes.string.isRequired,
-				className: React.PropTypes.string,
-				title: React.PropTypes.string,
-				isOpen: React.PropTypes.bool
+				direction: PropTypes.string.isRequired,
+				className: PropTypes.string,
+				title: PropTypes.string,
+				isOpen: PropTypes.bool
 		};
 		
 		static defaultProps = {
diff --git a/src/generic-components/titledContainer/TitledContainer.jsx b/src/generic-components/titledContainer/TitledContainer.jsx
index 7ac3f11..d3d606a 100644
--- a/src/generic-components/titledContainer/TitledContainer.jsx
+++ b/src/generic-components/titledContainer/TitledContainer.jsx
@@ -19,6 +19,7 @@
  * ============LICENSE_END=========================================================
  */
 import React, {Component, PropTypes} from 'react';
+import { PropTypes } from 'prop-types';
 import Button from 'react-bootstrap/lib/Button';
 
 import i18n from 'utils/i18n/i18n';
diff --git a/src/generic-components/toggleButtonGroup/ToggleButtonGroup.jsx b/src/generic-components/toggleButtonGroup/ToggleButtonGroup.jsx
index 134a748..6d57637 100644
--- a/src/generic-components/toggleButtonGroup/ToggleButtonGroup.jsx
+++ b/src/generic-components/toggleButtonGroup/ToggleButtonGroup.jsx
@@ -19,6 +19,7 @@
  * ============LICENSE_END=========================================================
  */
 import React, {Component, PropTypes} from 'react';
+import { PropTypes } from 'prop-types';
 import {connect} from 'react-redux';
 
 import ButtonGroup from 'react-bootstrap/lib/ButtonGroup.js';
diff --git a/src/utils/SpinnerContainer.jsx b/src/utils/SpinnerContainer.jsx
index 1c8b1cd..9bcf769 100644
--- a/src/utils/SpinnerContainer.jsx
+++ b/src/utils/SpinnerContainer.jsx
@@ -19,6 +19,7 @@
  * ============LICENSE_END=========================================================
  */
 import React, { Component } from 'react';
+import { PropTypes } from 'prop-types';
 import { ClipLoader } from 'react-spinners';
 import {COLOR_BLUE} from 'utils/GlobalConstants.js';
 
@@ -41,7 +42,7 @@ class SpinnerContainer extends Component {
 export default SpinnerContainer;
 
 SpinnerContainer.propTypes = {
-  loading: React.PropTypes.bool
+  loading: PropTypes.bool
 };
 
 SpinnerContainer.defaultProps = {