diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/licenseModel/overview')
19 files changed, 1109 insertions, 768 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverview.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverview.js index 54941aaaf0..2b10e426d1 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverview.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverview.js @@ -13,161 +13,214 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {connect} from 'react-redux'; +import { connect } from 'react-redux'; import LicenseModelActionHelper from 'sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js'; import LicenseModelOverviewView from './LicenseModelOverviewView.jsx'; -import {overviewEditorHeaders, selectedButton} from './LicenseModelOverviewConstants.js'; +import { + overviewEditorHeaders, + selectedButton +} from './LicenseModelOverviewConstants.js'; import licenseModelOverviewActionHelper from './licenseModelOverviewActionHelper.js'; export const mapStateToProps = ({ - licenseModel: { - licenseModelEditor, - entitlementPool, - licenseAgreement, - featureGroup, - licenseKeyGroup, - licenseModelOverview - } + licenseModel: { + licenseModelEditor, + entitlementPool, + licenseAgreement, + featureGroup, + licenseKeyGroup, + licenseModelOverview + } }) => { - - let modalHeader, licensingDataList; - let isDisplayModal = false; - - const reduceLicenseKeyGroups = (accum, licenseKeyGroupId) => { - let curLicenseKeyGroup = licenseKeyGroup.licenseKeyGroupsList.find(item => {return item.id === licenseKeyGroupId;}); - if (curLicenseKeyGroup) { - accum.push({ - ...curLicenseKeyGroup, - itemType: overviewEditorHeaders.LICENSE_KEY_GROUP - }); - } - return accum; - }; - - const reduceEntitlementPools = (accum, entitlementPoolId) => { - let curEntitlementPool = entitlementPool.entitlementPoolsList.find(item => {return item.id === entitlementPoolId;}); - if (curEntitlementPool) { - accum.push ({ - ...curEntitlementPool, - itemType: overviewEditorHeaders.ENTITLEMENT_POOL - }); - } - return accum; - }; - - const reduceFeatureGroups = (accum, featureGroupId) => { - let curFeatureGroup = featureGroup.featureGroupsList.find(item => {return item.id === featureGroupId;}); - if (curFeatureGroup) { - let {entitlementPoolsIds = [], licenseKeyGroupsIds = []} = curFeatureGroup; - accum.push({ - ...curFeatureGroup, - itemType: overviewEditorHeaders.FEATURE_GROUP, - children: [ - ...entitlementPoolsIds.length ? entitlementPoolsIds.reduce(reduceEntitlementPools, []) : [], - ...licenseKeyGroupsIds.length ? licenseKeyGroupsIds.reduce(reduceLicenseKeyGroups, []) : [] - ] - }); - } - return accum; - }; - - - const checkEP = (accum, elem) => { - if (!elem.referencingFeatureGroups || !elem.referencingFeatureGroups.length) { - accum.push({ - ...elem, - itemType: overviewEditorHeaders.ENTITLEMENT_POOL - }); - } - return accum; - }; - - const checkLG = (accum, elem) => { - if (!elem.referencingFeatureGroups || !elem.referencingFeatureGroups.length) { - accum.push({ - ...elem, - itemType: overviewEditorHeaders.LICENSE_KEY_GROUP - }); - } - return accum; - }; - - const checkFG = (accum, elem) => { - if (!elem.referencingLicenseAgreements || !elem.referencingLicenseAgreements.length) { - let {entitlementPoolsIds = [], licenseKeyGroupsIds = []} = elem; - accum.push({ - ...elem, - itemType: overviewEditorHeaders.FEATURE_GROUP, - - children: [ - ...entitlementPoolsIds.length ? entitlementPoolsIds.reduce(reduceEntitlementPools, []) : [], - ...licenseKeyGroupsIds.length ? licenseKeyGroupsIds.reduce(reduceLicenseKeyGroups, []) : [] - ] - - }); - } - return accum; - }; - - - - const mapLicenseAgreementData = licenseAgreement => { - let {featureGroupsIds = []} = licenseAgreement; - return { - ...licenseAgreement, - itemType: overviewEditorHeaders.LICENSE_AGREEMENT, - children: featureGroupsIds.length ? featureGroupsIds.reduce(reduceFeatureGroups, []) : [] - }; - }; - - if (entitlementPool.entitlementPoolEditor && entitlementPool.entitlementPoolEditor.data) { - modalHeader = overviewEditorHeaders.ENTITLEMENT_POOL; - isDisplayModal = true; - }else - if (licenseAgreement.licenseAgreementEditor && licenseAgreement.licenseAgreementEditor.data) { - modalHeader = overviewEditorHeaders.LICENSE_AGREEMENT; - isDisplayModal = true; - }else - if (featureGroup.featureGroupEditor && featureGroup.featureGroupEditor.data) { - modalHeader = overviewEditorHeaders.FEATURE_GROUP; - isDisplayModal = true; - }else - if (licenseKeyGroup.licenseKeyGroupsEditor && licenseKeyGroup.licenseKeyGroupsEditor.data) { - modalHeader = overviewEditorHeaders.LICENSE_KEY_GROUP; - isDisplayModal = true; - } - - let orphanDataList = [ - ...featureGroup.featureGroupsList.reduce(checkFG, []), - ...entitlementPool.entitlementPoolsList.reduce(checkEP, []), - ...licenseKeyGroup.licenseKeyGroupsList.reduce(checkLG, []) - ]; - - licensingDataList = licenseAgreement.licenseAgreementList && licenseAgreement.licenseAgreementList.length ? licenseAgreement.licenseAgreementList.map(mapLicenseAgreementData) : []; - let selectedTab = licenseModelOverview.selectedTab; - // on first entry, we will decide what tab to open depending on data. if there are no connections, we will open the orphans - if (selectedTab === null) { - selectedTab = (licensingDataList.length) ? selectedButton.VLM_LIST_VIEW : selectedButton.NOT_IN_USE; - } - - return { - isDisplayModal, - modalHeader, - licenseModelId: licenseModelEditor.data.id, - version: licenseModelEditor.data.version, - licensingDataList, - orphanDataList, - selectedTab - }; + let modalHeader, licensingDataList; + let isDisplayModal = false; + + const reduceLicenseKeyGroups = (accum, licenseKeyGroupId) => { + let curLicenseKeyGroup = licenseKeyGroup.licenseKeyGroupsList.find( + item => { + return item.id === licenseKeyGroupId; + } + ); + if (curLicenseKeyGroup) { + accum.push({ + ...curLicenseKeyGroup, + itemType: overviewEditorHeaders.LICENSE_KEY_GROUP + }); + } + return accum; + }; + + const reduceEntitlementPools = (accum, entitlementPoolId) => { + let curEntitlementPool = entitlementPool.entitlementPoolsList.find( + item => { + return item.id === entitlementPoolId; + } + ); + if (curEntitlementPool) { + accum.push({ + ...curEntitlementPool, + itemType: overviewEditorHeaders.ENTITLEMENT_POOL + }); + } + return accum; + }; + + const reduceFeatureGroups = (accum, featureGroupId) => { + let curFeatureGroup = featureGroup.featureGroupsList.find(item => { + return item.id === featureGroupId; + }); + if (curFeatureGroup) { + let { + entitlementPoolsIds = [], + licenseKeyGroupsIds = [] + } = curFeatureGroup; + accum.push({ + ...curFeatureGroup, + itemType: overviewEditorHeaders.FEATURE_GROUP, + children: [ + ...(entitlementPoolsIds.length + ? entitlementPoolsIds.reduce(reduceEntitlementPools, []) + : []), + ...(licenseKeyGroupsIds.length + ? licenseKeyGroupsIds.reduce(reduceLicenseKeyGroups, []) + : []) + ] + }); + } + return accum; + }; + + const checkEP = (accum, elem) => { + if ( + !elem.referencingFeatureGroups || + !elem.referencingFeatureGroups.length + ) { + accum.push({ + ...elem, + itemType: overviewEditorHeaders.ENTITLEMENT_POOL + }); + } + return accum; + }; + + const checkLG = (accum, elem) => { + if ( + !elem.referencingFeatureGroups || + !elem.referencingFeatureGroups.length + ) { + accum.push({ + ...elem, + itemType: overviewEditorHeaders.LICENSE_KEY_GROUP + }); + } + return accum; + }; + + const checkFG = (accum, elem) => { + if ( + !elem.referencingLicenseAgreements || + !elem.referencingLicenseAgreements.length + ) { + let { entitlementPoolsIds = [], licenseKeyGroupsIds = [] } = elem; + accum.push({ + ...elem, + itemType: overviewEditorHeaders.FEATURE_GROUP, + + children: [ + ...(entitlementPoolsIds.length + ? entitlementPoolsIds.reduce(reduceEntitlementPools, []) + : []), + ...(licenseKeyGroupsIds.length + ? licenseKeyGroupsIds.reduce(reduceLicenseKeyGroups, []) + : []) + ] + }); + } + return accum; + }; + + const mapLicenseAgreementData = licenseAgreement => { + let { featureGroupsIds = [] } = licenseAgreement; + return { + ...licenseAgreement, + itemType: overviewEditorHeaders.LICENSE_AGREEMENT, + children: featureGroupsIds.length + ? featureGroupsIds.reduce(reduceFeatureGroups, []) + : [] + }; + }; + + if ( + entitlementPool.entitlementPoolEditor && + entitlementPool.entitlementPoolEditor.data + ) { + modalHeader = overviewEditorHeaders.ENTITLEMENT_POOL; + isDisplayModal = true; + } else if ( + licenseAgreement.licenseAgreementEditor && + licenseAgreement.licenseAgreementEditor.data + ) { + modalHeader = overviewEditorHeaders.LICENSE_AGREEMENT; + isDisplayModal = true; + } else if ( + featureGroup.featureGroupEditor && + featureGroup.featureGroupEditor.data + ) { + modalHeader = overviewEditorHeaders.FEATURE_GROUP; + isDisplayModal = true; + } else if ( + licenseKeyGroup.licenseKeyGroupsEditor && + licenseKeyGroup.licenseKeyGroupsEditor.data + ) { + modalHeader = overviewEditorHeaders.LICENSE_KEY_GROUP; + isDisplayModal = true; + } + + let orphanDataList = [ + ...featureGroup.featureGroupsList.reduce(checkFG, []), + ...entitlementPool.entitlementPoolsList.reduce(checkEP, []), + ...licenseKeyGroup.licenseKeyGroupsList.reduce(checkLG, []) + ]; + + licensingDataList = + licenseAgreement.licenseAgreementList && + licenseAgreement.licenseAgreementList.length + ? licenseAgreement.licenseAgreementList.map(mapLicenseAgreementData) + : []; + let selectedTab = licenseModelOverview.selectedTab; + // on first entry, we will decide what tab to open depending on data. if there are no connections, we will open the orphans + if (selectedTab === null) { + selectedTab = licensingDataList.length + ? selectedButton.VLM_LIST_VIEW + : selectedButton.NOT_IN_USE; + } + + return { + isDisplayModal, + modalHeader, + licenseModelId: licenseModelEditor.data.id, + version: licenseModelEditor.data.version, + licensingDataList, + orphanDataList, + selectedTab + }; }; -const mapActionsToProps = (dispatch, {licenseModelId}) => { - return { - onCallVCAction: action => { - LicenseModelActionHelper.performVCAction(dispatch, {licenseModelId, action}); - }, - onTabSelect: (buttonTab) => licenseModelOverviewActionHelper.selectVLMListView(dispatch,{buttonTab}) - }; +const mapActionsToProps = (dispatch, { licenseModelId }) => { + return { + onCallVCAction: action => { + LicenseModelActionHelper.performVCAction(dispatch, { + licenseModelId, + action + }); + }, + onTabSelect: buttonTab => + licenseModelOverviewActionHelper.selectVLMListView(dispatch, { + buttonTab + }) + }; }; -export default connect(mapStateToProps, mapActionsToProps)(LicenseModelOverviewView); +export default connect(mapStateToProps, mapActionsToProps)( + LicenseModelOverviewView +); diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewConstants.js index 56b23384a7..b05da582f4 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewConstants.js @@ -16,27 +16,27 @@ import keyMirror from 'nfvo-utils/KeyMirror.js'; export const overviewItems = keyMirror({ - LICENSE_AGREEMENTS: 'License Agreements', - FEATURE_GROUPS: 'Feature Groups', - ENTITLEMENT_POOLS: 'Entitlement Pools', - LICENSE_KEY_GROUPS: 'License Key Groups' + LICENSE_AGREEMENTS: 'License Agreements', + FEATURE_GROUPS: 'Feature Groups', + ENTITLEMENT_POOLS: 'Entitlement Pools', + LICENSE_KEY_GROUPS: 'License Key Groups' }); export const overviewEditorHeaders = keyMirror({ - LICENSE_AGREEMENT: 'License Agreement', - FEATURE_GROUP: 'Feature Group', - ENTITLEMENT_POOL: 'Entitlement Pool', - LICENSE_KEY_GROUP: 'License Key Group' + LICENSE_AGREEMENT: 'License Agreement', + FEATURE_GROUP: 'Feature Group', + ENTITLEMENT_POOL: 'Entitlement Pool', + LICENSE_KEY_GROUP: 'License Key Group' }); export const actionTypes = keyMirror({ - LICENSE_MODEL_OVERVIEW_TAB_SELECTED: null, - LM_DATA_CHANGED: null + LICENSE_MODEL_OVERVIEW_TAB_SELECTED: null, + LM_DATA_CHANGED: null }); export const selectedButton = { - VLM_LIST_VIEW: 'VLM_LIST_VIEW', - NOT_IN_USE: 'NOT_IN_USE' + VLM_LIST_VIEW: 'VLM_LIST_VIEW', + NOT_IN_USE: 'NOT_IN_USE' }; export const VLM_DESCRIPTION_FORM = 'VLMDEWSCRIPTIONFORM'; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewView.jsx index 39109af9a3..6899360597 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewView.jsx @@ -23,87 +23,137 @@ import EntitlementPoolsEditor from '../entitlementPools/EntitlementPoolsEditor.j import FeatureGroupEditor from '../featureGroups/FeatureGroupEditor.js'; import LicenseAgreementEditor from '../licenseAgreement/LicenseAgreementEditor.js'; import LicenseKeyGroupsEditor from '../licenseKeyGroups/LicenseKeyGroupsEditor.js'; -import {overviewEditorHeaders, selectedButton} from './LicenseModelOverviewConstants.js'; +import { + overviewEditorHeaders, + selectedButton +} from './LicenseModelOverviewConstants.js'; import SummaryView from './SummaryView.jsx'; import VLMListView from './VLMListView.jsx'; import ListButtons from './summary/ListButtons.jsx'; - -const setModalClassName = (modalHeader) => { - switch (modalHeader) { - case overviewEditorHeaders.ENTITLEMENT_POOL: - return 'entitlement-pools-modal'; - case overviewEditorHeaders.LICENSE_AGREEMENT: - return 'license-agreement-modal'; - case overviewEditorHeaders.FEATURE_GROUP: - return 'feature-group-modal'; - case overviewEditorHeaders.LICENSE_KEY_GROUP: - return 'license-key-groups-modal'; - default: - return ''; - } +const setModalClassName = modalHeader => { + switch (modalHeader) { + case overviewEditorHeaders.ENTITLEMENT_POOL: + return 'entitlement-pools-modal'; + case overviewEditorHeaders.LICENSE_AGREEMENT: + return 'license-agreement-modal'; + case overviewEditorHeaders.FEATURE_GROUP: + return 'feature-group-modal'; + case overviewEditorHeaders.LICENSE_KEY_GROUP: + return 'license-key-groups-modal'; + default: + return ''; + } }; class LicenseModelOverviewView extends React.Component { + static propTypes = { + isDisplayModal: PropTypes.bool, + isReadOnlyMode: PropTypes.bool, + licenseModelId: PropTypes.string, + licensingDataList: PropTypes.array, + orphanDataList: PropTypes.array, + modalHeader: PropTypes.string, + selectedTab: PropTypes.string, + onTabSelect: PropTypes.func, + onCallVCAction: PropTypes.func, + onClose: PropTypes.func + }; - static propTypes = { - isDisplayModal: PropTypes.bool, - isReadOnlyMode: PropTypes.bool, - licenseModelId: PropTypes.string, - licensingDataList: PropTypes.array, - orphanDataList: PropTypes.array, - modalHeader: PropTypes.string, - selectedTab: PropTypes.string, - onTabSelect: PropTypes.func, - onCallVCAction: PropTypes.func, - onClose: PropTypes.func - }; - - render() { - let {isDisplayModal, modalHeader, licensingDataList, selectedTab, onTabSelect, orphanDataList, isReadOnlyMode} = this.props; - let selectedInUse = selectedTab !== selectedButton.NOT_IN_USE; - let dataList = selectedInUse ? licensingDataList : orphanDataList; - return( - <div className='license-model-overview'> - <SummaryView isReadOnlyMode={isReadOnlyMode}/> - <div className={classNames('overview-list-section ', !selectedInUse ? 'overview-list-orphans' : '' )}> - <div className='vlm-list-tab-panel'> - <ListButtons onTabSelect={onTabSelect} - selectedTab={selectedTab} - hasOrphans={orphanDataList.length > 0} - hasLicensing={licensingDataList.length > 0}/> - </div> - <VLMListView licensingDataList={dataList} showInUse={selectedInUse}/> - </div> - { - isDisplayModal && - <Modal show={isDisplayModal} bsSize='large' animation={true} className={classNames('onborading-modal license-model-modal', setModalClassName(modalHeader))}> - <Modal.Header> - <Modal.Title>{`${i18n('Create New ')}${i18n(modalHeader)}`}</Modal.Title> - </Modal.Header> - <Modal.Body> - {this.renderModalBody(modalHeader)} - </Modal.Body> - </Modal> - } - </div> - ); - } + render() { + let { + isDisplayModal, + modalHeader, + licensingDataList, + selectedTab, + onTabSelect, + orphanDataList, + isReadOnlyMode + } = this.props; + let selectedInUse = selectedTab !== selectedButton.NOT_IN_USE; + let dataList = selectedInUse ? licensingDataList : orphanDataList; + return ( + <div className="license-model-overview"> + <SummaryView isReadOnlyMode={isReadOnlyMode} /> + <div + className={classNames( + 'overview-list-section ', + !selectedInUse ? 'overview-list-orphans' : '' + )}> + <div className="vlm-list-tab-panel"> + <ListButtons + onTabSelect={onTabSelect} + selectedTab={selectedTab} + hasOrphans={orphanDataList.length > 0} + hasLicensing={licensingDataList.length > 0} + /> + </div> + <VLMListView + licensingDataList={dataList} + showInUse={selectedInUse} + /> + </div> + {isDisplayModal && ( + <Modal + show={isDisplayModal} + bsSize="large" + animation={true} + className={classNames( + 'onborading-modal license-model-modal', + setModalClassName(modalHeader) + )}> + <Modal.Header> + <Modal.Title>{`${i18n('Create New ')}${i18n( + modalHeader + )}`}</Modal.Title> + </Modal.Header> + <Modal.Body> + {this.renderModalBody(modalHeader)} + </Modal.Body> + </Modal> + )} + </div> + ); + } - renderModalBody(modalHeader) { - let {licenseModelId, version, isReadOnlyMode} = this.props; - switch (modalHeader) { - case overviewEditorHeaders.ENTITLEMENT_POOL: - return <EntitlementPoolsEditor version={version} licenseModelId={licenseModelId} isReadOnlyMode={isReadOnlyMode}/>; - case overviewEditorHeaders.LICENSE_AGREEMENT: - return <LicenseAgreementEditor version={version} licenseModelId={licenseModelId} isReadOnlyMode={isReadOnlyMode}/>; - case overviewEditorHeaders.FEATURE_GROUP: - return <FeatureGroupEditor version={version} licenseModelId={licenseModelId} isReadOnlyMode={isReadOnlyMode}/>; - case overviewEditorHeaders.LICENSE_KEY_GROUP: - return <LicenseKeyGroupsEditor version={version} licenseModelId={licenseModelId} isReadOnlyMode={isReadOnlyMode}/>; - } - } + renderModalBody(modalHeader) { + let { licenseModelId, version, isReadOnlyMode } = this.props; + switch (modalHeader) { + case overviewEditorHeaders.ENTITLEMENT_POOL: + return ( + <EntitlementPoolsEditor + version={version} + licenseModelId={licenseModelId} + isReadOnlyMode={isReadOnlyMode} + /> + ); + case overviewEditorHeaders.LICENSE_AGREEMENT: + return ( + <LicenseAgreementEditor + version={version} + licenseModelId={licenseModelId} + isReadOnlyMode={isReadOnlyMode} + /> + ); + case overviewEditorHeaders.FEATURE_GROUP: + return ( + <FeatureGroupEditor + version={version} + licenseModelId={licenseModelId} + isReadOnlyMode={isReadOnlyMode} + /> + ); + case overviewEditorHeaders.LICENSE_KEY_GROUP: + return ( + <LicenseKeyGroupsEditor + version={version} + licenseModelId={licenseModelId} + isReadOnlyMode={isReadOnlyMode} + /> + ); + } + } } -export default LicenseModelOverviewView; +export default LicenseModelOverviewView; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/SummaryView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/SummaryView.jsx index 4053f14ced..f416b0a07f 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/SummaryView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/SummaryView.jsx @@ -13,24 +13,24 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import React, {Component} from 'react'; +import React, { Component } from 'react'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import {default as VendorDataView} from './summary/VendorDataView.js'; -import {default as SummaryCountList} from './summary/SummaryCountList.js'; +import { default as VendorDataView } from './summary/VendorDataView.js'; +import { default as SummaryCountList } from './summary/SummaryCountList.js'; class SummaryView extends Component { - render() { - const {isReadOnlyMode} = this.props; - return( - <div className='overview-top-section'> - <div className='page-title'>{i18n('overview')}</div> - <div className='license-model-overview-top'> - <VendorDataView isReadOnlyMode={isReadOnlyMode}/> - <SummaryCountList isReadOnlyMode={isReadOnlyMode}/> - </div> - </div> - ); - } + render() { + const { isReadOnlyMode } = this.props; + return ( + <div className="overview-top-section"> + <div className="page-title">{i18n('overview')}</div> + <div className="license-model-overview-top"> + <VendorDataView isReadOnlyMode={isReadOnlyMode} /> + <SummaryCountList isReadOnlyMode={isReadOnlyMode} /> + </div> + </div> + ); + } } export default SummaryView; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/VLMListView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/VLMListView.jsx index 012bd6e158..d91960e6a3 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/VLMListView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/VLMListView.jsx @@ -13,114 +13,130 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import React, {Component} from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import {Collapse} from 'react-bootstrap'; +import { Collapse } from 'react-bootstrap'; import LicenseAgreement from './listItems/LicenseAgreement.jsx'; import EntitlementPool from './listItems/EntitlementPool.jsx'; import FeatureGroup from './listItems/FeatureGroup.jsx'; import LicenseKeyGroup from './listItems/LicenseKeyGroup.jsx'; -import {overviewEditorHeaders} from './LicenseModelOverviewConstants.js'; +import { overviewEditorHeaders } from './LicenseModelOverviewConstants.js'; class VLMListView extends Component { + static propTypes = { + licensingDataList: PropTypes.array, + showInUse: PropTypes.bool + }; - static propTypes = { - licensingDataList: PropTypes.array, - showInUse: PropTypes.bool - }; + state = {}; - state = { + render() { + let { licensingDataList = [] } = this.props; + return ( + <div className="vlm-list-view"> + <div> + <ul className="vlm-list" data-test-id="vlm-list"> + {licensingDataList.map(item => + this.renderLicensingItem(item) + )} + </ul> + </div> + </div> + ); + } - }; + renderLicensingItem(item) { + switch (item.itemType) { + case overviewEditorHeaders.LICENSE_AGREEMENT: + return this.renderLicenseAgreementItem(item); + case overviewEditorHeaders.FEATURE_GROUP: + return this.renderFeatureGroupItem(item); + case overviewEditorHeaders.LICENSE_KEY_GROUP: + return this.renderLicenseKeyGroupItem(item); + case overviewEditorHeaders.ENTITLEMENT_POOL: + return this.renderEntitlementPoolItem(item); + default: + return; + } + } - render() { - let {licensingDataList = []} = this.props; - return ( - <div className='vlm-list-view'> - <div> - <ul className='vlm-list' data-test-id='vlm-list'> - {licensingDataList.map(item => this.renderLicensingItem(item))} - </ul> - </div> - </div> - ); - } + renderLicenseAgreementItem(licenseAgreement) { + return ( + <li key={licenseAgreement.id}> + <LicenseAgreement + laData={licenseAgreement} + isCollapsed={this.state[licenseAgreement.id]} + onClick={event => + this.updateCollapsable(event, licenseAgreement.id) + } + isOrphan={!this.props.showInUse} + /> + <Collapse in={this.state[licenseAgreement.id]}> + <ul> + {licenseAgreement.children && + licenseAgreement.children.map(item => + this.renderLicensingItem(item) + )} + </ul> + </Collapse> + </li> + ); + } - renderLicensingItem(item) { - switch (item.itemType) { - case overviewEditorHeaders.LICENSE_AGREEMENT : - return this.renderLicenseAgreementItem(item); - case overviewEditorHeaders.FEATURE_GROUP : - return this.renderFeatureGroupItem(item); - case overviewEditorHeaders.LICENSE_KEY_GROUP : - return this.renderLicenseKeyGroupItem(item); - case overviewEditorHeaders.ENTITLEMENT_POOL: - return this.renderEntitlementPoolItem(item); - default: - return; - } - } + renderFeatureGroupItem(featureGroup) { + const { showInUse } = this.props; + return ( + <li key={featureGroup.id}> + <FeatureGroup + fgData={featureGroup} + isCollapsed={this.state[featureGroup.id]} + onClick={event => + this.updateCollapsable(event, featureGroup.id) + } + isOrphan={!this.props.showInUse} + /> + {showInUse && ( + <Collapse in={this.state[featureGroup.id]}> + <ul> + {featureGroup.children && + featureGroup.children.map(item => + this.renderLicensingItem(item) + )} + </ul> + </Collapse> + )} + </li> + ); + } - renderLicenseAgreementItem(licenseAgreement) { - return ( - <li key={licenseAgreement.id}> - <LicenseAgreement - laData={licenseAgreement} - isCollapsed={this.state[licenseAgreement.id]} - onClick={event => this.updateCollapsable(event, licenseAgreement.id) } - isOrphan={!this.props.showInUse}/> - <Collapse in={this.state[licenseAgreement.id]}> - <ul> - {licenseAgreement.children && licenseAgreement.children.map(item => this.renderLicensingItem(item))} - </ul> - </Collapse> - </li> - ); - } + renderEntitlementPoolItem(entitlementPool) { + return ( + <li key={entitlementPool.id}> + <EntitlementPool + epData={entitlementPool} + isOrphan={!this.props.showInUse} + /> + </li> + ); + } - renderFeatureGroupItem(featureGroup) { - const {showInUse} = this.props; - return ( - <li key={featureGroup.id}> - <FeatureGroup - fgData={featureGroup} - isCollapsed={this.state[featureGroup.id]} - onClick={event=> this.updateCollapsable(event, featureGroup.id) } - isOrphan={!this.props.showInUse}/> - { - showInUse && <Collapse in={this.state[featureGroup.id]}> - <ul> - {featureGroup.children && featureGroup.children.map(item => this.renderLicensingItem(item))} + renderLicenseKeyGroupItem(licenseKeyGroup) { + return ( + <li key={licenseKeyGroup.id}> + <LicenseKeyGroup + lkgData={licenseKeyGroup} + isOrphan={!this.props.showInUse} + /> + </li> + ); + } - </ul> - </Collapse> - } - </li> - ); - } - - renderEntitlementPoolItem(entitlementPool) { - return ( - <li key={entitlementPool.id}> - <EntitlementPool epData={entitlementPool} isOrphan={!this.props.showInUse}/> - </li> - ); - } - - renderLicenseKeyGroupItem(licenseKeyGroup) { - return ( - <li key={licenseKeyGroup.id}> - <LicenseKeyGroup lkgData={licenseKeyGroup} isOrphan={!this.props.showInUse}/> - </li> - ); - } - - updateCollapsable(event, id) { - event.stopPropagation(); - let obj = {}; - obj[id] = !this.state[id]; - this.setState(obj); - } + updateCollapsable(event, id) { + event.stopPropagation(); + let obj = {}; + obj[id] = !this.state[id]; + this.setState(obj); + } } export default VLMListView; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/licenseModelOverviewActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/licenseModelOverviewActionHelper.js index af9bc22b07..0e9fca7b4a 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/licenseModelOverviewActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/licenseModelOverviewActionHelper.js @@ -13,27 +13,27 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes} from './LicenseModelOverviewConstants.js'; +import { actionTypes } from './LicenseModelOverviewConstants.js'; export default { - selectVLMListView(dispatch, {buttonTab}) { - dispatch({ - type: actionTypes.LICENSE_MODEL_OVERVIEW_TAB_SELECTED, - buttonTab - }); - }, + selectVLMListView(dispatch, { buttonTab }) { + dispatch({ + type: actionTypes.LICENSE_MODEL_OVERVIEW_TAB_SELECTED, + buttonTab + }); + }, - editDescriptionOpen(dispatch, {description}) { - dispatch({ - type: actionTypes.LM_DATA_CHANGED, - description - }); - }, + editDescriptionOpen(dispatch, { description }) { + dispatch({ + type: actionTypes.LM_DATA_CHANGED, + description + }); + }, - editDescriptionClose(dispatch) { - dispatch({ - type: actionTypes.LM_DATA_CHANGED, - description: undefined - }); - } + editDescriptionClose(dispatch) { + dispatch({ + type: actionTypes.LM_DATA_CHANGED, + description: undefined + }); + } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/EntitlementPool.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/EntitlementPool.jsx index 34d2ee6db5..60eba401c7 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/EntitlementPool.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/EntitlementPool.jsx @@ -13,33 +13,46 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import React, {Component} from 'react'; +import React, { Component } from 'react'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import {extractUnits} from '../../entitlementPools/EntitlementPoolsConstants.js'; +import { extractUnits } from '../../entitlementPools/EntitlementPoolsConstants.js'; import ArrowCol from './listItemsComponents/ArrowCol.jsx'; import ItemInfo from './listItemsComponents/ItemInfo.jsx'; import IconCol from './listItemsComponents/IconCol.jsx'; -import {AdditionalDataCol, AdditionalDataElement} from './listItemsComponents/AdditionalDataCol.jsx'; +import { + AdditionalDataCol, + AdditionalDataElement +} from './listItemsComponents/AdditionalDataCol.jsx'; class EntitlementPool extends Component { - render() { - let {epData: {name, description, thresholdValue, thresholdUnits}, isOrphan} = this.props; - return ( - <div className={`vlm-list-item vlm-list-item-ep ${isOrphan ? 'orphan-list-item' : ''}`} data-test-id='vlm-list-item-ep'> - {!isOrphan && <ArrowCol/>} - <IconCol className='ep-icon' text='EP'/> - <ItemInfo name={name} description={description}/> - <AdditionalDataCol> - {thresholdValue && <AdditionalDataElement - className='vlm-list-item-entitlement-metric' - name={i18n('Entitlement')} - value={`${thresholdValue} ${extractUnits(thresholdUnits)}`}/> - } - </AdditionalDataCol> - </div> - ); - } - + render() { + let { + epData: { name, description, thresholdValue, thresholdUnits }, + isOrphan + } = this.props; + return ( + <div + className={`vlm-list-item vlm-list-item-ep ${ + isOrphan ? 'orphan-list-item' : '' + }`} + data-test-id="vlm-list-item-ep"> + {!isOrphan && <ArrowCol />} + <IconCol className="ep-icon" text="EP" /> + <ItemInfo name={name} description={description} /> + <AdditionalDataCol> + {thresholdValue && ( + <AdditionalDataElement + className="vlm-list-item-entitlement-metric" + name={i18n('Entitlement')} + value={`${thresholdValue} ${extractUnits( + thresholdUnits + )}`} + /> + )} + </AdditionalDataCol> + </div> + ); + } } export default EntitlementPool; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/FeatureGroup.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/FeatureGroup.jsx index 6d97dea358..df1d813408 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/FeatureGroup.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/FeatureGroup.jsx @@ -13,49 +13,83 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import React, {Component} from 'react'; -import {overviewEditorHeaders} from '../LicenseModelOverviewConstants.js'; +import React, { Component } from 'react'; +import { overviewEditorHeaders } from '../LicenseModelOverviewConstants.js'; import ArrowCol from './listItemsComponents/ArrowCol.jsx'; import ItemInfo from './listItemsComponents/ItemInfo.jsx'; import IconCol from './listItemsComponents/IconCol.jsx'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import {AdditionalDataCol, AdditionalDataElement} from './listItemsComponents/AdditionalDataCol.jsx'; +import { + AdditionalDataCol, + AdditionalDataElement +} from './listItemsComponents/AdditionalDataCol.jsx'; class FeatureGroup extends Component { - render() { - let {fgData: {name, manufacturerReferenceNumber, description, children = []}, isCollapsed, onClick, isOrphan} = this.props; - return ( - <div - onClick={e => onClick(e)} - className={`vlm-list-item vlm-list-item-fg ${isOrphan ? 'orphan-list-item' : ''} ${children.length && !isOrphan ? 'clickable' : ''}`} data-test-id='vlm-list-item-fg'> - {!isOrphan && <ArrowCol isCollapsed={isCollapsed} length={children.length} />} - <IconCol className='fg-icon' text='FG'/> - <ItemInfo name={name} description={description}> - <div className='children-count'> - <span className='count-value'> - {i18n('Entitlement Pools: ')} - <span data-test-id='vlm-list-ep-count-value'> - {`${children.filter(child => child.itemType === overviewEditorHeaders.ENTITLEMENT_POOL).length}`} - </span> - </span> - <span className='fg-pipeline-separator'>|</span> - <span className='count-value'> - {i18n('License Key Groups: ')} - <span data-test-id='vlm-list-lkg-count-value'> - {`${children.filter(child => child.itemType === overviewEditorHeaders.LICENSE_KEY_GROUP).length}`} - </span> - </span> - </div> - </ItemInfo> - <AdditionalDataCol> - <AdditionalDataElement - name={i18n('Manufacturer Reference Number')} - value={manufacturerReferenceNumber} - className='vlm-list-item-sku'/> - </AdditionalDataCol> - </div> - ); - } + render() { + let { + fgData: { + name, + manufacturerReferenceNumber, + description, + children = [] + }, + isCollapsed, + onClick, + isOrphan + } = this.props; + return ( + <div + onClick={e => onClick(e)} + className={`vlm-list-item vlm-list-item-fg ${ + isOrphan ? 'orphan-list-item' : '' + } ${children.length && !isOrphan ? 'clickable' : ''}`} + data-test-id="vlm-list-item-fg"> + {!isOrphan && ( + <ArrowCol + isCollapsed={isCollapsed} + length={children.length} + /> + )} + <IconCol className="fg-icon" text="FG" /> + <ItemInfo name={name} description={description}> + <div className="children-count"> + <span className="count-value"> + {i18n('Entitlement Pools: ')} + <span data-test-id="vlm-list-ep-count-value"> + {`${ + children.filter( + child => + child.itemType === + overviewEditorHeaders.ENTITLEMENT_POOL + ).length + }`} + </span> + </span> + <span className="fg-pipeline-separator">|</span> + <span className="count-value"> + {i18n('License Key Groups: ')} + <span data-test-id="vlm-list-lkg-count-value"> + {`${ + children.filter( + child => + child.itemType === + overviewEditorHeaders.LICENSE_KEY_GROUP + ).length + }`} + </span> + </span> + </div> + </ItemInfo> + <AdditionalDataCol> + <AdditionalDataElement + name={i18n('Manufacturer Reference Number')} + value={manufacturerReferenceNumber} + className="vlm-list-item-sku" + /> + </AdditionalDataCol> + </div> + ); + } } export default FeatureGroup; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseAgreement.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseAgreement.jsx index dfbbe20d69..b409776c27 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseAgreement.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseAgreement.jsx @@ -13,44 +13,73 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import React, {Component} from 'react'; +import React, { Component } from 'react'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import InputOptions, {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx'; -import {optionsInputValues} from '../../licenseAgreement/LicenseAgreementConstants.js'; +import InputOptions, { + other as optionInputOther +} from 'nfvo-components/input/validation/InputOptions.jsx'; +import { optionsInputValues } from '../../licenseAgreement/LicenseAgreementConstants.js'; import ArrowCol from './listItemsComponents/ArrowCol.jsx'; import ItemInfo from './listItemsComponents/ItemInfo.jsx'; import IconCol from './listItemsComponents/IconCol.jsx'; -import {AdditionalDataCol, AdditionalDataElement} from './listItemsComponents/AdditionalDataCol.jsx'; +import { + AdditionalDataCol, + AdditionalDataElement +} from './listItemsComponents/AdditionalDataCol.jsx'; class LicenseAgreement extends Component { - render() { - let {laData: {name, description, licenseTerm, children = []}, isCollapsed, onClick, isOrphan} = this.props; - return ( - <div - onClick={e => onClick(e)} - className={`vlm-list-item vlm-list-item-la ${isOrphan ? 'orphan-list-item' : ''} ${children.length && !isOrphan ? 'clickable' : ''} `} - data-test-id='vlm-list-la-item'> - {!isOrphan && <ArrowCol isCollapsed={isCollapsed} length={children.length} />} - <IconCol className='la-icon' text='LA'/> - <ItemInfo name={name} description={description}> - <div className='children-count'> - <span className='count-value'>{i18n('Feature Groups: ')}<span data-test-id='vlm-list-fg-count-value'>{`${children.length}`}</span></span> - </div> - </ItemInfo> - <AdditionalDataCol> - <AdditionalDataElement - name={i18n('License Model Type')} - value={this.extractValue(licenseTerm)}/> - </AdditionalDataCol> - </div> - ); - } + render() { + let { + laData: { name, description, licenseTerm, children = [] }, + isCollapsed, + onClick, + isOrphan + } = this.props; + return ( + <div + onClick={e => onClick(e)} + className={`vlm-list-item vlm-list-item-la ${ + isOrphan ? 'orphan-list-item' : '' + } ${children.length && !isOrphan ? 'clickable' : ''} `} + data-test-id="vlm-list-la-item"> + {!isOrphan && ( + <ArrowCol + isCollapsed={isCollapsed} + length={children.length} + /> + )} + <IconCol className="la-icon" text="LA" /> + <ItemInfo name={name} description={description}> + <div className="children-count"> + <span className="count-value"> + {i18n('Feature Groups: ')} + <span data-test-id="vlm-list-fg-count-value">{`${ + children.length + }`}</span> + </span> + </div> + </ItemInfo> + <AdditionalDataCol> + <AdditionalDataElement + name={i18n('License Model Type')} + value={this.extractValue(licenseTerm)} + /> + </AdditionalDataCol> + </div> + ); + } - extractValue(item) { - if (item === undefined) {return '';} //TODO fix it later + extractValue(item) { + if (item === undefined) { + return ''; + } //TODO fix it later - return item ? item.choice === optionInputOther.OTHER ? item.other : InputOptions.getTitleByName(optionsInputValues, item.choice) : ''; - } + return item + ? item.choice === optionInputOther.OTHER + ? item.other + : InputOptions.getTitleByName(optionsInputValues, item.choice) + : ''; + } } export default LicenseAgreement; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseKeyGroup.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseKeyGroup.jsx index b1036aae23..555acf8dbe 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseKeyGroup.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseKeyGroup.jsx @@ -13,36 +13,53 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import React, {Component} from 'react'; +import React, { Component } from 'react'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import {extractValue, getOperationalScopes} from '../../licenseKeyGroups/LicenseKeyGroupsConstants.js'; +import { + extractValue, + getOperationalScopes +} from '../../licenseKeyGroups/LicenseKeyGroupsConstants.js'; import ArrowCol from './listItemsComponents/ArrowCol.jsx'; import ItemInfo from './listItemsComponents/ItemInfo.jsx'; import IconCol from './listItemsComponents/IconCol.jsx'; -import {AdditionalDataCol, AdditionalDataElement} from './listItemsComponents/AdditionalDataCol.jsx'; +import { + AdditionalDataCol, + AdditionalDataElement +} from './listItemsComponents/AdditionalDataCol.jsx'; class LicenseKeyGroup extends Component { - render() { - let {lkgData: {name, description, operationalScope, type}, isOrphan} = this.props; - return ( - <div className={`vlm-list-item vlm-list-item-lkg ${isOrphan ? 'orphan-list-item' : ''}`} data-test-id='vlm-list-item-lkg'> - {!isOrphan && <ArrowCol/>} - <IconCol className='lkg-icon' text='LKG'/> - <ItemInfo name={name} description={description}/> - <AdditionalDataCol> - {operationalScope && operationalScope.choices && <AdditionalDataElement - className='vlm-list-item-operational-scope' - name={i18n('Operational Scope')} - value={getOperationalScopes(operationalScope)}/>} - <AdditionalDataElement - className='vlm-list-item-group-type' - name={i18n('Type')} - value={extractValue(type)}/> - </AdditionalDataCol> - </div> - ); - } - + render() { + let { + lkgData: { name, description, operationalScope, type }, + isOrphan + } = this.props; + return ( + <div + className={`vlm-list-item vlm-list-item-lkg ${ + isOrphan ? 'orphan-list-item' : '' + }`} + data-test-id="vlm-list-item-lkg"> + {!isOrphan && <ArrowCol />} + <IconCol className="lkg-icon" text="LKG" /> + <ItemInfo name={name} description={description} /> + <AdditionalDataCol> + {operationalScope && + operationalScope.choices && ( + <AdditionalDataElement + className="vlm-list-item-operational-scope" + name={i18n('Operational Scope')} + value={getOperationalScopes(operationalScope)} + /> + )} + <AdditionalDataElement + className="vlm-list-item-group-type" + name={i18n('Type')} + value={extractValue(type)} + /> + </AdditionalDataCol> + </div> + ); + } } export default LicenseKeyGroup; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/AdditionalDataCol.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/AdditionalDataCol.jsx index ffc0991354..0f9c783eac 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/AdditionalDataCol.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/AdditionalDataCol.jsx @@ -16,37 +16,35 @@ import React from 'react'; import PropTypes from 'prop-types'; -function AdditionalDataCol({children}) { - return ( - <div className='list-item-section list-item-additional-data-col'> - <div className='additional-data-col-border'></div> - <div className='additional-data'> - {children} - </div> - </div> - ); +function AdditionalDataCol({ children }) { + return ( + <div className="list-item-section list-item-additional-data-col"> + <div className="additional-data-col-border" /> + <div className="additional-data">{children}</div> + </div> + ); } AdditionalDataCol.propTypes = { - children: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.node), - PropTypes.node - ]) + children: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.node), + PropTypes.node + ]) }; -function AdditionalDataElement({className, name, value}) { - return ( - <div className={className}> - <span className='additional-data-name'>{name}: </span> - <span className='additional-data-value'>{value}</span> - </div> - ); +function AdditionalDataElement({ className, name, value }) { + return ( + <div className={className}> + <span className="additional-data-name">{name}: </span> + <span className="additional-data-value">{value}</span> + </div> + ); } AdditionalDataElement.propTypes = { - name: PropTypes.string, - value: PropTypes.string, - className: PropTypes.string + name: PropTypes.string, + value: PropTypes.string, + className: PropTypes.string }; -export {AdditionalDataCol, AdditionalDataElement}; +export { AdditionalDataCol, AdditionalDataElement }; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ArrowCol.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ArrowCol.jsx index 29aec64bdd..de12eae7d5 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ArrowCol.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ArrowCol.jsx @@ -17,20 +17,24 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -function ArrowCol ({isCollapsed, length}) { - return ( - <div className='list-item-section list-item-arrow-col'> - <div className={classNames('arrow-icon', {'chevron': length > 0}, - {'down': (length > 0 && isCollapsed)}, - {'right': (length > 0 && (!isCollapsed))})} > - </div> - </div> - ); +function ArrowCol({ isCollapsed, length }) { + return ( + <div className="list-item-section list-item-arrow-col"> + <div + className={classNames( + 'arrow-icon', + { chevron: length > 0 }, + { down: length > 0 && isCollapsed }, + { right: length > 0 && !isCollapsed } + )} + /> + </div> + ); } ArrowCol.propTypes = { - isCollapsed: PropTypes.bool, - length: PropTypes.number + isCollapsed: PropTypes.bool, + length: PropTypes.number }; export default ArrowCol; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/IconCol.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/IconCol.jsx index 826248e510..61eeb03496 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/IconCol.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/IconCol.jsx @@ -15,12 +15,14 @@ */ import React from 'react'; -function IconCol({className, text}) { - return ( - <div className='list-item-section list-item-icon-col'> - <div className={`overview-list-icon ${className ? className : ''}`}>{text}</div> - </div> - ); +function IconCol({ className, text }) { + return ( + <div className="list-item-section list-item-icon-col"> + <div className={`overview-list-icon ${className ? className : ''}`}> + {text} + </div> + </div> + ); } export default IconCol; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ItemInfo.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ItemInfo.jsx index 95ae123974..2d2cc8f754 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ItemInfo.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ItemInfo.jsx @@ -16,25 +16,27 @@ import React from 'react'; import PropTypes from 'prop-types'; -function ItemInfo({name, description, children}) { - return ( - <div className='list-item-section vlm-item-info'> - <div className='vlm-list-item-title'> - <div className='item-name' data-test-id='vlm-list-item-name'>{name}</div> - {children} - </div> - <div className='vlm-list-item-description'>{description}</div> - </div> - ); +function ItemInfo({ name, description, children }) { + return ( + <div className="list-item-section vlm-item-info"> + <div className="vlm-list-item-title"> + <div className="item-name" data-test-id="vlm-list-item-name"> + {name} + </div> + {children} + </div> + <div className="vlm-list-item-description">{description}</div> + </div> + ); } ItemInfo.propTypes = { - name: PropTypes.string, - description: PropTypes.string, - children: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.node), - PropTypes.node - ]) + name: PropTypes.string, + description: PropTypes.string, + children: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.node), + PropTypes.node + ]) }; export default ItemInfo; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/LicenseModelDescriptionEdit.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/LicenseModelDescriptionEdit.jsx index af759f1206..04a00177d3 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/LicenseModelDescriptionEdit.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/LicenseModelDescriptionEdit.jsx @@ -18,42 +18,54 @@ import i18n from 'nfvo-utils/i18n/i18n.js'; import Input from 'nfvo-components/input/validation/Input.jsx'; class LicenseModelDescriptionEdit extends React.Component { - render() { - //TODO check if buttons - let {onDataChanged, description, genericFieldInfo} = this.props; - let {isValid, errorText} = genericFieldInfo.description; - let saveButtonClassName = isValid ? 'description-save' : 'description-save disabled'; - return( - <div className='vendor-description-edit'> + render() { + //TODO check if buttons + let { onDataChanged, description, genericFieldInfo } = this.props; + let { isValid, errorText } = genericFieldInfo.description; + let saveButtonClassName = isValid + ? 'description-save' + : 'description-save disabled'; + return ( + <div className="vendor-description-edit"> + <Input + onChange={description => onDataChanged({ description })} + value={description} + isValid={isValid} + errorText={errorText} + className="description-edit-textarea" + type="textarea" + /> + <div className="buttons-row"> + <div className="buttons-wrapper"> + <div + onClick={() => this.submit()} + className={saveButtonClassName} + data-test-id="vlm-summary-vendor-desc-save-btn"> + {i18n('Save')} + </div> + <div + onClick={() => this.onClose()} + className="description-button" + data-test-id="vlm-summary-vendor-desc-cancel-btn"> + {i18n('Cancel')} + </div> + </div> + </div> + </div> + ); + } - <Input - onChange={description => onDataChanged({description})} - value={description} - isValid={isValid} - errorText={errorText} - className='description-edit-textarea' - type='textarea'/> - <div className='buttons-row'> - <div className='buttons-wrapper'> - <div onClick={() => this.submit()} className={saveButtonClassName} data-test-id='vlm-summary-vendor-desc-save-btn'>{i18n('Save')}</div> - <div onClick={() => this.onClose()} className='description-button' data-test-id='vlm-summary-vendor-desc-cancel-btn'>{i18n('Cancel')}</div> - </div> - </div> - </div> - ); - } + onClose() { + this.props.onClose(); + } - onClose() { - this.props.onClose(); - } - - submit() { - let {onSubmit, data, description} = this.props; - onSubmit({ - ...data, - description: description.trim() - }); - } + submit() { + let { onSubmit, data, description } = this.props; + onSubmit({ + ...data, + description: description.trim() + }); + } } export default LicenseModelDescriptionEdit; 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 3fcac3c1d8..d422d5d4b2 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,37 +15,39 @@ */ import React from 'react'; import PropTypes from 'prop-types'; -import {selectedButton} from '../LicenseModelOverviewConstants.js'; +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, selectedTab, hasOrphans, hasLicensing}) { - // no data, no tabs - if (!hasLicensing && !hasOrphans) { - return null; - } - return ( - <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> - ); +function ListButtons({ onTabSelect, selectedTab, hasOrphans, hasLicensing }) { + // no data, no tabs + if (!hasLicensing && !hasOrphans) { + return null; + } + return ( + <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> + ); } ListButtons.propTypes = { - onTabSelect: PropTypes.func, - selectedInUse: PropTypes.bool + onTabSelect: PropTypes.func, + selectedInUse: PropTypes.bool }; export default ListButtons; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountItem.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountItem.jsx index 50c547e042..144d9bcc1b 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountItem.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountItem.jsx @@ -16,19 +16,43 @@ import React from 'react'; import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; -function SummaryCountItem ({name, counter, onAdd, onNavigate, isReadOnlyMode}) { - //TODO check for buttons - return( - <div className='summary-count-item'> - <div className='summary-name-and-count' onClick={onNavigate}> - <span className='item-name' onClick={onNavigate}>{name}</span> - <span className='item-count' onClick={onNavigate} data-test-id={'vlm-summary-vendor-counter-' + name.toLowerCase().replace(/\s/g,'-')}>({counter})</span> - </div> - <SVGIcon name='plusCircle' disabled={isReadOnlyMode} className={isReadOnlyMode ? 'disabled' : ''} - color='secondary' onClick={onAdd} data-test-id={'vlm-summary-vendor-add-btn-' + name.toLowerCase().replace(/\s/g,'-')}/> - </div> - ); +function SummaryCountItem({ + name, + counter, + onAdd, + onNavigate, + isReadOnlyMode +}) { + //TODO check for buttons + return ( + <div className="summary-count-item"> + <div className="summary-name-and-count" onClick={onNavigate}> + <span className="item-name" onClick={onNavigate}> + {name} + </span> + <span + className="item-count" + onClick={onNavigate} + data-test-id={ + 'vlm-summary-vendor-counter-' + + name.toLowerCase().replace(/\s/g, '-') + }> + ({counter}) + </span> + </div> + <SVGIcon + name="plusCircle" + disabled={isReadOnlyMode} + className={isReadOnlyMode ? 'disabled' : ''} + color="secondary" + onClick={onAdd} + data-test-id={ + 'vlm-summary-vendor-add-btn-' + + name.toLowerCase().replace(/\s/g, '-') + } + /> + </div> + ); } export default SummaryCountItem; - diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountList.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountList.js index 15b6649543..711bb7a374 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountList.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountList.js @@ -14,123 +14,158 @@ * permissions and limitations under the License. */ import React from 'react'; -import {connect} from 'react-redux'; +import { connect } from 'react-redux'; import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js'; -import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js'; +import { enums, screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js'; import EntitlementPoolsActionHelper from '../../entitlementPools/EntitlementPoolsActionHelper.js'; import LicenseAgreementActionHelper from '../../licenseAgreement/LicenseAgreementActionHelper.js'; import LicenseKeyGroupsActionHelper from '../../licenseKeyGroups/LicenseKeyGroupsActionHelper.js'; import FeatureGroupsActionHelper from '../../featureGroups/FeatureGroupsActionHelper.js'; -import {overviewItems} from '../LicenseModelOverviewConstants.js'; +import { overviewItems } from '../LicenseModelOverviewConstants.js'; import SummaryCountItem from './SummaryCountItem.jsx'; export const mapStateToProps = ({ - licenseModel: { - licenseModelEditor, - licenseAgreement: {licenseAgreementList}, - featureGroup: {featureGroupsList}, - entitlementPool: {entitlementPoolsList}, - licenseKeyGroup: {licenseKeyGroupsList} - } + licenseModel: { + licenseModelEditor, + licenseAgreement: { licenseAgreementList }, + featureGroup: { featureGroupsList }, + entitlementPool: { entitlementPoolsList }, + licenseKeyGroup: { licenseKeyGroupsList } + } }) => { + let { vendorName, description, id, version } = licenseModelEditor.data; + let counts = [ + { + name: overviewItems.LICENSE_AGREEMENTS, + count: licenseAgreementList.length + }, + { name: overviewItems.FEATURE_GROUPS, count: featureGroupsList.length }, + { + name: overviewItems.ENTITLEMENT_POOLS, + count: entitlementPoolsList.length + }, + { + name: overviewItems.LICENSE_KEY_GROUPS, + count: licenseKeyGroupsList.length + } + ]; - let {vendorName, description, id, version} = licenseModelEditor.data; - let counts = [ - {name: overviewItems.LICENSE_AGREEMENTS, count: licenseAgreementList.length}, - {name: overviewItems.FEATURE_GROUPS, count: featureGroupsList.length}, - {name: overviewItems.ENTITLEMENT_POOLS, count: entitlementPoolsList.length}, - {name: overviewItems.LICENSE_KEY_GROUPS, count: licenseKeyGroupsList.length}, - ]; - - return { - vendorName, - licenseModelId: id, - description, - counts, - version - }; - + return { + vendorName, + licenseModelId: id, + description, + counts, + version + }; }; -const mapActionsToProps = (dispatch) => { - return { - onEditorOpenClick: (name, licenseModelId, version) => { - switch (name) { - case overviewItems.ENTITLEMENT_POOLS: - EntitlementPoolsActionHelper.openEntitlementPoolsEditor(dispatch); - break; - case overviewItems.FEATURE_GROUPS: - FeatureGroupsActionHelper.openFeatureGroupsEditor(dispatch, {licenseModelId, version}); - break; - case overviewItems.LICENSE_AGREEMENTS: - LicenseAgreementActionHelper.openLicenseAgreementEditor(dispatch, {licenseModelId, version}); - break; - case overviewItems.LICENSE_KEY_GROUPS: - LicenseKeyGroupsActionHelper.openLicenseKeyGroupsEditor(dispatch); - break; - default: - break; - } - }, - onNavigateClick: ({name, licenseModelId, version}) => { - let screenToNavigate; - switch (name) { - case overviewItems.ENTITLEMENT_POOLS: - screenToNavigate = enums.SCREEN.ENTITLEMENT_POOLS; - break; - case overviewItems.FEATURE_GROUPS: - screenToNavigate = enums.SCREEN.FEATURE_GROUPS; - break; - case overviewItems.LICENSE_AGREEMENTS: - screenToNavigate = enums.SCREEN.LICENSE_AGREEMENTS; - break; - case overviewItems.LICENSE_KEY_GROUPS: - screenToNavigate = enums.SCREEN.LICENSE_KEY_GROUPS; - break; - default: - break; - } - ScreensHelper.loadScreen(dispatch, { - screen: screenToNavigate, screenType: screenTypes.LICENSE_MODEL, - props: {licenseModelId, version} - }); - } - }; +const mapActionsToProps = dispatch => { + return { + onEditorOpenClick: (name, licenseModelId, version) => { + switch (name) { + case overviewItems.ENTITLEMENT_POOLS: + EntitlementPoolsActionHelper.openEntitlementPoolsEditor( + dispatch + ); + break; + case overviewItems.FEATURE_GROUPS: + FeatureGroupsActionHelper.openFeatureGroupsEditor( + dispatch, + { + licenseModelId, + version + } + ); + break; + case overviewItems.LICENSE_AGREEMENTS: + LicenseAgreementActionHelper.openLicenseAgreementEditor( + dispatch, + { + licenseModelId, + version + } + ); + break; + case overviewItems.LICENSE_KEY_GROUPS: + LicenseKeyGroupsActionHelper.openLicenseKeyGroupsEditor( + dispatch + ); + break; + default: + break; + } + }, + onNavigateClick: ({ name, licenseModelId, version }) => { + let screenToNavigate; + switch (name) { + case overviewItems.ENTITLEMENT_POOLS: + screenToNavigate = enums.SCREEN.ENTITLEMENT_POOLS; + break; + case overviewItems.FEATURE_GROUPS: + screenToNavigate = enums.SCREEN.FEATURE_GROUPS; + break; + case overviewItems.LICENSE_AGREEMENTS: + screenToNavigate = enums.SCREEN.LICENSE_AGREEMENTS; + break; + case overviewItems.LICENSE_KEY_GROUPS: + screenToNavigate = enums.SCREEN.LICENSE_KEY_GROUPS; + break; + default: + break; + } + ScreensHelper.loadScreen(dispatch, { + screen: screenToNavigate, + screenType: screenTypes.LICENSE_MODEL, + props: { licenseModelId, version } + }); + } + }; }; export class SummaryCountList extends React.Component { + render() { + let { counts } = this.props; + return ( + <div className="summary-count-list"> + {counts.map(item => this.renderItem(item))} + </div> + ); + } - render() { - let {counts} = this.props; - return( - <div className='summary-count-list'> - {counts.map(item => this.renderItem(item))} - </div> - ); - } - - renderItem(item){ - const {name, count} = item; - const {isReadOnlyMode} = this.props; - return( - <SummaryCountItem isReadOnlyMode={isReadOnlyMode} name={name} counter={count} onNavigate={() => this.onNavigate(name)} onAdd={() => this.onAdd(name)} key={name} /> - ); - } + renderItem(item) { + const { name, count } = item; + const { isReadOnlyMode } = this.props; + return ( + <SummaryCountItem + isReadOnlyMode={isReadOnlyMode} + name={name} + counter={count} + onNavigate={() => this.onNavigate(name)} + onAdd={() => this.onAdd(name)} + key={name} + /> + ); + } - onAdd(name) { - let {onEditorOpenClick, licenseModelId, isReadOnlyMode, version} = this.props; - if (!isReadOnlyMode) { - onEditorOpenClick(name, licenseModelId, version); - } - } + onAdd(name) { + let { + onEditorOpenClick, + licenseModelId, + isReadOnlyMode, + version + } = this.props; + if (!isReadOnlyMode) { + onEditorOpenClick(name, licenseModelId, version); + } + } - onNavigate(name) { - let {onNavigateClick, licenseModelId, version} = this.props; - onNavigateClick({licenseModelId, name, version}); - } + onNavigate(name) { + let { onNavigateClick, licenseModelId, version } = this.props; + onNavigateClick({ licenseModelId, name, version }); + } } export default connect(mapStateToProps, mapActionsToProps)(SummaryCountList); 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); |