openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js

   1 /*!
   2  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  13  * or implied. See the License for the specific language governing
  14  * permissions and limitations under the License.
  15  */
  16 import React, {Component} from 'react';
  17 import {connect} from 'react-redux';
  18
  19 import Tooltip from 'react-bootstrap/lib/Tooltip.js';
  20 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
  21 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
  22 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
  23 import licenseModelOverviewActionHelper from '../licenseModelOverviewActionHelper.js';
  24 import LicenseModelActionHelper from '../../LicenseModelActionHelper.js';
  25 import LicenseModelDescriptionEdit from './LicenseModelDescriptionEdit.jsx';
  26 import {VLM_DESCRIPTION_FORM} from '../LicenseModelOverviewConstants.js';
  27
  28 export const mapStateToProps = ({
  29         licenseModel: {
  30                 licenseModelEditor: {data},
  31                 licenseModelOverview: {descriptionEditor: {data: descriptionData = {}, genericFieldInfo}}
  32         }
  33 }) => {
  34         let {description} = descriptionData;
  35         return {
  36                 data,
  37                 description,
  38                 genericFieldInfo
  39         };
  40 };
  41
  42 const mapActionsToProps = (dispatch) => {
  43         return {
  44                 onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: VLM_DESCRIPTION_FORM}),
  45                 onCancel: () => licenseModelOverviewActionHelper.editDescriptionClose(dispatch),
  46                 onSubmit: (licenseModel) => {
  47                         licenseModelOverviewActionHelper.editDescriptionClose(dispatch);
  48                         LicenseModelActionHelper.saveLicenseModel(dispatch, {licenseModel});
  49                 },
  50                 onVendorDescriptionEdit: description => licenseModelOverviewActionHelper.editDescriptionOpen(dispatch,{description})
  51         };
  52 };
  53
  54 export class VendorDataView extends Component {
  55         render() {
  56                 let {data: {vendorName}, description, isReadOnlyMode} = this.props;
  57                 return (
  58                         <div className='vendor-data-view'>
  59                                 <div className='vendor-title'>vendor</div>
  60                                 <div className='vendor-name' data-test-id='vlm-summary-vendor-name'>{vendorName}</div>
  61                                 {
  62                                         description !== undefined && !isReadOnlyMode ? this.renderDescriptionEdit() : this.renderDescription()
  63                                 }
  64                         </div>
  65                 );
  66         }
  67
  68         componentWillUnmount() {
  69                 this.props.onCancel();
  70         }
  71
  72
  73         renderDescription() {
  74                 let {data: {description}, onVendorDescriptionEdit, isReadOnlyMode} = this.props;
  75                 return (
  76                         <div onClick={() => {if (!isReadOnlyMode) {onVendorDescriptionEdit(description);}}} className={!isReadOnlyMode ? 'vendor-description' : 'vendor-description-readonly'}>
  77                                 {this.renderOverlay(
  78                                         <div className='description-data' data-test-id='vlm-summary-vendor-description'>
  79                                                 {description}
  80                                                 {!isReadOnlyMode && <SVGIcon name='pencil'/>}
  81                                         </div>
  82                                 )}
  83                         </div>
  84                 );
  85         }
  86
  87         renderDescriptionEdit() {
  88                 let {onCancel, onDataChanged, onSubmit, description, genericFieldInfo, data} = this.props;
  89                 return(
  90                         <LicenseModelDescriptionEdit onClose={onCancel} onDataChanged={onDataChanged} onSubmit={onSubmit} data={data} genericFieldInfo={genericFieldInfo} description={description}/>
  91                 );
  92         }
  93
  94         renderOverlay(children) {
  95                 let {data: {description}, isReadOnlyMode} = this.props;
  96                 if (isReadOnlyMode) {
  97                         return (
  98                                 <OverlayTrigger
  99                                         placement='bottom'
 100                                         overlay={<Tooltip className='vendor-description-tooltip' id='tooltip-bottom'>{description}</Tooltip>}
 101                                         delayShow={400}>
 102                                         {children}
 103                                 </OverlayTrigger>
 104                         );
 105                 }
 106                 return children;
 107         }
 108
 109 }
 110
 111 export default connect(mapStateToProps, mapActionsToProps)(VendorDataView);