react 16 upgrade

Issue-ID: SDC-1762
Change-Id: I7701f12fc63bb09f8c985c7c893b984701dcbfab
Signed-off-by: Einav Keidar <einavw@amdocs.com>

5 files changed, 59 insertions, 33 deletions

diff --git a/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx b/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx
index be0ebf2bdd..37d79cb72e 100644
--- a/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx
+++ b/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx
@@ -1,17 +1,17 @@
-/*!
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+/*
+ * Copyright © 2016-2018 European Support Limited
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
  *
- * http://www.apache.org/licenses/LICENSE-2.0
+ *      http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
- * or implied. See the License for the specific language governing
- * permissions and limitations under the License.
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
  */
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -36,8 +36,8 @@ class ExpandableInputOpened extends React.Component {
         this.rawDomNode.focus();
     }
 
-    componentWillReceiveProps(newProps) {
-        if (!newProps.value) {
+    componentDidUpdate() {
+        if (!this.props.value) {
             if (!(document.activeElement === this.rawDomNode)) {
                 this.props.handleBlur();
             }
diff --git a/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx b/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
index f36d999249..21f09e6613 100644
--- a/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
+++ b/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
@@ -16,9 +16,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
-import Input from 'nfvo-components/input/validation/InputWrapper.jsx';
+import Input from 'nfvo-components/input/validation/Input.jsx';
 
 class DualListboxView extends React.Component {
+    constructor(props) {
+        super(props);
+        this.availableListRef = React.createRef();
+        this.availableListFilterRef = React.createRef();
+        this.selectedValuesListFilterRef = React.createRef();
+        this.selectedValuesRef = React.createRef();
+    }
     static propTypes = {
         availableList: PropTypes.arrayOf(
             PropTypes.shape({
@@ -77,13 +84,13 @@ class DualListboxView extends React.Component {
                     unselectedList,
                     {
                         value: availableListFilter,
-                        ref: 'availableListFilter',
+                        ref: this.availableListFilterRef,
                         disabled: isReadOnlyMode,
                         onChange: value =>
                             this.setState({ availableListFilter: value })
                     },
                     {
-                        ref: 'availableValues',
+                        ref: this.availableListRef,
                         disabled: isReadOnlyMode,
                         testId: 'available'
                     }
@@ -94,13 +101,13 @@ class DualListboxView extends React.Component {
                     selectedList,
                     {
                         value: selectedValuesListFilter,
-                        ref: 'selectedValuesListFilter',
+                        ref: this.selectedValuesListFilterRef,
                         disabled: isReadOnlyMode,
                         onChange: value =>
                             this.setState({ selectedValuesListFilter: value })
                     },
                     {
-                        ref: 'selectedValues',
+                        ref: this.selectedValuesRef,
                         disabled: isReadOnlyMode,
                         testId: 'selected'
                     }
@@ -236,6 +243,12 @@ class DualListboxView extends React.Component {
     removeAllFromSelectedList() {
         this.props.onChange([]);
     }
+
+    // fix for auto-selection of first value in the list on the first render
+    componentDidMount() {
+        this.availableListRef.current.input.value = '';
+        this.selectedValuesRef.current.input.value = '';
+    }
 }
 
 export default DualListboxView;
diff --git a/openecomp-ui/src/nfvo-components/input/validation/Form.jsx b/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
index b5db67c027..027920c423 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
@@ -1,17 +1,17 @@
-/*!
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+/*
+ * Copyright © 2016-2018 European Support Limited
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
  *
- * http://www.apache.org/licenses/LICENSE-2.0
+ *      http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
- * or implied. See the License for the specific language governing
- * permissions and limitations under the License.
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
  */
 
 import React from 'react';
@@ -42,7 +42,8 @@ class Form extends React.Component {
         cancelButtonText: PropTypes.string,
         onValidChange: PropTypes.func,
         onValidityChanged: PropTypes.func,
-        onValidateForm: PropTypes.func
+        onValidateForm: PropTypes.func,
+        btnClassName: PropTypes.string
     };
 
     constructor(props) {
@@ -64,6 +65,7 @@ class Form extends React.Component {
             submitButtonText,
             cancelButtonText,
             children,
+            btnClassName,
             ...formProps
         } = this.props;
         /* eslint-enable no-unused-vars */
@@ -82,6 +84,7 @@ class Form extends React.Component {
                         cancelButtonText={cancelButtonText}
                         ref={this.setButtonsRef}
                         isReadOnlyMode={isReadOnlyMode}
+                        className={btnClassName}
                     />
                 )}
             </form>
@@ -159,6 +162,7 @@ export class TabsForm extends Form {
             onValidChange,
             onValidityChanged,
             onDataChanged,
+            btnClassName,
             children,
             ...formProps
         } = this.props;
@@ -176,6 +180,7 @@ export class TabsForm extends Form {
                         cancelButtonText={cancelButtonText}
                         ref={buttons => (this.buttons = buttons)}
                         isReadOnlyMode={isReadOnlyMode}
+                        className={btnClassName}
                     />
                 )}
             </form>
diff --git a/openecomp-ui/src/nfvo-components/input/validation/Input.jsx b/openecomp-ui/src/nfvo-components/input/validation/Input.jsx
index c54d4b660f..f3279b0b6d 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/Input.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/Input.jsx
@@ -4,9 +4,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -197,11 +197,15 @@ class Input extends React.Component {
             selectedValues
         });
     }
-    componentWillReceiveProps(nextProps) {
-        this.setState({
-            value: nextProps.value
-        });
+
+    static getDerivedStateFromProps(props, state) {
+        if (state.value === props.value) {
+            return null;
+        } else {
+            return { value: props.value, ...state };
+        }
     }
+
     onChange(e) {
         const { onChange, type } = this.props;
         let value = e.target.value;
diff --git a/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx b/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
index 550989688e..a4397114a0 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
@@ -1,17 +1,17 @@
-/*!
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+/*
+ * Copyright © 2016-2018 European Support Limited
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
  *
- * http://www.apache.org/licenses/LICENSE-2.0
+ *      http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
- * or implied. See the License for the specific language governing
- * permissions and limitations under the License.
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
  */
 /**
  * Holds the buttons for save/reset for forms.
@@ -57,8 +57,12 @@ class ValidationButtons extends React.Component {
         ) : (
             <SVGIcon className="close" name="close" />
         );
+        let className = 'validation-buttons';
+        if (this.props.className) {
+            className += ' ' + this.props.className;
+        }
         return (
-            <div className="validation-buttons">
+            <div className={className}>
                 {!this.props.isReadOnlyMode ? (
                     <div>
                         <Button