openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorView.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
  21 import Tabs from 'sdc-ui/lib/react/Tabs.js';
  22 import Tab from 'sdc-ui/lib/react/Tab.js';
  23
  24 import Button from 'sdc-ui/lib/react/Button.js';
  25 import Form from 'nfvo-components/input/validation/Form.jsx';
  26 //import GridSection from 'nfvo-components/grid/GridSection.jsx';
  27 import { LKG_FORM_NAME, tabIds } from './LicenseKeyGroupsConstants.js';
  28
  29 import {
  30     validateStartDate,
  31     thresholdValueValidation
  32 } from '../LicenseModelValidations.js';
  33
  34 import LicenseKeyGroupsLimits from './LicenseKeyGroupsLimits.js';
  35 import {
  36     limitType,
  37     NEW_LIMIT_TEMP_ID
  38 } from '../limits/LimitEditorConstants.js';
  39 import LicenseKeyGroupFormContent from './components/FormContent.jsx';
  40 import ModalButtons from 'sdc-app/onboarding/licenseModel/components/ModalButtons.jsx';
  41
  42 const TabButton = props => {
  43     const { onClick, disabled, className } = props;
  44     const dataTestId = props['data-test-id'];
  45     return (
  46         <div
  47             className={className}
  48             onClick={disabled ? undefined : onClick}
  49             data-test-id={dataTestId}
  50             role="tab"
  51             disabled={disabled}>
  52             {props.children}
  53         </div>
  54     );
  55 };
  56
  57 const LicenseKeyGroupPropType = PropTypes.shape({
  58     id: PropTypes.string,
  59     name: PropTypes.string,
  60     description: PropTypes.string,
  61     increments: PropTypes.string,
  62     type: PropTypes.string,
  63     thresholdUnits: PropTypes.string,
  64     thresholdValue: PropTypes.number,
  65     startDate: PropTypes.string,
  66     expiryDate: PropTypes.string
  67 });
  68
  69 class LicenseKeyGroupsEditorView extends React.Component {
  70     static propTypes = {
  71         data: LicenseKeyGroupPropType,
  72         previousData: LicenseKeyGroupPropType,
  73         LKGNames: PropTypes.object,
  74         isReadOnlyMode: PropTypes.bool,
  75         onDataChanged: PropTypes.func.isRequired,
  76         onSubmit: PropTypes.func.isRequired,
  77         onCancel: PropTypes.func.isRequired
  78     };
  79
  80     static defaultProps = {
  81         data: {}
  82     };
  83
  84     componentDidUpdate(prevProps) {
  85         if (
  86             this.props.formReady &&
  87             this.props.formReady !== prevProps.formReady
  88         ) {
  89             // if form validation succeeded -> continue with submit
  90             this.submit();
  91         }
  92     }
  93
  94     state = {
  95         localFeatureGroupsListFilter: '',
  96         selectedTab: tabIds.GENERAL,
  97         selectedLimit: ''
  98     };
  99
 100     render() {
 101         let {
 102             data = {},
 103             onDataChanged,
 104             isReadOnlyMode,
 105             onCloseLimitEditor,
 106             genericFieldInfo,
 107             limitsList = []
 108         } = this.props;
 109         let { selectedTab } = this.state;
 110         const isTabsDisabled = !data.id || !this.props.isFormValid;
 111         return (
 112             <div className="license-keygroup-editor license-model-modal license-key-groups-modal">
 113                 <Tabs
 114                     type="menu"
 115                     activeTab={selectedTab}
 116                     onTabClick={tabIndex => {
 117                         if (tabIndex === tabIds.ADD_LIMIT_BUTTON) {
 118                             this.onAddLimit();
 119                         } else {
 120                             this.setState({ selectedTab: tabIndex });
 121                             onCloseLimitEditor();
 122                             this.setState({ selectedLimit: '' });
 123                         }
 124                     }}
 125                     invalidTabs={[]}>
 126                     <Tab
 127                         tabId={tabIds.GENERAL}
 128                         data-test-id="general-tab"
 129                         title={i18n('General')}>
 130                         {genericFieldInfo && (
 131                             <Form
 132                                 ref="validationForm"
 133                                 hasButtons={false}
 134                                 isValid={this.props.isFormValid}
 135                                 formReady={this.props.formReady}
 136                                 onValidateForm={() =>
 137                                     this.props.onValidateForm(LKG_FORM_NAME)
 138                                 }
 139                                 labledButtons={true}
 140                                 isReadOnlyMode={isReadOnlyMode}
 141                                 className="license-model-form license-key-groups-form">
 142                                 <LicenseKeyGroupFormContent
 143                                     data={data}
 144                                     onDataChanged={onDataChanged}
 145                                     genericFieldInfo={genericFieldInfo}
 146                                     validateName={value =>
 147                                         this.validateName(value)
 148                                     }
 149                                     validateStartDate={(value, state) =>
 150                                         validateStartDate(value, state)
 151                                     }
 152                                     thresholdValueValidation={(value, state) =>
 153                                         thresholdValueValidation(value, state)
 154                                     }
 155                                 />
 156                             </Form>
 157                         )}
 158                     </Tab>
 159                     <Tab
 160                         tabId={tabIds.SP_LIMITS}
 161                         disabled={isTabsDisabled}
 162                         data-test-id="general-tab"
 163                         title={i18n('SP Limits')}>
 164                         {selectedTab === tabIds.SP_LIMITS && (
 165                             <LicenseKeyGroupsLimits
 166                                 limitType={limitType.SERVICE_PROVIDER}
 167                                 limitsList={limitsList.filter(
 168                                     item =>
 169                                         item.type === limitType.SERVICE_PROVIDER
 170                                 )}
 171                                 selectedLimit={this.state.selectedLimit}
 172                                 onCloseLimitEditor={() =>
 173                                     this.onCloseLimitEditor()
 174                                 }
 175                                 onSelectLimit={limit =>
 176                                     this.onSelectLimit(limit)
 177                                 }
 178                                 isReadOnlyMode={isReadOnlyMode}
 179                             />
 180                         )}
 181                     </Tab>
 182                     <Tab
 183                         tabId={tabIds.VENDOR_LIMITS}
 184                         disabled={isTabsDisabled}
 185                         data-test-id="general-tab"
 186                         title={i18n('Vendor Limits')}>
 187                         {selectedTab === tabIds.VENDOR_LIMITS && (
 188                             <LicenseKeyGroupsLimits
 189                                 limitType={limitType.VENDOR}
 190                                 limitsList={limitsList.filter(
 191                                     item => item.type === limitType.VENDOR
 192                                 )}
 193                                 selectedLimit={this.state.selectedLimit}
 194                                 onCloseLimitEditor={() =>
 195                                     this.onCloseLimitEditor()
 196                                 }
 197                                 onSelectLimit={limit =>
 198                                     this.onSelectLimit(limit)
 199                                 }
 200                                 isReadOnlyMode={isReadOnlyMode}
 201                             />
 202                         )}
 203                     </Tab>
 204                     {selectedTab !== tabIds.GENERAL ? (
 205                         <TabButton
 206                             tabId={tabIds.ADD_LIMIT_BUTTON}
 207                             disabled={
 208                                 !!this.state.selectedLimit || isReadOnlyMode
 209                             }
 210                             data-test-id="add-limits-tab"
 211                             className="add-limit-button">
 212                             <Button
 213                                 btnType="link"
 214                                 iconName="plus"
 215                                 disabled={
 216                                     !!this.state.selectedLimit || isReadOnlyMode
 217                                 }>
 218                                 {i18n('Add Limit')}
 219                             </Button>
 220                         </TabButton>
 221                     ) : (
 222                         <TabButton key="empty_lm_tab_key" />
 223                     ) // Render empty div to not break tabs
 224                     }
 225                 </Tabs>
 226                 <ModalButtons
 227                     className="sdc-modal__footer"
 228                     selectedLimit={this.state.selectedLimit}
 229                     isFormValid={this.props.isFormValid}
 230                     isReadOnlyMode={isReadOnlyMode}
 231                     onSubmit={this.submit}
 232                     onCancel={this.props.onCancel}
 233                 />
 234             </div>
 235         );
 236     }
 237
 238     submit = () => {
 239         const {
 240             data: licenseKeyGroup,
 241             previousData: previousLicenseKeyGroup,
 242             formReady,
 243             onValidateForm,
 244             onSubmit
 245         } = this.props;
 246         if (!formReady) {
 247             onValidateForm(LKG_FORM_NAME);
 248         } else {
 249             onSubmit({ licenseKeyGroup, previousLicenseKeyGroup });
 250         }
 251     };
 252
 253     validateName(value) {
 254         const { data: { id }, LKGNames } = this.props;
 255         const isExists = Validator.isItemNameAlreadyExistsInList({
 256             itemId: id,
 257             itemName: value,
 258             list: LKGNames
 259         });
 260
 261         return !isExists
 262             ? { isValid: true, errorText: '' }
 263             : {
 264                   isValid: false,
 265                   errorText: i18n(
 266                       "License key group by the name '" +
 267                           value +
 268                           "' already exists. License key group name must be unique"
 269                   )
 270               };
 271     }
 272
 273     onSelectLimit(limit) {
 274         if (limit.id === this.state.selectedLimit) {
 275             this.setState({ selectedLimit: '' });
 276             return;
 277         }
 278         this.setState({ selectedLimit: limit.id });
 279         this.props.onOpenLimitEditor(limit);
 280     }
 281
 282     onCloseLimitEditor() {
 283         this.setState({ selectedLimit: '' });
 284         this.props.onCloseLimitEditor();
 285     }
 286
 287     onAddLimit() {
 288         this.setState({ selectedLimit: NEW_LIMIT_TEMP_ID });
 289         this.props.onOpenLimitEditor();
 290     }
 291 }
 292
 293 export default LicenseKeyGroupsEditorView;