openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.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 Tabs from 'nfvo-components/input/validation/Tabs.jsx';
  19 import Tab from 'sdc-ui/lib/react/Tab.js';
  20 import GridSection from 'nfvo-components/grid/GridSection.jsx';
  21 import GridItem from 'nfvo-components/grid/GridItem.jsx';
  22 import { TabsForm as Form } from 'nfvo-components/input/validation/Form.jsx';
  23 import DualListboxView from 'nfvo-components/input/dualListbox/DualListboxView.jsx';
  24 import Input from 'nfvo-components/input/validation/Input.jsx';
  25 import i18n from 'nfvo-utils/i18n/i18n.js';
  26 import Validator from 'nfvo-utils/Validator.js';
  27
  28 import {
  29     state as FeatureGroupStateConstants,
  30     FG_EDITOR_FORM
  31 } from './FeatureGroupsConstants.js';
  32
  33 const FeatureGroupsPropType = PropTypes.shape({
  34     id: PropTypes.string,
  35     name: PropTypes.string,
  36     description: PropTypes.string,
  37     partNumber: PropTypes.string,
  38     manufacturerReferenceNumber: PropTypes.string,
  39     entitlementPoolsIds: PropTypes.arrayOf(PropTypes.string),
  40     licenseKeyGroupsIds: PropTypes.arrayOf(PropTypes.string)
  41 });
  42
  43 const GeneralTab = ({
  44     data = {},
  45     onDataChanged,
  46     genericFieldInfo,
  47     validateName
  48 }) => {
  49     let { name, description, partNumber } = data;
  50     return (
  51         <GridSection hasLastColSet>
  52             <GridItem colSpan={4}>
  53                 <Input
  54                     groupClassName="field-section"
  55                     onChange={name =>
  56                         onDataChanged({ name }, FG_EDITOR_FORM, {
  57                             name: validateName
  58                         })
  59                     }
  60                     label={i18n('Name')}
  61                     data-test-id="create-fg-name"
  62                     value={name}
  63                     name="feature-group-name"
  64                     type="text"
  65                     isRequired={true}
  66                     isValid={genericFieldInfo.name.isValid}
  67                     errorText={genericFieldInfo.name.errorText}
  68                 />
  69             </GridItem>
  70             <GridItem colSpan={4} lastColInRow strech>
  71                 <Input
  72                     groupClassName="field-section"
  73                     className="description-field"
  74                     onChange={description =>
  75                         onDataChanged({ description }, FG_EDITOR_FORM)
  76                     }
  77                     data-test-id="create-fg-description"
  78                     label={i18n('Description')}
  79                     value={description}
  80                     name="feature-group-description"
  81                     type="textarea"
  82                     isValid={genericFieldInfo.description.isValid}
  83                     errorText={genericFieldInfo.description.errorText}
  84                 />
  85             </GridItem>
  86             <GridItem colSpan={4}>
  87                 <Input
  88                     groupClassName="field-section no-bottom-margin"
  89                     onChange={partNumber =>
  90                         onDataChanged({ partNumber }, FG_EDITOR_FORM)
  91                     }
  92                     label={i18n('Part Number')}
  93                     data-test-id="create-fg-part-number"
  94                     value={partNumber}
  95                     isRequired={true}
  96                     type="text"
  97                     isValid={genericFieldInfo.partNumber.isValid}
  98                     errorText={genericFieldInfo.partNumber.errorText}
  99                 />
 100             </GridItem>
 101         </GridSection>
 102     );
 103 };
 104
 105 const EntitlementPoolsTab = ({
 106     entitlementPoolsList,
 107     data,
 108     onDataChanged,
 109     isReadOnlyMode
 110 }) => {
 111     const dualBoxFilterTitle = {
 112         left: i18n('Available Entitlement Pools'),
 113         right: i18n('Selected Entitlement Pools')
 114     };
 115     if (entitlementPoolsList.length > 0) {
 116         return (
 117             <DualListboxView
 118                 isReadOnlyMode={isReadOnlyMode}
 119                 filterTitle={dualBoxFilterTitle}
 120                 selectedValuesList={data.entitlementPoolsIds}
 121                 availableList={entitlementPoolsList}
 122                 onChange={selectedValuesList =>
 123                     onDataChanged(
 124                         { entitlementPoolsIds: selectedValuesList },
 125                         FG_EDITOR_FORM
 126                     )
 127                 }
 128             />
 129         );
 130     } else {
 131         return <p>{i18n('There are no available entitlement pools')}</p>;
 132     }
 133 };
 134
 135 const LKGTab = ({
 136     licenseKeyGroupsList,
 137     data,
 138     onDataChanged,
 139     isReadOnlyMode
 140 }) => {
 141     const dualBoxFilterTitle = {
 142         left: i18n('Available License Key Groups'),
 143         right: i18n('Selected License Key Groups')
 144     };
 145     if (licenseKeyGroupsList.length > 0) {
 146         return (
 147             <DualListboxView
 148                 isReadOnlyMode={isReadOnlyMode}
 149                 filterTitle={dualBoxFilterTitle}
 150                 selectedValuesList={data.licenseKeyGroupsIds}
 151                 availableList={licenseKeyGroupsList}
 152                 onChange={selectedValuesList =>
 153                     onDataChanged(
 154                         { licenseKeyGroupsIds: selectedValuesList },
 155                         FG_EDITOR_FORM
 156                     )
 157                 }
 158             />
 159         );
 160     } else {
 161         return <p>{i18n('There are no available license key groups')}</p>;
 162     }
 163 };
 164
 165 class FeatureGroupEditorView extends React.Component {
 166     static propTypes = {
 167         data: FeatureGroupsPropType,
 168         previousData: FeatureGroupsPropType,
 169         isReadOnlyMode: PropTypes.bool,
 170         FGNames: PropTypes.object,
 171
 172         onSubmit: PropTypes.func,
 173         onCancel: PropTypes.func,
 174
 175         selectedTab: PropTypes.number,
 176         onTabSelect: PropTypes.func,
 177
 178         entitlementPoolsList: DualListboxView.propTypes.availableList,
 179         licenseKeyGroupsList: DualListboxView.propTypes.availableList
 180     };
 181
 182     static defaultProps = {
 183         data: {},
 184         selectedTab:
 185             FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL
 186     };
 187
 188     state = {
 189         localEntitlementPoolsListFilter: '',
 190         localLicenseKeyGroupsListFilter: ''
 191     };
 192
 193     render() {
 194         let {
 195             selectedTab,
 196             onTabSelect,
 197             isReadOnlyMode,
 198             invalidTabs,
 199             data,
 200             onDataChanged,
 201             genericFieldInfo,
 202             entitlementPoolsList,
 203             licenseKeyGroupsList
 204         } = this.props;
 205         return (
 206             <div className="license-model-modal feature-group-modal">
 207                 {genericFieldInfo && (
 208                     <Form
 209                         ref="validationForm"
 210                         hasButtons={true}
 211                         onSubmit={() => this.submit()}
 212                         isValid={this.props.isFormValid}
 213                         formReady={this.props.formReady}
 214                         onValidateForm={() =>
 215                             this.props.onValidateForm(FG_EDITOR_FORM)
 216                         }
 217                         onReset={() => this.props.onCancel()}
 218                         labledButtons={true}
 219                         isReadOnlyMode={isReadOnlyMode}
 220                         name="feature-group-validation-form"
 221                         btnClassName="sdc-modal__footer"
 222                         className="license-model-form feature-group-form">
 223                         <Tabs
 224                             activeTab={onTabSelect ? selectedTab : undefined}
 225                             onTabClick={onTabSelect}
 226                             invalidTabs={invalidTabs}
 227                             id="vlmFGValTabs">
 228                             <Tab
 229                                 tabId={
 230                                     FeatureGroupStateConstants
 231                                         .SELECTED_FEATURE_GROUP_TAB.GENERAL
 232                                 }
 233                                 title={i18n('General')}>
 234                                 <fieldset disabled={isReadOnlyMode}>
 235                                     <GeneralTab
 236                                         data={data}
 237                                         onDataChanged={onDataChanged}
 238                                         genericFieldInfo={genericFieldInfo}
 239                                         validateName={value =>
 240                                             this.validateName(value)
 241                                         }
 242                                     />
 243                                 </fieldset>
 244                             </Tab>
 245                             <Tab
 246                                 tabId={
 247                                     FeatureGroupStateConstants
 248                                         .SELECTED_FEATURE_GROUP_TAB
 249                                         .ENTITLEMENT_POOLS
 250                                 }
 251                                 title={i18n('Entitlement Pools')}>
 252                                 <fieldset disabled={isReadOnlyMode}>
 253                                     <EntitlementPoolsTab
 254                                         isReadOnlyMode={isReadOnlyMode}
 255                                         data={data}
 256                                         onDataChanged={onDataChanged}
 257                                         entitlementPoolsList={
 258                                             entitlementPoolsList
 259                                         }
 260                                     />
 261                                 </fieldset>
 262                             </Tab>
 263                             <Tab
 264                                 tabId={
 265                                     FeatureGroupStateConstants
 266                                         .SELECTED_FEATURE_GROUP_TAB
 267                                         .LICENSE_KEY_GROUPS
 268                                 }
 269                                 title={i18n('License Key Groups')}>
 270                                 <fieldset disabled={isReadOnlyMode}>
 271                                     <LKGTab
 272                                         isReadOnlyMode={isReadOnlyMode}
 273                                         data={data}
 274                                         onDataChanged={onDataChanged}
 275                                         licenseKeyGroupsList={
 276                                             licenseKeyGroupsList
 277                                         }
 278                                     />
 279                                 </fieldset>
 280                             </Tab>
 281                         </Tabs>
 282                     </Form>
 283                 )}
 284             </div>
 285         );
 286     }
 287
 288     submit() {
 289         const {
 290             data: featureGroup,
 291             previousData: previousFeatureGroup
 292         } = this.props;
 293         this.props.onSubmit(previousFeatureGroup, featureGroup);
 294     }
 295
 296     validateName(value) {
 297         const { data: { id }, FGNames } = this.props;
 298         const isExists = Validator.isItemNameAlreadyExistsInList({
 299             itemId: id,
 300             itemName: value,
 301             list: FGNames
 302         });
 303
 304         return !isExists
 305             ? { isValid: true, errorText: '' }
 306             : {
 307                   isValid: false,
 308                   errorText: i18n(
 309                       "Feature group by the name '" +
 310                           value +
 311                           "' already exists. Feature group name must be unique"
 312                   )
 313               };
 314     }
 315 }
 316
 317 export default FeatureGroupEditorView;