diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary')
5 files changed, 363 insertions, 240 deletions
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); |