2 files changed, 44 insertions, 20 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/ListButtons.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/ListButtons.jsx
index 730ccb33f1..3d81aa5d5c 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/ListButtons.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/ListButtons.jsx
@@ -15,19 +15,26 @@
  */
 import React from 'react';
 import {selectedButton} from '../LicenseModelOverviewConstants.js';
+import Tabs from 'sdc-ui/lib/react/Tabs.js';
+import Tab from 'sdc-ui/lib/react/Tab.js';
+import i18n from 'nfvo-utils/i18n/i18n.js';
 
-function ListButtons ({onTabSelect, selectedInUse}) {
+function ListButtons ({onTabSelect, selectedTab}) {
 	return (
-		<div className='overview-buttons-section'>
-			<div onClick={()=>onTabSelect(selectedButton.VLM_LIST_VIEW)}
-				className={selectedInUse ? 'button-vlm-list-view  vlm-list-icon selected' : 'button-vlm-list-view   vlm-list-icon' }
-				data-test-id='vlm-overview-vlmlist-tab'></div>
-			<div onClick={()=>onTabSelect(selectedButton.NOT_IN_USE)}
-				className={selectedInUse ? 'button-vlm-list-view entities-list-icon' : 'button-vlm-list-view  entities-list-icon selected'  }
-				data-test-id='vlm-overview-orphans-tab' >
-			</div>
-
-		</div>
+		<Tabs 
+			onTabClick={(tabId) => onTabSelect(tabId)}
+			activeTab={selectedTab} 
+			className='overview-buttons-section' 
+			type='header' >
+			<Tab 
+				tabId={selectedButton.VLM_LIST_VIEW}
+				title={i18n('Connections List')}
+				data-test-id='vlm-overview-vlmlist-tab' />
+			<Tab 
+				tabId={selectedButton.NOT_IN_USE}
+				title={i18n('Orphans List')}
+				data-test-id='vlm-overview-orphans-tab' />
+		</Tabs>
 	);
 }
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js
index 1d65ab9869..87559901b3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js
@@ -13,9 +13,11 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import React from 'react';
+import React, {Component} from 'react';
 import {connect} from 'react-redux';
 
+import Tooltip from 'react-bootstrap/lib/Tooltip.js';
+import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 import licenseModelOverviewActionHelper from '../licenseModelOverviewActionHelper.js';
 import LicenseModelActionHelper from '../../LicenseModelActionHelper.js';
@@ -46,9 +48,7 @@ const mapActionsToProps = (dispatch) => {
 	};
 };
 
-
-
-export class VendorDataView extends React.Component {
+export class VendorDataView extends Component {
 	render() {
 		let {data: {vendorName}, description, isReadOnlyMode} = this.props;
 		return (
@@ -62,13 +62,16 @@ export class VendorDataView extends React.Component {
 		);
 	}
 
+
 	renderDescription() {
 		let {data: {description}, onVendorDescriptionEdit, isReadOnlyMode} = this.props;
 		return (
-			<div onClick={() => {if (!isReadOnlyMode) {onVendorDescriptionEdit(description);}}}  className={!isReadOnlyMode ? 'vendor-description' : 'vendor-description-readonly'}>
-				<div className='description-data' data-test-id='vlm-summary-vendor-description'>
-					{description}
-				</div>
+			<div onClick={() => {if (!isReadOnlyMode) {onVendorDescriptionEdit(description);}}} className={!isReadOnlyMode ? 'vendor-description' : 'vendor-description-readonly'}>
+				{this.renderOverlay(
+					<div className='description-data' data-test-id='vlm-summary-vendor-description'>
+						{description}
+					</div>
+				)}
 			</div>
 		);
 	}
@@ -80,7 +83,21 @@ export class VendorDataView extends React.Component {
 		);
 	}
 
+	renderOverlay(children) {
+		let {data: {description}, isReadOnlyMode} = this.props;
+		if (isReadOnlyMode) {
+			return (
+				<OverlayTrigger
+					placement='bottom'
+					overlay={<Tooltip className='vendor-description-tooltip' id='tooltip-bottom'>{description}</Tooltip>}
+					delayShow={400}>
+					{children}
+				</OverlayTrigger>
+			);
+		}
+		return children;
+	}
+
 }
 
 export default connect(mapStateToProps, mapActionsToProps)(VendorDataView);
-