Add collaboration feature

Issue-ID: SDC-767
Change-Id: I14fb4c1f54086ed03a56a7ff7fab9ecd40381795
Signed-off-by: talig <talig@amdocs.com>

1 files changed, 38 insertions, 43 deletions

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 8473c1a2be..154174cf6c 100644
--- 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;