diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups')
9 files changed, 1250 insertions, 825 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js index 674c329515..ebbe84abd3 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js @@ -15,191 +15,268 @@ */ import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js'; import Configuration from 'sdc-app/config/Configuration.js'; -import {actionTypes as licenseKeyGroupsConstants} from './LicenseKeyGroupsConstants.js'; -import {actionTypes as limitEditorActions} from 'sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js'; -import {default as getValue, getStrValue} from 'nfvo-utils/getValue.js'; +import { actionTypes as licenseKeyGroupsConstants } from './LicenseKeyGroupsConstants.js'; +import { actionTypes as limitEditorActions } from 'sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js'; +import { default as getValue, getStrValue } from 'nfvo-utils/getValue.js'; import ItemsHelper from 'sdc-app/common/helpers/ItemsHelper.js'; function baseUrl(licenseModelId, version) { - const restPrefix = Configuration.get('restPrefix'); - const {id: versionId} = version; - return `${restPrefix}/v1.0/vendor-license-models/${licenseModelId}/versions/${versionId}/license-key-groups`; + const restPrefix = Configuration.get('restPrefix'); + const { id: versionId } = version; + return `${restPrefix}/v1.0/vendor-license-models/${licenseModelId}/versions/${versionId}/license-key-groups`; } function fetchLicenseKeyGroupsList(licenseModelId, version) { - return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}`); + return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}`); } function deleteLicenseKeyGroup(licenseModelId, licenseKeyGroupId, version) { - return RestAPIUtil.destroy(`${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}`); + return RestAPIUtil.destroy( + `${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}` + ); } function postLicenseKeyGroup(licenseModelId, licenseKeyGroup, version) { - return RestAPIUtil.post(baseUrl(licenseModelId, version), { - name: licenseKeyGroup.name, - description: licenseKeyGroup.description, - operationalScope: getValue(licenseKeyGroup.operationalScope), - type: licenseKeyGroup.type, - increments: licenseKeyGroup.increments, - thresholdValue: licenseKeyGroup.thresholdValue, - thresholdUnits: getValue(licenseKeyGroup.thresholdUnits), - startDate: licenseKeyGroup.startDate, - expiryDate: licenseKeyGroup.expiryDate - }); + return RestAPIUtil.post(baseUrl(licenseModelId, version), { + name: licenseKeyGroup.name, + description: licenseKeyGroup.description, + operationalScope: getValue(licenseKeyGroup.operationalScope), + type: licenseKeyGroup.type, + increments: licenseKeyGroup.increments, + thresholdValue: licenseKeyGroup.thresholdValue, + thresholdUnits: getValue(licenseKeyGroup.thresholdUnits), + startDate: licenseKeyGroup.startDate, + expiryDate: licenseKeyGroup.expiryDate + }); } function putLicenseKeyGroup(licenseModelId, licenseKeyGroup, version) { - return RestAPIUtil.put(`${baseUrl(licenseModelId, version)}/${licenseKeyGroup.id}`, { - name: licenseKeyGroup.name, - description: licenseKeyGroup.description, - operationalScope: getValue(licenseKeyGroup.operationalScope), - type: licenseKeyGroup.type, - increments: licenseKeyGroup.increments, - thresholdValue: licenseKeyGroup.thresholdValue, - thresholdUnits: getValue(licenseKeyGroup.thresholdUnits), - startDate: licenseKeyGroup.startDate, - expiryDate: licenseKeyGroup.expiryDate - }); + return RestAPIUtil.put( + `${baseUrl(licenseModelId, version)}/${licenseKeyGroup.id}`, + { + name: licenseKeyGroup.name, + description: licenseKeyGroup.description, + operationalScope: getValue(licenseKeyGroup.operationalScope), + type: licenseKeyGroup.type, + increments: licenseKeyGroup.increments, + thresholdValue: licenseKeyGroup.thresholdValue, + thresholdUnits: getValue(licenseKeyGroup.thresholdUnits), + startDate: licenseKeyGroup.startDate, + expiryDate: licenseKeyGroup.expiryDate + } + ); } function fetchLimitsList(licenseModelId, licenseKeyGroupId, version) { - return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}/limits`); + return RestAPIUtil.fetch( + `${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}/limits` + ); } function deleteLimit(licenseModelId, licenseKeyGroupId, version, limitId) { - return RestAPIUtil.destroy(`${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}/limits/${limitId}`); + return RestAPIUtil.destroy( + `${baseUrl( + licenseModelId, + version + )}/${licenseKeyGroupId}/limits/${limitId}` + ); } function postLimit(licenseModelId, licenseKeyGroupId, version, limit) { - return RestAPIUtil.post(`${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}/limits`, { - name: limit.name, - type: limit.type, - description: limit.description, - metric: getStrValue(limit.metric), - value: limit.value, - unit: getStrValue(limit.unit), - aggregationFunction: getValue(limit.aggregationFunction), - time: getValue(limit.time) - }); + return RestAPIUtil.post( + `${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}/limits`, + { + name: limit.name, + type: limit.type, + description: limit.description, + metric: getStrValue(limit.metric), + value: limit.value, + unit: getStrValue(limit.unit), + aggregationFunction: getValue(limit.aggregationFunction), + time: getValue(limit.time) + } + ); } function putLimit(licenseModelId, licenseKeyGroupId, version, limit) { - - return RestAPIUtil.put(`${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}/limits/${limit.id}`, { - name: limit.name, - type: limit.type, - description: limit.description, - metric: getStrValue(limit.metric), - value: limit.value, - unit: getStrValue(limit.unit), - aggregationFunction: getValue(limit.aggregationFunction), - time: getValue(limit.time) - }); + return RestAPIUtil.put( + `${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}/limits/${ + limit.id + }`, + { + name: limit.name, + type: limit.type, + description: limit.description, + metric: getStrValue(limit.metric), + value: limit.value, + unit: getStrValue(limit.unit), + aggregationFunction: getValue(limit.aggregationFunction), + time: getValue(limit.time) + } + ); } export default { - fetchLicenseKeyGroupsList(dispatch, {licenseModelId, version}) { - return fetchLicenseKeyGroupsList(licenseModelId, version).then(response => dispatch({ - type: licenseKeyGroupsConstants.LICENSE_KEY_GROUPS_LIST_LOADED, - response - })); - }, - - openLicenseKeyGroupsEditor(dispatch, {licenseKeyGroup, licenseModelId, version} = {}) { - if (licenseModelId && version) { - this.fetchLimits(dispatch, {licenseModelId, version, licenseKeyGroup}); - } - dispatch({ - type: licenseKeyGroupsConstants.licenseKeyGroupsEditor.OPEN, - licenseKeyGroup - }); - }, - - closeLicenseKeyGroupEditor(dispatch){ - dispatch({ - type: licenseKeyGroupsConstants.licenseKeyGroupsEditor.CLOSE - }); - }, - - saveLicenseKeyGroup(dispatch, {licenseModelId, previousLicenseKeyGroup, licenseKeyGroup, version}) { - if (previousLicenseKeyGroup) { - return putLicenseKeyGroup(licenseModelId, licenseKeyGroup, version).then(() => { - dispatch({ - type: licenseKeyGroupsConstants.EDIT_LICENSE_KEY_GROUP, - licenseKeyGroup - }); - return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id}); - }); - } - else { - return postLicenseKeyGroup(licenseModelId, licenseKeyGroup, version).then(response => { - dispatch({ - type: licenseKeyGroupsConstants.ADD_LICENSE_KEY_GROUP, - licenseKeyGroup: { - ...licenseKeyGroup, - referencingFeatureGroups: [], - id: response.value - } - }); - return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id}); - }); - } - - - }, - - deleteLicenseKeyGroup(dispatch, {licenseModelId, licenseKeyGroupId, version}){ - return deleteLicenseKeyGroup(licenseModelId, licenseKeyGroupId, version).then(()=> { - dispatch({ - type: licenseKeyGroupsConstants.DELETE_LICENSE_KEY_GROUP, - licenseKeyGroupId - }); - return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id}); - }); - }, - - hideDeleteConfirm(dispatch) { - dispatch({ - type: licenseKeyGroupsConstants.LICENSE_KEY_GROUPS_DELETE_CONFIRM, - licenseKeyGroupToDelete: false - }); - }, - - openDeleteLicenseAgreementConfirm(dispatch, {licenseKeyGroup}) { - dispatch({ - type: licenseKeyGroupsConstants.LICENSE_KEY_GROUPS_DELETE_CONFIRM, - licenseKeyGroupToDelete: licenseKeyGroup - }); - }, - - - fetchLimits(dispatch, {licenseModelId, version, licenseKeyGroup}) { - return fetchLimitsList(licenseModelId, licenseKeyGroup.id, version).then(response => { - dispatch({ - type: licenseKeyGroupsConstants.licenseKeyGroupsEditor.LIMITS_LIST_LOADED, - response - }); - }); - }, - - submitLimit(dispatch, {licenseModelId, version, licenseKeyGroup, limit}) { - const promise = limit.id ? putLimit(licenseModelId,licenseKeyGroup.id, version, limit) : - postLimit(licenseModelId,licenseKeyGroup.id, version, limit); - return promise.then(() => { - dispatch({ - type: limitEditorActions.CLOSE - }); - this.fetchLimits(dispatch, {licenseModelId, version, licenseKeyGroup}); - return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id}); - }); - }, - - deleteLimit(dispatch, {licenseModelId, version, licenseKeyGroup, limit}) { - return deleteLimit(licenseModelId,licenseKeyGroup.id, version, limit.id).then(() => { - this.fetchLimits(dispatch, {licenseModelId, version, licenseKeyGroup}); - return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id}); - }); - } + fetchLicenseKeyGroupsList(dispatch, { licenseModelId, version }) { + return fetchLicenseKeyGroupsList(licenseModelId, version).then( + response => + dispatch({ + type: + licenseKeyGroupsConstants.LICENSE_KEY_GROUPS_LIST_LOADED, + response + }) + ); + }, + + openLicenseKeyGroupsEditor( + dispatch, + { licenseKeyGroup, licenseModelId, version } = {} + ) { + if (licenseModelId && version) { + this.fetchLimits(dispatch, { + licenseModelId, + version, + licenseKeyGroup + }); + } + dispatch({ + type: licenseKeyGroupsConstants.licenseKeyGroupsEditor.OPEN, + licenseKeyGroup + }); + }, + + closeLicenseKeyGroupEditor(dispatch) { + dispatch({ + type: licenseKeyGroupsConstants.licenseKeyGroupsEditor.CLOSE + }); + }, + + saveLicenseKeyGroup( + dispatch, + { licenseModelId, previousLicenseKeyGroup, licenseKeyGroup, version } + ) { + if (previousLicenseKeyGroup) { + return putLicenseKeyGroup( + licenseModelId, + licenseKeyGroup, + version + ).then(() => { + dispatch({ + type: licenseKeyGroupsConstants.EDIT_LICENSE_KEY_GROUP, + licenseKeyGroup + }); + return ItemsHelper.checkItemStatus(dispatch, { + itemId: licenseModelId, + versionId: version.id + }); + }); + } else { + return postLicenseKeyGroup( + licenseModelId, + licenseKeyGroup, + version + ).then(response => { + dispatch({ + type: licenseKeyGroupsConstants.ADD_LICENSE_KEY_GROUP, + licenseKeyGroup: { + ...licenseKeyGroup, + referencingFeatureGroups: [], + id: response.value + } + }); + return ItemsHelper.checkItemStatus(dispatch, { + itemId: licenseModelId, + versionId: version.id + }); + }); + } + }, + + deleteLicenseKeyGroup( + dispatch, + { licenseModelId, licenseKeyGroupId, version } + ) { + return deleteLicenseKeyGroup( + licenseModelId, + licenseKeyGroupId, + version + ).then(() => { + dispatch({ + type: licenseKeyGroupsConstants.DELETE_LICENSE_KEY_GROUP, + licenseKeyGroupId + }); + return ItemsHelper.checkItemStatus(dispatch, { + itemId: licenseModelId, + versionId: version.id + }); + }); + }, + + hideDeleteConfirm(dispatch) { + dispatch({ + type: licenseKeyGroupsConstants.LICENSE_KEY_GROUPS_DELETE_CONFIRM, + licenseKeyGroupToDelete: false + }); + }, + + openDeleteLicenseAgreementConfirm(dispatch, { licenseKeyGroup }) { + dispatch({ + type: licenseKeyGroupsConstants.LICENSE_KEY_GROUPS_DELETE_CONFIRM, + licenseKeyGroupToDelete: licenseKeyGroup + }); + }, + + fetchLimits(dispatch, { licenseModelId, version, licenseKeyGroup }) { + return fetchLimitsList( + licenseModelId, + licenseKeyGroup.id, + version + ).then(response => { + dispatch({ + type: + licenseKeyGroupsConstants.licenseKeyGroupsEditor + .LIMITS_LIST_LOADED, + response + }); + }); + }, + submitLimit(dispatch, { licenseModelId, version, licenseKeyGroup, limit }) { + const promise = limit.id + ? putLimit(licenseModelId, licenseKeyGroup.id, version, limit) + : postLimit(licenseModelId, licenseKeyGroup.id, version, limit); + return promise.then(() => { + dispatch({ + type: limitEditorActions.CLOSE + }); + this.fetchLimits(dispatch, { + licenseModelId, + version, + licenseKeyGroup + }); + return ItemsHelper.checkItemStatus(dispatch, { + itemId: licenseModelId, + versionId: version.id + }); + }); + }, + deleteLimit(dispatch, { licenseModelId, version, licenseKeyGroup, limit }) { + return deleteLimit( + licenseModelId, + licenseKeyGroup.id, + version, + limit.id + ).then(() => { + this.fetchLimits(dispatch, { + licenseModelId, + version, + licenseKeyGroup + }); + return ItemsHelper.checkItemStatus(dispatch, { + itemId: licenseModelId, + versionId: version.id + }); + }); + } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsConstants.js index c376cb3fbc..aad0a0b1fb 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsConstants.js @@ -15,73 +15,88 @@ */ import keyMirror from 'nfvo-utils/KeyMirror.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import InputOptions, {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx'; +import InputOptions, { + other as optionInputOther +} from 'nfvo-components/input/validation/InputOptions.jsx'; export const actionTypes = keyMirror({ - - LICENSE_KEY_GROUPS_LIST_LOADED: null, - DELETE_LICENSE_KEY_GROUP: null, - EDIT_LICENSE_KEY_GROUP: null, - ADD_LICENSE_KEY_GROUP: null, - LICENSE_KEY_GROUPS_DELETE_CONFIRM: null, - licenseKeyGroupsEditor: { - OPEN: null, - CLOSE: null, - DATA_CHANGED: null, - LIMITS_LIST_LOADED: null - } + LICENSE_KEY_GROUPS_LIST_LOADED: null, + DELETE_LICENSE_KEY_GROUP: null, + EDIT_LICENSE_KEY_GROUP: null, + ADD_LICENSE_KEY_GROUP: null, + LICENSE_KEY_GROUPS_DELETE_CONFIRM: null, + licenseKeyGroupsEditor: { + OPEN: null, + CLOSE: null, + DATA_CHANGED: null, + LIMITS_LIST_LOADED: null + } }); export const defaultState = { - licenseKeyGroupsEditor: { - type: '', - operationalScope: {choices: [], other: ''} - } + licenseKeyGroupsEditor: { + type: '', + operationalScope: { choices: [], other: '' } + } }; export const LKG_FORM_NAME = 'LKGFORM'; export const optionsInputValues = { - OPERATIONAL_SCOPE: [ - {enum: '', title: i18n('please select…')}, - {enum: 'Network_Wide', title: 'Network Wide'}, - {enum: 'Availability_Zone', title: 'Availability Zone'}, - {enum: 'Data_Center', title: 'Data Center'}, - {enum: 'Tenant', title: 'Tenant'}, - {enum: 'VM', title: 'VM'}, - {enum: 'CPU', title: 'CPU'}, - {enum: 'Core', title: 'Core'} - ], - TYPE: [ - {enum: '', title: i18n('please select…')}, - {enum: 'Universal', title: 'Universal'}, - {enum: 'Unique', title: 'Unique'}, - {enum: 'One_Time', title: 'One Time'} - ] + OPERATIONAL_SCOPE: [ + { enum: '', title: i18n('please select…') }, + { enum: 'Network_Wide', title: 'Network Wide' }, + { enum: 'Availability_Zone', title: 'Availability Zone' }, + { enum: 'Data_Center', title: 'Data Center' }, + { enum: 'Tenant', title: 'Tenant' }, + { enum: 'VM', title: 'VM' }, + { enum: 'CPU', title: 'CPU' }, + { enum: 'Core', title: 'Core' } + ], + TYPE: [ + { enum: '', title: i18n('please select…') }, + { enum: 'Universal', title: 'Universal' }, + { enum: 'Unique', title: 'Unique' }, + { enum: 'One_Time', title: 'One Time' } + ] }; -export const extractValue = (item) => { - if (item === undefined) {return '';} //TODO fix it later +export const extractValue = item => { + if (item === undefined) { + return ''; + } //TODO fix it later - return item ? item === optionInputOther.OTHER ? item : InputOptions.getTitleByName(optionsInputValues, item) : ''; + return item + ? item === optionInputOther.OTHER + ? item + : InputOptions.getTitleByName(optionsInputValues, item) + : ''; }; -export const getOperationalScopes = (operationalScope) => { - if(operationalScope.choices.toString() === i18n(optionInputOther.OTHER) && operationalScope.other !== '') { - return operationalScope.other; - } - else { - let allOpScopes = ''; - for (let opScope of operationalScope.choices) { - allOpScopes += allOpScopes === '' ? InputOptions.getTitleByName(optionsInputValues, opScope) : `, ${InputOptions.getTitleByName(optionsInputValues, opScope)}`; - } - return allOpScopes; - } +export const getOperationalScopes = operationalScope => { + if ( + operationalScope.choices.toString() === i18n(optionInputOther.OTHER) && + operationalScope.other !== '' + ) { + return operationalScope.other; + } else { + let allOpScopes = ''; + for (let opScope of operationalScope.choices) { + allOpScopes += + allOpScopes === '' + ? InputOptions.getTitleByName(optionsInputValues, opScope) + : `, ${InputOptions.getTitleByName( + optionsInputValues, + opScope + )}`; + } + return allOpScopes; + } }; export const tabIds = { - GENERAL: 'GENERAL', - SP_LIMITS: 'SP_LIMITS', - VENDOR_LIMITS: 'VENDOR_LIMITS', - ADD_LIMIT_BUTTON: 'ADD_LIMIT_BUTTON' + GENERAL: 'GENERAL', + SP_LIMITS: 'SP_LIMITS', + VENDOR_LIMITS: 'VENDOR_LIMITS', + ADD_LIMIT_BUTTON: 'ADD_LIMIT_BUTTON' }; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditor.js index 028fa9d3e4..fa62bba669 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditor.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditor.js @@ -13,53 +13,79 @@ * 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 LicenseKeyGroupsActionHelper from './LicenseKeyGroupsActionHelper.js'; import LicenseKeyGroupsEditorView from './LicenseKeyGroupsEditorView.jsx'; import LimitEditorActionHelper from '../limits/LimitEditorActionHelper.js'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; -const mapStateToProps = ({licenseModel: {licenseKeyGroup}}) => { +const mapStateToProps = ({ licenseModel: { licenseKeyGroup } }) => { + let { + data, + genericFieldInfo, + formReady, + limitsList + } = licenseKeyGroup.licenseKeyGroupsEditor; + let previousData, + LKGNames = {}; + const licenseKeyGroupId = data ? data.id : null; + if (licenseKeyGroupId) { + previousData = licenseKeyGroup.licenseKeyGroupsList.find( + licenseKeyGroup => licenseKeyGroup.id === licenseKeyGroupId + ); + } - let {data, genericFieldInfo, formReady, limitsList} = licenseKeyGroup.licenseKeyGroupsEditor; + let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); - let previousData, LKGNames = {}; - const licenseKeyGroupId = data ? data.id : null; - if(licenseKeyGroupId) { - previousData = licenseKeyGroup.licenseKeyGroupsList.find(licenseKeyGroup => licenseKeyGroup.id === licenseKeyGroupId); - } + const list = licenseKeyGroup.licenseKeyGroupsList; + for (let i = 0; i < list.length; i++) { + LKGNames[list[i].name.toLowerCase()] = list[i].id; + } - let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); - - const list = licenseKeyGroup.licenseKeyGroupsList; - for (let i = 0; i < list.length; i++) { - LKGNames[list[i].name.toLowerCase()] = list[i].id; - } - - return { - data, - previousData, - genericFieldInfo, - isFormValid, - formReady, - LKGNames, - limitsList - }; + return { + data, + previousData, + genericFieldInfo, + isFormValid, + formReady, + LKGNames, + limitsList + }; }; -const mapActionsToProps = (dispatch, {licenseModelId, version}) => { - return { - onDataChanged: (deltaData, formName, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName, customValidations}), - onCancel: () => LicenseKeyGroupsActionHelper.closeLicenseKeyGroupEditor(dispatch), - onSubmit: ({previousLicenseKeyGroup, licenseKeyGroup, keepOpen}) => { - if (!keepOpen) {LicenseKeyGroupsActionHelper.closeLicenseKeyGroupEditor(dispatch);} - LicenseKeyGroupsActionHelper.saveLicenseKeyGroup(dispatch, {licenseModelId, previousLicenseKeyGroup, licenseKeyGroup, version}); - }, - onValidateForm: (formName) => ValidationHelper.validateForm(dispatch, formName), - onCloseLimitEditor: () => LimitEditorActionHelper.closeLimitsEditor(dispatch), - onOpenLimitEditor: (limit) => LimitEditorActionHelper.openLimitsEditor(dispatch, {limit}) - }; +const mapActionsToProps = (dispatch, { licenseModelId, version }) => { + return { + onDataChanged: (deltaData, formName, customValidations) => + ValidationHelper.dataChanged(dispatch, { + deltaData, + formName, + customValidations + }), + onCancel: () => + LicenseKeyGroupsActionHelper.closeLicenseKeyGroupEditor(dispatch), + onSubmit: ({ previousLicenseKeyGroup, licenseKeyGroup, keepOpen }) => { + if (!keepOpen) { + LicenseKeyGroupsActionHelper.closeLicenseKeyGroupEditor( + dispatch + ); + } + LicenseKeyGroupsActionHelper.saveLicenseKeyGroup(dispatch, { + licenseModelId, + previousLicenseKeyGroup, + licenseKeyGroup, + version + }); + }, + onValidateForm: formName => + ValidationHelper.validateForm(dispatch, formName), + onCloseLimitEditor: () => + LimitEditorActionHelper.closeLimitsEditor(dispatch), + onOpenLimitEditor: limit => + LimitEditorActionHelper.openLimitsEditor(dispatch, { limit }) + }; }; -export default connect(mapStateToProps, mapActionsToProps)(LicenseKeyGroupsEditorView); +export default connect(mapStateToProps, mapActionsToProps)( + LicenseKeyGroupsEditorView +); diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorReducer.js index b1a22f3d9a..e948e9cef8 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorReducer.js @@ -13,82 +13,97 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes, defaultState, LKG_FORM_NAME} from './LicenseKeyGroupsConstants.js'; +import { + actionTypes, + defaultState, + LKG_FORM_NAME +} from './LicenseKeyGroupsConstants.js'; import moment from 'moment'; -import {DATE_FORMAT} from 'sdc-app/onboarding/OnboardingConstants.js'; +import { DATE_FORMAT } from 'sdc-app/onboarding/OnboardingConstants.js'; export default (state = {}, action) => { - switch (action.type) { - case actionTypes.licenseKeyGroupsEditor.OPEN: - let licenseKeyGroupData = {...action.licenseKeyGroup}; - let {startDate, expiryDate} = licenseKeyGroupData; - if (startDate) { - licenseKeyGroupData.startDate = moment(startDate, DATE_FORMAT).format(DATE_FORMAT); - } - if (expiryDate) { - licenseKeyGroupData.expiryDate = moment(expiryDate, DATE_FORMAT).format(DATE_FORMAT); - } - return { - ...state, - data: action.licenseKeyGroup ? licenseKeyGroupData : defaultState.licenseKeyGroupsEditor, - formReady: null, - formName: LKG_FORM_NAME, - genericFieldInfo: { - 'description' : { - isValid: true, - errorText: '', - validations: [{type: 'maxLength', data: 1000}] - }, - 'name' : { - isValid: true, - errorText: '', - validations: [{type: 'required', data: true}, {type: 'maxLength', data: 120}] - }, - 'type' : { - isValid: true, - errorText: '', - validations: [{type: 'required', data: true}] - }, - 'operationalScope' : { - isValid: true, - errorText: '', - validations: [] - }, - 'thresholdUnits' : { - isValid: true, - errorText: '', - validations: [] - }, - 'thresholdValue' : { - isValid: true, - errorText: '', - validations: [] - }, - 'increments' : { - isValid: true, - errorText: '', - validations: [{type: 'maxLength', data: 120}] - }, - 'startDate': { - isValid: true, - errorText: '', - validations: [] - }, - 'expiryDate': { - isValid: true, - errorText: '', - validations: [] - } - } - }; - case actionTypes.licenseKeyGroupsEditor.LIMITS_LIST_LOADED: - return { - ...state, - limitsList: action.response.results - }; - case actionTypes.licenseKeyGroupsEditor.CLOSE: - return {}; - default: - return state; - } + switch (action.type) { + case actionTypes.licenseKeyGroupsEditor.OPEN: + let licenseKeyGroupData = { ...action.licenseKeyGroup }; + let { startDate, expiryDate } = licenseKeyGroupData; + if (startDate) { + licenseKeyGroupData.startDate = moment( + startDate, + DATE_FORMAT + ).format(DATE_FORMAT); + } + if (expiryDate) { + licenseKeyGroupData.expiryDate = moment( + expiryDate, + DATE_FORMAT + ).format(DATE_FORMAT); + } + return { + ...state, + data: action.licenseKeyGroup + ? licenseKeyGroupData + : defaultState.licenseKeyGroupsEditor, + formReady: null, + formName: LKG_FORM_NAME, + genericFieldInfo: { + description: { + isValid: true, + errorText: '', + validations: [{ type: 'maxLength', data: 1000 }] + }, + name: { + isValid: true, + errorText: '', + validations: [ + { type: 'required', data: true }, + { type: 'maxLength', data: 120 } + ] + }, + type: { + isValid: true, + errorText: '', + validations: [{ type: 'required', data: true }] + }, + operationalScope: { + isValid: true, + errorText: '', + validations: [] + }, + thresholdUnits: { + isValid: true, + errorText: '', + validations: [] + }, + thresholdValue: { + isValid: true, + errorText: '', + validations: [] + }, + increments: { + isValid: true, + errorText: '', + validations: [{ type: 'maxLength', data: 120 }] + }, + startDate: { + isValid: true, + errorText: '', + validations: [] + }, + expiryDate: { + isValid: true, + errorText: '', + validations: [] + } + } + }; + case actionTypes.licenseKeyGroupsEditor.LIMITS_LIST_LOADED: + return { + ...state, + limitsList: action.response.results + }; + case actionTypes.licenseKeyGroupsEditor.CLOSE: + return {}; + default: + return state; + } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorView.jsx index 7cbab61a8a..a820f28dfd 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorView.jsx @@ -26,328 +26,498 @@ import Form from 'nfvo-components/input/validation/Form.jsx'; import Input from 'nfvo-components/input/validation/Input.jsx'; import GridSection from 'nfvo-components/grid/GridSection.jsx'; import GridItem from 'nfvo-components/grid/GridItem.jsx'; -import {optionsInputValues as licenseKeyGroupOptionsInputValues, LKG_FORM_NAME, tabIds} from './LicenseKeyGroupsConstants.js'; -import {optionsInputValues as LicenseModelOptionsInputValues} from '../LicenseModelConstants.js'; -import {validateStartDate, thresholdValueValidation} from '../LicenseModelValidations.js'; -import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx'; +import { + optionsInputValues as licenseKeyGroupOptionsInputValues, + LKG_FORM_NAME, + tabIds +} from './LicenseKeyGroupsConstants.js'; +import { optionsInputValues as LicenseModelOptionsInputValues } from '../LicenseModelConstants.js'; +import { + validateStartDate, + thresholdValueValidation +} from '../LicenseModelValidations.js'; +import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx'; import InputOptions from 'nfvo-components/input/validation/InputOptions.jsx'; -import {DATE_FORMAT} from 'sdc-app/onboarding/OnboardingConstants.js'; +import { DATE_FORMAT } from 'sdc-app/onboarding/OnboardingConstants.js'; import LicenseKeyGroupsLimits from './LicenseKeyGroupsLimits.js'; -import {limitType, NEW_LIMIT_TEMP_ID} from '../limits/LimitEditorConstants.js'; +import { + limitType, + NEW_LIMIT_TEMP_ID +} from '../limits/LimitEditorConstants.js'; - const LicenseKeyGroupPropType = PropTypes.shape({ - id: PropTypes.string, - name: PropTypes.string, - description: PropTypes.string, - increments: PropTypes.string, - operationalScope: PropTypes.shape({ - choices: PropTypes.array, - other: PropTypes.string - }), - type: PropTypes.string, - thresholdUnits: PropTypes.string, - thresholdValue: PropTypes.number, - startDate: PropTypes.string, - expiryDate: PropTypes.string +const LicenseKeyGroupPropType = PropTypes.shape({ + id: PropTypes.string, + name: PropTypes.string, + description: PropTypes.string, + increments: PropTypes.string, + operationalScope: PropTypes.shape({ + choices: PropTypes.array, + other: PropTypes.string + }), + type: PropTypes.string, + thresholdUnits: PropTypes.string, + thresholdValue: PropTypes.number, + startDate: PropTypes.string, + expiryDate: PropTypes.string }); -const LicenseKeyGroupFormContent = ({data, onDataChanged, genericFieldInfo, validateName, validateStartDate, thresholdValueValidation}) => { - let {name, description, increments, operationalScope, type, thresholdUnits, thresholdValue, startDate, expiryDate} = data; - return ( - <GridSection hasLostColSet> - <GridItem colSpan={2}> - <Input - onChange={name => onDataChanged({name}, LKG_FORM_NAME, {name: validateName})} - label={i18n('Name')} - data-test-id='create-lkg-name' - value={name} - isValid={genericFieldInfo.name.isValid} - errorText={genericFieldInfo.name.errorText} - isRequired={true} - type='text'/> - </GridItem> - <GridItem colSpan={2} lastColInRow> - <InputOptions - onInputChange={()=>{}} - isMultiSelect={true} - onEnumChange={operationalScope => onDataChanged({operationalScope:{choices: operationalScope, other: ''}}, - LKG_FORM_NAME)} - onOtherChange={operationalScope => onDataChanged({operationalScope:{choices: [optionInputOther.OTHER], - other: operationalScope}}, LKG_FORM_NAME)} - label={i18n('Operational Scope')} - data-test-id='create-lkg-operational-scope' - type='select' - multiSelectedEnum={operationalScope && operationalScope.choices} - otherValue={operationalScope && operationalScope.other} - values={licenseKeyGroupOptionsInputValues.OPERATIONAL_SCOPE} - isValid={genericFieldInfo.operationalScope.isValid} - errorText={genericFieldInfo.operationalScope.errorText} /> - </GridItem> - <GridItem colSpan={2}> - <Input - onChange={description => onDataChanged({description}, LKG_FORM_NAME)} - label={i18n('Description')} - data-test-id='create-lkg-description' - value={description} - isValid={genericFieldInfo.description.isValid} - errorText={genericFieldInfo.description.errorText} - type='textarea' - overlayPos='bottom' /> - </GridItem> - <GridItem colSpan={2} lastColInRow> - <Input - isRequired={true} - onChange={e => { const selectedIndex = e.target.selectedIndex; - const val = e.target.options[selectedIndex].value; - onDataChanged({type: val}, LKG_FORM_NAME);}} - value={type} - label={i18n('Type')} - data-test-id='create-lkg-type' - isValid={genericFieldInfo.type.isValid} - errorText={genericFieldInfo.type.errorText} - groupClassName='bootstrap-input-options' - className='input-options-select' - overlayPos='bottom' - type='select' > - { - licenseKeyGroupOptionsInputValues.TYPE.map(type => - (<option key={type.enum} value={type.enum}>{type.title}</option>)) - } - </Input> - </GridItem> - <GridItem> - <Input - onChange={e => { - // setting the unit to the correct value - const selectedIndex = e.target.selectedIndex; - const val = e.target.options[selectedIndex].value; - onDataChanged({thresholdUnits: val}, LKG_FORM_NAME); - // TODO make sure that the value is valid too - onDataChanged({thresholdValue: thresholdValue}, LKG_FORM_NAME,{thresholdValue : thresholdValueValidation});} - - } - value={thresholdUnits} - label={i18n('Threshold Units')} - data-test-id='create-ep-threshold-units' - isValid={genericFieldInfo.thresholdUnits.isValid} - errorText={genericFieldInfo.thresholdUnits.errorText} - groupClassName='bootstrap-input-options' - className='input-options-select' - type='select' > - {LicenseModelOptionsInputValues.THRESHOLD_UNITS.map(mtype => - <option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)} - </Input> - </GridItem> - <GridItem> - <Input - className='entitlement-pools-form-row-threshold-value' - onChange={thresholdValue => onDataChanged({thresholdValue}, LKG_FORM_NAME, - {thresholdValue : thresholdValueValidation})} - label={i18n('Threshold Value')} - isValid={genericFieldInfo.thresholdValue.isValid} - errorText={genericFieldInfo.thresholdValue.errorText} - data-test-id='create-ep-threshold-value' - value={thresholdValue} - type='text'/> - </GridItem> - <GridItem> - <Input - type='date' - label={i18n('Start Date')} - value={startDate} - dateFormat={DATE_FORMAT} - startDate={startDate} - endDate={expiryDate} - onChange={startDate => onDataChanged( - {startDate: startDate ? startDate.format(DATE_FORMAT) : ''}, - LKG_FORM_NAME, - {startDate: validateStartDate} - )} - isValid={genericFieldInfo.startDate.isValid} - errorText={genericFieldInfo.startDate.errorText} - selectsStart/> - </GridItem> - <GridItem lastColInRow> - <Input - type='date' - label={i18n('Expiry Date')} - value={expiryDate} - dateFormat={DATE_FORMAT} - startDate={startDate} - endDate={expiryDate} - onChange={expiryDate => { - onDataChanged({expiryDate: expiryDate ? expiryDate.format(DATE_FORMAT) : ''}, LKG_FORM_NAME); - onDataChanged({startDate}, LKG_FORM_NAME, {startDate: validateStartDate}); - }} - isValid={genericFieldInfo.expiryDate.isValid} - errorText={genericFieldInfo.expiryDate.errorText} - selectsEnd/> - </GridItem> - <GridItem colSpan={2}> - <Input - onChange={increments => onDataChanged({increments}, LKG_FORM_NAME)} - label={i18n('Increments')} - value={increments} - data-test-id='create-ep-increments' - type='text'/> - </GridItem> - </GridSection> - ); +const LicenseKeyGroupFormContent = ({ + data, + onDataChanged, + genericFieldInfo, + validateName, + validateStartDate, + thresholdValueValidation +}) => { + let { + name, + description, + increments, + operationalScope, + type, + thresholdUnits, + thresholdValue, + startDate, + expiryDate + } = data; + return ( + <GridSection hasLostColSet> + <GridItem colSpan={2}> + <Input + onChange={name => + onDataChanged({ name }, LKG_FORM_NAME, { + name: validateName + }) + } + label={i18n('Name')} + data-test-id="create-lkg-name" + value={name} + isValid={genericFieldInfo.name.isValid} + errorText={genericFieldInfo.name.errorText} + isRequired={true} + type="text" + /> + </GridItem> + <GridItem colSpan={2} lastColInRow> + <InputOptions + onInputChange={() => {}} + isMultiSelect={true} + onEnumChange={operationalScope => + onDataChanged( + { + operationalScope: { + choices: operationalScope, + other: '' + } + }, + LKG_FORM_NAME + ) + } + onOtherChange={operationalScope => + onDataChanged( + { + operationalScope: { + choices: [optionInputOther.OTHER], + other: operationalScope + } + }, + LKG_FORM_NAME + ) + } + label={i18n('Operational Scope')} + data-test-id="create-lkg-operational-scope" + type="select" + multiSelectedEnum={ + operationalScope && operationalScope.choices + } + otherValue={operationalScope && operationalScope.other} + values={licenseKeyGroupOptionsInputValues.OPERATIONAL_SCOPE} + isValid={genericFieldInfo.operationalScope.isValid} + errorText={genericFieldInfo.operationalScope.errorText} + /> + </GridItem> + <GridItem colSpan={2}> + <Input + onChange={description => + onDataChanged({ description }, LKG_FORM_NAME) + } + label={i18n('Description')} + data-test-id="create-lkg-description" + value={description} + isValid={genericFieldInfo.description.isValid} + errorText={genericFieldInfo.description.errorText} + type="textarea" + overlayPos="bottom" + /> + </GridItem> + <GridItem colSpan={2} lastColInRow> + <Input + isRequired={true} + onChange={e => { + const selectedIndex = e.target.selectedIndex; + const val = e.target.options[selectedIndex].value; + onDataChanged({ type: val }, LKG_FORM_NAME); + }} + value={type} + label={i18n('Type')} + data-test-id="create-lkg-type" + isValid={genericFieldInfo.type.isValid} + errorText={genericFieldInfo.type.errorText} + groupClassName="bootstrap-input-options" + className="input-options-select" + overlayPos="bottom" + type="select"> + {licenseKeyGroupOptionsInputValues.TYPE.map(type => ( + <option key={type.enum} value={type.enum}> + {type.title} + </option> + ))} + </Input> + </GridItem> + <GridItem> + <Input + onChange={e => { + // setting the unit to the correct value + const selectedIndex = e.target.selectedIndex; + const val = e.target.options[selectedIndex].value; + onDataChanged({ thresholdUnits: val }, LKG_FORM_NAME); + // TODO make sure that the value is valid too + onDataChanged( + { thresholdValue: thresholdValue }, + LKG_FORM_NAME, + { + thresholdValue: thresholdValueValidation + } + ); + }} + value={thresholdUnits} + label={i18n('Threshold Units')} + data-test-id="create-ep-threshold-units" + isValid={genericFieldInfo.thresholdUnits.isValid} + errorText={genericFieldInfo.thresholdUnits.errorText} + groupClassName="bootstrap-input-options" + className="input-options-select" + type="select"> + {LicenseModelOptionsInputValues.THRESHOLD_UNITS.map( + mtype => ( + <option key={mtype.enum} value={mtype.enum}>{`${ + mtype.title + }`}</option> + ) + )} + </Input> + </GridItem> + <GridItem> + <Input + className="entitlement-pools-form-row-threshold-value" + onChange={thresholdValue => + onDataChanged({ thresholdValue }, LKG_FORM_NAME, { + thresholdValue: thresholdValueValidation + }) + } + label={i18n('Threshold Value')} + isValid={genericFieldInfo.thresholdValue.isValid} + errorText={genericFieldInfo.thresholdValue.errorText} + data-test-id="create-ep-threshold-value" + value={thresholdValue} + type="text" + /> + </GridItem> + <GridItem> + <Input + type="date" + label={i18n('Start Date')} + value={startDate} + dateFormat={DATE_FORMAT} + startDate={startDate} + endDate={expiryDate} + onChange={startDate => + onDataChanged( + { + startDate: startDate + ? startDate.format(DATE_FORMAT) + : '' + }, + LKG_FORM_NAME, + { startDate: validateStartDate } + ) + } + isValid={genericFieldInfo.startDate.isValid} + errorText={genericFieldInfo.startDate.errorText} + selectsStart + /> + </GridItem> + <GridItem lastColInRow> + <Input + type="date" + label={i18n('Expiry Date')} + value={expiryDate} + dateFormat={DATE_FORMAT} + startDate={startDate} + endDate={expiryDate} + onChange={expiryDate => { + onDataChanged( + { + expiryDate: expiryDate + ? expiryDate.format(DATE_FORMAT) + : '' + }, + LKG_FORM_NAME + ); + onDataChanged({ startDate }, LKG_FORM_NAME, { + startDate: validateStartDate + }); + }} + isValid={genericFieldInfo.expiryDate.isValid} + errorText={genericFieldInfo.expiryDate.errorText} + selectsEnd + /> + </GridItem> + <GridItem colSpan={2}> + <Input + onChange={increments => + onDataChanged({ increments }, LKG_FORM_NAME) + } + label={i18n('Increments')} + value={increments} + data-test-id="create-ep-increments" + type="text" + /> + </GridItem> + </GridSection> + ); }; class LicenseKeyGroupsEditorView extends React.Component { - static propTypes = { - data: LicenseKeyGroupPropType, - previousData: LicenseKeyGroupPropType, - LKGNames: PropTypes.object, - isReadOnlyMode: PropTypes.bool, - onDataChanged: PropTypes.func.isRequired, - onSubmit: PropTypes.func.isRequired, - onCancel: PropTypes.func.isRequired - }; - - static defaultProps = { - data: {} - }; - - componentDidUpdate(prevProps) { - if (this.props.formReady && this.props.formReady !== prevProps.formReady) { // if form validation succeeded -> continue with submit - this.submit(); - } - } + static propTypes = { + data: LicenseKeyGroupPropType, + previousData: LicenseKeyGroupPropType, + LKGNames: PropTypes.object, + isReadOnlyMode: PropTypes.bool, + onDataChanged: PropTypes.func.isRequired, + onSubmit: PropTypes.func.isRequired, + onCancel: PropTypes.func.isRequired + }; - state = { - localFeatureGroupsListFilter: '', - selectedTab: tabIds.GENERAL, - selectedLimit: '' - }; + static defaultProps = { + data: {} + }; - render() { - let {data = {}, onDataChanged, isReadOnlyMode, onCloseLimitEditor, genericFieldInfo, limitsList = []} = this.props; - let {selectedTab} = this.state; - const isTabsDisabled = !data.id || !this.props.isFormValid; - return ( - <div className='license-keygroup-editor'> - <Tabs - type='menu' - activeTab={selectedTab} - onTabClick={(tabIndex)=>{ - if (tabIndex === tabIds.ADD_LIMIT_BUTTON) { - this.onAddLimit(); - } else { - this.setState({selectedTab: tabIndex}); - onCloseLimitEditor(); - this.setState({selectedLimit: ''}); - } - }} - invalidTabs={[]}> - <Tab tabId={tabIds.GENERAL} data-test-id='general-tab' title={i18n('General')}> - { genericFieldInfo && - <Form - ref='validationForm' - hasButtons={false} - isValid={this.props.isFormValid} - formReady={this.props.formReady} - onValidateForm={() => this.props.onValidateForm(LKG_FORM_NAME) } - labledButtons={true} - isReadOnlyMode={isReadOnlyMode} - className='license-model-form license-key-groups-form'> - <LicenseKeyGroupFormContent - data={data} - onDataChanged={onDataChanged} - genericFieldInfo={genericFieldInfo} - validateName={(value)=> this.validateName(value)} - validateStartDate={(value, state)=> validateStartDate(value, state)} - thresholdValueValidation={(value, state) => thresholdValueValidation(value, state)}/> - </Form>} + componentDidUpdate(prevProps) { + if ( + this.props.formReady && + this.props.formReady !== prevProps.formReady + ) { + // if form validation succeeded -> continue with submit + this.submit(); + } + } - </Tab> - <Tab tabId={tabIds.SP_LIMITS} disabled={isTabsDisabled} data-test-id='general-tab' title={i18n('SP Limits')}> - {selectedTab === tabIds.SP_LIMITS && - <LicenseKeyGroupsLimits - limitType={limitType.SERVICE_PROVIDER} - limitsList={limitsList.filter(item => item.type === limitType.SERVICE_PROVIDER)} - selectedLimit={this.state.selectedLimit} - onCloseLimitEditor={() => this.onCloseLimitEditor()} - onSelectLimit={limit => this.onSelectLimit(limit)} - isReadOnlyMode={isReadOnlyMode} />} - </Tab> - <Tab tabId={tabIds.VENDOR_LIMITS} disabled={isTabsDisabled} data-test-id='general-tab' title={i18n('Vendor Limits')}> - {selectedTab === tabIds.VENDOR_LIMITS && - <LicenseKeyGroupsLimits - limitType={limitType.VENDOR} - limitsList={limitsList.filter(item => item.type === limitType.VENDOR)} - selectedLimit={this.state.selectedLimit} - onCloseLimitEditor={() => this.onCloseLimitEditor()} - onSelectLimit={limit => this.onSelectLimit(limit)} - isReadOnlyMode={isReadOnlyMode} />} - </Tab> - {selectedTab !== tabIds.GENERAL ? - <Button - className='add-limit-button' - tabId={tabIds.ADD_LIMIT_BUTTON} - btnType='link' - iconName='plus' - disabled={this.state.selectedLimit || isReadOnlyMode}> - {i18n('Add Limit')} - </Button> - : - <div key='empty_lm_tab_key'></div> // Render empty div to not break tabs - } - </Tabs> + state = { + localFeatureGroupsListFilter: '', + selectedTab: tabIds.GENERAL, + selectedLimit: '' + }; - <GridSection className='license-model-modal-buttons license-key-group-editor-buttons'> - {!this.state.selectedLimit && - <Button btnType='default' disabled={!this.props.isFormValid || isReadOnlyMode} onClick={() => this.submit()} type='reset'> - {i18n('Save')} - </Button> - } - <Button btnType={this.state.selectedLimit ? 'default' : 'outline'} onClick={() => this.props.onCancel()} type='reset'> - {i18n('Cancel')} - </Button> - </GridSection> - </div> + render() { + let { + data = {}, + onDataChanged, + isReadOnlyMode, + onCloseLimitEditor, + genericFieldInfo, + limitsList = [] + } = this.props; + let { selectedTab } = this.state; + const isTabsDisabled = !data.id || !this.props.isFormValid; + return ( + <div className="license-keygroup-editor"> + <Tabs + type="menu" + activeTab={selectedTab} + onTabClick={tabIndex => { + if (tabIndex === tabIds.ADD_LIMIT_BUTTON) { + this.onAddLimit(); + } else { + this.setState({ selectedTab: tabIndex }); + onCloseLimitEditor(); + this.setState({ selectedLimit: '' }); + } + }} + invalidTabs={[]}> + <Tab + tabId={tabIds.GENERAL} + data-test-id="general-tab" + title={i18n('General')}> + {genericFieldInfo && ( + <Form + ref="validationForm" + hasButtons={false} + isValid={this.props.isFormValid} + formReady={this.props.formReady} + onValidateForm={() => + this.props.onValidateForm(LKG_FORM_NAME) + } + labledButtons={true} + isReadOnlyMode={isReadOnlyMode} + className="license-model-form license-key-groups-form"> + <LicenseKeyGroupFormContent + data={data} + onDataChanged={onDataChanged} + genericFieldInfo={genericFieldInfo} + validateName={value => + this.validateName(value) + } + validateStartDate={(value, state) => + validateStartDate(value, state) + } + thresholdValueValidation={(value, state) => + thresholdValueValidation(value, state) + } + /> + </Form> + )} + </Tab> + <Tab + tabId={tabIds.SP_LIMITS} + disabled={isTabsDisabled} + data-test-id="general-tab" + title={i18n('SP Limits')}> + {selectedTab === tabIds.SP_LIMITS && ( + <LicenseKeyGroupsLimits + limitType={limitType.SERVICE_PROVIDER} + limitsList={limitsList.filter( + item => + item.type === limitType.SERVICE_PROVIDER + )} + selectedLimit={this.state.selectedLimit} + onCloseLimitEditor={() => + this.onCloseLimitEditor() + } + onSelectLimit={limit => + this.onSelectLimit(limit) + } + isReadOnlyMode={isReadOnlyMode} + /> + )} + </Tab> + <Tab + tabId={tabIds.VENDOR_LIMITS} + disabled={isTabsDisabled} + data-test-id="general-tab" + title={i18n('Vendor Limits')}> + {selectedTab === tabIds.VENDOR_LIMITS && ( + <LicenseKeyGroupsLimits + limitType={limitType.VENDOR} + limitsList={limitsList.filter( + item => item.type === limitType.VENDOR + )} + selectedLimit={this.state.selectedLimit} + onCloseLimitEditor={() => + this.onCloseLimitEditor() + } + onSelectLimit={limit => + this.onSelectLimit(limit) + } + isReadOnlyMode={isReadOnlyMode} + /> + )} + </Tab> + {selectedTab !== tabIds.GENERAL ? ( + <Button + className="add-limit-button" + tabId={tabIds.ADD_LIMIT_BUTTON} + btnType="link" + iconName="plus" + disabled={ + this.state.selectedLimit || isReadOnlyMode + }> + {i18n('Add Limit')} + </Button> + ) : ( + <div key="empty_lm_tab_key" /> + ) // Render empty div to not break tabs + } + </Tabs> - ); - } + <GridSection className="license-model-modal-buttons license-key-group-editor-buttons"> + {!this.state.selectedLimit && ( + <Button + btnType="default" + disabled={!this.props.isFormValid || isReadOnlyMode} + onClick={() => this.submit()} + type="reset"> + {i18n('Save')} + </Button> + )} + <Button + btnType={ + this.state.selectedLimit ? 'default' : 'outline' + } + onClick={() => this.props.onCancel()} + type="reset"> + {i18n('Cancel')} + </Button> + </GridSection> + </div> + ); + } - submit() { - const {data: licenseKeyGroup, previousData: previousLicenseKeyGroup, formReady, onValidateForm, onSubmit} = this.props; - if (!formReady) { - onValidateForm(LKG_FORM_NAME); - } else { - onSubmit({licenseKeyGroup, previousLicenseKeyGroup}); - } - } + submit() { + const { + data: licenseKeyGroup, + previousData: previousLicenseKeyGroup, + formReady, + onValidateForm, + onSubmit + } = this.props; + if (!formReady) { + onValidateForm(LKG_FORM_NAME); + } else { + onSubmit({ licenseKeyGroup, previousLicenseKeyGroup }); + } + } - validateName(value) { - const {data: {id}, LKGNames} = this.props; - const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: LKGNames}); + validateName(value) { + const { data: { id }, LKGNames } = this.props; + const isExists = Validator.isItemNameAlreadyExistsInList({ + itemId: id, + itemName: value, + list: LKGNames + }); - return !isExists ? {isValid: true, errorText: ''} : - {isValid: false, errorText: i18n('License key group by the name \'' + value + '\' already exists. License key group name must be unique')}; - } + return !isExists + ? { isValid: true, errorText: '' } + : { + isValid: false, + errorText: i18n( + "License key group by the name '" + + value + + "' already exists. License key group name must be unique" + ) + }; + } - onSelectLimit(limit) { - if (limit.id === this.state.selectedLimit) { - this.setState({selectedLimit: ''}); - return; - } - this.setState({selectedLimit: limit.id}); - this.props.onOpenLimitEditor(limit); - } + onSelectLimit(limit) { + if (limit.id === this.state.selectedLimit) { + this.setState({ selectedLimit: '' }); + return; + } + this.setState({ selectedLimit: limit.id }); + this.props.onOpenLimitEditor(limit); + } - onCloseLimitEditor() { - this.setState({selectedLimit: ''}); - this.props.onCloseLimitEditor(); - } + onCloseLimitEditor() { + this.setState({ selectedLimit: '' }); + this.props.onCloseLimitEditor(); + } - onAddLimit() { - this.setState({selectedLimit: NEW_LIMIT_TEMP_ID}); - this.props.onOpenLimitEditor(); - } + onAddLimit() { + this.setState({ selectedLimit: NEW_LIMIT_TEMP_ID }); + this.props.onOpenLimitEditor(); + } } export default LicenseKeyGroupsEditorView; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsLimits.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsLimits.js index bd8f21a7c5..ad14c6c249 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsLimits.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsLimits.js @@ -13,45 +13,75 @@ * 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 i18n from 'nfvo-utils/i18n/i18n.js'; -import {actionTypes as globalModalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; +import { actionTypes as globalModalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; import Limits from 'sdc-app/onboarding/licenseModel/limits/Limits.jsx'; import LicenseKeyGroupsActionHelper from './LicenseKeyGroupsActionHelper.js'; -const mapStateToProps = ({licenseModel: {licenseKeyGroup: {licenseKeyGroupsEditor: {data}}, limitEditor}, currentScreen}) => { - let {props: {licenseModelId, version}} = currentScreen; - return { - parent: data, - limitEditor, - licenseModelId, - version - }; +const mapStateToProps = ({ + licenseModel: { + licenseKeyGroup: { licenseKeyGroupsEditor: { data } }, + limitEditor + }, + currentScreen +}) => { + let { props: { licenseModelId, version } } = currentScreen; + return { + parent: data, + limitEditor, + licenseModelId, + version + }; }; -const mapActionsToProps = (dispatch) => { - return { - onDataChanged: (deltaData, formName, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName, customValidations}), - onSubmit: (limit, licenseKeyGroup, licenseModelId, version) => LicenseKeyGroupsActionHelper.submitLimit(dispatch, - { - limit, - licenseKeyGroup, - licenseModelId, - version}), - onDelete: ({limit, parent, licenseModelId, version, onCloseLimitEditor, selectedLimit}) => dispatch({ - type: globalModalActionTypes.GLOBAL_MODAL_WARNING, - data:{ - msg: i18n('Are you sure you want to delete {name}?', {name: limit.name}), - confirmationButtonText: i18n('Delete'), - title: i18n('Delete'), - onConfirmed: ()=> LicenseKeyGroupsActionHelper.deleteLimit(dispatch, {limit, licenseKeyGroup: parent, licenseModelId, version}).then(() => - selectedLimit === limit.id && onCloseLimitEditor() - ) - } - }) - }; +const mapActionsToProps = dispatch => { + return { + onDataChanged: (deltaData, formName, customValidations) => + ValidationHelper.dataChanged(dispatch, { + deltaData, + formName, + customValidations + }), + onSubmit: (limit, licenseKeyGroup, licenseModelId, version) => + LicenseKeyGroupsActionHelper.submitLimit(dispatch, { + limit, + licenseKeyGroup, + licenseModelId, + version + }), + onDelete: ({ + limit, + parent, + licenseModelId, + version, + onCloseLimitEditor, + selectedLimit + }) => + dispatch({ + type: globalModalActionTypes.GLOBAL_MODAL_WARNING, + data: { + msg: i18n('Are you sure you want to delete {name}?', { + name: limit.name + }), + confirmationButtonText: i18n('Delete'), + title: i18n('Delete'), + onConfirmed: () => + LicenseKeyGroupsActionHelper.deleteLimit(dispatch, { + limit, + licenseKeyGroup: parent, + licenseModelId, + version + }).then( + () => + selectedLimit === limit.id && + onCloseLimitEditor() + ) + } + }) + }; }; export default connect(mapStateToProps, mapActionsToProps)(Limits); diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditor.js index 00c2092b83..6151c5997d 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditor.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditor.js @@ -13,41 +13,62 @@ * 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 i18n from 'nfvo-utils/i18n/i18n.js'; -import {actionTypes as globalMoadlActions} from 'nfvo-components/modal/GlobalModalConstants.js'; +import { actionTypes as globalMoadlActions } from 'nfvo-components/modal/GlobalModalConstants.js'; import LicenseKeyGroupsActionHelper from './LicenseKeyGroupsActionHelper.js'; -import LicenseKeyGroupsListEditorView, {generateConfirmationMsg} from './LicenseKeyGroupsListEditorView.jsx'; +import LicenseKeyGroupsListEditorView, { + generateConfirmationMsg +} from './LicenseKeyGroupsListEditorView.jsx'; -const mapStateToProps = ({licenseModel: {licenseKeyGroup, licenseModelEditor}}) => { - let {licenseKeyGroupsList} = licenseKeyGroup; - let {data} = licenseKeyGroup.licenseKeyGroupsEditor; - let {vendorName} = licenseModelEditor.data; +const mapStateToProps = ({ + licenseModel: { licenseKeyGroup, licenseModelEditor } +}) => { + let { licenseKeyGroupsList } = licenseKeyGroup; + let { data } = licenseKeyGroup.licenseKeyGroupsEditor; + let { vendorName } = licenseModelEditor.data; - return { - vendorName, - licenseKeyGroupsList, - isDisplayModal: Boolean(data), - isModalInEditMode: Boolean(data && data.id) - }; + return { + vendorName, + licenseKeyGroupsList, + isDisplayModal: Boolean(data), + isModalInEditMode: Boolean(data && data.id) + }; }; -const mapActionsToProps = (dispatch, {licenseModelId, version}) => { - return { - onAddLicenseKeyGroupClick: () => LicenseKeyGroupsActionHelper.openLicenseKeyGroupsEditor(dispatch), - onEditLicenseKeyGroupClick: licenseKeyGroup => LicenseKeyGroupsActionHelper.openLicenseKeyGroupsEditor(dispatch, {licenseKeyGroup, licenseModelId, version}), - onDeleteLicenseKeyGroupClick: licenseKeyGroup => dispatch({ - type: globalMoadlActions.GLOBAL_MODAL_WARNING, - data:{ - msg: generateConfirmationMsg(licenseKeyGroup), - confirmationButtonText: i18n('Delete'), - title: i18n('Delete'), - onConfirmed: () => LicenseKeyGroupsActionHelper.deleteLicenseKeyGroup(dispatch, {licenseModelId, licenseKeyGroupId:licenseKeyGroup.id, version}) - } - }) - }; +const mapActionsToProps = (dispatch, { licenseModelId, version }) => { + return { + onAddLicenseKeyGroupClick: () => + LicenseKeyGroupsActionHelper.openLicenseKeyGroupsEditor(dispatch), + onEditLicenseKeyGroupClick: licenseKeyGroup => + LicenseKeyGroupsActionHelper.openLicenseKeyGroupsEditor(dispatch, { + licenseKeyGroup, + licenseModelId, + version + }), + onDeleteLicenseKeyGroupClick: licenseKeyGroup => + dispatch({ + type: globalMoadlActions.GLOBAL_MODAL_WARNING, + data: { + msg: generateConfirmationMsg(licenseKeyGroup), + confirmationButtonText: i18n('Delete'), + title: i18n('Delete'), + onConfirmed: () => + LicenseKeyGroupsActionHelper.deleteLicenseKeyGroup( + dispatch, + { + licenseModelId, + licenseKeyGroupId: licenseKeyGroup.id, + version + } + ) + } + }) + }; }; -export default connect(mapStateToProps, mapActionsToProps)(LicenseKeyGroupsListEditorView); +export default connect(mapStateToProps, mapActionsToProps)( + LicenseKeyGroupsListEditorView +); diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditorView.jsx index 5a98b7f575..4c8c8cee6f 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditorView.jsx @@ -21,143 +21,205 @@ import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx'; import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx'; import LicenseKeyGroupsEditor from './LicenseKeyGroupsEditor.js'; -import InputOptions, {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx'; -import {optionsInputValues} from './LicenseKeyGroupsConstants'; +import InputOptions, { + other as optionInputOther +} from 'nfvo-components/input/validation/InputOptions.jsx'; +import { optionsInputValues } from './LicenseKeyGroupsConstants'; class LicenseKeyGroupsListEditorView extends React.Component { - static propTypes = { - vendorName: PropTypes.string, - licenseModelId: PropTypes.string.isRequired, - licenseKeyGroupsList: PropTypes.array, - isReadOnlyMode: PropTypes.bool.isRequired, - isDisplayModal: PropTypes.bool, - isModalInEditMode: PropTypes.bool, - onAddLicenseKeyGroupClick: PropTypes.func, - onEditLicenseKeyGroupClick: PropTypes.func, - onDeleteLicenseKeyGroupClick: PropTypes.func - }; - - static defaultProps = { - licenseKeyGroupsList: [] - }; - - state = { - localFilter: '' - }; - - render() { - let {licenseModelId, isReadOnlyMode, isDisplayModal, isModalInEditMode, version} = this.props; - let {onAddLicenseKeyGroupClick} = this.props; - const {localFilter} = this.state; - - return ( - <div className='license-model-list-editor license-key-groups-list-editor'> - <ListEditorView - title={i18n('License Key Groups')} - plusButtonTitle={i18n('Add License Key Group')} - onAdd={onAddLicenseKeyGroupClick} - filterValue={localFilter} - onFilter={value => this.setState({localFilter: value})} - isReadOnlyMode={isReadOnlyMode}> - {this.filterList().map(licenseKeyGroup => (this.renderLicenseKeyGroupListItem(licenseKeyGroup, isReadOnlyMode)))} - </ListEditorView> - <Modal show={isDisplayModal} bsSize='large' animation={true} className='onborading-modal license-model-modal license-key-groups-modal'> - <Modal.Header> - <Modal.Title>{`${isModalInEditMode ? i18n('Edit License Key Group') : i18n('Create New License Key Group')}`}</Modal.Title> - </Modal.Header> - <Modal.Body> - { - isDisplayModal && ( - <LicenseKeyGroupsEditor version={version} licenseModelId={licenseModelId} isReadOnlyMode={isReadOnlyMode}/> - ) - } - </Modal.Body> - </Modal> - </div> - ); - } - - filterList() { - let {licenseKeyGroupsList} = this.props; - let {localFilter} = this.state; - if (localFilter.trim()) { - const filter = new RegExp(escape(localFilter), 'i'); - return licenseKeyGroupsList.filter(({name = '', description = '', operationalScope = '', type = ''}) => { - return escape(name).match(filter) || escape(description).match(filter) || escape(this.extractValue(operationalScope)).match(filter) || escape(type).match(filter); - }); - } - else { - return licenseKeyGroupsList; - } - } - - renderLicenseKeyGroupListItem(licenseKeyGroup, isReadOnlyMode) { - let {id, name, description, operationalScope, type} = licenseKeyGroup; - let {onEditLicenseKeyGroupClick, onDeleteLicenseKeyGroupClick} = this.props; - return ( - <ListEditorItemView - key={id} - onSelect={() => onEditLicenseKeyGroupClick(licenseKeyGroup)} - onDelete={() => onDeleteLicenseKeyGroupClick(licenseKeyGroup)} - className='list-editor-item-view' - isReadOnlyMode={isReadOnlyMode}> - <div className='list-editor-item-view-field'> - <div className='title'>{i18n('Name')}</div> - <div className='text name'>{name}</div> - </div> - - <div className='list-editor-item-view-field'> - <div className='title'>{i18n('Operational Scope')}</div> - <div className='text operational-scope'>{operationalScope && this.getOperationalScopes(operationalScope)}</div> - - <div className='title'>{i18n('Type')}</div> - <div className='text type'>{InputOptions.getTitleByName(optionsInputValues, type)}</div> - </div> - <div className='list-editor-item-view-field'> - <div className='title'>{i18n('Description')}</div> - <div className='text description'>{description}</div> - </div> - </ListEditorItemView> - ); - } - - getOperationalScopes(operationalScope) { - - if (operationalScope.choices && operationalScope.choices.toString() === i18n(optionInputOther.OTHER)) { - return operationalScope.other; - } else if (operationalScope.choices) { - let allOpScopes = ''; - for (let opScope of operationalScope.choices) { - allOpScopes += allOpScopes === '' ? InputOptions.getTitleByName(optionsInputValues, opScope) : `, ${InputOptions.getTitleByName(optionsInputValues, opScope)}`; - } - return allOpScopes; - } else { - return ''; - } - } - - extractValue(item) { - if (item === undefined) { - return ''; - } //TODO fix it sooner rather than later - - return item ? item.choice === optionInputOther.OTHER ? item.other : InputOptions.getTitleByName(optionsInputValues, item.choice) : ''; - } + static propTypes = { + vendorName: PropTypes.string, + licenseModelId: PropTypes.string.isRequired, + licenseKeyGroupsList: PropTypes.array, + isReadOnlyMode: PropTypes.bool.isRequired, + isDisplayModal: PropTypes.bool, + isModalInEditMode: PropTypes.bool, + onAddLicenseKeyGroupClick: PropTypes.func, + onEditLicenseKeyGroupClick: PropTypes.func, + onDeleteLicenseKeyGroupClick: PropTypes.func + }; + + static defaultProps = { + licenseKeyGroupsList: [] + }; + + state = { + localFilter: '' + }; + + render() { + let { + licenseModelId, + isReadOnlyMode, + isDisplayModal, + isModalInEditMode, + version + } = this.props; + let { onAddLicenseKeyGroupClick } = this.props; + const { localFilter } = this.state; + + return ( + <div className="license-model-list-editor license-key-groups-list-editor"> + <ListEditorView + title={i18n('License Key Groups')} + plusButtonTitle={i18n('Add License Key Group')} + onAdd={onAddLicenseKeyGroupClick} + filterValue={localFilter} + onFilter={value => this.setState({ localFilter: value })} + isReadOnlyMode={isReadOnlyMode}> + {this.filterList().map(licenseKeyGroup => + this.renderLicenseKeyGroupListItem( + licenseKeyGroup, + isReadOnlyMode + ) + )} + </ListEditorView> + <Modal + show={isDisplayModal} + bsSize="large" + animation={true} + className="onborading-modal license-model-modal license-key-groups-modal"> + <Modal.Header> + <Modal.Title>{`${ + isModalInEditMode + ? i18n('Edit License Key Group') + : i18n('Create New License Key Group') + }`}</Modal.Title> + </Modal.Header> + <Modal.Body> + {isDisplayModal && ( + <LicenseKeyGroupsEditor + version={version} + licenseModelId={licenseModelId} + isReadOnlyMode={isReadOnlyMode} + /> + )} + </Modal.Body> + </Modal> + </div> + ); + } + + filterList() { + let { licenseKeyGroupsList } = this.props; + let { localFilter } = this.state; + if (localFilter.trim()) { + const filter = new RegExp(escape(localFilter), 'i'); + return licenseKeyGroupsList.filter( + ({ + name = '', + description = '', + operationalScope = '', + type = '' + }) => { + return ( + escape(name).match(filter) || + escape(description).match(filter) || + escape(this.extractValue(operationalScope)).match( + filter + ) || + escape(type).match(filter) + ); + } + ); + } else { + return licenseKeyGroupsList; + } + } + + renderLicenseKeyGroupListItem(licenseKeyGroup, isReadOnlyMode) { + let { id, name, description, operationalScope, type } = licenseKeyGroup; + let { + onEditLicenseKeyGroupClick, + onDeleteLicenseKeyGroupClick + } = this.props; + return ( + <ListEditorItemView + key={id} + onSelect={() => onEditLicenseKeyGroupClick(licenseKeyGroup)} + onDelete={() => onDeleteLicenseKeyGroupClick(licenseKeyGroup)} + className="list-editor-item-view" + isReadOnlyMode={isReadOnlyMode}> + <div className="list-editor-item-view-field"> + <div className="title">{i18n('Name')}</div> + <div className="text name">{name}</div> + </div> + + <div className="list-editor-item-view-field"> + <div className="title">{i18n('Operational Scope')}</div> + <div className="text operational-scope"> + {operationalScope && + this.getOperationalScopes(operationalScope)} + </div> + + <div className="title">{i18n('Type')}</div> + <div className="text type"> + {InputOptions.getTitleByName(optionsInputValues, type)} + </div> + </div> + <div className="list-editor-item-view-field"> + <div className="title">{i18n('Description')}</div> + <div className="text description">{description}</div> + </div> + </ListEditorItemView> + ); + } + + getOperationalScopes(operationalScope) { + if ( + operationalScope.choices && + operationalScope.choices.toString() === i18n(optionInputOther.OTHER) + ) { + return operationalScope.other; + } else if (operationalScope.choices) { + let allOpScopes = ''; + for (let opScope of operationalScope.choices) { + allOpScopes += + allOpScopes === '' + ? InputOptions.getTitleByName( + optionsInputValues, + opScope + ) + : `, ${InputOptions.getTitleByName( + optionsInputValues, + opScope + )}`; + } + return allOpScopes; + } else { + return ''; + } + } + + extractValue(item) { + if (item === undefined) { + return ''; + } //TODO fix it sooner rather than later + + return item + ? item.choice === optionInputOther.OTHER + ? item.other + : InputOptions.getTitleByName(optionsInputValues, item.choice) + : ''; + } } export default LicenseKeyGroupsListEditorView; export function generateConfirmationMsg(licenseKeyGroupToDelete) { - let name = licenseKeyGroupToDelete ? licenseKeyGroupToDelete.name : ''; - let msg = i18n('Are you sure you want to delete "{name}"?', {name: name}); - let subMsg = licenseKeyGroupToDelete.referencingFeatureGroups - && licenseKeyGroupToDelete.referencingFeatureGroups.length > 0 ? - i18n('This license key group is associated with one or more feature groups') : - ''; - return ( - <div> - <p>{msg}</p> - <p>{subMsg}</p> - </div> - ); + let name = licenseKeyGroupToDelete ? licenseKeyGroupToDelete.name : ''; + let msg = i18n('Are you sure you want to delete "{name}"?', { name: name }); + let subMsg = + licenseKeyGroupToDelete.referencingFeatureGroups && + licenseKeyGroupToDelete.referencingFeatureGroups.length > 0 + ? i18n( + 'This license key group is associated with one or more feature groups' + ) + : ''; + return ( + <div> + <p>{msg}</p> + <p>{subMsg}</p> + </div> + ); } diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListReducer.js index 1f0a64e295..1cd1da0d82 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListReducer.js @@ -13,20 +13,29 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes} from './LicenseKeyGroupsConstants.js'; +import { actionTypes } from './LicenseKeyGroupsConstants.js'; export default (state = [], action) => { - switch (action.type) { - case actionTypes.LICENSE_KEY_GROUPS_LIST_LOADED: - return [...action.response.results]; - case actionTypes.DELETE_LICENSE_KEY_GROUP: - return state.filter(licenseKeyGroup => licenseKeyGroup.id !== action.licenseKeyGroupId); - case actionTypes.ADD_LICENSE_KEY_GROUP: - return [...state, action.licenseKeyGroup]; - case actionTypes.EDIT_LICENSE_KEY_GROUP: - const indexForEdit = state.findIndex(licenseKeyGroup => licenseKeyGroup.id === action.licenseKeyGroup.id); - return [...state.slice(0, indexForEdit), action.licenseKeyGroup, ...state.slice(indexForEdit + 1)]; - default: - return state; - } + switch (action.type) { + case actionTypes.LICENSE_KEY_GROUPS_LIST_LOADED: + return [...action.response.results]; + case actionTypes.DELETE_LICENSE_KEY_GROUP: + return state.filter( + licenseKeyGroup => + licenseKeyGroup.id !== action.licenseKeyGroupId + ); + case actionTypes.ADD_LICENSE_KEY_GROUP: + return [...state, action.licenseKeyGroup]; + case actionTypes.EDIT_LICENSE_KEY_GROUP: + const indexForEdit = state.findIndex( + licenseKeyGroup => + licenseKeyGroup.id === action.licenseKeyGroup.id + ); + return [ + ...state.slice(0, indexForEdit), + action.licenseKeyGroup, + ...state.slice(indexForEdit + 1) + ]; + default: + return state; + } }; - |