openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorView.jsx

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