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 | 196 |
1 files changed, 123 insertions, 73 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 616355de41..62fc2c3cb3 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,8 +13,8 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import React, {Component} from 'react'; -import {connect} from 'react-redux'; +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'; @@ -23,89 +23,139 @@ import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; import licenseModelOverviewActionHelper from '../licenseModelOverviewActionHelper.js'; import LicenseModelActionHelper from '../../LicenseModelActionHelper.js'; import LicenseModelDescriptionEdit from './LicenseModelDescriptionEdit.jsx'; -import {VLM_DESCRIPTION_FORM} from '../LicenseModelOverviewConstants.js'; +import { VLM_DESCRIPTION_FORM } from '../LicenseModelOverviewConstants.js'; export const mapStateToProps = ({ - licenseModel: { - licenseModelEditor: {data}, - licenseModelOverview: {descriptionEditor: {data: descriptionData = {}, genericFieldInfo}} - } + licenseModel: { + licenseModelEditor: { data }, + licenseModelOverview: { + descriptionEditor: { data: descriptionData = {}, genericFieldInfo } + } + } }) => { - let {description} = descriptionData; - return { - data, - description, - genericFieldInfo - }; + let { description } = descriptionData; + return { + data, + description, + genericFieldInfo + }; }; -const mapActionsToProps = (dispatch) => { - return { - onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: VLM_DESCRIPTION_FORM}), - onCancel: () => licenseModelOverviewActionHelper.editDescriptionClose(dispatch), - onSubmit: (licenseModel) => { - licenseModelOverviewActionHelper.editDescriptionClose(dispatch); - LicenseModelActionHelper.saveLicenseModel(dispatch, {licenseModel}); - }, - onVendorDescriptionEdit: description => licenseModelOverviewActionHelper.editDescriptionOpen(dispatch,{description}) - }; +const mapActionsToProps = dispatch => { + return { + onDataChanged: deltaData => + ValidationHelper.dataChanged(dispatch, { + deltaData, + formName: VLM_DESCRIPTION_FORM + }), + onCancel: () => + licenseModelOverviewActionHelper.editDescriptionClose(dispatch), + onSubmit: licenseModel => { + licenseModelOverviewActionHelper.editDescriptionClose(dispatch); + LicenseModelActionHelper.saveLicenseModel(dispatch, { + licenseModel + }); + }, + onVendorDescriptionEdit: description => + licenseModelOverviewActionHelper.editDescriptionOpen(dispatch, { + description + }) + }; }; export class VendorDataView extends Component { - render() { - let {data: {vendorName}, description, isReadOnlyMode} = this.props; - return ( - <div className='vendor-data-view'> - <div className='vendor-title'>vendor</div> - <div className='vendor-name' data-test-id='vlm-summary-vendor-name'>{vendorName}</div> - { - description !== undefined && !isReadOnlyMode ? this.renderDescriptionEdit() : this.renderDescription() - } - </div> - ); - } + render() { + let { data: { vendorName }, description, isReadOnlyMode } = this.props; + return ( + <div className="vendor-data-view"> + <div className="vendor-title">vendor</div> + <div + className="vendor-name" + data-test-id="vlm-summary-vendor-name"> + {vendorName} + </div> + {description !== undefined && !isReadOnlyMode + ? this.renderDescriptionEdit() + : this.renderDescription()} + </div> + ); + } - componentWillUnmount() { - this.props.onCancel(); - } + componentWillUnmount() { + this.props.onCancel(); + } + renderDescription() { + let { + data: { description }, + onVendorDescriptionEdit, + isReadOnlyMode + } = this.props; + return ( + <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} + {!isReadOnlyMode && <SVGIcon name="pencil" />} + </div> + )} + </div> + ); + } - renderDescription() { - let {data: {description}, onVendorDescriptionEdit, isReadOnlyMode} = this.props; - return ( - <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} - {!isReadOnlyMode && <SVGIcon name='pencil'/>} - </div> - )} - </div> - ); - } - - renderDescriptionEdit() { - let {onCancel, onDataChanged, onSubmit, description, genericFieldInfo, data} = this.props; - return( - <LicenseModelDescriptionEdit onClose={onCancel} onDataChanged={onDataChanged} onSubmit={onSubmit} data={data} genericFieldInfo={genericFieldInfo} description={description}/> - ); - } - - 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; - } + renderDescriptionEdit() { + let { + onCancel, + onDataChanged, + onSubmit, + description, + genericFieldInfo, + data + } = this.props; + return ( + <LicenseModelDescriptionEdit + onClose={onCancel} + onDataChanged={onDataChanged} + onSubmit={onSubmit} + data={data} + genericFieldInfo={genericFieldInfo} + description={description} + /> + ); + } + 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); |