diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js')
-rw-r--r-- | openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js | 35 |
1 files changed, 26 insertions, 9 deletions
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); - |