Add collaboration feature

[sdc.git] / openecomp-ui / src / sdc-app / onboarding / licenseModel / entitlementPools / EntitlementPoolsEditorView.jsx

diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx
index 8473c1a..154174c 100644 (file)
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx
@@ -14,6 +14,7 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Validator from 'nfvo-utils/Validator.js';
@@ -34,19 +35,19 @@ import Tab from 'sdc-ui/lib/react/Tab.js';
 import EntitlementPoolsLimits from './EntitlementPoolsLimits.js';
 import {limitType, NEW_LIMIT_TEMP_ID} from '../limits/LimitEditorConstants.js';
 
-const EntitlementPoolPropType = React.PropTypes.shape({
-       id: React.PropTypes.string,
-       name: React.PropTypes.string,
-       description: React.PropTypes.string,
-       operationalScope: React.PropTypes.shape({
-               choices: React.PropTypes.array,
-               other: React.PropTypes.string
+const EntitlementPoolPropType = PropTypes.shape({
+       id: PropTypes.string,
+       name: PropTypes.string,
+       description: PropTypes.string,
+       operationalScope: PropTypes.shape({
+               choices: PropTypes.array,
+               other: PropTypes.string
        }),
-       thresholdUnits: React.PropTypes.string,
-       thresholdValue: React.PropTypes.number,
-       increments: React.PropTypes.string,
-       startDate: React.PropTypes.string,
-       expiryDate: React.PropTypes.string
+       thresholdUnits: PropTypes.string,
+       thresholdValue: PropTypes.string,
+       increments: PropTypes.string,
+       startDate: PropTypes.string,
+       expiryDate: PropTypes.string
 });
 
 const EntitlementPoolsFormContent = ({data, genericFieldInfo, onDataChanged, validateName,
@@ -55,7 +56,7 @@ const EntitlementPoolsFormContent = ({data, genericFieldInfo, onDataChanged, val
        let {name, description, operationalScope, thresholdUnits, thresholdValue,
                increments, startDate, expiryDate} = data;
        return (
-               <GridSection>
+               <GridSection hasLastColSet>
                        <GridItem colSpan={2}>
                                <Input
                                        onChange={name => onDataChanged({name}, SP_ENTITLEMENT_POOL_FORM, {name: validateName})}
@@ -67,7 +68,7 @@ const EntitlementPoolsFormContent = ({data, genericFieldInfo, onDataChanged, val
                                        data-test-id='create-ep-name'
                                        type='text'/>
                        </GridItem>
-                       <GridItem colSpan={2}>
+                       <GridItem colSpan={2} lastColInRow>
                                <InputOptions
                                        onInputChange={()=>{}}
                                        isMultiSelect={true}
@@ -94,7 +95,7 @@ const EntitlementPoolsFormContent = ({data, genericFieldInfo, onDataChanged, val
                                        data-test-id='create-ep-description'
                                        type='textarea'/>
                        </GridItem>
-                       <GridItem colSpan={2}>
+                       <GridItem colSpan={2} lastColInRow>
                                <div className='threshold-section'>
                                        <Input
                                                onChange={e => {
@@ -152,7 +153,7 @@ const EntitlementPoolsFormContent = ({data, genericFieldInfo, onDataChanged, val
                                                )}
                                                isValid={genericFieldInfo.startDate.isValid}
                                                errorText={genericFieldInfo.startDate.errorText}
-                                               selectsStart/>  
+                                               selectsStart/>
                                        <Input
                                                type='date'
                                                label={i18n('Expiry Date')}
@@ -167,8 +168,8 @@ const EntitlementPoolsFormContent = ({data, genericFieldInfo, onDataChanged, val
                                                isValid={genericFieldInfo.expiryDate.isValid}
                                                errorText={genericFieldInfo.expiryDate.errorText}
                                                selectsEnd/>
-                               </div>                                                  
-                       </GridItem>                                                                     
+                               </div>
+                       </GridItem>
                </GridSection>
        );
 };
@@ -178,18 +179,18 @@ class EntitlementPoolsEditorView extends React.Component {
        static propTypes = {
                data: EntitlementPoolPropType,
                previousData: EntitlementPoolPropType,
-               EPNames: React.PropTypes.object,
-               isReadOnlyMode: React.PropTypes.bool,
-               onDataChanged: React.PropTypes.func.isRequired,
-               onSubmit: React.PropTypes.func.isRequired,
-               onCancel: React.PropTypes.func.isRequired
+               EPNames: PropTypes.object,
+               isReadOnlyMode: PropTypes.bool,
+               onDataChanged: PropTypes.func.isRequired,
+               onSubmit: PropTypes.func.isRequired,
+               onCancel: PropTypes.func.isRequired
        };
 
        static defaultProps = {
                data: {}
        };
 
-       componentDidUpdate(prevProps) {                         
+       componentDidUpdate(prevProps) {
                if (this.props.formReady && this.props.formReady !== prevProps.formReady) { // if form validation succeeded -> continue with submit
                        this.submit();
                }
@@ -207,9 +208,9 @@ class EntitlementPoolsEditorView extends React.Component {
 
                return (
                        <div>
-                       <Tabs 
-                               type='menu' 
-                               activeTab={selectedTab} 
+                       <Tabs
+                               type='menu'
+                               activeTab={selectedTab}
                                onTabClick={(tabIndex)=>{
                                        if (tabIndex === tabIds.ADD_LIMIT_BUTTON)  {
                                                this.onAddLimit();
@@ -218,14 +219,13 @@ class EntitlementPoolsEditorView extends React.Component {
                                                this.setState({selectedLimit: ''});
                                                onCloseLimitEditor();
                                        }
-                                       
-                               }} 
+                               }}
                                invalidTabs={[]}>
                                <Tab tabId={tabIds.GENERAL} data-test-id='general-tab' title={i18n('General')}>
                                        {
                                                genericFieldInfo && <Form
                                                        ref='validationForm'
-                                                       hasButtons={false}                                              
+                                                       hasButtons={false}
                                                        labledButtons={false}
                                                        isReadOnlyMode={isReadOnlyMode}
                                                        isValid={this.props.isFormValid}
@@ -243,20 +243,20 @@ class EntitlementPoolsEditorView extends React.Component {
                                        }
                                </Tab>
                                <Tab disabled={isTabsDisabled} tabId={tabIds.SP_LIMITS} data-test-id='sp-limits-tab' title={i18n('SP Limits')}>
-                                       {selectedTab === tabIds.SP_LIMITS && 
-                                               <EntitlementPoolsLimits 
+                                       {selectedTab === tabIds.SP_LIMITS &&
+                                               <EntitlementPoolsLimits
                                                        isReadOnlyMode={isReadOnlyMode}
-                                                       limitType={limitType.SERVICE_PROVIDER} 
+                                                       limitType={limitType.SERVICE_PROVIDER}
                                                        limitsList={limitsList.filter(item => item.type === limitType.SERVICE_PROVIDER)}
                                                        selectedLimit={this.state.selectedLimit}
                                                        onCloseLimitEditor={() => this.onCloseLimitEditor()}
                                                        onSelectLimit={limit => this.onSelectLimit(limit)}/>}
                                </Tab>
                                <Tab disabled={isTabsDisabled} tabId={tabIds.VENDOR_LIMITS} data-test-id='vendor-limits-tab' title={i18n('Vendor Limits')}>
-                                       {selectedTab === tabIds.VENDOR_LIMITS && 
-                                               <EntitlementPoolsLimits 
+                                       {selectedTab === tabIds.VENDOR_LIMITS &&
+                                               <EntitlementPoolsLimits
                                                        isReadOnlyMode={isReadOnlyMode}
-                                                       limitType={limitType.VENDOR} 
+                                                       limitType={limitType.VENDOR}
                                                        limitsList={limitsList.filter(item => item.type === limitType.VENDOR)}
                                                        selectedLimit={this.state.selectedLimit}
                                                        onCloseLimitEditor={() => this.onCloseLimitEditor()}
@@ -273,7 +273,7 @@ class EntitlementPoolsEditorView extends React.Component {
                                                        {i18n('Add Limit')}
                                                </Button>
                                        :
-                                       <div></div> // Render empty div to not break tabs
+                                               <div></div> // Render empty div to not break tabs
                                }
                        </Tabs>
                        <GridSection className='license-model-modal-buttons entitlement-pools-editor-buttons'>
@@ -285,21 +285,18 @@ class EntitlementPoolsEditorView extends React.Component {
                        <Button btnType={this.state.selectedLimit ? 'default' : 'outline'} onClick={() => this.props.onCancel()} type='reset'>
                                {i18n('Cancel')}
                        </Button>
-                       </GridSection>  
+                       </GridSection>
                        </div>
                );
        }
 
        submit() {
                const {data: entitlementPool, previousData: previousEntitlementPool, formReady} = this.props;
-
                if (!formReady) {
                        this.props.onValidateForm(SP_ENTITLEMENT_POOL_FORM);
                } else {
                        this.props.onSubmit({entitlementPool, previousEntitlementPool});
                }
-
-               
        }
 
        validateName(value) {
@@ -329,8 +326,6 @@ class EntitlementPoolsEditorView extends React.Component {
                this.props.onOpenLimitEditor();
        }
 
-
-
 }
 
 export default EntitlementPoolsEditorView;