gerrit.onap Code Review - sdc.git/blob

   1 /*
   2  * Copyright © 2016-2018 European Support Limited
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  *      http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  */
  16 import React from 'react';
  17 import PropTypes from 'prop-types';
  18 import i18n from 'nfvo-utils/i18n/i18n.js';
  19 import Input from 'nfvo-components/input/validation/Input.jsx';
  20 import Form from 'nfvo-components/input/validation/Form.jsx';
  21 import GridSection from 'nfvo-components/grid/GridSection.jsx';
  22 import GridItem from 'nfvo-components/grid/GridItem.jsx';
  23 import isEqual from 'lodash/isEqual.js';
  24
  25 const NICPropType = PropTypes.shape({
  26     id: PropTypes.string,
  27     name: PropTypes.string,
  28     description: PropTypes.string,
  29     networkId: PropTypes.string
  30 });
  31
  32 class NICCreationView extends React.Component {
  33     static propTypes = {
  34         data: NICPropType,
  35         onDataChanged: PropTypes.func.isRequired,
  36         onSubmit: PropTypes.func.isRequired,
  37         onCancel: PropTypes.func.isRequired
  38     };
  39     shouldComponentUpdate(nextProps) {
  40         let res = true;
  41         const { data, isFormValid, formReady, genericFieldInfo } = this.props;
  42         if (
  43             isEqual(data, nextProps.data) &&
  44             isEqual(isFormValid, nextProps.isFormValid) &&
  45             formReady === nextProps.formReady &&
  46             isEqual(genericFieldInfo, nextProps.genericFieldInfo)
  47         ) {
  48             res = false;
  49         }
  50         return res;
  51     }
  52     render() {
  53         let {
  54             data = {},
  55             onDataChanged,
  56             genericFieldInfo,
  57             isFormValid,
  58             formReady
  59         } = this.props;
  60         let { name, description, networkDescription } = data;
  61         return (
  62             <div>
  63                 {genericFieldInfo && (
  64                     <Form
  65                         hasButtons={true}
  66                         onSubmit={this.submit}
  67                         submitButtonText={
  68                             data.id ? i18n('Save') : i18n('Create')
  69                         }
  70                         onReset={this.cancel}
  71                         labledButtons={true}
  72                         isValid={isFormValid}
  73                         onValidateForm={this.validate}
  74                         formReady={formReady}>
  75                         <GridSection hasLastColSet>
  76                             <GridItem colSpan={4} lastColInRow>
  77                                 <Input
  78                                     value={name}
  79                                     label={i18n('Name')}
  80                                     data-test-id="nic-name"
  81                                     onChange={name => onDataChanged({ name })}
  82                                     isRequired={true}
  83                                     type="text"
  84                                     isValid={genericFieldInfo['name'].isValid}
  85                                     errorText={
  86                                         genericFieldInfo['name'].errorText
  87                                     }
  88                                     className="field-section"
  89                                 />
  90                                 <Input
  91                                     value={description}
  92                                     label={i18n('Description')}
  93                                     data-test-id="nic-description"
  94                                     onChange={description =>
  95                                         onDataChanged({ description })
  96                                     }
  97                                     isValid={
  98                                         genericFieldInfo['description'].isValid
  99                                     }
 100                                     errorText={
 101                                         genericFieldInfo['description']
 102                                             .errorText
 103                                     }
 104                                     type="textarea"
 105                                     className="field-section"
 106                                 />
 107                             </GridItem>
 108                         </GridSection>
 109                         <GridSection title={i18n('Network')} hasLastColSet>
 110                             <GridItem colSpan={2}>
 111                                 <div className="form-group">
 112                                     <label className="control-label">
 113                                         {i18n('Network Type')}
 114                                     </label>
 115                                     <div className="network-type-radio">
 116                                         <Input
 117                                             label={i18n('Internal')}
 118                                             disabled
 119                                             checked={false}
 120                                             data-test-id="nic-internal"
 121                                             className="network-radio disabled"
 122                                             type="radio"
 123                                         />
 124                                         <Input
 125                                             label={i18n('External')}
 126                                             disabled
 127                                             checked={true}
 128                                             data-test-id="nic-external"
 129                                             className="network-radio disabled"
 130                                             type="radio"
 131                                         />
 132                                     </div>
 133                                 </div>
 134                             </GridItem>
 135                             <GridItem colSpan={2} lastColInRow>
 136                                 <Input
 137                                     value={networkDescription}
 138                                     label={i18n('Network Description')}
 139                                     data-test-id="nic-network-description"
 140                                     onChange={networkDescription =>
 141                                         onDataChanged({ networkDescription })
 142                                     }
 143                                     isValid={
 144                                         genericFieldInfo['networkDescription']
 145                                             .isValid
 146                                     }
 147                                     errorText={
 148                                         genericFieldInfo['networkDescription']
 149                                             .errorText
 150                                     }
 151                                     type="text"
 152                                     className="field-section"
 153                                 />
 154                             </GridItem>
 155                         </GridSection>
 156                     </Form>
 157                 )}
 158             </div>
 159         );
 160     }
 161
 162     submit = () => {
 163         const { data: nic, componentId } = this.props;
 164         this.props.onSubmit({ nic, componentId });
 165     };
 166
 167     validate = () => {
 168         this.props.onValidateForm();
 169     };
 170
 171     cancel = () => {
 172         this.props.onCancel();
 173     };
 174 }
 175
 176 export default NICCreationView;