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