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: {
  32             descriptionEditor: { data: descriptionData = {}, genericFieldInfo }
  33         }
  34     }
  35 }) => {
  36     let { description } = descriptionData;
  37     return {
  38         data,
  39         description,
  40         genericFieldInfo
  41     };
  42 };
  43
  44 const mapActionsToProps = dispatch => {
  45     return {
  46         onDataChanged: deltaData =>
  47             ValidationHelper.dataChanged(dispatch, {
  48                 deltaData,
  49                 formName: VLM_DESCRIPTION_FORM
  50             }),
  51         onCancel: () =>
  52             licenseModelOverviewActionHelper.editDescriptionClose(dispatch),
  53         onSubmit: licenseModel => {
  54             licenseModelOverviewActionHelper.editDescriptionClose(dispatch);
  55             LicenseModelActionHelper.saveLicenseModel(dispatch, {
  56                 licenseModel
  57             });
  58         },
  59         onVendorDescriptionEdit: description =>
  60             licenseModelOverviewActionHelper.editDescriptionOpen(dispatch, {
  61                 description
  62             })
  63     };
  64 };
  65
  66 export class VendorDataView extends Component {
  67     render() {
  68         let { data: { vendorName }, description, isReadOnlyMode } = this.props;
  69         return (
  70             <div className="vendor-data-view">
  71                 <div className="vendor-title">vendor</div>
  72                 <div
  73                     className="vendor-name"
  74                     data-test-id="vlm-summary-vendor-name">
  75                     {vendorName}
  76                 </div>
  77                 {description !== undefined && !isReadOnlyMode
  78                     ? this.renderDescriptionEdit()
  79                     : this.renderDescription()}
  80             </div>
  81         );
  82     }
  83
  84     componentWillUnmount() {
  85         this.props.onCancel();
  86     }
  87
  88     renderDescription() {
  89         let {
  90             data: { description },
  91             onVendorDescriptionEdit,
  92             isReadOnlyMode
  93         } = this.props;
  94         return (
  95             <div
  96                 onClick={() => {
  97                     if (!isReadOnlyMode) {
  98                         onVendorDescriptionEdit(description);
  99                     }
 100                 }}
 101                 className={
 102                     !isReadOnlyMode
 103                         ? 'vendor-description'
 104                         : 'vendor-description-readonly'
 105                 }>
 106                 {this.renderOverlay(
 107                     <div
 108                         className="description-data"
 109                         data-test-id="vlm-summary-vendor-description">
 110                         {description}
 111                         {!isReadOnlyMode && <SVGIcon name="pencil" />}
 112                     </div>
 113                 )}
 114             </div>
 115         );
 116     }
 117
 118     renderDescriptionEdit() {
 119         let {
 120             onCancel,
 121             onDataChanged,
 122             onSubmit,
 123             description,
 124             genericFieldInfo,
 125             data
 126         } = this.props;
 127         return (
 128             <LicenseModelDescriptionEdit
 129                 onClose={onCancel}
 130                 onDataChanged={onDataChanged}
 131                 onSubmit={onSubmit}
 132                 data={data}
 133                 genericFieldInfo={genericFieldInfo}
 134                 description={description}
 135             />
 136         );
 137     }
 138
 139     renderOverlay(children) {
 140         let { data: { description }, isReadOnlyMode } = this.props;
 141         if (isReadOnlyMode) {
 142             return (
 143                 <OverlayTrigger
 144                     placement="bottom"
 145                     overlay={
 146                         <Tooltip
 147                             className="vendor-description-tooltip"
 148                             id="tooltip-bottom">
 149                             {description}
 150                         </Tooltip>
 151                     }
 152                     delayShow={400}>
 153                     {children}
 154                 </OverlayTrigger>
 155             );
 156         }
 157         return children;
 158     }
 159 }
 160
 161 export default connect(mapStateToProps, mapActionsToProps)(VendorDataView);