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