openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationView.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
  13  * or implied. See the License for the specific language governing
  14  * permissions and 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 Validator from 'nfvo-utils/Validator.js';
  20 import Input from 'nfvo-components/input/validation/Input.jsx';
  21 import Form from 'nfvo-components/input/validation/Form.jsx';
  22 import GridSection from 'nfvo-components/grid/GridSection.jsx';
  23 import GridItem from 'nfvo-components/grid/GridItem.jsx';
  24
  25 import { SP_CREATION_FORM_NAME } from './SoftwareProductCreationConstants.js';
  26 import sortByStringProperty from 'nfvo-utils/sortByStringProperty.js';
  27
  28 import SoftwareProductCategoriesHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductCategoriesHelper.js';
  29 import { onboardingMethod as onboardingMethodConst } from '../SoftwareProductConstants.js';
  30
  31 const SoftwareProductPropType = PropTypes.shape({
  32     id: PropTypes.string,
  33     name: PropTypes.string,
  34     description: PropTypes.string,
  35     category: PropTypes.string,
  36     subCategory: PropTypes.string,
  37     vendorId: PropTypes.string
  38 });
  39
  40 class SoftwareProductCreationView extends React.Component {
  41     static propTypes = {
  42         data: SoftwareProductPropType,
  43         finalizedLicenseModelList: PropTypes.array,
  44         softwareProductCategories: PropTypes.array,
  45         VSPNames: PropTypes.object,
  46         usersList: PropTypes.array,
  47         onDataChanged: PropTypes.func.isRequired,
  48         onSubmit: PropTypes.func.isRequired,
  49         onCancel: PropTypes.func.isRequired
  50     };
  51
  52     render() {
  53         let {
  54             softwareProductCategories,
  55             data = {},
  56             onDataChanged,
  57             onCancel,
  58             genericFieldInfo,
  59             disableVendor
  60         } = this.props;
  61         let {
  62             name,
  63             description,
  64             vendorId,
  65             subCategory,
  66             onboardingMethod
  67         } = data;
  68
  69         const vendorList = this.getVendorList();
  70         return (
  71             <div className="software-product-creation-page">
  72                 {genericFieldInfo && (
  73                     <Form
  74                         ref={validationForm =>
  75                             (this.validationForm = validationForm)
  76                         }
  77                         hasButtons={true}
  78                         onSubmit={() => this.submit()}
  79                         onReset={() => onCancel()}
  80                         labledButtons={true}
  81                         isValid={this.props.isFormValid}
  82                         submitButtonText={i18n('Create')}
  83                         formReady={this.props.formReady}
  84                         btnClassName="sdc-modal__footer"
  85                         onValidateForm={() => this.validate()}>
  86                         <GridSection hasLastColSet>
  87                             <GridItem colSpan="2">
  88                                 <Input
  89                                     value={name}
  90                                     label={i18n('Name')}
  91                                     isRequired={true}
  92                                     onChange={name =>
  93                                         onDataChanged(
  94                                             { name },
  95                                             SP_CREATION_FORM_NAME
  96                                         )
  97                                     }
  98                                     onBlur={this.validateIsNameUnique}
  99                                     isValid={genericFieldInfo.name.isValid}
 100                                     errorText={genericFieldInfo.name.errorText}
 101                                     type="text"
 102                                     className="field-section"
 103                                     data-test-id="new-vsp-name"
 104                                 />
 105                                 <Input
 106                                     label={i18n('Vendor')}
 107                                     type="select"
 108                                     value={vendorId}
 109                                     overlayPos="bottom"
 110                                     isRequired={true}
 111                                     disabled={disableVendor}
 112                                     onChange={e => this.onSelectVendor(e)}
 113                                     isValid={genericFieldInfo.vendorId.isValid}
 114                                     errorText={
 115                                         genericFieldInfo.vendorId.errorText
 116                                     }
 117                                     className="input-options-select"
 118                                     groupClassName="bootstrap-input-options"
 119                                     data-test-id="new-vsp-vendor">
 120                                     {vendorList.map(vendor => (
 121                                         <option
 122                                             key={vendor.title}
 123                                             value={vendor.enum}>
 124                                             {vendor.title}
 125                                         </option>
 126                                     ))}
 127                                 </Input>
 128                                 <Input
 129                                     label={i18n('Category')}
 130                                     type="select"
 131                                     value={subCategory}
 132                                     isRequired={true}
 133                                     onChange={e => this.onSelectSubCategory(e)}
 134                                     isValid={
 135                                         genericFieldInfo.subCategory.isValid
 136                                     }
 137                                     errorText={
 138                                         genericFieldInfo.subCategory.errorText
 139                                     }
 140                                     className="input-options-select"
 141                                     groupClassName="bootstrap-input-options"
 142                                     data-test-id="new-vsp-category">
 143                                     <option key="" value="">
 144                                         {i18n('please select…')}
 145                                     </option>
 146                                     {softwareProductCategories.map(
 147                                         category =>
 148                                             category.subcategories && (
 149                                                 <optgroup
 150                                                     key={category.name}
 151                                                     label={category.name}>
 152                                                     {category.subcategories.map(
 153                                                         sub => (
 154                                                             <option
 155                                                                 key={
 156                                                                     sub.uniqueId
 157                                                                 }
 158                                                                 value={
 159                                                                     sub.uniqueId
 160                                                                 }>{`${
 161                                                                 sub.name
 162                                                             } (${
 163                                                                 category.name
 164                                                             })`}</option>
 165                                                         )
 166                                                     )}
 167                                                 </optgroup>
 168                                             )
 169                                     )}
 170                                 </Input>
 171                             </GridItem>
 172                             <GridItem colSpan="2" stretch lastColInRow>
 173                                 <Input
 174                                     value={description}
 175                                     label={i18n('Description')}
 176                                     isRequired={true}
 177                                     overlayPos="bottom"
 178                                     onChange={description =>
 179                                         onDataChanged(
 180                                             { description },
 181                                             SP_CREATION_FORM_NAME
 182                                         )
 183                                     }
 184                                     isValid={
 185                                         genericFieldInfo.description.isValid
 186                                     }
 187                                     errorText={
 188                                         genericFieldInfo.description.errorText
 189                                     }
 190                                     type="textarea"
 191                                     className="field-section"
 192                                     data-test-id="new-vsp-description"
 193                                 />
 194                             </GridItem>
 195                         </GridSection>
 196                         <OnboardingProcedure
 197                             genericFieldInfo={genericFieldInfo}
 198                             onboardingMethod={onboardingMethod}
 199                             onDataChanged={onDataChanged}
 200                         />
 201                     </Form>
 202                 )}
 203             </div>
 204         );
 205     }
 206
 207     getVendorList() {
 208         let { vendorList } = this.props;
 209
 210         return [{ enum: '', title: i18n('please select...') }].concat(
 211             sortByStringProperty(vendorList, 'name').map(vendor => {
 212                 return {
 213                     enum: vendor.id,
 214                     title: vendor.name
 215                 };
 216             })
 217         );
 218     }
 219
 220     onSelectVendor(e) {
 221         const selectedIndex = e.target.selectedIndex;
 222         const vendorId = e.target.options[selectedIndex].value;
 223         this.props.onDataChanged({ vendorId }, SP_CREATION_FORM_NAME);
 224     }
 225
 226     onSelectSubCategory(e) {
 227         const selectedIndex = e.target.selectedIndex;
 228         const subCategory = e.target.options[selectedIndex].value;
 229         let { softwareProductCategories, onDataChanged } = this.props;
 230         let category = SoftwareProductCategoriesHelper.getCurrentCategoryOfSubCategory(
 231             subCategory,
 232             softwareProductCategories
 233         );
 234         onDataChanged({ category, subCategory }, SP_CREATION_FORM_NAME);
 235     }
 236
 237     submit() {
 238         let {
 239             data: softwareProduct,
 240             finalizedLicenseModelList,
 241             usersList
 242         } = this.props;
 243         softwareProduct.vendorName = finalizedLicenseModelList.find(
 244             vendor => vendor.id === softwareProduct.vendorId
 245         ).name;
 246         this.props.onSubmit(softwareProduct, usersList);
 247     }
 248
 249     validateName(value) {
 250         const { data: { id }, VSPNames } = this.props;
 251         const isExists = Validator.isItemNameAlreadyExistsInList({
 252             itemId: id,
 253             itemName: value,
 254             list: VSPNames
 255         });
 256
 257         return !isExists
 258             ? { isValid: true, errorText: '' }
 259             : {
 260                   isValid: false,
 261                   errorText: i18n(
 262                       "Software product by the name '" +
 263                           value +
 264                           "' already exists. Software product name must be unique"
 265                   )
 266               };
 267     }
 268
 269     validateIsNameUnique = e => {
 270         const value = e.target.value;
 271         if (value) {
 272             this.props.isNameUnique(value, 'name', SP_CREATION_FORM_NAME);
 273         }
 274     };
 275
 276     validate() {
 277         this.props.onValidateForm(SP_CREATION_FORM_NAME);
 278     }
 279 }
 280
 281 const OnboardingProcedure = ({
 282     onboardingMethod,
 283     onDataChanged,
 284     genericFieldInfo
 285 }) => {
 286     return (
 287         <GridSection title={i18n('Onboarding procedure')}>
 288             <GridItem colSpan={4}>
 289                 <Input
 290                     label={i18n('Network Package')}
 291                     overlayPos="top"
 292                     checked={
 293                         onboardingMethod ===
 294                         onboardingMethodConst.NETWORK_PACKAGE
 295                     }
 296                     errorText={genericFieldInfo.onboardingMethod.errorText}
 297                     onChange={() =>
 298                         onDataChanged(
 299                             {
 300                                 onboardingMethod:
 301                                     onboardingMethodConst.NETWORK_PACKAGE
 302                             },
 303                             SP_CREATION_FORM_NAME
 304                         )
 305                     }
 306                     type="radio"
 307                     data-test-id="new-vsp-creation-procedure-heat"
 308                 />
 309             </GridItem>
 310             <GridItem colSpan={4}>
 311                 <Input
 312                     label={i18n('Manual')}
 313                     overlayPos="bottom"
 314                     checked={onboardingMethod === onboardingMethodConst.MANUAL}
 315                     isValid={genericFieldInfo.onboardingMethod.isValid}
 316                     errorText={genericFieldInfo.onboardingMethod.errorText}
 317                     onChange={() =>
 318                         onDataChanged(
 319                             { onboardingMethod: onboardingMethodConst.MANUAL },
 320                             SP_CREATION_FORM_NAME
 321                         )
 322                     }
 323                     type="radio"
 324                     data-test-id="new-vsp-creation-procedure-manual"
 325                     groupClassName="no-bottom-margin"
 326                 />
 327             </GridItem>
 328         </GridSection>
 329     );
 330 };
 331
 332 export default SoftwareProductCreationView;