openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationView.jsx

   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 className="network-nic-modal-create">
  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                         btnClassName="sdc-modal__footer">
  76                         <GridSection hasLastColSet>
  77                             <GridItem colSpan={4} lastColInRow>
  78                                 <Input
  79                                     value={name}
  80                                     label={i18n('Name')}
  81                                     data-test-id="nic-name"
  82                                     onChange={name => onDataChanged({ name })}
  83                                     isRequired={true}
  84                                     type="text"
  85                                     isValid={genericFieldInfo['name'].isValid}
  86                                     errorText={
  87                                         genericFieldInfo['name'].errorText
  88                                     }
  89                                     className="field-section"
  90                                 />
  91                                 <Input
  92                                     value={description}
  93                                     label={i18n('Description')}
  94                                     data-test-id="nic-description"
  95                                     onChange={description =>
  96                                         onDataChanged({ description })
  97                                     }
  98                                     isValid={
  99                                         genericFieldInfo['description'].isValid
 100                                     }
 101                                     errorText={
 102                                         genericFieldInfo['description']
 103                                             .errorText
 104                                     }
 105                                     type="textarea"
 106                                     className="field-section"
 107                                 />
 108                             </GridItem>
 109                         </GridSection>
 110                         <GridSection title={i18n('Network')} hasLastColSet>
 111                             <GridItem colSpan={2}>
 112                                 <div className="form-group">
 113                                     <label className="control-label">
 114                                         {i18n('Network Type')}
 115                                     </label>
 116                                     <div className="network-type-radio">
 117                                         <Input
 118                                             label={i18n('Internal')}
 119                                             disabled
 120                                             checked={false}
 121                                             data-test-id="nic-internal"
 122                                             className="network-radio disabled"
 123                                             type="radio"
 124                                         />
 125                                         <Input
 126                                             label={i18n('External')}
 127                                             disabled
 128                                             checked={true}
 129                                             data-test-id="nic-external"
 130                                             className="network-radio disabled"
 131                                             type="radio"
 132                                         />
 133                                     </div>
 134                                 </div>
 135                             </GridItem>
 136                             <GridItem colSpan={2} lastColInRow>
 137                                 <Input
 138                                     value={networkDescription}
 139                                     label={i18n('Network Description')}
 140                                     data-test-id="nic-network-description"
 141                                     onChange={networkDescription =>
 142                                         onDataChanged({ networkDescription })
 143                                     }
 144                                     isValid={
 145                                         genericFieldInfo['networkDescription']
 146                                             .isValid
 147                                     }
 148                                     errorText={
 149                                         genericFieldInfo['networkDescription']
 150                                             .errorText
 151                                     }
 152                                     type="text"
 153                                     className="field-section"
 154                                 />
 155                             </GridItem>
 156                         </GridSection>
 157                     </Form>
 158                 )}
 159             </div>
 160         );
 161     }
 162
 163     submit = () => {
 164         const { data: nic, componentId } = this.props;
 165         this.props.onSubmit({ nic, componentId });
 166     };
 167
 168     validate = () => {
 169         this.props.onValidateForm();
 170     };
 171
 172     cancel = () => {
 173         this.props.onCancel();
 174     };
 175 }
 176
 177 export default NICCreationView;