openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorView.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 GridSection from 'nfvo-components/grid/GridSection.jsx';
  19 import GridItem from 'nfvo-components/grid/GridItem.jsx';
  20 import { TabsForm as Form } from 'nfvo-components/input/validation/Form.jsx';
  21 import Tabs from 'nfvo-components/input/validation/Tabs.jsx';
  22 import Tab from 'sdc-ui/lib/react/Tab.js';
  23 import Input from 'nfvo-components/input/validation/Input.jsx';
  24 import InputOptions from 'nfvo-components/input/validation/InputOptions.jsx';
  25 import DualListboxView from 'nfvo-components/input/dualListbox/DualListboxView.jsx';
  26 import i18n from 'nfvo-utils/i18n/i18n.js';
  27 import Validator from 'nfvo-utils/Validator.js';
  28 import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx';
  29
  30 import {
  31     enums as LicenseAgreementEnums,
  32     optionsInputValues as LicenseAgreementOptionsInputValues,
  33     LA_EDITOR_FORM
  34 } from './LicenseAgreementConstants.js';
  35
  36 const dualBoxFilterTitle = {
  37     left: i18n('Available Feature Groups'),
  38     right: i18n('Selected Feature Groups')
  39 };
  40
  41 const LicenseAgreementPropType = PropTypes.shape({
  42     id: PropTypes.string,
  43     name: PropTypes.string,
  44     description: PropTypes.string,
  45     licenseTerm: PropTypes.object,
  46     featureGroupsIds: PropTypes.arrayOf(PropTypes.string),
  47     version: PropTypes.object
  48 });
  49
  50 const GeneralTabContent = ({
  51     data,
  52     genericFieldInfo,
  53     onDataChanged,
  54     validateName
  55 }) => {
  56     let { name, description, licenseTerm } = data;
  57     return (
  58         <GridSection hasLastColSet>
  59             <GridItem colSpan={2}>
  60                 <Input
  61                     isValid={genericFieldInfo.name.isValid}
  62                     errorText={genericFieldInfo.name.errorText}
  63                     onChange={name =>
  64                         onDataChanged({ name }, LA_EDITOR_FORM, {
  65                             name: validateName
  66                         })
  67                     }
  68                     label={i18n('Name')}
  69                     value={name}
  70                     data-test-id="create-la-name"
  71                     name="license-agreement-name"
  72                     isRequired={true}
  73                     type="text"
  74                 />
  75                 <InputOptions
  76                     onInputChange={() => {}}
  77                     isMultiSelect={false}
  78                     onEnumChange={licenseTerm =>
  79                         onDataChanged(
  80                             {
  81                                 licenseTerm: {
  82                                     choice: licenseTerm,
  83                                     other: ''
  84                                 }
  85                             },
  86                             LA_EDITOR_FORM
  87                         )
  88                     }
  89                     onOtherChange={licenseTerm =>
  90                         onDataChanged(
  91                             {
  92                                 licenseTerm: {
  93                                     choice: optionInputOther.OTHER,
  94                                     other: licenseTerm
  95                                 }
  96                             },
  97                             LA_EDITOR_FORM
  98                         )
  99                     }
 100                     label={i18n('License Term')}
 101                     data-test-id="create-la-license-term"
 102                     isRequired={true}
 103                     type="select"
 104                     selectedEnum={licenseTerm && licenseTerm.choice}
 105                     otherValue={licenseTerm && licenseTerm.other}
 106                     values={
 107                         LicenseAgreementOptionsInputValues.LICENSE_MODEL_TYPE
 108                     }
 109                     isValid={genericFieldInfo.licenseTerm.isValid}
 110                     errorText={genericFieldInfo.licenseTerm.errorText}
 111                 />
 112             </GridItem>
 113             <GridItem colSpan={2} stretch lastColInRow>
 114                 <Input
 115                     isValid={genericFieldInfo.description.isValid}
 116                     errorText={genericFieldInfo.description.errorText}
 117                     onChange={description =>
 118                         onDataChanged({ description }, LA_EDITOR_FORM)
 119                     }
 120                     label={i18n('Description')}
 121                     value={description}
 122                     overlayPos="bottom"
 123                     data-test-id="create-la-description"
 124                     name="license-agreement-description"
 125                     type="textarea"
 126                 />
 127             </GridItem>
 128         </GridSection>
 129     );
 130 };
 131
 132 class LicenseAgreementEditorView extends React.Component {
 133     static propTypes = {
 134         data: LicenseAgreementPropType,
 135         previousData: LicenseAgreementPropType,
 136         LANames: PropTypes.object,
 137         isReadOnlyMode: PropTypes.bool,
 138         onDataChanged: PropTypes.func.isRequired,
 139         onSubmit: PropTypes.func.isRequired,
 140         onCancel: PropTypes.func.isRequired,
 141
 142         selectedTab: PropTypes.number,
 143         onTabSelect: PropTypes.func,
 144
 145         selectedFeatureGroupsButtonTab: PropTypes.number,
 146         onFeatureGroupsButtonTabSelect: PropTypes.func,
 147         featureGroupsList: DualListboxView.propTypes.availableList
 148     };
 149
 150     static defaultProps = {
 151         selectedTab:
 152             LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.GENERAL,
 153         data: {}
 154     };
 155
 156     state = {
 157         localFeatureGroupsListFilter: ''
 158     };
 159
 160     render() {
 161         let {
 162             selectedTab,
 163             onTabSelect,
 164             isReadOnlyMode,
 165             featureGroupsList,
 166             data,
 167             onDataChanged,
 168             genericFieldInfo
 169         } = this.props;
 170         return (
 171             <div className="license-model-modal license-agreement-modal">
 172                 {genericFieldInfo && (
 173                     <Form
 174                         ref="validationForm"
 175                         hasButtons={true}
 176                         onSubmit={() => this.submit()}
 177                         onReset={() => this.props.onCancel()}
 178                         labledButtons={true}
 179                         isReadOnlyMode={isReadOnlyMode}
 180                         isValid={this.props.isFormValid}
 181                         formReady={this.props.formReady}
 182                         onValidateForm={() =>
 183                             this.props.onValidateForm(LA_EDITOR_FORM)
 184                         }
 185                         className="license-model-form license-agreement-form"
 186                         btnClassName="sdc-modal__footer">
 187                         <Tabs
 188                             activeTab={onTabSelect ? selectedTab : undefined}
 189                             onTabClick={onTabSelect}
 190                             invalidTabs={this.props.invalidTabs}>
 191                             <Tab
 192                                 tabId={
 193                                     LicenseAgreementEnums
 194                                         .SELECTED_LICENSE_AGREEMENT_TAB.GENERAL
 195                                 }
 196                                 data-test-id="general-tab"
 197                                 title={i18n('General')}>
 198                                 <fieldset disabled={isReadOnlyMode}>
 199                                     <GeneralTabContent
 200                                         data={data}
 201                                         genericFieldInfo={genericFieldInfo}
 202                                         onDataChanged={onDataChanged}
 203                                         validateLTChoice={value =>
 204                                             this.validateLTChoice(value)
 205                                         }
 206                                         validateName={value =>
 207                                             this.validateName(value)
 208                                         }
 209                                     />
 210                                 </fieldset>
 211                             </Tab>
 212                             <Tab
 213                                 tabId={
 214                                     LicenseAgreementEnums
 215                                         .SELECTED_LICENSE_AGREEMENT_TAB
 216                                         .FEATURE_GROUPS
 217                                 }
 218                                 data-test-id="feature-group-tab"
 219                                 title={i18n('Feature Groups')}>
 220                                 <fieldset disabled={isReadOnlyMode}>
 221                                     {featureGroupsList.length > 0 ? (
 222                                         <DualListboxView
 223                                             isReadOnlyMode={isReadOnlyMode}
 224                                             filterTitle={dualBoxFilterTitle}
 225                                             selectedValuesList={
 226                                                 data.featureGroupsIds
 227                                             }
 228                                             availableList={featureGroupsList}
 229                                             onChange={selectedValuesList =>
 230                                                 onDataChanged(
 231                                                     {
 232                                                         featureGroupsIds: selectedValuesList
 233                                                     },
 234                                                     LA_EDITOR_FORM
 235                                                 )
 236                                             }
 237                                         />
 238                                     ) : (
 239                                         <p>
 240                                             {i18n(
 241                                                 'There are no available feature groups'
 242                                             )}
 243                                         </p>
 244                                     )}
 245                                 </fieldset>
 246                             </Tab>
 247                         </Tabs>
 248                     </Form>
 249                 )}
 250             </div>
 251         );
 252     }
 253
 254     submit() {
 255         const {
 256             data: licenseAgreement,
 257             previousData: previousLicenseAgreement
 258         } = this.props;
 259         this.props.onSubmit({ licenseAgreement, previousLicenseAgreement });
 260     }
 261
 262     validateLTChoice(value) {
 263         if (!value.choice) {
 264             return { isValid: false, errorText: i18n('Field is required') };
 265         }
 266         return { isValid: true, errorText: '' };
 267     }
 268
 269     validateName(value) {
 270         const { data: { id }, LANames } = this.props;
 271         const isExists = Validator.isItemNameAlreadyExistsInList({
 272             itemId: id,
 273             itemName: value,
 274             list: LANames
 275         });
 276
 277         return !isExists
 278             ? { isValid: true, errorText: '' }
 279             : {
 280                   isValid: false,
 281                   errorText: i18n(
 282                       "License Agreement by the name '" +
 283                           value +
 284                           "' already exists. License agreement name must be unique"
 285                   )
 286               };
 287     }
 288 }
 289
 290 export default LicenseAgreementEditorView;