ui support for archive items

Issue-ID: SDC-1088
Change-Id: I836e4896a8ec6bb065f9d2571f514916ccf6759f
Signed-off-by: svishnev <shlomo-stanisla.vishnevetskiy@amdocs.com>

1 files changed, 78 insertions, 0 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsVendorSelector.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsVendorSelector.jsx
new file mode 100644
index 0000000000..c2a3e0bd02
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsVendorSelector.jsx
@@ -0,0 +1,78 @@
+/*!
+ * Copyright © 2016-2018 European Support Limited
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+import Form from 'nfvo-components/input/validation/Form.jsx';
+import Input from 'nfvo-components/input/validation/Input.jsx';
+import sortByStringProperty from 'nfvo-utils/sortByStringProperty.js';
+
+class VendorSelector extends React.Component {
+	static propTypes = {
+		finalizedLicenseModelList: PropTypes.array,
+		vendorName: PropTypes.string,
+		onClose: PropTypes.func.isRequired,
+		onConfirm: PropTypes.func.isRequired
+	}
+	constructor(props){
+		super(props);
+		const selectedValue = props.finalizedLicenseModelList.length ? props.finalizedLicenseModelList[0].id : '';
+		this.state = {
+			selectedValue
+		};
+	}
+	submit() {
+		const vendor = this.props.finalizedLicenseModelList.find(item => item.id === this.state.selectedValue);
+		this.props.onConfirm(vendor.id);
+		this.props.onClose();
+	}
+	render() {
+		const {finalizedLicenseModelList, vendorName, onClose} =  this.props;
+		const {selectedValue} = this.state;		
+		return (
+			<div className='vsp-details-vendor-select'>
+				<Form 
+					onSubmit={() => this.submit()}
+					onReset={() => onClose()}
+					isValid = {!!selectedValue}
+					submitButtonText={i18n('Save')}
+					hasButtons={true}>
+						<div className='vendor-selector-modal-title'>{`${i18n('The VLM')} '${vendorName}' ${i18n('assigned to this VSP is archived')}.`}</div>
+						<div className='vendor-selector-modal-additional-text'>{i18n('If you select a different VLM you will not be able to reselect the archived VLM.')}</div>
+						<Input
+							data-test-id='vsp-vendor-name-select'
+							label={i18n('Vendor')}
+							type='select'
+							onChange={e => {this.setState({
+								selectedValue: e.target.options[e.target.selectedIndex].value
+							});}} 
+							value={selectedValue}>
+							<option key='emtyVendor' value=''>{i18n('please select...')}</option>
+							{sortByStringProperty(
+								finalizedLicenseModelList,
+								'name'
+							).map(lm => <option key={lm.id} value={lm.id}>{lm.name}</option>)
+							}
+						</Input>
+				</Form>
+			</div>
+		);
+	}
+}
+
+export default VendorSelector;
+