diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/licenseModel')
74 files changed, 6704 insertions, 4509 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/ArchivedLicenseModelListReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/ArchivedLicenseModelListReducer.js index 8e4750e666..d5563f41ba 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/ArchivedLicenseModelListReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/ArchivedLicenseModelListReducer.js @@ -13,13 +13,13 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import {actionTypes} from './LicenseModelConstants.js'; +import { actionTypes } from './LicenseModelConstants.js'; export default (state = [], action) => { - switch (action.type) { - case actionTypes.ARCHIVED_LICENSE_MODELS_LIST_LOADED: - return [...action.response.results]; - default: - return state; - } + switch (action.type) { + case actionTypes.ARCHIVED_LICENSE_MODELS_LIST_LOADED: + return [...action.response.results]; + default: + return state; + } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/FinalizedLicenseModelListReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/FinalizedLicenseModelListReducer.js index cc9d9c536d..b5c2bff4ba 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/FinalizedLicenseModelListReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/FinalizedLicenseModelListReducer.js @@ -13,13 +13,13 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes} from './LicenseModelConstants.js'; +import { actionTypes } from './LicenseModelConstants.js'; export default (state = [], action) => { - switch (action.type) { - case actionTypes.FINALIZED_LICENSE_MODELS_LIST_LOADED: - return [...action.response.results]; - default: - return state; - } + switch (action.type) { + case actionTypes.FINALIZED_LICENSE_MODELS_LIST_LOADED: + return [...action.response.results]; + default: + return state; + } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModel.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModel.js index c390ecc9b0..cea369d2ec 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModel.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModel.js @@ -4,173 +4,220 @@ * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * + * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express 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 TabulatedEditor from 'src/nfvo-components/editor/TabulatedEditor.jsx'; 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 PermissionsActionHelper from './../permissions/PermissionsActionHelper.js'; import RevisionsActionHelper from './../revisions/RevisionsActionHelper.js'; import LicenseModelActionHelper from './LicenseModelActionHelper.js'; -import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; -import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js'; -import {CommitModalType} from 'nfvo-components/panel/versionController/components/CommitCommentModal.jsx'; +import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js'; +import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js'; +import { CommitModalType } from 'nfvo-components/panel/versionController/components/CommitCommentModal.jsx'; const buildNavigationBarProps = (licenseModel, screen) => { - const {id, vendorName, version} = licenseModel; - const meta = {version}; - - const groups = [{ - id, - name: vendorName, - items: [ - { - id: enums.SCREEN.LICENSE_MODEL_OVERVIEW, - name: i18n('Overview'), - meta - }, - { - id: enums.SCREEN.LICENSE_AGREEMENTS, - name: i18n('License Agreements'), - meta - }, - { - id: enums.SCREEN.FEATURE_GROUPS, - name: i18n('Feature Groups'), - meta - }, - { - id: enums.SCREEN.ENTITLEMENT_POOLS, - name: i18n('Entitlement Pools'), - meta - }, - { - id: enums.SCREEN.LICENSE_KEY_GROUPS, - name: i18n('License Key Groups'), - meta - }, - { - id: enums.SCREEN.ACTIVITY_LOG, - name: i18n('Activity Log'), - meta - } - ] - }]; - - return { - activeItemId: screen, groups - }; + const { id, vendorName, version } = licenseModel; + const meta = { version }; + + const groups = [ + { + id, + name: vendorName, + items: [ + { + id: enums.SCREEN.LICENSE_MODEL_OVERVIEW, + name: i18n('Overview'), + meta + }, + { + id: enums.SCREEN.LICENSE_AGREEMENTS, + name: i18n('License Agreements'), + meta + }, + { + id: enums.SCREEN.FEATURE_GROUPS, + name: i18n('Feature Groups'), + meta + }, + { + id: enums.SCREEN.ENTITLEMENT_POOLS, + name: i18n('Entitlement Pools'), + meta + }, + { + id: enums.SCREEN.LICENSE_KEY_GROUPS, + name: i18n('License Key Groups'), + meta + }, + { + id: enums.SCREEN.ACTIVITY_LOG, + name: i18n('Activity Log'), + meta + } + ] + } + ]; + + return { + activeItemId: screen, + groups + }; }; - const buildVersionControllerProps = ({ - licenseModelEditor = {data: {}}, - versions, - currentVersion, - userInfo, - usersList, - permissions, - isArchived, - itemPermission, - isReadOnlyMode + licenseModelEditor = { data: {} }, + versions, + currentVersion, + userInfo, + usersList, + permissions, + isArchived, + itemPermission, + isReadOnlyMode }) => { - const {isValidityData = true} = licenseModelEditor; - return { - version: currentVersion, - viewableVersions: versions, - isFormDataValid: isValidityData, - permissions, - userInfo, - usersList, - isArchived, - itemName: licenseModelEditor.data.vendorName, - itemPermission, - isReadOnlyMode - }; + const { isValidityData = true } = licenseModelEditor; + return { + version: currentVersion, + viewableVersions: versions, + isFormDataValid: isValidityData, + permissions, + userInfo, + usersList, + isArchived, + itemName: licenseModelEditor.data.vendorName, + itemPermission, + isReadOnlyMode + }; }; - -const mapStateToProps = ({ - users: {userInfo, usersList}, - licenseModel: {licenseModelEditor}, - versionsPage: {permissions, versionsList: {versions, itemName}} -}, { - currentScreen: {screen, itemPermission, props: {isReadOnlyMode, version: currentVersion}} -}) => { - return { - versionControllerProps: buildVersionControllerProps({ - licenseModelEditor, - versions, - currentVersion, - userInfo, - permissions, - usersList, - isArchived: itemPermission.isArchived, - itemPermission, - isReadOnlyMode - }), - navigationBarProps: buildNavigationBarProps(licenseModelEditor.data, screen) - }; +const mapStateToProps = ( + { + users: { userInfo, usersList }, + licenseModel: { licenseModelEditor }, + versionsPage: { permissions, versionsList: { versions } } + }, + { + currentScreen: { + screen, + itemPermission, + props: { isReadOnlyMode, version: currentVersion } + } + } +) => { + return { + versionControllerProps: buildVersionControllerProps({ + licenseModelEditor, + versions, + currentVersion, + userInfo, + permissions, + usersList, + isArchived: itemPermission.isArchived, + itemPermission, + isReadOnlyMode + }), + navigationBarProps: buildNavigationBarProps( + licenseModelEditor.data, + screen + ) + }; }; - -const mapActionsToProps = (dispatch, {currentScreen: {screen, props: {licenseModelId, version}}}) => { - - return { - onVersionControllerAction: (action, version, comment) => - LicenseModelActionHelper.performVCAction(dispatch, {licenseModelId, action, version, comment}).then(updatedVersion => { - ScreensHelper.loadScreen(dispatch, {screen, screenType: screenTypes.LICENSE_MODEL, props: {licenseModelId, version: updatedVersion}}); - }), - - onOpenCommentCommitModal: ({onCommit, title}) => dispatch({ - type: modalActionTypes.GLOBAL_MODAL_SHOW, - data: { - modalComponentName: modalContentMapper.COMMIT_COMMENT, - modalComponentProps: { - onCommit, - type: CommitModalType.COMMIT - }, - title - } - }), - - onVersionSwitching: version => { - ScreensHelper.loadScreen(dispatch, {screen, screenType: screenTypes.LICENSE_MODEL, props: {licenseModelId, version}}); - }, - - onManagePermissions() { - PermissionsActionHelper.openPermissonsManager(dispatch, {itemId: licenseModelId, askForRights: false}); - }, - - onMoreVersionsClick: ({itemName, users}) => { - ScreensHelper.loadScreen(dispatch, {screen: enums.SCREEN.VERSIONS_PAGE, screenType: screenTypes.LICENSE_MODEL, - props: {licenseModelId, licenseModel: {name: itemName}, usersList: users}}); - }, - - onOpenPermissions: ({users}) => { - return PermissionsActionHelper.fetchItemUsers(dispatch, {itemId: licenseModelId, allUsers: users}); - }, - - onOpenRevisionsModal: () => { - return RevisionsActionHelper.openRevisionsView(dispatch, {itemId: licenseModelId, version: version, itemType: screenTypes.LICENSE_MODEL}); - }, - - onNavigate: ({id}) => { - ScreensHelper.loadScreen(dispatch, {screen: id, screenType: screenTypes.LICENSE_MODEL, props: {licenseModelId, version}}); - } - }; +const mapActionsToProps = ( + dispatch, + { currentScreen: { screen, props: { licenseModelId, version } } } +) => { + return { + onVersionControllerAction: (action, version, comment) => + LicenseModelActionHelper.performVCAction(dispatch, { + licenseModelId, + action, + version, + comment + }).then(updatedVersion => { + ScreensHelper.loadScreen(dispatch, { + screen, + screenType: screenTypes.LICENSE_MODEL, + props: { licenseModelId, version: updatedVersion } + }); + }), + + onOpenCommentCommitModal: ({ onCommit, title }) => + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_SHOW, + data: { + modalComponentName: modalContentMapper.COMMIT_COMMENT, + modalComponentProps: { + onCommit, + type: CommitModalType.COMMIT + }, + title + } + }), + + onVersionSwitching: version => { + ScreensHelper.loadScreen(dispatch, { + screen, + screenType: screenTypes.LICENSE_MODEL, + props: { licenseModelId, version } + }); + }, + + onManagePermissions() { + PermissionsActionHelper.openPermissonsManager(dispatch, { + itemId: licenseModelId, + askForRights: false + }); + }, + + onMoreVersionsClick: ({ itemName, users }) => { + ScreensHelper.loadScreen(dispatch, { + screen: enums.SCREEN.VERSIONS_PAGE, + screenType: screenTypes.LICENSE_MODEL, + props: { + licenseModelId, + licenseModel: { name: itemName }, + usersList: users + } + }); + }, + + onOpenPermissions: ({ users }) => { + return PermissionsActionHelper.fetchItemUsers(dispatch, { + itemId: licenseModelId, + allUsers: users + }); + }, + + onOpenRevisionsModal: () => { + return RevisionsActionHelper.openRevisionsView(dispatch, { + itemId: licenseModelId, + version: version, + itemType: screenTypes.LICENSE_MODEL + }); + }, + + onNavigate: ({ id }) => { + ScreensHelper.loadScreen(dispatch, { + screen: id, + screenType: screenTypes.LICENSE_MODEL, + props: { licenseModelId, version } + }); + } + }; }; export default connect(mapStateToProps, mapActionsToProps)(TabulatedEditor); diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js index d1d3a77d92..cfff9f1fcd 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js @@ -15,195 +15,279 @@ */ import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js'; import Configuration from 'sdc-app/config/Configuration.js'; -import {actionTypes} from './LicenseModelConstants.js'; -import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; -import {actionsEnum as vcActionsEnum} from 'nfvo-components/panel/versionController/VersionControllerConstants.js'; +import { actionTypes } from './LicenseModelConstants.js'; +import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js'; +import { actionsEnum as vcActionsEnum } from 'nfvo-components/panel/versionController/VersionControllerConstants.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; import LicenseAgreementActionHelper from './licenseAgreement/LicenseAgreementActionHelper.js'; import FeatureGroupsActionHelper from './featureGroups/FeatureGroupsActionHelper.js'; import EntitlementPoolsActionHelper from './entitlementPools/EntitlementPoolsActionHelper.js'; import LicenseKeyGroupsActionHelper from './licenseKeyGroups/LicenseKeyGroupsActionHelper.js'; -import {default as ItemsHelper} from 'sdc-app/common/helpers/ItemsHelper.js'; +import { default as ItemsHelper } from 'sdc-app/common/helpers/ItemsHelper.js'; import MergeEditorActionHelper from 'sdc-app/common/merge/MergeEditorActionHelper.js'; -import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js'; -import {CommitModalType} from 'nfvo-components/panel/versionController/components/CommitCommentModal.jsx'; +import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js'; +import { CommitModalType } from 'nfvo-components/panel/versionController/components/CommitCommentModal.jsx'; import versionPageActionHelper from 'sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js'; -import {itemTypes} from 'sdc-app/onboarding/versionsPage/VersionsPageConstants.js'; -import {catalogItemStatuses} from 'sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js'; -import {actionsEnum as VersionControllerActionsEnum} from 'nfvo-components/panel/versionController/VersionControllerConstants.js'; +import { itemTypes } from 'sdc-app/onboarding/versionsPage/VersionsPageConstants.js'; +import { catalogItemStatuses } from 'sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js'; +import { actionsEnum as VersionControllerActionsEnum } from 'nfvo-components/panel/versionController/VersionControllerConstants.js'; function baseUrl() { - const restPrefix = Configuration.get('restPrefix'); - return `${restPrefix}/v1.0/vendor-license-models/`; + const restPrefix = Configuration.get('restPrefix'); + return `${restPrefix}/v1.0/vendor-license-models/`; } function fetchLicenseModels() { - return RestAPIUtil.fetch(`${baseUrl()}?versionFilter=${catalogItemStatuses.DRAFT}`); + return RestAPIUtil.fetch( + `${baseUrl()}?versionFilter=${catalogItemStatuses.DRAFT}` + ); } function fetchFinalizedLicenseModels() { - return RestAPIUtil.fetch(`${baseUrl()}?versionFilter=${catalogItemStatuses.CERTIFIED}`); + return RestAPIUtil.fetch( + `${baseUrl()}?versionFilter=${catalogItemStatuses.CERTIFIED}` + ); } function fetchArchivedLicenseModels() { - return RestAPIUtil.fetch(`${baseUrl()}?Status=${catalogItemStatuses.ARCHIVED}`); + return RestAPIUtil.fetch( + `${baseUrl()}?Status=${catalogItemStatuses.ARCHIVED}` + ); } function fetchLicenseModelById(licenseModelId, version) { - const {id: versionId} = version; - return RestAPIUtil.fetch(`${baseUrl()}${licenseModelId}/versions/${versionId}`); + const { id: versionId } = version; + return RestAPIUtil.fetch( + `${baseUrl()}${licenseModelId}/versions/${versionId}` + ); } function putLicenseModel(licenseModel) { - let {id, vendorName, description, iconRef, version: {id: versionId}} = licenseModel; - return RestAPIUtil.put(`${baseUrl()}${id}/versions/${versionId}`, { - vendorName, - description, - iconRef - }); + let { + id, + vendorName, + description, + iconRef, + version: { id: versionId } + } = licenseModel; + return RestAPIUtil.put(`${baseUrl()}${id}/versions/${versionId}`, { + vendorName, + description, + iconRef + }); } -function putLicenseModelAction({itemId, action, version}) { - const {id: versionId} = version; - return RestAPIUtil.put(`${baseUrl()}${itemId}/versions/${versionId}/actions`, {action: action}); +function putLicenseModelAction({ itemId, action, version }) { + const { id: versionId } = version; + return RestAPIUtil.put( + `${baseUrl()}${itemId}/versions/${versionId}/actions`, + { action: action } + ); } const LicenseModelActionHelper = { + fetchLicenseModels(dispatch) { + return fetchLicenseModels().then(response => { + dispatch({ + type: actionTypes.LICENSE_MODELS_LIST_LOADED, + response + }); + }); + }, - fetchLicenseModels(dispatch) { - return fetchLicenseModels().then(response => { - dispatch({ - type: actionTypes.LICENSE_MODELS_LIST_LOADED, - response - }); - }); - }, + fetchFinalizedLicenseModels(dispatch) { + return fetchFinalizedLicenseModels().then(response => + dispatch({ + type: actionTypes.FINALIZED_LICENSE_MODELS_LIST_LOADED, + response + }) + ); + }, - fetchFinalizedLicenseModels(dispatch) { - return fetchFinalizedLicenseModels().then(response => dispatch({ - type: actionTypes.FINALIZED_LICENSE_MODELS_LIST_LOADED, - response - })); + fetchArchivedLicenseModels(dispatch) { + return fetchArchivedLicenseModels().then(response => + dispatch({ + type: actionTypes.ARCHIVED_LICENSE_MODELS_LIST_LOADED, + response + }) + ); + }, - }, + fetchLicenseModelById(dispatch, { licenseModelId, version }) { + return fetchLicenseModelById(licenseModelId, version).then(response => { + dispatch({ + type: actionTypes.LICENSE_MODEL_LOADED, + response: { ...response, version } + }); + }); + }, - fetchArchivedLicenseModels(dispatch) { - return fetchArchivedLicenseModels().then(response => dispatch({ - type: actionTypes.ARCHIVED_LICENSE_MODELS_LIST_LOADED, - response - })); + fetchLicenseModelItems(dispatch, { licenseModelId, version }) { + return Promise.all([ + LicenseAgreementActionHelper.fetchLicenseAgreementList(dispatch, { + licenseModelId, + version + }), + FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, { + licenseModelId, + version + }), + EntitlementPoolsActionHelper.fetchEntitlementPoolsList(dispatch, { + licenseModelId, + version + }), + LicenseKeyGroupsActionHelper.fetchLicenseKeyGroupsList(dispatch, { + licenseModelId, + version + }) + ]); + }, - }, + manageSubmitAction(dispatch, { licenseModelId, version, isDirty }) { + if (isDirty) { + const onCommit = comment => { + return this.performVCAction(dispatch, { + licenseModelId, + action: vcActionsEnum.COMMIT, + version, + comment + }).then(() => { + return this.performSubmitAction(dispatch, { + licenseModelId, + version + }); + }); + }; + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_SHOW, + data: { + modalComponentName: modalContentMapper.COMMIT_COMMENT, + modalComponentProps: { + onCommit, + type: CommitModalType.COMMIT_SUBMIT + }, + title: i18n('Commit & Submit') + } + }); + return Promise.reject(); + } + return this.performSubmitAction(dispatch, { licenseModelId, version }); + }, - fetchLicenseModelById(dispatch, {licenseModelId, version}) { + performSubmitAction(dispatch, { licenseModelId, version }) { + return putLicenseModelAction({ + itemId: licenseModelId, + action: vcActionsEnum.SUBMIT, + version + }).then(() => { + return ItemsHelper.checkItemStatus(dispatch, { + itemId: licenseModelId, + versionId: version.id + }).then(updatedVersion => { + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_SUCCESS, + data: { + title: i18n('Submit Succeeded'), + msg: i18n('This license model successfully submitted'), + cancelButtonText: i18n('OK'), + timeout: 2000 + } + }); + versionPageActionHelper.fetchVersions(dispatch, { + itemType: itemTypes.LICENSE_MODEL, + itemId: licenseModelId + }); + return Promise.resolve(updatedVersion); + }); + }); + }, - return fetchLicenseModelById(licenseModelId, version).then(response => { - dispatch({ - type: actionTypes.LICENSE_MODEL_LOADED, - response: {...response, version} - }); - }); - }, - - fetchLicenseModelItems(dispatch, {licenseModelId, version}) { - return Promise.all([ - LicenseAgreementActionHelper.fetchLicenseAgreementList(dispatch, {licenseModelId, version}), - FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {licenseModelId, version}), - EntitlementPoolsActionHelper.fetchEntitlementPoolsList(dispatch, {licenseModelId, version}), - LicenseKeyGroupsActionHelper.fetchLicenseKeyGroupsList(dispatch, {licenseModelId, version}) - ]); - }, - - manageSubmitAction(dispatch, {licenseModelId, version, isDirty}) { - if(isDirty) { - const onCommit = comment => { - return this.performVCAction(dispatch, {licenseModelId, action: vcActionsEnum.COMMIT, version, comment}).then(() => { - return this.performSubmitAction(dispatch, {licenseModelId, version}); - }); - }; - dispatch({ - type: modalActionTypes.GLOBAL_MODAL_SHOW, - data: { - modalComponentName: modalContentMapper.COMMIT_COMMENT, - modalComponentProps: { - onCommit, - type: CommitModalType.COMMIT_SUBMIT - }, - title: i18n('Commit & Submit') - } - }); - return Promise.reject(); - } - return this.performSubmitAction(dispatch, {licenseModelId, version}); - }, - - performSubmitAction(dispatch, {licenseModelId, version}) { - return putLicenseModelAction({itemId: licenseModelId, action: vcActionsEnum.SUBMIT, version}).then(() => { - return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id}).then(updatedVersion => { - dispatch({ - type: modalActionTypes.GLOBAL_MODAL_SUCCESS, - data: { - title: i18n('Submit Succeeded'), - msg: i18n('This license model successfully submitted'), - cancelButtonText: i18n('OK'), - timeout: 2000 - } - }); - versionPageActionHelper.fetchVersions(dispatch, {itemType: itemTypes.LICENSE_MODEL, itemId: licenseModelId}); - return Promise.resolve(updatedVersion); - }); - }); - }, - - performVCAction(dispatch, {licenseModelId, action, version, comment}) { - return MergeEditorActionHelper.analyzeSyncResult(dispatch, {itemId: licenseModelId, version}).then(({inMerge, isDirty, updatedVersion}) => { - if ( (updatedVersion.status === catalogItemStatuses.CERTIFIED || updatedVersion.archivedStatus === catalogItemStatuses.ARCHIVED) && - (action === VersionControllerActionsEnum.COMMIT || action === VersionControllerActionsEnum.SYNC)) { - versionPageActionHelper.fetchVersions(dispatch, {itemType: itemTypes.LICENSE_MODEL, itemId: licenseModelId}); - const msg = updatedVersion.archivedStatus === catalogItemStatuses.ARCHIVED ? i18n('Item was Archived') : i18n('Item version already Certified'); - dispatch({ - type: modalActionTypes.GLOBAL_MODAL_WARNING, - data: { - title: i18n('Commit error'), - msg, - cancelButtonText: i18n('Cancel') - } - }); - return Promise.resolve(updatedVersion); - } - if (!inMerge) { - if(action === vcActionsEnum.SUBMIT) { - return this.manageSubmitAction(dispatch, {licenseModelId, version, isDirty}); - } - else { - return ItemsHelper.performVCAction({itemId: licenseModelId, action, version, comment}).then(() => { - versionPageActionHelper.fetchVersions(dispatch, {itemType: itemTypes.LICENSE_MODEL, itemId: licenseModelId}); - if (action === vcActionsEnum.SYNC) { - return MergeEditorActionHelper.analyzeSyncResult(dispatch, {itemId: licenseModelId, version}).then(({updatedVersion}) => { - return Promise.resolve(updatedVersion); - }); - } else { - return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id}); - } - }); - } - } - }); - }, - - saveLicenseModel(dispatch, {licenseModel}) { - return putLicenseModel(licenseModel).then(() => { - dispatch({ - type: actionTypes.LICENSE_MODEL_LOADED, - response: licenseModel - }); - const {id, version: {id: versionId}} = licenseModel; - return ItemsHelper.checkItemStatus(dispatch, {itemId: id, versionId}).then(updatedVersion => { - if (updatedVersion.status !== licenseModel.version.status) { - versionPageActionHelper.fetchVersions(dispatch, {itemType: itemTypes.LICENSE_MODEL, itemId: licenseModel.id}); - } - }); - }); - } + performVCAction(dispatch, { licenseModelId, action, version, comment }) { + return MergeEditorActionHelper.analyzeSyncResult(dispatch, { + itemId: licenseModelId, + version + }).then(({ inMerge, isDirty, updatedVersion }) => { + if ( + (updatedVersion.status === catalogItemStatuses.CERTIFIED || + updatedVersion.archivedStatus === + catalogItemStatuses.ARCHIVED) && + (action === VersionControllerActionsEnum.COMMIT || + action === VersionControllerActionsEnum.SYNC) + ) { + versionPageActionHelper.fetchVersions(dispatch, { + itemType: itemTypes.LICENSE_MODEL, + itemId: licenseModelId + }); + const msg = + updatedVersion.archivedStatus === + catalogItemStatuses.ARCHIVED + ? i18n('Item was Archived') + : i18n('Item version already Certified'); + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_WARNING, + data: { + title: i18n('Commit error'), + msg, + cancelButtonText: i18n('Cancel') + } + }); + return Promise.resolve(updatedVersion); + } + if (!inMerge) { + if (action === vcActionsEnum.SUBMIT) { + return this.manageSubmitAction(dispatch, { + licenseModelId, + version, + isDirty + }); + } else { + return ItemsHelper.performVCAction({ + itemId: licenseModelId, + action, + version, + comment + }).then(() => { + versionPageActionHelper.fetchVersions(dispatch, { + itemType: itemTypes.LICENSE_MODEL, + itemId: licenseModelId + }); + if (action === vcActionsEnum.SYNC) { + return MergeEditorActionHelper.analyzeSyncResult( + dispatch, + { itemId: licenseModelId, version } + ).then(({ updatedVersion }) => { + return Promise.resolve(updatedVersion); + }); + } else { + return ItemsHelper.checkItemStatus(dispatch, { + itemId: licenseModelId, + versionId: version.id + }); + } + }); + } + } + }); + }, + saveLicenseModel(dispatch, { licenseModel }) { + return putLicenseModel(licenseModel).then(() => { + dispatch({ + type: actionTypes.LICENSE_MODEL_LOADED, + response: licenseModel + }); + const { id, version: { id: versionId } } = licenseModel; + return ItemsHelper.checkItemStatus(dispatch, { + itemId: id, + versionId + }).then(updatedVersion => { + if (updatedVersion.status !== licenseModel.version.status) { + versionPageActionHelper.fetchVersions(dispatch, { + itemType: itemTypes.LICENSE_MODEL, + itemId: licenseModel.id + }); + } + }); + }); + } }; export default LicenseModelActionHelper; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelConstants.js index 08009ee305..d97f682535 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelConstants.js @@ -17,23 +17,22 @@ import keyMirror from 'nfvo-utils/KeyMirror.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; export const actionTypes = keyMirror({ - LICENSE_MODEL_LOADED: null, - LICENSE_MODELS_LIST_LOADED: null, - FINALIZED_LICENSE_MODELS_LIST_LOADED: null, - ARCHIVED_LICENSE_MODELS_LIST_LOADED: null, - EDIT_LICENSE_MODEL: null + LICENSE_MODEL_LOADED: null, + LICENSE_MODELS_LIST_LOADED: null, + FINALIZED_LICENSE_MODELS_LIST_LOADED: null, + ARCHIVED_LICENSE_MODELS_LIST_LOADED: null, + EDIT_LICENSE_MODEL: null }); - export const thresholdUnitType = { - ABSOLUTE: 'Absolute', - PERCENTAGE: 'Percentage' + ABSOLUTE: 'Absolute', + PERCENTAGE: 'Percentage' }; export const optionsInputValues = { - THRESHOLD_UNITS: [ - {enum: '', title: i18n('please select…')}, - {enum: thresholdUnitType.ABSOLUTE, title: 'Absolute'}, - {enum: thresholdUnitType.PERCENTAGE, title: '%'} - ] -};
\ No newline at end of file + THRESHOLD_UNITS: [ + { enum: '', title: i18n('please select…') }, + { enum: thresholdUnitType.ABSOLUTE, title: 'Absolute' }, + { enum: thresholdUnitType.PERCENTAGE, title: '%' } + ] +}; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelEditorReducer.js index add5ac6a98..2d27679283 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelEditorReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelEditorReducer.js @@ -13,16 +13,16 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes} from './LicenseModelConstants.js'; +import { actionTypes } from './LicenseModelConstants.js'; export default (state = {}, action) => { - switch (action.type) { - case actionTypes.LICENSE_MODEL_LOADED: - return { - ...state, - data: action.response - }; - default: - return state; - } + switch (action.type) { + case actionTypes.LICENSE_MODEL_LOADED: + return { + ...state, + data: action.response + }; + default: + return state; + } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelListReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelListReducer.js index 36a190a39c..00d669c7d1 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelListReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelListReducer.js @@ -13,13 +13,13 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes} from './LicenseModelConstants.js'; +import { actionTypes } from './LicenseModelConstants.js'; export default (state = [], action) => { - switch (action.type) { - case actionTypes.LICENSE_MODELS_LIST_LOADED: - return [...action.response.results]; - default: - return state; - } + switch (action.type) { + case actionTypes.LICENSE_MODELS_LIST_LOADED: + return [...action.response.results]; + default: + return state; + } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelReducer.js index f635532348..f102d286f0 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelReducer.js @@ -13,7 +13,7 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {combineReducers} from 'redux'; +import { combineReducers } from 'redux'; import activityLogReducer from 'sdc-app/common/activity-log/ActivityLogReducer.js'; @@ -32,56 +32,75 @@ import entitlementPoolsEditorReducer from './entitlementPools/EntitlementPoolsEd import licenseKeyGroupsEditorReducer from './licenseKeyGroups/LicenseKeyGroupsEditorReducer.js'; import licenseKeyGroupsListReducer from './licenseKeyGroups/LicenseKeyGroupsListReducer.js'; -import {createPlainDataReducer} from 'sdc-app/common/reducers/PlainDataReducer.js'; +import { createPlainDataReducer } from 'sdc-app/common/reducers/PlainDataReducer.js'; -import {actionTypes as licenseModelOverviewConstants, VLM_DESCRIPTION_FORM} from './overview/LicenseModelOverviewConstants.js'; -import limitEditorReducer from './limits/LimitEditorReducer.js'; +import { + actionTypes as licenseModelOverviewConstants, + VLM_DESCRIPTION_FORM +} from './overview/LicenseModelOverviewConstants.js'; +import limitEditorReducer from './limits/LimitEditorReducer.js'; export default combineReducers({ - licenseModelCreation: createPlainDataReducer(licenseModelCreationReducer), - licenseModelEditor: licenseModelEditorReducer, + licenseModelCreation: createPlainDataReducer(licenseModelCreationReducer), + licenseModelEditor: licenseModelEditorReducer, - licenseAgreement: combineReducers({ - licenseAgreementEditor: createPlainDataReducer(licenseAgreementEditorReducer), - licenseAgreementList: licenseAgreementListReducer - }), - featureGroup: combineReducers({ - featureGroupEditor: createPlainDataReducer(featureGroupsEditorReducer), - featureGroupsList: featureGroupsListReducer - }), - entitlementPool: combineReducers({ - entitlementPoolEditor: createPlainDataReducer(entitlementPoolsEditorReducer), - entitlementPoolsList: entitlementPoolsListReducer - }), - licenseKeyGroup: combineReducers({ - licenseKeyGroupsEditor: createPlainDataReducer(licenseKeyGroupsEditorReducer), - licenseKeyGroupsList: licenseKeyGroupsListReducer - }), - licenseModelOverview: combineReducers({ - selectedTab: (state = null, action) => action.type === licenseModelOverviewConstants.LICENSE_MODEL_OVERVIEW_TAB_SELECTED ? action.buttonTab : state, - descriptionEditor: createPlainDataReducer(function(state = false, action) { - if (action.type === licenseModelOverviewConstants.LM_DATA_CHANGED) { - return { - ...state, - data : { - description : action.description - }, - formReady: null, - formName: VLM_DESCRIPTION_FORM, - genericFieldInfo: { - 'description': { - isValid: true, - errorText: '', - validations: [{type: 'required', data: true}, {type: 'maxLength', data: 1000}] - } - } - }; - //return action.description; - } else { - return state; - } - } - )}), - limitEditor: createPlainDataReducer(limitEditorReducer), - activityLog: activityLogReducer + licenseAgreement: combineReducers({ + licenseAgreementEditor: createPlainDataReducer( + licenseAgreementEditorReducer + ), + licenseAgreementList: licenseAgreementListReducer + }), + featureGroup: combineReducers({ + featureGroupEditor: createPlainDataReducer(featureGroupsEditorReducer), + featureGroupsList: featureGroupsListReducer + }), + entitlementPool: combineReducers({ + entitlementPoolEditor: createPlainDataReducer( + entitlementPoolsEditorReducer + ), + entitlementPoolsList: entitlementPoolsListReducer + }), + licenseKeyGroup: combineReducers({ + licenseKeyGroupsEditor: createPlainDataReducer( + licenseKeyGroupsEditorReducer + ), + licenseKeyGroupsList: licenseKeyGroupsListReducer + }), + licenseModelOverview: combineReducers({ + selectedTab: (state = null, action) => + action.type === + licenseModelOverviewConstants.LICENSE_MODEL_OVERVIEW_TAB_SELECTED + ? action.buttonTab + : state, + descriptionEditor: createPlainDataReducer(function( + state = false, + action + ) { + if (action.type === licenseModelOverviewConstants.LM_DATA_CHANGED) { + return { + ...state, + data: { + description: action.description + }, + formReady: null, + formName: VLM_DESCRIPTION_FORM, + genericFieldInfo: { + description: { + isValid: true, + errorText: '', + validations: [ + { type: 'required', data: true }, + { type: 'maxLength', data: 1000 } + ] + } + } + }; + //return action.description; + } else { + return state; + } + }) + }), + limitEditor: createPlainDataReducer(limitEditorReducer), + activityLog: activityLogReducer }); diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelValidations.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelValidations.js index 64bae3b6a0..340d345609 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelValidations.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelValidations.js @@ -14,28 +14,34 @@ * permissions and limitations under the License. */ import i18n from 'nfvo-utils/i18n/i18n.js'; -import {thresholdUnitType} from './LicenseModelConstants.js'; +import { thresholdUnitType } from './LicenseModelConstants.js'; import Validator from 'nfvo-utils/Validator.js'; export function validateStartDate(value, state) { - if (state.data.expiryDate) { - if (!value) { - return {isValid: false, errorText: i18n('Start date has to be specified if expiry date is specified')}; - } - } - return {isValid: true, errorText: ''}; + if (state.data.expiryDate) { + if (!value) { + return { + isValid: false, + errorText: i18n( + 'Start date has to be specified if expiry date is specified' + ) + }; + } + } + return { isValid: true, errorText: '' }; } export function thresholdValueValidation(value, state) { - let unit = state.data.thresholdUnits; - if (unit === thresholdUnitType.PERCENTAGE) { - return Validator.validate('thresholdValue', value, [ - {type: 'numeric', data: true}, - {type: 'maximum', data: 100}, - {type: 'minimum', data: 0}]); - } else { - return Validator.validate('thresholdValue', value, [ - {type: 'numeric', data: true}, - ]); - } + let unit = state.data.thresholdUnits; + if (unit === thresholdUnitType.PERCENTAGE) { + return Validator.validate('thresholdValue', value, [ + { type: 'numeric', data: true }, + { type: 'maximum', data: 100 }, + { type: 'minimum', data: 0 } + ]); + } else { + return Validator.validate('thresholdValue', value, [ + { type: 'numeric', data: true } + ]); + } } diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreation.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreation.js index bcd6e7fe5b..4bbab865fa 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreation.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreation.js @@ -13,48 +13,84 @@ * 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 LicenseModelCreationActionHelper from './LicenseModelCreationActionHelper.js'; import LicenseModelCreationView from './LicenseModelCreationView.jsx'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; import LicenseModelActionHelper from 'sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js'; import VersionsPageActionHelper from 'sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js'; -import {itemTypes as versionItemTypes} from 'sdc-app/onboarding/versionsPage/VersionsPageConstants.js'; +import { itemTypes as versionItemTypes } from 'sdc-app/onboarding/versionsPage/VersionsPageConstants.js'; 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 PermissionsActionHelper from 'sdc-app/onboarding/permissions/PermissionsActionHelper.js'; -export const mapStateToProps = ({users: {usersList}, licenseModelList, finalizedLicenseModelList, archivedLicenseModelList, licenseModel: {licenseModelCreation}}) => { - let {genericFieldInfo} = licenseModelCreation; - let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); - let VLMNames = {}; +export const mapStateToProps = ({ + users: { usersList }, + licenseModelList, + finalizedLicenseModelList, + archivedLicenseModelList, + licenseModel: { licenseModelCreation } +}) => { + let { genericFieldInfo } = licenseModelCreation; + let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); + let VLMNames = {}; - const allVlmList = [...licenseModelList, ...finalizedLicenseModelList,...archivedLicenseModelList]; - allVlmList.map((item) => { - VLMNames[item.name.toLowerCase()] = item.id; - }); + const allVlmList = [ + ...licenseModelList, + ...finalizedLicenseModelList, + ...archivedLicenseModelList + ]; + allVlmList.map(item => { + VLMNames[item.name.toLowerCase()] = item.id; + }); - return {...licenseModelCreation, isFormValid: isFormValid, VLMNames, usersList}; + return { + ...licenseModelCreation, + isFormValid: isFormValid, + VLMNames, + usersList + }; }; -export const mapActionsToProps = (dispatch) => { - return { - onDataChanged: (deltaData, formName, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName, customValidations}), - onCancel: () => LicenseModelCreationActionHelper.close(dispatch), - onSubmit: (licenseModel, usersList) => { - LicenseModelCreationActionHelper.close(dispatch); - LicenseModelCreationActionHelper.createLicenseModel(dispatch, {licenseModel}).then(response => { - let {itemId, version} = response; - LicenseModelActionHelper.fetchLicenseModels(dispatch).then(() => - PermissionsActionHelper.fetchItemUsers(dispatch, {itemId, allUsers: usersList}).then(() => - VersionsPageActionHelper.fetchVersions(dispatch, {itemType: versionItemTypes.LICENSE_MODEL, itemId}).then(() => - ScreensHelper.loadScreen(dispatch, {screen: enums.SCREEN.LICENSE_MODEL_OVERVIEW, screenType: screenTypes.LICENSE_MODEL, - props: {licenseModelId: itemId, version}}) - ))); - }); - }, - onValidateForm: (formName) => ValidationHelper.validateForm(dispatch, formName) - }; +export const mapActionsToProps = dispatch => { + return { + onDataChanged: (deltaData, formName, customValidations) => + ValidationHelper.dataChanged(dispatch, { + deltaData, + formName, + customValidations + }), + onCancel: () => LicenseModelCreationActionHelper.close(dispatch), + onSubmit: (licenseModel, usersList) => { + LicenseModelCreationActionHelper.close(dispatch); + LicenseModelCreationActionHelper.createLicenseModel(dispatch, { + licenseModel + }).then(response => { + let { itemId, version } = response; + LicenseModelActionHelper.fetchLicenseModels(dispatch).then(() => + PermissionsActionHelper.fetchItemUsers(dispatch, { + itemId, + allUsers: usersList + }).then(() => + VersionsPageActionHelper.fetchVersions(dispatch, { + itemType: versionItemTypes.LICENSE_MODEL, + itemId + }).then(() => + ScreensHelper.loadScreen(dispatch, { + screen: enums.SCREEN.LICENSE_MODEL_OVERVIEW, + screenType: screenTypes.LICENSE_MODEL, + props: { licenseModelId: itemId, version } + }) + ) + ) + ); + }); + }, + onValidateForm: formName => + ValidationHelper.validateForm(dispatch, formName) + }; }; -export default connect(mapStateToProps, mapActionsToProps)(LicenseModelCreationView); +export default connect(mapStateToProps, mapActionsToProps)( + LicenseModelCreationView +); diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationActionHelper.js index 87df1386b6..e2b8d55ffe 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationActionHelper.js @@ -15,59 +15,56 @@ */ import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js'; import Configuration from 'sdc-app/config/Configuration.js'; -import {actionTypes} from './LicenseModelCreationConstants.js'; -import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js'; -import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; +import { actionTypes } from './LicenseModelCreationConstants.js'; +import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js'; +import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; function baseUrl() { - const restPrefix = Configuration.get('restPrefix'); - return `${restPrefix}/v1.0/vendor-license-models/`; + const restPrefix = Configuration.get('restPrefix'); + return `${restPrefix}/v1.0/vendor-license-models/`; } function createLicenseModel(licenseModel) { - return RestAPIUtil.post(baseUrl(), { - vendorName: licenseModel.vendorName, - description: licenseModel.description, - iconRef: 'icon' - }); + return RestAPIUtil.post(baseUrl(), { + vendorName: licenseModel.vendorName, + description: licenseModel.description, + iconRef: 'icon' + }); } - export default { + open(dispatch) { + dispatch({ + type: actionTypes.OPEN + }); - open(dispatch) { - dispatch({ - type: actionTypes.OPEN - }); - - dispatch({ - type: modalActionTypes.GLOBAL_MODAL_SHOW, - data: { - modalComponentName: modalContentMapper.LICENSE_MODEL_CREATION, - title: i18n('New License Model') - } - }); - }, - - close(dispatch){ - dispatch({ - type: actionTypes.CLOSE - }); + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_SHOW, + data: { + modalComponentName: modalContentMapper.LICENSE_MODEL_CREATION, + title: i18n('New License Model') + } + }); + }, - dispatch({ - type: modalActionTypes.GLOBAL_MODAL_CLOSE - }); - }, + close(dispatch) { + dispatch({ + type: actionTypes.CLOSE + }); - createLicenseModel(dispatch, {licenseModel}){ - return createLicenseModel(licenseModel).then(result => { - dispatch({ - type: actionTypes.LICENSE_MODEL_CREATED, - result - }); - return result; - }); - } + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_CLOSE + }); + }, + createLicenseModel(dispatch, { licenseModel }) { + return createLicenseModel(licenseModel).then(result => { + dispatch({ + type: actionTypes.LICENSE_MODEL_CREATED, + result + }); + return result; + }); + } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationConstants.js index e9b1c46bef..1cd61a9e4b 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationConstants.js @@ -16,9 +16,9 @@ import keyMirror from 'nfvo-utils/KeyMirror.js'; export const actionTypes = keyMirror({ - OPEN: null, - CLOSE: null, - LICENSE_MODEL_CREATED: null + OPEN: null, + CLOSE: null, + LICENSE_MODEL_CREATED: null }); export const LICENSE_MODEL_CREATION_FORM_NAME = 'LMCREATIONFORM'; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationReducer.js index 879d356de2..7137230cc7 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationReducer.js @@ -13,32 +13,41 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes, LICENSE_MODEL_CREATION_FORM_NAME} from './LicenseModelCreationConstants.js'; +import { + actionTypes, + LICENSE_MODEL_CREATION_FORM_NAME +} from './LicenseModelCreationConstants.js'; export default (state = {}, action) => { - switch (action.type) { - case actionTypes.OPEN: - return { - ...state, - formReady: null, - formName: LICENSE_MODEL_CREATION_FORM_NAME, - data: {}, - genericFieldInfo: { - 'description' : { - isValid: true, - errorText: '', - validations: [{type: 'required', data: true}, {type: 'maxLength', data: 1000}] - }, - 'vendorName' : { - isValid: true, - errorText: '', - validations: [{type: 'required', data: true}, {type: 'maxLength', data: 25}] - } - } - }; - case actionTypes.CLOSE: - return {}; - default: - return state; - } + switch (action.type) { + case actionTypes.OPEN: + return { + ...state, + formReady: null, + formName: LICENSE_MODEL_CREATION_FORM_NAME, + data: {}, + genericFieldInfo: { + description: { + isValid: true, + errorText: '', + validations: [ + { type: 'required', data: true }, + { type: 'maxLength', data: 1000 } + ] + }, + vendorName: { + isValid: true, + errorText: '', + validations: [ + { type: 'required', data: true }, + { type: 'maxLength', data: 25 } + ] + } + } + }; + case actionTypes.CLOSE: + return {}; + default: + return state; + } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationView.jsx index 948bdc158d..59c4152213 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationView.jsx @@ -19,84 +19,112 @@ import i18n from 'nfvo-utils/i18n/i18n.js'; import Validator from 'nfvo-utils/Validator.js'; import Input from 'nfvo-components/input/validation/Input.jsx'; import Form from 'nfvo-components/input/validation/Form.jsx'; -import {LICENSE_MODEL_CREATION_FORM_NAME} from './LicenseModelCreationConstants.js'; +import { LICENSE_MODEL_CREATION_FORM_NAME } from './LicenseModelCreationConstants.js'; const LicenseModelPropType = PropTypes.shape({ - id: PropTypes.string, - vendorName: PropTypes.string, - description: PropTypes.string + id: PropTypes.string, + vendorName: PropTypes.string, + description: PropTypes.string }); class LicenseModelCreationView extends React.Component { + static propTypes = { + data: LicenseModelPropType, + VLMNames: PropTypes.object, + usersList: PropTypes.array, + onDataChanged: PropTypes.func.isRequired, + onSubmit: PropTypes.func.isRequired, + onValidateForm: PropTypes.func.isRequired, + onCancel: PropTypes.func.isRequired + }; - static propTypes = { - data: LicenseModelPropType, - VLMNames: PropTypes.object, - usersList: PropTypes.array, - onDataChanged: PropTypes.func.isRequired, - onSubmit: PropTypes.func.isRequired, - onValidateForm: PropTypes.func.isRequired, - onCancel: PropTypes.func.isRequired - }; + render() { + let { data = {}, onDataChanged, genericFieldInfo } = this.props; + let { vendorName, description } = data; + return ( + <div> + {genericFieldInfo && ( + <Form + ref="validationForm" + hasButtons={true} + onSubmit={() => this.submit()} + submitButtonText={i18n('Create')} + onReset={() => this.props.onCancel()} + labledButtons={true} + isValid={this.props.isFormValid} + formReady={this.props.formReady} + onValidateForm={() => this.validate()}> + <Input + value={vendorName} + label={i18n('Vendor Name')} + data-test-id="vendor-name" + onChange={vendorName => + onDataChanged( + { vendorName }, + LICENSE_MODEL_CREATION_FORM_NAME, + { + vendorName: name => + this.validateName(name) + } + ) + } + isValid={genericFieldInfo.vendorName.isValid} + errorText={genericFieldInfo.vendorName.errorText} + type="text" + isRequired={true} + className="field-section" + /> + <Input + isRequired={true} + value={description} + label={i18n('Description')} + data-test-id="vendor-description" + overlayPos="bottom" + onChange={description => + onDataChanged( + { description }, + LICENSE_MODEL_CREATION_FORM_NAME + ) + } + isValid={genericFieldInfo.description.isValid} + errorText={genericFieldInfo.description.errorText} + type="textarea" + className="field-section" + /> + </Form> + )} + </div> + ); + } - render() { - let {data = {}, onDataChanged, genericFieldInfo} = this.props; - let {vendorName, description} = data; - return ( - <div> - {genericFieldInfo && <Form - ref='validationForm' - hasButtons={true} - onSubmit={ () => this.submit() } - submitButtonText={i18n('Create')} - onReset={ () => this.props.onCancel() } - labledButtons={true} - isValid={this.props.isFormValid} - formReady={this.props.formReady} - onValidateForm={() => this.validate() }> - <Input - value={vendorName} - label={i18n('Vendor Name')} - data-test-id='vendor-name' - onChange={vendorName => onDataChanged({vendorName}, LICENSE_MODEL_CREATION_FORM_NAME, {vendorName: name => this.validateName(name)})} - isValid={genericFieldInfo.vendorName.isValid} - errorText={genericFieldInfo.vendorName.errorText} - type='text' - isRequired={true} - className='field-section'/> - <Input - isRequired={true} - value={description} - label={i18n('Description')} - data-test-id='vendor-description' - overlayPos='bottom' - onChange={description => onDataChanged({description}, LICENSE_MODEL_CREATION_FORM_NAME)} - isValid={genericFieldInfo.description.isValid} - errorText={genericFieldInfo.description.errorText} - type='textarea' - className='field-section'/> - </Form>} - </div> - ); - } + submit() { + const { data: licenseModel, usersList } = this.props; + this.props.onSubmit(licenseModel, usersList); + } + validateName(value) { + const { data: { id }, VLMNames } = this.props; + const isExists = Validator.isItemNameAlreadyExistsInList({ + itemId: id, + itemName: value, + list: VLMNames + }); - submit() { - const {data:licenseModel, usersList} = this.props; - this.props.onSubmit(licenseModel, usersList); - } + return !isExists + ? { isValid: true, errorText: '' } + : { + isValid: false, + errorText: i18n( + "License model by the name '" + + value + + "' already exists. License model name must be unique" + ) + }; + } - validateName(value) { - const {data: {id}, VLMNames} = this.props; - const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: VLMNames}); - - return !isExists ? {isValid: true, errorText: ''} : - {isValid: false, errorText: i18n('License model by the name \'' + value + '\' already exists. License model name must be unique')}; - } - - validate() { - this.props.onValidateForm(LICENSE_MODEL_CREATION_FORM_NAME); - } + validate() { + this.props.onValidateForm(LICENSE_MODEL_CREATION_FORM_NAME); + } } export default LicenseModelCreationView; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js index 84bdac804c..181fc11c9d 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js @@ -15,197 +15,281 @@ */ import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js'; import Configuration from 'sdc-app/config/Configuration.js'; -import {actionTypes as entitlementPoolsActionTypes } from './EntitlementPoolsConstants.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 entitlementPoolsActionTypes } from './EntitlementPoolsConstants.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}/entitlement-pools`; + const restPrefix = Configuration.get('restPrefix'); + const { id: versionId } = version; + return `${restPrefix}/v1.0/vendor-license-models/${licenseModelId}/versions/${versionId}/entitlement-pools`; } function fetchEntitlementPoolsList(licenseModelId, version) { - return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}`); + return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}`); } function postEntitlementPool(licenseModelId, entitlementPool, version) { - return RestAPIUtil.post(baseUrl(licenseModelId, version), { - name: entitlementPool.name, - description: entitlementPool.description, - thresholdValue: entitlementPool.thresholdValue, - thresholdUnits: getValue(entitlementPool.thresholdUnits), - increments: entitlementPool.increments, - operationalScope: getValue(entitlementPool.operationalScope), - time: entitlementPool.time, - startDate: entitlementPool.startDate, - expiryDate: entitlementPool.expiryDate - }); + return RestAPIUtil.post(baseUrl(licenseModelId, version), { + name: entitlementPool.name, + description: entitlementPool.description, + thresholdValue: entitlementPool.thresholdValue, + thresholdUnits: getValue(entitlementPool.thresholdUnits), + increments: entitlementPool.increments, + operationalScope: getValue(entitlementPool.operationalScope), + time: entitlementPool.time, + startDate: entitlementPool.startDate, + expiryDate: entitlementPool.expiryDate + }); } - -function putEntitlementPool(licenseModelId, previousEntitlementPool, entitlementPool, version) { - - return RestAPIUtil.put(`${baseUrl(licenseModelId, version)}/${entitlementPool.id}`, { - name: entitlementPool.name, - description: entitlementPool.description, - thresholdValue: entitlementPool.thresholdValue, - thresholdUnits: getValue(entitlementPool.thresholdUnits), - increments: entitlementPool.increments, - operationalScope: getValue(entitlementPool.operationalScope), - time: entitlementPool.time, - startDate: entitlementPool.startDate, - expiryDate: entitlementPool.expiryDate - }); +function putEntitlementPool( + licenseModelId, + previousEntitlementPool, + entitlementPool, + version +) { + return RestAPIUtil.put( + `${baseUrl(licenseModelId, version)}/${entitlementPool.id}`, + { + name: entitlementPool.name, + description: entitlementPool.description, + thresholdValue: entitlementPool.thresholdValue, + thresholdUnits: getValue(entitlementPool.thresholdUnits), + increments: entitlementPool.increments, + operationalScope: getValue(entitlementPool.operationalScope), + time: entitlementPool.time, + startDate: entitlementPool.startDate, + expiryDate: entitlementPool.expiryDate + } + ); } function deleteEntitlementPool(licenseModelId, entitlementPoolId, version) { - return RestAPIUtil.destroy(`${baseUrl(licenseModelId, version)}/${entitlementPoolId}`); + return RestAPIUtil.destroy( + `${baseUrl(licenseModelId, version)}/${entitlementPoolId}` + ); } function fetchLimitsList(licenseModelId, entitlementPoolId, version) { - return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}/${entitlementPoolId}/limits`); + return RestAPIUtil.fetch( + `${baseUrl(licenseModelId, version)}/${entitlementPoolId}/limits` + ); } function deleteLimit(licenseModelId, entitlementPoolId, version, limitId) { - return RestAPIUtil.destroy(`${baseUrl(licenseModelId, version)}/${entitlementPoolId}/limits/${limitId}`); + return RestAPIUtil.destroy( + `${baseUrl( + licenseModelId, + version + )}/${entitlementPoolId}/limits/${limitId}` + ); } function postLimit(licenseModelId, entitlementPoolId, version, limit) { - return RestAPIUtil.post(`${baseUrl(licenseModelId, version)}/${entitlementPoolId}/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)}/${entitlementPoolId}/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, entitlementPoolId, version, limit) { - - return RestAPIUtil.put(`${baseUrl(licenseModelId, version)}/${entitlementPoolId}/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)}/${entitlementPoolId}/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 { + fetchEntitlementPoolsList(dispatch, { licenseModelId, version }) { + return fetchEntitlementPoolsList(licenseModelId, version).then( + response => + dispatch({ + type: + entitlementPoolsActionTypes.ENTITLEMENT_POOLS_LIST_LOADED, + response + }) + ); + }, + + openEntitlementPoolsEditor( + dispatch, + { entitlementPool, licenseModelId, version } = {} + ) { + if (licenseModelId && version) { + this.fetchLimits(dispatch, { + licenseModelId, + version, + entitlementPool + }); + } + dispatch({ + type: entitlementPoolsActionTypes.entitlementPoolsEditor.OPEN, + entitlementPool + }); + }, + + deleteEntitlementPool( + dispatch, + { licenseModelId, entitlementPoolId, version } + ) { + return deleteEntitlementPool( + licenseModelId, + entitlementPoolId, + version + ).then(() => { + dispatch({ + type: entitlementPoolsActionTypes.DELETE_ENTITLEMENT_POOL, + entitlementPoolId + }); + return ItemsHelper.checkItemStatus(dispatch, { + itemId: licenseModelId, + versionId: version.id + }); + }); + }, + + entitlementPoolsEditorDataChanged(dispatch, { deltaData }) { + dispatch({ + type: + entitlementPoolsActionTypes.entitlementPoolsEditor.DATA_CHANGED, + deltaData + }); + }, + + closeEntitlementPoolsEditor(dispatch) { + dispatch({ + type: entitlementPoolsActionTypes.entitlementPoolsEditor.CLOSE + }); + }, + + saveEntitlementPool( + dispatch, + { licenseModelId, previousEntitlementPool, entitlementPool, version } + ) { + if (previousEntitlementPool) { + return putEntitlementPool( + licenseModelId, + previousEntitlementPool, + entitlementPool, + version + ).then(() => { + dispatch({ + type: entitlementPoolsActionTypes.EDIT_ENTITLEMENT_POOL, + entitlementPool + }); + return ItemsHelper.checkItemStatus(dispatch, { + itemId: licenseModelId, + versionId: version.id + }); + }); + } else { + return postEntitlementPool( + licenseModelId, + entitlementPool, + version + ).then(response => { + dispatch({ + type: entitlementPoolsActionTypes.ADD_ENTITLEMENT_POOL, + entitlementPool: { + ...entitlementPool, + referencingFeatureGroups: [], + id: response.value + } + }); + return ItemsHelper.checkItemStatus(dispatch, { + itemId: licenseModelId, + versionId: version.id + }); + }); + } + }, + + hideDeleteConfirm(dispatch) { + dispatch({ + type: entitlementPoolsActionTypes.ENTITLEMENT_POOLS_DELETE_CONFIRM, + entitlementPoolToDelete: false + }); + }, + openDeleteEntitlementPoolConfirm(dispatch, { entitlementPool }) { + dispatch({ + type: entitlementPoolsActionTypes.ENTITLEMENT_POOLS_DELETE_CONFIRM, + entitlementPoolToDelete: entitlementPool + }); + }, + + fetchLimits(dispatch, { licenseModelId, version, entitlementPool }) { + return fetchLimitsList( + licenseModelId, + entitlementPool.id, + version + ).then(response => { + dispatch({ + type: + entitlementPoolsActionTypes.entitlementPoolsEditor + .LIMITS_LIST_LOADED, + response + }); + }); + }, + + submitLimit(dispatch, { licenseModelId, version, entitlementPool, limit }) { + const propmise = limit.id + ? putLimit(licenseModelId, entitlementPool.id, version, limit) + : postLimit(licenseModelId, entitlementPool.id, version, limit); + return propmise.then(() => { + dispatch({ + type: limitEditorActions.CLOSE + }); + this.fetchLimits(dispatch, { + licenseModelId, + version, + entitlementPool + }); + return ItemsHelper.checkItemStatus(dispatch, { + itemId: licenseModelId, + versionId: version.id + }); + }); + }, - fetchEntitlementPoolsList(dispatch, {licenseModelId, version}) { - return fetchEntitlementPoolsList(licenseModelId, version).then(response => dispatch({ - type: entitlementPoolsActionTypes.ENTITLEMENT_POOLS_LIST_LOADED, - response - })); - }, - - openEntitlementPoolsEditor(dispatch, {entitlementPool, licenseModelId, version} = {}) { - if (licenseModelId && version) { - this.fetchLimits(dispatch, {licenseModelId, version, entitlementPool}); - } - dispatch({ - type: entitlementPoolsActionTypes.entitlementPoolsEditor.OPEN, - entitlementPool - }); - }, - - deleteEntitlementPool(dispatch, {licenseModelId, entitlementPoolId, version}) { - return deleteEntitlementPool(licenseModelId, entitlementPoolId, version).then(() => { - dispatch({ - type: entitlementPoolsActionTypes.DELETE_ENTITLEMENT_POOL, - entitlementPoolId - }); - return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id}); - }); - }, - - entitlementPoolsEditorDataChanged(dispatch, {deltaData}) { - dispatch({ - type: entitlementPoolsActionTypes.entitlementPoolsEditor.DATA_CHANGED, - deltaData - }); - }, - - closeEntitlementPoolsEditor(dispatch) { - dispatch({ - type: entitlementPoolsActionTypes.entitlementPoolsEditor.CLOSE - }); - }, - - saveEntitlementPool(dispatch, {licenseModelId, previousEntitlementPool, entitlementPool, version}) { - if (previousEntitlementPool) { - return putEntitlementPool(licenseModelId, previousEntitlementPool, entitlementPool, version).then(() => { - dispatch({ - type: entitlementPoolsActionTypes.EDIT_ENTITLEMENT_POOL, - entitlementPool - }); - return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id}); - }); - } - else { - return postEntitlementPool(licenseModelId, entitlementPool, version).then(response => { - dispatch({ - type: entitlementPoolsActionTypes.ADD_ENTITLEMENT_POOL, - entitlementPool: { - ...entitlementPool, - referencingFeatureGroups: [], - id: response.value - } - }); - return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id}); - }); - } - }, - - hideDeleteConfirm(dispatch) { - dispatch({ - type: entitlementPoolsActionTypes.ENTITLEMENT_POOLS_DELETE_CONFIRM, - entitlementPoolToDelete: false - }); - }, - openDeleteEntitlementPoolConfirm(dispatch, {entitlementPool}) { - dispatch({ - type: entitlementPoolsActionTypes.ENTITLEMENT_POOLS_DELETE_CONFIRM, - entitlementPoolToDelete: entitlementPool - }); - }, - - - - fetchLimits(dispatch, {licenseModelId, version, entitlementPool}) { - return fetchLimitsList(licenseModelId, entitlementPool.id, version). then (response => { - dispatch({ - type: entitlementPoolsActionTypes.entitlementPoolsEditor.LIMITS_LIST_LOADED, - response - }); - }); - }, - - submitLimit(dispatch, {licenseModelId, version, entitlementPool, limit}) { - const propmise = limit.id ? putLimit(licenseModelId,entitlementPool.id, version, limit) - : postLimit(licenseModelId,entitlementPool.id, version, limit); - return propmise.then(() => { - dispatch({ - type: limitEditorActions.CLOSE - }); - this.fetchLimits(dispatch, {licenseModelId, version, entitlementPool}); - return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id}); - }); - }, - - deleteLimit(dispatch, {licenseModelId, version, entitlementPool, limit}) { - return deleteLimit(licenseModelId,entitlementPool.id, version, limit.id).then(() => { - this.fetchLimits(dispatch, {licenseModelId, version, entitlementPool}); - return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id}); - }); - } + deleteLimit(dispatch, { licenseModelId, version, entitlementPool, limit }) { + return deleteLimit( + licenseModelId, + entitlementPool.id, + version, + limit.id + ).then(() => { + this.fetchLimits(dispatch, { + licenseModelId, + version, + entitlementPool + }); + return ItemsHelper.checkItemStatus(dispatch, { + itemId: licenseModelId, + versionId: version.id + }); + }); + } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsConstants.js index de2a87ceaf..e69ff688ab 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsConstants.js @@ -15,104 +15,112 @@ */ 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({ + ENTITLEMENT_POOLS_LIST_LOADED: null, + ADD_ENTITLEMENT_POOL: null, + EDIT_ENTITLEMENT_POOL: null, + DELETE_ENTITLEMENT_POOL: null, - ENTITLEMENT_POOLS_LIST_LOADED: null, - ADD_ENTITLEMENT_POOL: null, - EDIT_ENTITLEMENT_POOL: null, - DELETE_ENTITLEMENT_POOL: null, - - entitlementPoolsEditor: { - OPEN: null, - CLOSE: null, - DATA_CHANGED: null, - LIMITS_LIST_LOADED: null - } - + entitlementPoolsEditor: { + OPEN: null, + CLOSE: null, + DATA_CHANGED: null, + LIMITS_LIST_LOADED: null + } }); export const enums = keyMirror({ - SELECTED_FEATURE_GROUP_TAB: { - GENERAL: 1, - ENTITLEMENT_POOLS: 2, - LICENCE_KEY_GROUPS: 3 - }, - SELECTED_ENTITLEMENT_POOLS_BUTTONTAB: { - ASSOCIATED_ENTITLEMENT_POOLS: 1, - AVAILABLE_ENTITLEMENT_POOLS: 2 - } + SELECTED_FEATURE_GROUP_TAB: { + GENERAL: 1, + ENTITLEMENT_POOLS: 2, + LICENCE_KEY_GROUPS: 3 + }, + SELECTED_ENTITLEMENT_POOLS_BUTTONTAB: { + ASSOCIATED_ENTITLEMENT_POOLS: 1, + AVAILABLE_ENTITLEMENT_POOLS: 2 + } }); export const defaultState = { - ENTITLEMENT_POOLS_EDITOR_DATA: { - entitlementMetric: {choice: '', other: ''}, - aggregationFunction: {choice: '', other: ''}, - operationalScope: {choices: [], other: ''}, - time: {choice: '', other: ''} - } + ENTITLEMENT_POOLS_EDITOR_DATA: { + entitlementMetric: { choice: '', other: '' }, + aggregationFunction: { choice: '', other: '' }, + operationalScope: { choices: [], other: '' }, + time: { choice: '', other: '' } + } }; export const thresholdUnitType = { - ABSOLUTE: 'Absolute', - PERCENTAGE: 'Percentage' + ABSOLUTE: 'Absolute', + PERCENTAGE: 'Percentage' }; 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'} - ], - TIME: [ - {enum: '', title: i18n('please select…')}, - {enum: 'Hour', title: 'Hour'}, - {enum: 'Day', title: 'Day'}, - {enum: 'Month', title: 'Month'} - ], - AGGREGATE_FUNCTION: [ - {enum: '', title: i18n('please select…')}, - {enum: 'Peak', title: 'Peak'}, - {enum: 'Average', title: 'Average'} - ], - ENTITLEMENT_METRIC: [ - {enum: '', title: i18n('please select…')}, - {enum: 'Software_Instances_Count', title: 'Software Instances'}, - {enum: 'Core', title: 'Core'}, - {enum: 'CPU', title: 'CPU'}, - {enum: 'Trunks', title: 'Trunks'}, - {enum: 'User', title: 'User'}, - {enum: 'Subscribers', title: 'Subscribers'}, - {enum: 'Tenants', title: 'Tenants'}, - {enum: 'Tokens', title: 'Tokens'}, - {enum: 'Seats', title: 'Seats'}, - {enum: 'Units_TB', title: 'Units-TB'}, - {enum: 'Units_GB', title: 'Units-GB'}, - {enum: 'Units_MB', title: 'Units-MB'} - ] + 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' } + ], + TIME: [ + { enum: '', title: i18n('please select…') }, + { enum: 'Hour', title: 'Hour' }, + { enum: 'Day', title: 'Day' }, + { enum: 'Month', title: 'Month' } + ], + AGGREGATE_FUNCTION: [ + { enum: '', title: i18n('please select…') }, + { enum: 'Peak', title: 'Peak' }, + { enum: 'Average', title: 'Average' } + ], + ENTITLEMENT_METRIC: [ + { enum: '', title: i18n('please select…') }, + { enum: 'Software_Instances_Count', title: 'Software Instances' }, + { enum: 'Core', title: 'Core' }, + { enum: 'CPU', title: 'CPU' }, + { enum: 'Trunks', title: 'Trunks' }, + { enum: 'User', title: 'User' }, + { enum: 'Subscribers', title: 'Subscribers' }, + { enum: 'Tenants', title: 'Tenants' }, + { enum: 'Tokens', title: 'Tokens' }, + { enum: 'Seats', title: 'Seats' }, + { enum: 'Units_TB', title: 'Units-TB' }, + { enum: 'Units_GB', title: 'Units-GB' }, + { enum: 'Units_MB', title: 'Units-MB' } + ] }; -export const extractValue = (item) => { - if (item === undefined) {return '';} //TODO fix it later - return item ? item.choice === optionInputOther.OTHER ? item.other : InputOptions.getTitleByName(optionsInputValues, item.choice) : ''; +export const extractValue = item => { + if (item === undefined) { + return ''; + } //TODO fix it later + return item + ? item.choice === optionInputOther.OTHER + ? item.other + : InputOptions.getTitleByName(optionsInputValues, item.choice) + : ''; }; -export const extractUnits = (units) => { - if (units === undefined) {return '';} //TODO fix it later - return units === 'Absolute' ? '' : '%'; +export const extractUnits = units => { + if (units === undefined) { + return ''; + } //TODO fix it later + return units === 'Absolute' ? '' : '%'; }; 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' }; -export const SP_ENTITLEMENT_POOL_FORM = 'SPENTITLEMENTPOOL';
\ No newline at end of file +export const SP_ENTITLEMENT_POOL_FORM = 'SPENTITLEMENTPOOL'; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditor.js index 23c260f793..5fcdad992a 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditor.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditor.js @@ -13,54 +13,80 @@ * 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 EntitlementPoolsActionHelper from './EntitlementPoolsActionHelper.js'; import EntitlementPoolsEditorView from './EntitlementPoolsEditorView.jsx'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; import LimitEditorActionHelper from '../limits/LimitEditorActionHelper.js'; -const mapStateToProps = ({licenseModel: {entitlementPool}}) => { +const mapStateToProps = ({ licenseModel: { entitlementPool } }) => { + let { + data, + genericFieldInfo, + formReady, + limitsList + } = entitlementPool.entitlementPoolEditor; + let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); - let {data, genericFieldInfo, formReady, limitsList} = entitlementPool.entitlementPoolEditor; + let previousData, + EPNames = {}; + const entitlementPoolId = data ? data.id : null; + if (entitlementPoolId) { + previousData = entitlementPool.entitlementPoolsList.find( + entitlementPool => entitlementPool.id === entitlementPoolId + ); + } - let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); + const list = entitlementPool.entitlementPoolsList; + for (let i = 0; i < list.length; i++) { + EPNames[list[i].name.toLowerCase()] = list[i].id; + } - let previousData, EPNames = {}; - const entitlementPoolId = data ? data.id : null; - if(entitlementPoolId) { - previousData = entitlementPool.entitlementPoolsList.find(entitlementPool => entitlementPool.id === entitlementPoolId); - } - - const list = entitlementPool.entitlementPoolsList; - for (let i = 0; i < list.length; i++) { - EPNames[list[i].name.toLowerCase()] = list[i].id; - } - - return { - data, - genericFieldInfo, - previousData, - isFormValid, - formReady, - EPNames, - limitsList - }; + return { + data, + genericFieldInfo, + previousData, + isFormValid, + formReady, + EPNames, + limitsList + }; }; -const mapActionsToProps = (dispatch, {licenseModelId, version}) => { - return { - onDataChanged: (deltaData, formName, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName, customValidations}), - onCancel: () => EntitlementPoolsActionHelper.closeEntitlementPoolsEditor(dispatch), - onSubmit: ({previousEntitlementPool, entitlementPool, keepOpen}) => { - if (!keepOpen) {EntitlementPoolsActionHelper.closeEntitlementPoolsEditor(dispatch);} - EntitlementPoolsActionHelper.saveEntitlementPool(dispatch, {licenseModelId, previousEntitlementPool, entitlementPool, 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: () => + EntitlementPoolsActionHelper.closeEntitlementPoolsEditor(dispatch), + onSubmit: ({ previousEntitlementPool, entitlementPool, keepOpen }) => { + if (!keepOpen) { + EntitlementPoolsActionHelper.closeEntitlementPoolsEditor( + dispatch + ); + } + EntitlementPoolsActionHelper.saveEntitlementPool(dispatch, { + licenseModelId, + previousEntitlementPool, + entitlementPool, + version + }); + }, + onValidateForm: formName => + ValidationHelper.validateForm(dispatch, formName), + onCloseLimitEditor: () => + LimitEditorActionHelper.closeLimitsEditor(dispatch), + onOpenLimitEditor: limit => + LimitEditorActionHelper.openLimitsEditor(dispatch, { limit }) + }; }; -export default connect(mapStateToProps, mapActionsToProps)(EntitlementPoolsEditorView); +export default connect(mapStateToProps, mapActionsToProps)( + EntitlementPoolsEditorView +); diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorReducer.js index be100f6802..4556b87129 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorReducer.js @@ -13,87 +13,101 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes, defaultState, SP_ENTITLEMENT_POOL_FORM} from './EntitlementPoolsConstants.js'; +import { + actionTypes, + defaultState, + SP_ENTITLEMENT_POOL_FORM +} from './EntitlementPoolsConstants.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.entitlementPoolsEditor.OPEN: - let entitlementPoolData = {...action.entitlementPool}; - let {startDate, expiryDate} = entitlementPoolData; - if (startDate) { - entitlementPoolData.startDate = moment(startDate, DATE_FORMAT).format(DATE_FORMAT); - } - if (expiryDate) { - entitlementPoolData.expiryDate = moment(expiryDate, DATE_FORMAT).format(DATE_FORMAT); - } - return { - ...state, - formReady: null, - formName: SP_ENTITLEMENT_POOL_FORM, - genericFieldInfo: { - 'name' : { - isValid: true, - errorText: '', - validations: [{type: 'required', data: true}, {type: 'maxLength', data: 120}] - }, - 'description' : { - isValid: true, - errorText: '', - validations: [{type: 'maxLength', data: 1000}] - }, - 'increments' : { - isValid: true, - errorText: '', - validations: [{type: 'maxLength', data: 120}] - }, - 'operationalScope' : { - isValid: true, - errorText: '', - validations: [] - }, - 'thresholdUnits' : { - isValid: true, - errorText: '', - validations: [] - }, - 'thresholdValue' : { - isValid: true, - errorText: '', - validations: [] - }, - 'startDate': { - isValid: true, - errorText: '', - validations: [] - }, - 'expiryDate': { - isValid: true, - errorText: '', - validations: [] - } - }, - data: action.entitlementPool ? entitlementPoolData : defaultState.ENTITLEMENT_POOLS_EDITOR_DATA - }; - case actionTypes.entitlementPoolsEditor.DATA_CHANGED: - return { - ...state, - data: { - ...state.data, - ...action.deltaData - } - }; - case actionTypes.entitlementPoolsEditor.CLOSE: - return {}; - - case actionTypes.entitlementPoolsEditor.LIMITS_LIST_LOADED: - return { - ...state, - limitsList: action.response.results - }; - default: - return state; - } + switch (action.type) { + case actionTypes.entitlementPoolsEditor.OPEN: + let entitlementPoolData = { ...action.entitlementPool }; + let { startDate, expiryDate } = entitlementPoolData; + if (startDate) { + entitlementPoolData.startDate = moment( + startDate, + DATE_FORMAT + ).format(DATE_FORMAT); + } + if (expiryDate) { + entitlementPoolData.expiryDate = moment( + expiryDate, + DATE_FORMAT + ).format(DATE_FORMAT); + } + return { + ...state, + formReady: null, + formName: SP_ENTITLEMENT_POOL_FORM, + genericFieldInfo: { + name: { + isValid: true, + errorText: '', + validations: [ + { type: 'required', data: true }, + { type: 'maxLength', data: 120 } + ] + }, + description: { + isValid: true, + errorText: '', + validations: [{ type: 'maxLength', data: 1000 }] + }, + increments: { + isValid: true, + errorText: '', + validations: [{ type: 'maxLength', data: 120 }] + }, + operationalScope: { + isValid: true, + errorText: '', + validations: [] + }, + thresholdUnits: { + isValid: true, + errorText: '', + validations: [] + }, + thresholdValue: { + isValid: true, + errorText: '', + validations: [] + }, + startDate: { + isValid: true, + errorText: '', + validations: [] + }, + expiryDate: { + isValid: true, + errorText: '', + validations: [] + } + }, + data: action.entitlementPool + ? entitlementPoolData + : defaultState.ENTITLEMENT_POOLS_EDITOR_DATA + }; + case actionTypes.entitlementPoolsEditor.DATA_CHANGED: + return { + ...state, + data: { + ...state.data, + ...action.deltaData + } + }; + case actionTypes.entitlementPoolsEditor.CLOSE: + return {}; + case actionTypes.entitlementPoolsEditor.LIMITS_LIST_LOADED: + return { + ...state, + limitsList: action.response.results + }; + default: + return state; + } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx index efae7f3ad2..46eda622b5 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx @@ -25,307 +25,479 @@ import Form from 'nfvo-components/input/validation/Form.jsx'; import Button from 'sdc-ui/lib/react/Button.js'; import GridSection from 'nfvo-components/grid/GridSection.jsx'; import GridItem from 'nfvo-components/grid/GridItem.jsx'; -import {optionsInputValues as EntitlementPoolsOptionsInputValues, SP_ENTITLEMENT_POOL_FORM, tabIds} from './EntitlementPoolsConstants.js'; -import {optionsInputValues as LicenseModelOptionsInputValues} from '../LicenseModelConstants.js'; -import {validateStartDate, thresholdValueValidation} from '../LicenseModelValidations.js'; -import {DATE_FORMAT} from 'sdc-app/onboarding/OnboardingConstants.js'; -import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx'; +import { + optionsInputValues as EntitlementPoolsOptionsInputValues, + SP_ENTITLEMENT_POOL_FORM, + tabIds +} from './EntitlementPoolsConstants.js'; +import { optionsInputValues as LicenseModelOptionsInputValues } from '../LicenseModelConstants.js'; +import { + validateStartDate, + thresholdValueValidation +} from '../LicenseModelValidations.js'; +import { DATE_FORMAT } from 'sdc-app/onboarding/OnboardingConstants.js'; +import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx'; import Tabs from 'sdc-ui/lib/react/Tabs.js'; import Tab from 'sdc-ui/lib/react/Tab.js'; import EntitlementPoolsLimits from './EntitlementPoolsLimits.js'; -import {limitType, NEW_LIMIT_TEMP_ID} from '../limits/LimitEditorConstants.js'; +import { + limitType, + NEW_LIMIT_TEMP_ID +} from '../limits/LimitEditorConstants.js'; const EntitlementPoolPropType = PropTypes.shape({ - id: PropTypes.string, - name: PropTypes.string, - description: PropTypes.string, - operationalScope: PropTypes.shape({ - choices: PropTypes.array, - other: PropTypes.string - }), - thresholdUnits: PropTypes.string, - thresholdValue: PropTypes.string, - increments: PropTypes.string, - startDate: PropTypes.string, - expiryDate: PropTypes.string + id: PropTypes.string, + name: PropTypes.string, + description: PropTypes.string, + operationalScope: PropTypes.shape({ + choices: PropTypes.array, + other: PropTypes.string + }), + thresholdUnits: PropTypes.string, + thresholdValue: PropTypes.string, + increments: PropTypes.string, + startDate: PropTypes.string, + expiryDate: PropTypes.string }); -const EntitlementPoolsFormContent = ({data, genericFieldInfo, onDataChanged, validateName, - thresholdValueValidation, validateStartDate}) => { +const EntitlementPoolsFormContent = ({ + data, + genericFieldInfo, + onDataChanged, + validateName, + thresholdValueValidation, + validateStartDate +}) => { + let { + name, + description, + operationalScope, + thresholdUnits, + thresholdValue, + increments, + startDate, + expiryDate + } = data; + return ( + <GridSection hasLastColSet> + <GridItem colSpan={2}> + <Input + onChange={name => + onDataChanged({ name }, SP_ENTITLEMENT_POOL_FORM, { + name: validateName + }) + } + isValid={genericFieldInfo.name.isValid} + isRequired={true} + errorText={genericFieldInfo.name.errorText} + label={i18n('Name')} + value={name} + data-test-id="create-ep-name" + type="text" + /> + </GridItem> + <GridItem colSpan={2} lastColInRow> + <InputOptions + onInputChange={() => {}} + isMultiSelect={true} + onEnumChange={operationalScope => + onDataChanged( + { + operationalScope: { + choices: operationalScope, + other: '' + } + }, + SP_ENTITLEMENT_POOL_FORM + ) + } + onOtherChange={operationalScope => + onDataChanged( + { + operationalScope: { + choices: [optionInputOther.OTHER], + other: operationalScope + } + }, + SP_ENTITLEMENT_POOL_FORM + ) + } + label={i18n('Operational Scope')} + data-test-id="create-ep-operational-scope" + type="select" + multiSelectedEnum={ + operationalScope && operationalScope.choices + } + otherValue={operationalScope && operationalScope.other} + values={ + EntitlementPoolsOptionsInputValues.OPERATIONAL_SCOPE + } + isValid={genericFieldInfo.operationalScope.isValid} + errorText={genericFieldInfo.operationalScope.errorText} + /> + </GridItem> + <GridItem colSpan={2} stretch> + <Input + onChange={description => + onDataChanged({ description }, SP_ENTITLEMENT_POOL_FORM) + } + isValid={genericFieldInfo.description.isValid} + errorText={genericFieldInfo.description.errorText} + label={i18n('Description')} + value={description} + data-test-id="create-ep-description" + type="textarea" + /> + </GridItem> + <GridItem colSpan={2} lastColInRow> + <div className="threshold-section"> + <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 }, + SP_ENTITLEMENT_POOL_FORM + ); + // TODO make sure that the value is valid too + if (thresholdValue && thresholdValue !== '') { + onDataChanged( + { thresholdValue: thresholdValue }, + SP_ENTITLEMENT_POOL_FORM, + { 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> - let {name, description, operationalScope, thresholdUnits, thresholdValue, - increments, startDate, expiryDate} = data; - return ( - <GridSection hasLastColSet> - <GridItem colSpan={2}> - <Input - onChange={name => onDataChanged({name}, SP_ENTITLEMENT_POOL_FORM, {name: validateName})} - isValid={genericFieldInfo.name.isValid} - isRequired={true} - errorText={genericFieldInfo.name.errorText} - label={i18n('Name')} - value={name} - data-test-id='create-ep-name' - type='text'/> - </GridItem> - <GridItem colSpan={2} lastColInRow> - <InputOptions - onInputChange={()=>{}} - isMultiSelect={true} - onEnumChange={operationalScope => onDataChanged({operationalScope:{choices: operationalScope, other: ''}}, - SP_ENTITLEMENT_POOL_FORM)} - onOtherChange={operationalScope => onDataChanged({operationalScope:{choices: [optionInputOther.OTHER], - other: operationalScope}}, SP_ENTITLEMENT_POOL_FORM)} - label={i18n('Operational Scope')} - data-test-id='create-ep-operational-scope' - type='select' - multiSelectedEnum={operationalScope && operationalScope.choices} - otherValue={operationalScope && operationalScope.other} - values={EntitlementPoolsOptionsInputValues.OPERATIONAL_SCOPE} - isValid={genericFieldInfo.operationalScope.isValid} - errorText={genericFieldInfo.operationalScope.errorText} /> - </GridItem> - <GridItem colSpan={2} stretch> - <Input - onChange={description => onDataChanged({description}, SP_ENTITLEMENT_POOL_FORM)} - isValid={genericFieldInfo.description.isValid} - errorText={genericFieldInfo.description.errorText} - label={i18n('Description')} - value={description} - data-test-id='create-ep-description' - type='textarea'/> - </GridItem> - <GridItem colSpan={2} lastColInRow> - <div className='threshold-section'> - <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}, SP_ENTITLEMENT_POOL_FORM); - // TODO make sure that the value is valid too - if(thresholdValue && thresholdValue !== '') { - onDataChanged({thresholdValue: thresholdValue}, SP_ENTITLEMENT_POOL_FORM,{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> - - <Input - className='entitlement-pools-form-row-threshold-value' - onChange={thresholdValue => onDataChanged({thresholdValue}, SP_ENTITLEMENT_POOL_FORM, - {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'/> - </div> - <Input - onChange={increments => onDataChanged({increments}, SP_ENTITLEMENT_POOL_FORM)} - label={i18n('Increments')} - value={increments} - data-test-id='create-ep-increments' - type='text'/> - <div className='date-section'> - <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) : ''}, - SP_ENTITLEMENT_POOL_FORM, - {startDate: validateStartDate} - )} - isValid={genericFieldInfo.startDate.isValid} - errorText={genericFieldInfo.startDate.errorText} - selectsStart/> - <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) : ''}, SP_ENTITLEMENT_POOL_FORM); - onDataChanged({startDate}, SP_ENTITLEMENT_POOL_FORM, {startDate: validateStartDate}); - }} - isValid={genericFieldInfo.expiryDate.isValid} - errorText={genericFieldInfo.expiryDate.errorText} - selectsEnd/> - </div> - </GridItem> - </GridSection> - ); + <Input + className="entitlement-pools-form-row-threshold-value" + onChange={thresholdValue => + onDataChanged( + { thresholdValue }, + SP_ENTITLEMENT_POOL_FORM, + { + 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" + /> + </div> + <Input + onChange={increments => + onDataChanged({ increments }, SP_ENTITLEMENT_POOL_FORM) + } + label={i18n('Increments')} + value={increments} + data-test-id="create-ep-increments" + type="text" + /> + <div className="date-section"> + <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) + : '' + }, + SP_ENTITLEMENT_POOL_FORM, + { startDate: validateStartDate } + ) + } + isValid={genericFieldInfo.startDate.isValid} + errorText={genericFieldInfo.startDate.errorText} + selectsStart + /> + <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) + : '' + }, + SP_ENTITLEMENT_POOL_FORM + ); + onDataChanged( + { startDate }, + SP_ENTITLEMENT_POOL_FORM, + { + startDate: validateStartDate + } + ); + }} + isValid={genericFieldInfo.expiryDate.isValid} + errorText={genericFieldInfo.expiryDate.errorText} + selectsEnd + /> + </div> + </GridItem> + </GridSection> + ); }; class EntitlementPoolsEditorView extends React.Component { + static propTypes = { + data: EntitlementPoolPropType, + previousData: EntitlementPoolPropType, + EPNames: PropTypes.object, + isReadOnlyMode: PropTypes.bool, + onDataChanged: PropTypes.func.isRequired, + onSubmit: PropTypes.func.isRequired, + onCancel: PropTypes.func.isRequired + }; - static propTypes = { - data: EntitlementPoolPropType, - previousData: EntitlementPoolPropType, - EPNames: 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 defaultProps = { + data: {} + }; - state = { - selectedTab: tabIds.GENERAL, - selectedLimit: '' - }; + componentDidUpdate(prevProps) { + if ( + this.props.formReady && + this.props.formReady !== prevProps.formReady + ) { + // if form validation succeeded -> continue with submit + this.submit(); + } + } - render() { - let {data = {}, onDataChanged, isReadOnlyMode, genericFieldInfo, onCloseLimitEditor, limitsList = []} = this.props; - const {selectedTab} = this.state; - const isTabsDisabled = !data.id || !this.props.isFormValid; + state = { + selectedTab: tabIds.GENERAL, + selectedLimit: '' + }; - return ( - <div> - <Tabs - type='menu' - activeTab={selectedTab} - onTabClick={(tabIndex)=>{ - if (tabIndex === tabIds.ADD_LIMIT_BUTTON) { - this.onAddLimit(); - } else { - this.setState({selectedTab: tabIndex}); - this.setState({selectedLimit: ''}); - onCloseLimitEditor(); - } - }} - invalidTabs={[]}> - <Tab tabId={tabIds.GENERAL} data-test-id='general-tab' title={i18n('General')}> - { - genericFieldInfo && <Form - ref='validationForm' - hasButtons={false} - labledButtons={false} - isReadOnlyMode={isReadOnlyMode} - isValid={this.props.isFormValid} - formReady={this.props.formReady} - onValidateForm={() => this.props.onValidateForm(SP_ENTITLEMENT_POOL_FORM) } - className='license-model-form entitlement-pools-form'> - <EntitlementPoolsFormContent - data={data} - genericFieldInfo={genericFieldInfo} - onDataChanged={onDataChanged} - validateName={(value) => this.validateName(value)} - validateStartDate={(value, state) => validateStartDate(value, state)} - thresholdValueValidation={(value, state) => thresholdValueValidation(value, state)}/> - </Form> - } - </Tab> - <Tab disabled={isTabsDisabled} tabId={tabIds.SP_LIMITS} data-test-id='sp-limits-tab' title={i18n('SP Limits')}> - {selectedTab === tabIds.SP_LIMITS && - <EntitlementPoolsLimits - isReadOnlyMode={isReadOnlyMode} - 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)}/>} - </Tab> - <Tab disabled={isTabsDisabled} tabId={tabIds.VENDOR_LIMITS} data-test-id='vendor-limits-tab' title={i18n('Vendor Limits')}> - {selectedTab === tabIds.VENDOR_LIMITS && - <EntitlementPoolsLimits - isReadOnlyMode={isReadOnlyMode} - limitType={limitType.VENDOR} - limitsList={limitsList.filter(item => item.type === limitType.VENDOR)} - selectedLimit={this.state.selectedLimit} - onCloseLimitEditor={() => this.onCloseLimitEditor()} - onSelectLimit={limit => this.onSelectLimit(limit)}/>} - </Tab> - { - selectedTab !== tabIds.GENERAL ? - <Button - disabled={this.state.selectedLimit || isReadOnlyMode} - className='add-limit-button' - tabId={tabIds.ADD_LIMIT_BUTTON} - btnType='link' - iconName='plus'> - {i18n('Add Limit')} - </Button> - : - <div key='empty_ep_tab_key'></div> // Render empty div to not break tabs - } - </Tabs> - <GridSection className='license-model-modal-buttons entitlement-pools-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, + genericFieldInfo, + onCloseLimitEditor, + limitsList = [] + } = this.props; + const { selectedTab } = this.state; + const isTabsDisabled = !data.id || !this.props.isFormValid; - submit() { - const {data: entitlementPool, previousData: previousEntitlementPool, formReady} = this.props; - if (!formReady) { - this.props.onValidateForm(SP_ENTITLEMENT_POOL_FORM); - } else { - this.props.onSubmit({entitlementPool, previousEntitlementPool}); - } - } + return ( + <div> + <Tabs + type="menu" + activeTab={selectedTab} + onTabClick={tabIndex => { + if (tabIndex === tabIds.ADD_LIMIT_BUTTON) { + this.onAddLimit(); + } else { + this.setState({ selectedTab: tabIndex }); + this.setState({ selectedLimit: '' }); + onCloseLimitEditor(); + } + }} + invalidTabs={[]}> + <Tab + tabId={tabIds.GENERAL} + data-test-id="general-tab" + title={i18n('General')}> + {genericFieldInfo && ( + <Form + ref="validationForm" + hasButtons={false} + labledButtons={false} + isReadOnlyMode={isReadOnlyMode} + isValid={this.props.isFormValid} + formReady={this.props.formReady} + onValidateForm={() => + this.props.onValidateForm( + SP_ENTITLEMENT_POOL_FORM + ) + } + className="license-model-form entitlement-pools-form"> + <EntitlementPoolsFormContent + data={data} + genericFieldInfo={genericFieldInfo} + onDataChanged={onDataChanged} + validateName={value => + this.validateName(value) + } + validateStartDate={(value, state) => + validateStartDate(value, state) + } + thresholdValueValidation={(value, state) => + thresholdValueValidation(value, state) + } + /> + </Form> + )} + </Tab> + <Tab + disabled={isTabsDisabled} + tabId={tabIds.SP_LIMITS} + data-test-id="sp-limits-tab" + title={i18n('SP Limits')}> + {selectedTab === tabIds.SP_LIMITS && ( + <EntitlementPoolsLimits + isReadOnlyMode={isReadOnlyMode} + 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) + } + /> + )} + </Tab> + <Tab + disabled={isTabsDisabled} + tabId={tabIds.VENDOR_LIMITS} + data-test-id="vendor-limits-tab" + title={i18n('Vendor Limits')}> + {selectedTab === tabIds.VENDOR_LIMITS && ( + <EntitlementPoolsLimits + isReadOnlyMode={isReadOnlyMode} + limitType={limitType.VENDOR} + limitsList={limitsList.filter( + item => item.type === limitType.VENDOR + )} + selectedLimit={this.state.selectedLimit} + onCloseLimitEditor={() => + this.onCloseLimitEditor() + } + onSelectLimit={limit => + this.onSelectLimit(limit) + } + /> + )} + </Tab> + {selectedTab !== tabIds.GENERAL ? ( + <Button + disabled={ + this.state.selectedLimit || isReadOnlyMode + } + className="add-limit-button" + tabId={tabIds.ADD_LIMIT_BUTTON} + btnType="link" + iconName="plus"> + {i18n('Add Limit')} + </Button> + ) : ( + <div key="empty_ep_tab_key" /> + ) // Render empty div to not break tabs + } + </Tabs> + <GridSection className="license-model-modal-buttons entitlement-pools-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> + ); + } - validateName(value) { - const {data: {id}, EPNames} = this.props; - const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: EPNames}); + submit() { + const { + data: entitlementPool, + previousData: previousEntitlementPool, + formReady + } = this.props; + if (!formReady) { + this.props.onValidateForm(SP_ENTITLEMENT_POOL_FORM); + } else { + this.props.onSubmit({ entitlementPool, previousEntitlementPool }); + } + } - return !isExists ? {isValid: true, errorText: ''} : - {isValid: false, errorText: i18n('Entitlement pool by the name \'' + value + '\' already exists. Entitlement pool name must be unique')}; - } + validateName(value) { + const { data: { id }, EPNames } = this.props; + const isExists = Validator.isItemNameAlreadyExistsInList({ + itemId: id, + itemName: value, + list: EPNames + }); - onSelectLimit(limit) { - if (limit.id === this.state.selectedLimit) { - this.setState({selectedLimit: ''}); - return; - } - this.setState({selectedLimit: limit.id}); - this.props.onOpenLimitEditor(limit); - } + return !isExists + ? { isValid: true, errorText: '' } + : { + isValid: false, + errorText: i18n( + "Entitlement pool by the name '" + + value + + "' already exists. Entitlement pool name must be unique" + ) + }; + } - onCloseLimitEditor() { - this.setState({selectedLimit: ''}); - this.props.onCloseLimitEditor(); - } + onSelectLimit(limit) { + if (limit.id === this.state.selectedLimit) { + this.setState({ selectedLimit: '' }); + return; + } + this.setState({ selectedLimit: limit.id }); + this.props.onOpenLimitEditor(limit); + } - onAddLimit() { - this.setState({selectedLimit: NEW_LIMIT_TEMP_ID}); - this.props.onOpenLimitEditor(); - } + onCloseLimitEditor() { + this.setState({ selectedLimit: '' }); + this.props.onCloseLimitEditor(); + } + onAddLimit() { + this.setState({ selectedLimit: NEW_LIMIT_TEMP_ID }); + this.props.onOpenLimitEditor(); + } } export default EntitlementPoolsEditorView; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsLimits.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsLimits.js index 8300594098..fd5fe6dd21 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsLimits.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsLimits.js @@ -13,44 +13,74 @@ * 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 ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; import Limits from 'sdc-app/onboarding/licenseModel/limits/Limits.jsx'; -import {actionTypes as globalModalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; +import { actionTypes as globalModalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js'; import EntitlementPoolsActionHelper from './EntitlementPoolsActionHelper.js'; -const mapStateToProps = ({licenseModel: {entitlementPool: {entitlementPoolEditor: {data}}, limitEditor}, currentScreen}) => { - let {props: {licenseModelId, version}} = currentScreen; - return { - parent: data, - limitEditor, - licenseModelId, - version - }; +const mapStateToProps = ({ + licenseModel: { + entitlementPool: { entitlementPoolEditor: { 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, entitlementPool, licenseModelId, version) => EntitlementPoolsActionHelper.submitLimit(dispatch, - { - limit, - entitlementPool, - 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: ()=> EntitlementPoolsActionHelper.deleteLimit(dispatch, {limit, entitlementPool: parent, licenseModelId, version}).then(() => - selectedLimit === limit.id && onCloseLimitEditor() - ) - } - }) - }; +const mapActionsToProps = dispatch => { + return { + onDataChanged: (deltaData, formName, customValidations) => + ValidationHelper.dataChanged(dispatch, { + deltaData, + formName, + customValidations + }), + onSubmit: (limit, entitlementPool, licenseModelId, version) => + EntitlementPoolsActionHelper.submitLimit(dispatch, { + limit, + entitlementPool, + 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: () => + EntitlementPoolsActionHelper.deleteLimit(dispatch, { + limit, + entitlementPool: parent, + licenseModelId, + version + }).then( + () => + selectedLimit === limit.id && + onCloseLimitEditor() + ) + } + }) + }; }; export default connect(mapStateToProps, mapActionsToProps)(Limits); diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditor.js index f1dc1f8542..819fb7d824 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditor.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditor.js @@ -13,45 +13,60 @@ * 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 EntitlementPoolsActionHelper from './EntitlementPoolsActionHelper.js'; -import EntitlementPoolsListEditorView, {generateConfirmationMsg} from './EntitlementPoolsListEditorView.jsx'; -import {actionTypes as globalMoadlActions} from 'nfvo-components/modal/GlobalModalConstants.js'; +import EntitlementPoolsListEditorView, { + generateConfirmationMsg +} from './EntitlementPoolsListEditorView.jsx'; +import { actionTypes as globalMoadlActions } from 'nfvo-components/modal/GlobalModalConstants.js'; -const mapStateToProps = ({licenseModel: {entitlementPool, licenseModelEditor}}) => { - - const {entitlementPoolsList} = entitlementPool; - const {data} = entitlementPool.entitlementPoolEditor; - const {vendorName} = licenseModelEditor.data; - - return { - vendorName, - entitlementPoolsList, - isDisplayModal: Boolean(data), - isModalInEditMode: Boolean(data && data.id), - }; +const mapStateToProps = ({ + licenseModel: { entitlementPool, licenseModelEditor } +}) => { + const { entitlementPoolsList } = entitlementPool; + const { data } = entitlementPool.entitlementPoolEditor; + const { vendorName } = licenseModelEditor.data; + return { + vendorName, + entitlementPoolsList, + isDisplayModal: Boolean(data), + isModalInEditMode: Boolean(data && data.id) + }; }; -const mapActionsToProps = (dispatch, {licenseModelId, version}) => { - return { - onAddEntitlementPoolClick: () => EntitlementPoolsActionHelper.openEntitlementPoolsEditor(dispatch), - onEditEntitlementPoolClick: entitlementPool => EntitlementPoolsActionHelper.openEntitlementPoolsEditor(dispatch, {entitlementPool, licenseModelId, version}), - onDeleteEntitlementPool: entitlementPool => dispatch({ - type: globalMoadlActions.GLOBAL_MODAL_WARNING, - data:{ - msg: generateConfirmationMsg(entitlementPool), - confirmationButtonText: i18n('Delete'), - title: i18n('Delete'), - onConfirmed: () => EntitlementPoolsActionHelper.deleteEntitlementPool(dispatch, { - licenseModelId, - entitlementPoolId: entitlementPool.id, - version - }) - } - }) - }; +const mapActionsToProps = (dispatch, { licenseModelId, version }) => { + return { + onAddEntitlementPoolClick: () => + EntitlementPoolsActionHelper.openEntitlementPoolsEditor(dispatch), + onEditEntitlementPoolClick: entitlementPool => + EntitlementPoolsActionHelper.openEntitlementPoolsEditor(dispatch, { + entitlementPool, + licenseModelId, + version + }), + onDeleteEntitlementPool: entitlementPool => + dispatch({ + type: globalMoadlActions.GLOBAL_MODAL_WARNING, + data: { + msg: generateConfirmationMsg(entitlementPool), + confirmationButtonText: i18n('Delete'), + title: i18n('Delete'), + onConfirmed: () => + EntitlementPoolsActionHelper.deleteEntitlementPool( + dispatch, + { + licenseModelId, + entitlementPoolId: entitlementPool.id, + version + } + ) + } + }) + }; }; -export default connect(mapStateToProps, mapActionsToProps)(EntitlementPoolsListEditorView); +export default connect(mapStateToProps, mapActionsToProps)( + EntitlementPoolsListEditorView +); diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditorView.jsx index cc0cda1992..7a07f94bd5 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditorView.jsx @@ -22,120 +22,162 @@ import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx'; import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx'; import EntitlementPoolsEditor from './EntitlementPoolsEditor.js'; -import {extractUnits} from './EntitlementPoolsConstants'; +import { extractUnits } from './EntitlementPoolsConstants'; class EntitlementPoolsListEditorView extends React.Component { - static propTypes = { - vendorName: PropTypes.string, - licenseModelId: PropTypes.string.isRequired, - entitlementPoolsList: PropTypes.array, - isReadOnlyMode: PropTypes.bool.isRequired, - isDisplayModal: PropTypes.bool, - isModalInEditMode: PropTypes.bool, - onAddEntitlementPoolClick: PropTypes.func, - onEditEntitlementPoolClick: PropTypes.func, - onDeleteEntitlementPool: PropTypes.func, - }; + static propTypes = { + vendorName: PropTypes.string, + licenseModelId: PropTypes.string.isRequired, + entitlementPoolsList: PropTypes.array, + isReadOnlyMode: PropTypes.bool.isRequired, + isDisplayModal: PropTypes.bool, + isModalInEditMode: PropTypes.bool, + onAddEntitlementPoolClick: PropTypes.func, + onEditEntitlementPoolClick: PropTypes.func, + onDeleteEntitlementPool: PropTypes.func + }; - static defaultProps = { - entitlementPoolsList: [] - }; + static defaultProps = { + entitlementPoolsList: [] + }; - state = { - localFilter: '' - }; + state = { + localFilter: '' + }; - render() { - let {licenseModelId, isReadOnlyMode, isDisplayModal, isModalInEditMode, version} = this.props; - let {onAddEntitlementPoolClick} = this.props; - const {localFilter} = this.state; + render() { + let { + licenseModelId, + isReadOnlyMode, + isDisplayModal, + isModalInEditMode, + version + } = this.props; + let { onAddEntitlementPoolClick } = this.props; + const { localFilter } = this.state; - return ( - <div className='license-model-list-editor entitlement-pools-list-editor'> - <ListEditorView - title={i18n('Entitlement Pools')} - plusButtonTitle={i18n('Add Entitlement Pool')} - onAdd={onAddEntitlementPoolClick} - filterValue={localFilter} - onFilter={value => this.setState({localFilter: value})} - isReadOnlyMode={isReadOnlyMode}> - {this.filterList().map(entitlementPool => this.renderEntitlementPoolListItem(entitlementPool, isReadOnlyMode))} - </ListEditorView> - <Modal show={isDisplayModal} bsSize='large' animation={true} className='onborading-modal license-model-modal entitlement-pools-modal'> - <Modal.Header> - <Modal.Title>{`${isModalInEditMode ? i18n('Edit Entitlement Pool') : i18n('Create New Entitlement Pool')}`}</Modal.Title> - </Modal.Header> - <Modal.Body> - { - isDisplayModal && ( - <EntitlementPoolsEditor version={version} licenseModelId={licenseModelId} isReadOnlyMode={isReadOnlyMode}/> - ) - } - </Modal.Body> - </Modal> - </div> - ); - } + return ( + <div className="license-model-list-editor entitlement-pools-list-editor"> + <ListEditorView + title={i18n('Entitlement Pools')} + plusButtonTitle={i18n('Add Entitlement Pool')} + onAdd={onAddEntitlementPoolClick} + filterValue={localFilter} + onFilter={value => this.setState({ localFilter: value })} + isReadOnlyMode={isReadOnlyMode}> + {this.filterList().map(entitlementPool => + this.renderEntitlementPoolListItem( + entitlementPool, + isReadOnlyMode + ) + )} + </ListEditorView> + <Modal + show={isDisplayModal} + bsSize="large" + animation={true} + className="onborading-modal license-model-modal entitlement-pools-modal"> + <Modal.Header> + <Modal.Title>{`${ + isModalInEditMode + ? i18n('Edit Entitlement Pool') + : i18n('Create New Entitlement Pool') + }`}</Modal.Title> + </Modal.Header> + <Modal.Body> + {isDisplayModal && ( + <EntitlementPoolsEditor + version={version} + licenseModelId={licenseModelId} + isReadOnlyMode={isReadOnlyMode} + /> + )} + </Modal.Body> + </Modal> + </div> + ); + } - filterList() { - let {entitlementPoolsList} = this.props; - let {localFilter} = this.state; - if(localFilter.trim()) { - const filter = new RegExp(escape(localFilter), 'i'); - return entitlementPoolsList.filter(({name = '', description = ''}) => { - return escape(name).match(filter) || escape(description).match(filter); - }); - } - else { - return entitlementPoolsList; - } - } + filterList() { + let { entitlementPoolsList } = this.props; + let { localFilter } = this.state; + if (localFilter.trim()) { + const filter = new RegExp(escape(localFilter), 'i'); + return entitlementPoolsList.filter( + ({ name = '', description = '' }) => { + return ( + escape(name).match(filter) || + escape(description).match(filter) + ); + } + ); + } else { + return entitlementPoolsList; + } + } - renderEntitlementPoolListItem(entitlementPool, isReadOnlyMode) { - let {id, name, description, thresholdValue, thresholdUnits} = entitlementPool; - let {onEditEntitlementPoolClick, onDeleteEntitlementPool} = this.props; - return ( - <ListEditorItemView - key={id} - onSelect={() => onEditEntitlementPoolClick(entitlementPool)} - onDelete={() => onDeleteEntitlementPool(entitlementPool)} - className='list-editor-item-view' - isReadOnlyMode={isReadOnlyMode}> - <div className='list-editor-item-view-field'> + renderEntitlementPoolListItem(entitlementPool, isReadOnlyMode) { + let { + id, + name, + description, + thresholdValue, + thresholdUnits + } = entitlementPool; + let { + onEditEntitlementPoolClick, + onDeleteEntitlementPool + } = this.props; + return ( + <ListEditorItemView + key={id} + onSelect={() => onEditEntitlementPoolClick(entitlementPool)} + onDelete={() => onDeleteEntitlementPool(entitlementPool)} + className="list-editor-item-view" + isReadOnlyMode={isReadOnlyMode}> + <div className="list-editor-item-view-field"> + <div className="title">{i18n('Name')}</div> + <div> + <div className="textEllipses text name">{name}</div> + </div> + </div> - <div className='title'>{i18n('Name')}</div> - <div ><div className='textEllipses text name'>{name}</div></div> - </div> - - <div className='list-editor-item-view-field'> - <div className='title'>{i18n('Entitlement')}</div> - <div className='entitlement-pools-count'>{thresholdValue && `${thresholdValue} ${extractUnits(thresholdUnits)}`}</div> - </div> - - <div className='list-editor-item-view-field'> - <div className='title'>{i18n('Description')}</div> - <div className='text description'>{description}</div> - </div> - </ListEditorItemView> - ); - } + <div className="list-editor-item-view-field"> + <div className="title">{i18n('Entitlement')}</div> + <div className="entitlement-pools-count"> + {thresholdValue && + `${thresholdValue} ${extractUnits(thresholdUnits)}`} + </div> + </div> + <div className="list-editor-item-view-field"> + <div className="title">{i18n('Description')}</div> + <div className="text description">{description}</div> + </div> + </ListEditorItemView> + ); + } } export default EntitlementPoolsListEditorView; export function generateConfirmationMsg(entitlementPoolToDelete) { - let poolName = entitlementPoolToDelete ? entitlementPoolToDelete.name : ''; - let msg = i18n('Are you sure you want to delete "{poolName}"?', {poolName: poolName}); - let subMsg = entitlementPoolToDelete - && entitlementPoolToDelete.referencingFeatureGroups - && entitlementPoolToDelete.referencingFeatureGroups.length > 0 ? - i18n('This entitlement pool is associated with one or more feature groups') : - ''; - return ( - <div> - <p>{msg}</p> - <p>{subMsg}</p> - </div> - ); + let poolName = entitlementPoolToDelete ? entitlementPoolToDelete.name : ''; + let msg = i18n('Are you sure you want to delete "{poolName}"?', { + poolName: poolName + }); + let subMsg = + entitlementPoolToDelete && + entitlementPoolToDelete.referencingFeatureGroups && + entitlementPoolToDelete.referencingFeatureGroups.length > 0 + ? i18n( + 'This entitlement pool 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/entitlementPools/EntitlementPoolsListReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListReducer.js index fefd823207..3c8621d9d8 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListReducer.js @@ -13,19 +13,29 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes} from './EntitlementPoolsConstants'; +import { actionTypes } from './EntitlementPoolsConstants'; export default (state = [], action) => { - switch (action.type) { - case actionTypes.ENTITLEMENT_POOLS_LIST_LOADED: - return [...action.response.results]; - case actionTypes.ADD_ENTITLEMENT_POOL: - return [...state, action.entitlementPool]; - case actionTypes.EDIT_ENTITLEMENT_POOL: - const indexForEdit = state.findIndex(entitlementPool => entitlementPool.id === action.entitlementPool.id); - return [...state.slice(0, indexForEdit), action.entitlementPool, ...state.slice(indexForEdit + 1)]; - case actionTypes.DELETE_ENTITLEMENT_POOL: - return state.filter(entitlementPool => entitlementPool.id !== action.entitlementPoolId); - default: - return state; - } + switch (action.type) { + case actionTypes.ENTITLEMENT_POOLS_LIST_LOADED: + return [...action.response.results]; + case actionTypes.ADD_ENTITLEMENT_POOL: + return [...state, action.entitlementPool]; + case actionTypes.EDIT_ENTITLEMENT_POOL: + const indexForEdit = state.findIndex( + entitlementPool => + entitlementPool.id === action.entitlementPool.id + ); + return [ + ...state.slice(0, indexForEdit), + action.entitlementPool, + ...state.slice(indexForEdit + 1) + ]; + case actionTypes.DELETE_ENTITLEMENT_POOL: + return state.filter( + entitlementPool => + entitlementPool.id !== action.entitlementPoolId + ); + default: + return state; + } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditor.js index 6edb1e1f0c..997a6e09ed 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditor.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditor.js @@ -13,66 +13,92 @@ * 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 FeatureGroupsActionHelper from './FeatureGroupsActionHelper.js'; import FeatureGroupEditorView from './FeatureGroupEditorView.jsx'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; -export const mapStateToProps = ({licenseModel: {featureGroup, entitlementPool, licenseKeyGroup}}) => { - let {entitlementPoolsList = []} = entitlementPool; - let {licenseKeyGroupsList = []} = licenseKeyGroup; - const {featureGroupEditor} = featureGroup; - let {data, selectedTab, genericFieldInfo, formReady} = featureGroupEditor; - const featureGroupId = data ? data.id : null; - const list = featureGroup.featureGroupsList; +export const mapStateToProps = ({ + licenseModel: { featureGroup, entitlementPool, licenseKeyGroup } +}) => { + let { entitlementPoolsList = [] } = entitlementPool; + let { licenseKeyGroupsList = [] } = licenseKeyGroup; + const { featureGroupEditor } = featureGroup; + let { data, selectedTab, genericFieldInfo, formReady } = featureGroupEditor; + const featureGroupId = data ? data.id : null; + const list = featureGroup.featureGroupsList; - let previousData, FGNames = {}, isFormValid = true, invalidTabs = []; + let previousData, + FGNames = {}, + isFormValid = true, + invalidTabs = []; - if (featureGroupId) { - previousData = list.find(featureGroup => featureGroup.id === featureGroupId); - } + if (featureGroupId) { + previousData = list.find( + featureGroup => featureGroup.id === featureGroupId + ); + } - for (let i = 0; i < list.length; i++) { - FGNames[list[i].name.toLowerCase()] = list[i].id; - } + for (let i = 0; i < list.length; i++) { + FGNames[list[i].name.toLowerCase()] = list[i].id; + } - for (let field in genericFieldInfo) { - if (!genericFieldInfo[field].isValid) { - isFormValid = false; - let tabId = genericFieldInfo[field].tabId; - if (invalidTabs.indexOf(tabId) === -1) { - invalidTabs[invalidTabs.length] = genericFieldInfo[field].tabId; - } - } - } + for (let field in genericFieldInfo) { + if (!genericFieldInfo[field].isValid) { + isFormValid = false; + let tabId = genericFieldInfo[field].tabId; + if (invalidTabs.indexOf(tabId) === -1) { + invalidTabs[invalidTabs.length] = genericFieldInfo[field].tabId; + } + } + } - return { - data, - previousData, - selectedTab, - entitlementPoolsList, - licenseKeyGroupsList, - isFormValid, - formReady, - genericFieldInfo, - invalidTabs, - FGNames - }; + return { + data, + previousData, + selectedTab, + entitlementPoolsList, + licenseKeyGroupsList, + isFormValid, + formReady, + genericFieldInfo, + invalidTabs, + FGNames + }; }; - -const mapActionsToProps = (dispatch, {licenseModelId, version}) => { - return { - onDataChanged: (deltaData, formName, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName, customValidations}), - onTabSelect: tab => FeatureGroupsActionHelper.selectEntitlementPoolsEditorTab(dispatch, {tab}), - onSubmit: (previousFeatureGroup, featureGroup) => { - FeatureGroupsActionHelper.closeFeatureGroupsEditor(dispatch); - FeatureGroupsActionHelper.saveFeatureGroup(dispatch, {licenseModelId, previousFeatureGroup, featureGroup, version}); - }, - onCancel: () => FeatureGroupsActionHelper.closeFeatureGroupsEditor(dispatch), - onValidateForm: (formName) => ValidationHelper.validateForm(dispatch, formName) - }; +const mapActionsToProps = (dispatch, { licenseModelId, version }) => { + return { + onDataChanged: (deltaData, formName, customValidations) => + ValidationHelper.dataChanged(dispatch, { + deltaData, + formName, + customValidations + }), + onTabSelect: tab => + FeatureGroupsActionHelper.selectEntitlementPoolsEditorTab( + dispatch, + { + tab + } + ), + onSubmit: (previousFeatureGroup, featureGroup) => { + FeatureGroupsActionHelper.closeFeatureGroupsEditor(dispatch); + FeatureGroupsActionHelper.saveFeatureGroup(dispatch, { + licenseModelId, + previousFeatureGroup, + featureGroup, + version + }); + }, + onCancel: () => + FeatureGroupsActionHelper.closeFeatureGroupsEditor(dispatch), + onValidateForm: formName => + ValidationHelper.validateForm(dispatch, formName) + }; }; -export default connect(mapStateToProps, mapActionsToProps)(FeatureGroupEditorView); +export default connect(mapStateToProps, mapActionsToProps)( + FeatureGroupEditorView +); diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx index 6d0acaa65d..fc8269332a 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx @@ -19,211 +19,320 @@ import Tabs from 'nfvo-components/input/validation/Tabs.jsx'; import Tab from 'sdc-ui/lib/react/Tab.js'; import GridSection from 'nfvo-components/grid/GridSection.jsx'; import GridItem from 'nfvo-components/grid/GridItem.jsx'; -import {TabsForm as Form} from 'nfvo-components/input/validation/Form.jsx'; +import { TabsForm as Form } from 'nfvo-components/input/validation/Form.jsx'; import DualListboxView from 'nfvo-components/input/dualListbox/DualListboxView.jsx'; import Input from 'nfvo-components/input/validation/Input.jsx'; import i18n from 'nfvo-utils/i18n/i18n.js'; import Validator from 'nfvo-utils/Validator.js'; -import {state as FeatureGroupStateConstants, FG_EDITOR_FORM} from './FeatureGroupsConstants.js'; +import { + state as FeatureGroupStateConstants, + FG_EDITOR_FORM +} from './FeatureGroupsConstants.js'; const FeatureGroupsPropType = PropTypes.shape({ - id: PropTypes.string, - name: PropTypes.string, - description: PropTypes.string, - partNumber: PropTypes.string, - manufacturerReferenceNumber: PropTypes.string, - entitlementPoolsIds: PropTypes.arrayOf(PropTypes.string), - licenseKeyGroupsIds: PropTypes.arrayOf(PropTypes.string) + id: PropTypes.string, + name: PropTypes.string, + description: PropTypes.string, + partNumber: PropTypes.string, + manufacturerReferenceNumber: PropTypes.string, + entitlementPoolsIds: PropTypes.arrayOf(PropTypes.string), + licenseKeyGroupsIds: PropTypes.arrayOf(PropTypes.string) }); -const GeneralTab = ({data = {}, onDataChanged, genericFieldInfo, validateName}) => { - let {name, description, partNumber, manufacturerReferenceNumber} = data; - return ( - <GridSection hasLastColSet> - <GridItem colSpan={2}> - <Input - groupClassName='field-section' - onChange={name => onDataChanged({name}, FG_EDITOR_FORM, {name: validateName})} - label={i18n('Name')} - data-test-id='create-fg-name' - value={name} - name='feature-group-name' - type='text' - isRequired={true} - isValid={genericFieldInfo.name.isValid} - errorText={genericFieldInfo.name.errorText} /> - </GridItem> - <GridItem colSpan={2} lastColInRow> - <Input - groupClassName='field-section' - className='description-field' - onChange={description => onDataChanged({description}, FG_EDITOR_FORM)} - data-test-id='create-fg-description' - label={i18n('Description')} - value={description} - name='feature-group-description' - type='textarea' - isValid={genericFieldInfo.description.isValid} - errorText={genericFieldInfo.description.errorText} /> - </GridItem> - <GridItem colSpan={2}> - <Input - groupClassName='field-section' - onChange={partNumber => onDataChanged({partNumber}, FG_EDITOR_FORM)} - label={i18n('Part Number')} - data-test-id='create-fg-part-number' - value={partNumber} - isRequired={true} - type='text' - isValid={genericFieldInfo.partNumber.isValid} - errorText={genericFieldInfo.partNumber.errorText} /> - </GridItem> - <GridItem colSpan={2} lastColInRow> - <Input - groupClassName='field-section' - onChange={manufacturerReferenceNumber => onDataChanged({manufacturerReferenceNumber}, FG_EDITOR_FORM)} - label={i18n('Manufacturer Reference Number')} - data-test-id='create-fg-reference-number' - value={manufacturerReferenceNumber} - isRequired={true} - type='text' - isValid={genericFieldInfo.manufacturerReferenceNumber.isValid} - errorText={genericFieldInfo.manufacturerReferenceNumber.errorText} /> - </GridItem> - </GridSection> - ); +const GeneralTab = ({ + data = {}, + onDataChanged, + genericFieldInfo, + validateName +}) => { + let { name, description, partNumber, manufacturerReferenceNumber } = data; + return ( + <GridSection hasLastColSet> + <GridItem colSpan={2}> + <Input + groupClassName="field-section" + onChange={name => + onDataChanged({ name }, FG_EDITOR_FORM, { + name: validateName + }) + } + label={i18n('Name')} + data-test-id="create-fg-name" + value={name} + name="feature-group-name" + type="text" + isRequired={true} + isValid={genericFieldInfo.name.isValid} + errorText={genericFieldInfo.name.errorText} + /> + </GridItem> + <GridItem colSpan={2} lastColInRow> + <Input + groupClassName="field-section" + className="description-field" + onChange={description => + onDataChanged({ description }, FG_EDITOR_FORM) + } + data-test-id="create-fg-description" + label={i18n('Description')} + value={description} + name="feature-group-description" + type="textarea" + isValid={genericFieldInfo.description.isValid} + errorText={genericFieldInfo.description.errorText} + /> + </GridItem> + <GridItem colSpan={2}> + <Input + groupClassName="field-section" + onChange={partNumber => + onDataChanged({ partNumber }, FG_EDITOR_FORM) + } + label={i18n('Part Number')} + data-test-id="create-fg-part-number" + value={partNumber} + isRequired={true} + type="text" + isValid={genericFieldInfo.partNumber.isValid} + errorText={genericFieldInfo.partNumber.errorText} + /> + </GridItem> + <GridItem colSpan={2} lastColInRow> + <Input + groupClassName="field-section" + onChange={manufacturerReferenceNumber => + onDataChanged( + { manufacturerReferenceNumber }, + FG_EDITOR_FORM + ) + } + label={i18n('Manufacturer Reference Number')} + data-test-id="create-fg-reference-number" + value={manufacturerReferenceNumber} + isRequired={true} + type="text" + isValid={ + genericFieldInfo.manufacturerReferenceNumber.isValid + } + errorText={ + genericFieldInfo.manufacturerReferenceNumber.errorText + } + /> + </GridItem> + </GridSection> + ); }; -const EntitlementPoolsTab = ({entitlementPoolsList, data, onDataChanged, isReadOnlyMode}) => { - const dualBoxFilterTitle = { - left: i18n('Available Entitlement Pools'), - right: i18n('Selected Entitlement Pools') - }; - if (entitlementPoolsList.length > 0) { - return ( - <DualListboxView - isReadOnlyMode={isReadOnlyMode} - filterTitle={dualBoxFilterTitle} - selectedValuesList={data.entitlementPoolsIds} - availableList={entitlementPoolsList} - onChange={ selectedValuesList => onDataChanged( { entitlementPoolsIds: selectedValuesList }, FG_EDITOR_FORM )}/> - ); - } else { - return ( - <p>{i18n('There are no available entitlement pools')}</p> - ); - } +const EntitlementPoolsTab = ({ + entitlementPoolsList, + data, + onDataChanged, + isReadOnlyMode +}) => { + const dualBoxFilterTitle = { + left: i18n('Available Entitlement Pools'), + right: i18n('Selected Entitlement Pools') + }; + if (entitlementPoolsList.length > 0) { + return ( + <DualListboxView + isReadOnlyMode={isReadOnlyMode} + filterTitle={dualBoxFilterTitle} + selectedValuesList={data.entitlementPoolsIds} + availableList={entitlementPoolsList} + onChange={selectedValuesList => + onDataChanged( + { entitlementPoolsIds: selectedValuesList }, + FG_EDITOR_FORM + ) + } + /> + ); + } else { + return <p>{i18n('There are no available entitlement pools')}</p>; + } }; -const LKGTab = ({licenseKeyGroupsList, data, onDataChanged, isReadOnlyMode}) => { - const dualBoxFilterTitle = { - left: i18n('Available License Key Groups'), - right: i18n('Selected License Key Groups') - }; - if (licenseKeyGroupsList.length > 0) { - return ( - <DualListboxView - isReadOnlyMode={isReadOnlyMode} - filterTitle={dualBoxFilterTitle} - selectedValuesList={data.licenseKeyGroupsIds} - availableList={licenseKeyGroupsList} - onChange={ selectedValuesList => onDataChanged( { licenseKeyGroupsIds: selectedValuesList }, FG_EDITOR_FORM )}/> - ); - } else { - return ( - <p>{i18n('There are no available license key groups')}</p> - ); - } +const LKGTab = ({ + licenseKeyGroupsList, + data, + onDataChanged, + isReadOnlyMode +}) => { + const dualBoxFilterTitle = { + left: i18n('Available License Key Groups'), + right: i18n('Selected License Key Groups') + }; + if (licenseKeyGroupsList.length > 0) { + return ( + <DualListboxView + isReadOnlyMode={isReadOnlyMode} + filterTitle={dualBoxFilterTitle} + selectedValuesList={data.licenseKeyGroupsIds} + availableList={licenseKeyGroupsList} + onChange={selectedValuesList => + onDataChanged( + { licenseKeyGroupsIds: selectedValuesList }, + FG_EDITOR_FORM + ) + } + /> + ); + } else { + return <p>{i18n('There are no available license key groups')}</p>; + } }; class FeatureGroupEditorView extends React.Component { + static propTypes = { + data: FeatureGroupsPropType, + previousData: FeatureGroupsPropType, + isReadOnlyMode: PropTypes.bool, + FGNames: PropTypes.object, + onSubmit: PropTypes.func, + onCancel: PropTypes.func, - static propTypes = { - data: FeatureGroupsPropType, - previousData: FeatureGroupsPropType, - isReadOnlyMode: PropTypes.bool, - FGNames: PropTypes.object, - - onSubmit: PropTypes.func, - onCancel: PropTypes.func, - - selectedTab: PropTypes.number, - onTabSelect: PropTypes.func, - - entitlementPoolsList: DualListboxView.propTypes.availableList, - licenseKeyGroupsList: DualListboxView.propTypes.availableList - }; - - - static defaultProps = { - data: {}, - selectedTab: FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL, - }; - - state = { - localEntitlementPoolsListFilter: '', - localLicenseKeyGroupsListFilter: '' - }; - - - render() { - let {selectedTab, onTabSelect, isReadOnlyMode, invalidTabs, data, onDataChanged, genericFieldInfo, entitlementPoolsList, licenseKeyGroupsList} = this.props; - return ( - <div> - { genericFieldInfo && <Form - ref='validationForm' - hasButtons={true} - onSubmit={ () => this.submit() } - isValid={this.props.isFormValid} - formReady={this.props.formReady} - onValidateForm={() => this.props.onValidateForm(FG_EDITOR_FORM) } - onReset={ () => this.props.onCancel() } - labledButtons={true} - isReadOnlyMode={isReadOnlyMode} - name='feature-group-validation-form' - className='license-model-form feature-group-form'> - <Tabs activeTab={onTabSelect ? selectedTab : undefined} onTabClick={onTabSelect} invalidTabs={invalidTabs} id='vlmFGValTabs' > - <Tab tabId={FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL} title={i18n('General')} > - <fieldset disabled={isReadOnlyMode}> - <GeneralTab data={data} onDataChanged={onDataChanged} genericFieldInfo={genericFieldInfo} validateName={(value)=> this.validateName(value)}/> - </fieldset> - </Tab> - <Tab - tabId={FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.ENTITLEMENT_POOLS} - title={i18n('Entitlement Pools')} > - <fieldset disabled={isReadOnlyMode}> - <EntitlementPoolsTab isReadOnlyMode={isReadOnlyMode} data={data} onDataChanged={onDataChanged} entitlementPoolsList={entitlementPoolsList} /> - </fieldset> - </Tab> - <Tab - tabId={FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.LICENSE_KEY_GROUPS} - title={i18n('License Key Groups')} > - <fieldset disabled={isReadOnlyMode}> - <LKGTab isReadOnlyMode={isReadOnlyMode} data={data} onDataChanged={onDataChanged} licenseKeyGroupsList={licenseKeyGroupsList} /> - </fieldset> - </Tab> - </Tabs> - - </Form> } - </div> - ); - } - - submit() { - const {data: featureGroup, previousData: previousFeatureGroup} = this.props; - this.props.onSubmit(previousFeatureGroup, featureGroup); - } - - validateName(value) { - const {data: {id}, FGNames} = this.props; - const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: FGNames}); - - return !isExists ? {isValid: true, errorText: ''} : - {isValid: false, errorText: i18n('Feature group by the name \'' + value + '\' already exists. Feature group name must be unique')}; - } -} + selectedTab: PropTypes.number, + onTabSelect: PropTypes.func, + + entitlementPoolsList: DualListboxView.propTypes.availableList, + licenseKeyGroupsList: DualListboxView.propTypes.availableList + }; + + static defaultProps = { + data: {}, + selectedTab: + FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL + }; + + state = { + localEntitlementPoolsListFilter: '', + localLicenseKeyGroupsListFilter: '' + }; + render() { + let { + selectedTab, + onTabSelect, + isReadOnlyMode, + invalidTabs, + data, + onDataChanged, + genericFieldInfo, + entitlementPoolsList, + licenseKeyGroupsList + } = this.props; + return ( + <div> + {genericFieldInfo && ( + <Form + ref="validationForm" + hasButtons={true} + onSubmit={() => this.submit()} + isValid={this.props.isFormValid} + formReady={this.props.formReady} + onValidateForm={() => + this.props.onValidateForm(FG_EDITOR_FORM) + } + onReset={() => this.props.onCancel()} + labledButtons={true} + isReadOnlyMode={isReadOnlyMode} + name="feature-group-validation-form" + className="license-model-form feature-group-form"> + <Tabs + activeTab={onTabSelect ? selectedTab : undefined} + onTabClick={onTabSelect} + invalidTabs={invalidTabs} + id="vlmFGValTabs"> + <Tab + tabId={ + FeatureGroupStateConstants + .SELECTED_FEATURE_GROUP_TAB.GENERAL + } + title={i18n('General')}> + <fieldset disabled={isReadOnlyMode}> + <GeneralTab + data={data} + onDataChanged={onDataChanged} + genericFieldInfo={genericFieldInfo} + validateName={value => + this.validateName(value) + } + /> + </fieldset> + </Tab> + <Tab + tabId={ + FeatureGroupStateConstants + .SELECTED_FEATURE_GROUP_TAB + .ENTITLEMENT_POOLS + } + title={i18n('Entitlement Pools')}> + <fieldset disabled={isReadOnlyMode}> + <EntitlementPoolsTab + isReadOnlyMode={isReadOnlyMode} + data={data} + onDataChanged={onDataChanged} + entitlementPoolsList={ + entitlementPoolsList + } + /> + </fieldset> + </Tab> + <Tab + tabId={ + FeatureGroupStateConstants + .SELECTED_FEATURE_GROUP_TAB + .LICENSE_KEY_GROUPS + } + title={i18n('License Key Groups')}> + <fieldset disabled={isReadOnlyMode}> + <LKGTab + isReadOnlyMode={isReadOnlyMode} + data={data} + onDataChanged={onDataChanged} + licenseKeyGroupsList={ + licenseKeyGroupsList + } + /> + </fieldset> + </Tab> + </Tabs> + </Form> + )} + </div> + ); + } + + submit() { + const { + data: featureGroup, + previousData: previousFeatureGroup + } = this.props; + this.props.onSubmit(previousFeatureGroup, featureGroup); + } + + validateName(value) { + const { data: { id }, FGNames } = this.props; + const isExists = Validator.isItemNameAlreadyExistsInList({ + itemId: id, + itemName: value, + list: FGNames + }); + + return !isExists + ? { isValid: true, errorText: '' } + : { + isValid: false, + errorText: i18n( + "Feature group by the name '" + + value + + "' already exists. Feature group name must be unique" + ) + }; + } +} export default FeatureGroupEditorView; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditor.js index 26925487db..55e2710231 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditor.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditor.js @@ -13,48 +13,62 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {connect} from 'react-redux'; -import FeatureGroupsActionHelper from './FeatureGroupsActionHelper.js'; -import FeatureGroupListEditorView, {generateConfirmationMsg} from './FeatureGroupListEditorView.jsx'; +import { connect } from 'react-redux'; +import FeatureGroupsActionHelper from './FeatureGroupsActionHelper.js'; +import FeatureGroupListEditorView, { + generateConfirmationMsg +} from './FeatureGroupListEditorView.jsx'; 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'; -export const mapStateToProps = ({licenseModel: {featureGroup, licenseModelEditor}}) => { - - const {featureGroupEditor: {data}, featureGroupsList} = featureGroup; - const {vendorName, version} = licenseModelEditor.data; - - return { - vendorName, - version, - featureGroupsModal: { - show: Boolean(data), - editMode: Boolean(data && data.id) - }, - featureGroupsList - }; +export const mapStateToProps = ({ + licenseModel: { featureGroup, licenseModelEditor } +}) => { + const { featureGroupEditor: { data }, featureGroupsList } = featureGroup; + const { vendorName, version } = licenseModelEditor.data; + return { + vendorName, + version, + featureGroupsModal: { + show: Boolean(data), + editMode: Boolean(data && data.id) + }, + featureGroupsList + }; }; - -const mapActionsToProps = (dispatch, {licenseModelId}) => { - return { - onDeleteFeatureGroupClick: (featureGroup, version) => dispatch({ - type: globalMoadlActions.GLOBAL_MODAL_WARNING, - data:{ - msg: generateConfirmationMsg(featureGroup), - confirmationButtonText: i18n('Delete'), - title: i18n('Delete'), - onConfirmed: ()=>FeatureGroupsActionHelper.deleteFeatureGroup(dispatch, {featureGroupId: featureGroup.id, licenseModelId, version}) - } - }), - onAddFeatureGroupClick: (actualVersion) => FeatureGroupsActionHelper.openFeatureGroupsEditor(dispatch, {licenseModelId, version: actualVersion}), - onEditFeatureGroupClick: (featureGroup, actualVersion) => FeatureGroupsActionHelper.openFeatureGroupsEditor(dispatch, { - featureGroup, - licenseModelId, - version: actualVersion - }) - }; +const mapActionsToProps = (dispatch, { licenseModelId }) => { + return { + onDeleteFeatureGroupClick: (featureGroup, version) => + dispatch({ + type: globalMoadlActions.GLOBAL_MODAL_WARNING, + data: { + msg: generateConfirmationMsg(featureGroup), + confirmationButtonText: i18n('Delete'), + title: i18n('Delete'), + onConfirmed: () => + FeatureGroupsActionHelper.deleteFeatureGroup(dispatch, { + featureGroupId: featureGroup.id, + licenseModelId, + version + }) + } + }), + onAddFeatureGroupClick: actualVersion => + FeatureGroupsActionHelper.openFeatureGroupsEditor(dispatch, { + licenseModelId, + version: actualVersion + }), + onEditFeatureGroupClick: (featureGroup, actualVersion) => + FeatureGroupsActionHelper.openFeatureGroupsEditor(dispatch, { + featureGroup, + licenseModelId, + version: actualVersion + }) + }; }; -export default connect(mapStateToProps, mapActionsToProps)(FeatureGroupListEditorView); +export default connect(mapStateToProps, mapActionsToProps)( + FeatureGroupListEditorView +); diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditorView.jsx index f59e000c21..91f77b3111 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditorView.jsx @@ -24,147 +24,184 @@ import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.js import FeatureGroupEditor from './FeatureGroupEditor.js'; class FeatureGroupListEditorView extends React.Component { - static propTypes = { - vendorName: PropTypes.string, - licenseModelId: PropTypes.string.isRequired, - featureGroupsModal: PropTypes.shape({ - show: PropTypes.bool, - editMode: PropTypes.bool - }), - isReadOnlyMode: PropTypes.bool.isRequired, - onAddFeatureGroupClick: PropTypes.func, - onEditFeatureGroupClick: PropTypes.func, - onDeleteFeatureGroupClick: PropTypes.func, - onCancelFeatureGroupsEditor: PropTypes.func, - featureGroupsList: PropTypes.array - }; - - static defaultProps = { - featureGroupsList: [], - featureGroupsModal: { - show: false, - editMode: false - } - }; - - state = { - localFilter: '' - }; - - render() { - let {licenseModelId, featureGroupsModal, isReadOnlyMode, onAddFeatureGroupClick, version} = this.props; - const {localFilter} = this.state; - return ( - <div className='license-model-list-editor feature-groups-list-editor'> - <ListEditorView - title={i18n('Feature Groups')} - plusButtonTitle={i18n('Add Feature Group')} - filterValue={localFilter} - onFilter={value => this.setState({localFilter: value})} - onAdd={() => onAddFeatureGroupClick(version)} - isReadOnlyMode={isReadOnlyMode}> - {this.filterList().map(listItem => this.renderFeatureGroupListItem(listItem, isReadOnlyMode, version))} - </ListEditorView> - {featureGroupsModal.show && <Modal show={featureGroupsModal.show} bsSize='large' animation={true} - className='onborading-modal license-model-modal feature-group-modal'> - <Modal.Header> - <Modal.Title>{`${featureGroupsModal.editMode ? i18n('Edit Feature Group') : i18n('Create New Feature Group')}`}</Modal.Title> - </Modal.Header> - <Modal.Body> - <FeatureGroupEditor - version={version} - licenseModelId={licenseModelId} - isReadOnlyMode={isReadOnlyMode}/> - </Modal.Body> - </Modal> - } - - </div> - ); - } - - - renderFeatureGroupListItem(listItem, isReadOnlyMode, version) { - let {name, description, manufacturerReferenceNumber, entitlementPoolsIds = [], licenseKeyGroupsIds = []} = listItem; - return ( - <ListEditorItemView - key={listItem.id} - onDelete={() => this.deleteFeatureGroupItem(listItem, version)} - onSelect={() => this.editFeatureGroupItem(listItem, version)} - 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 smaller-field'> - <div className='feature-groups-count-field'> - <div className='title'>{i18n('EP')}</div> - <div className='feature-groups-count-ep'>{entitlementPoolsIds.length || 0}</div> - </div> - </div> - <div className='list-editor-item-view-field smaller-field'> - <div className='feature-groups-count-field'> - <div className='title'>{i18n('LKG')}</div> - <div className='feature-groups-count-lk'>{licenseKeyGroupsIds.length || 0}</div> - </div> - </div> - - <div className='list-editor-item-view-field'> - <div className='feature-groups-count-field'> - <div className='title title-no-wrap'>{i18n('Manufacturer Reference Number')}</div> - <div className='feature-groups-mrn-ep'>{manufacturerReferenceNumber}</div> - </div> - </div> - - <div className='list-editor-item-view-field'> - <div className='title'>{i18n('Description')}</div> - <div className='text description'>{description}</div> - </div> - - - - </ListEditorItemView> - ); - } - - filterList() { - let {featureGroupsList} = this.props; - let {localFilter} = this.state; - if (localFilter.trim()) { - const filter = new RegExp(escape(localFilter), 'i'); - return featureGroupsList.filter(({name = '', description = ''}) => { - return escape(name).match(filter) || escape(description).match(filter); - }); - } - else { - return featureGroupsList; - } - } - - editFeatureGroupItem(featureGroup, version) { - this.props.onEditFeatureGroupClick(featureGroup, version); - } - - deleteFeatureGroupItem(featureGroup, version) { - this.props.onDeleteFeatureGroupClick(featureGroup, version); - } + static propTypes = { + vendorName: PropTypes.string, + licenseModelId: PropTypes.string.isRequired, + featureGroupsModal: PropTypes.shape({ + show: PropTypes.bool, + editMode: PropTypes.bool + }), + isReadOnlyMode: PropTypes.bool.isRequired, + onAddFeatureGroupClick: PropTypes.func, + onEditFeatureGroupClick: PropTypes.func, + onDeleteFeatureGroupClick: PropTypes.func, + onCancelFeatureGroupsEditor: PropTypes.func, + featureGroupsList: PropTypes.array + }; + + static defaultProps = { + featureGroupsList: [], + featureGroupsModal: { + show: false, + editMode: false + } + }; + + state = { + localFilter: '' + }; + + render() { + let { + licenseModelId, + featureGroupsModal, + isReadOnlyMode, + onAddFeatureGroupClick, + version + } = this.props; + const { localFilter } = this.state; + return ( + <div className="license-model-list-editor feature-groups-list-editor"> + <ListEditorView + title={i18n('Feature Groups')} + plusButtonTitle={i18n('Add Feature Group')} + filterValue={localFilter} + onFilter={value => this.setState({ localFilter: value })} + onAdd={() => onAddFeatureGroupClick(version)} + isReadOnlyMode={isReadOnlyMode}> + {this.filterList().map(listItem => + this.renderFeatureGroupListItem( + listItem, + isReadOnlyMode, + version + ) + )} + </ListEditorView> + {featureGroupsModal.show && ( + <Modal + show={featureGroupsModal.show} + bsSize="large" + animation={true} + className="onborading-modal license-model-modal feature-group-modal"> + <Modal.Header> + <Modal.Title>{`${ + featureGroupsModal.editMode + ? i18n('Edit Feature Group') + : i18n('Create New Feature Group') + }`}</Modal.Title> + </Modal.Header> + <Modal.Body> + <FeatureGroupEditor + version={version} + licenseModelId={licenseModelId} + isReadOnlyMode={isReadOnlyMode} + /> + </Modal.Body> + </Modal> + )} + </div> + ); + } + + renderFeatureGroupListItem(listItem, isReadOnlyMode, version) { + let { + name, + description, + manufacturerReferenceNumber, + entitlementPoolsIds = [], + licenseKeyGroupsIds = [] + } = listItem; + return ( + <ListEditorItemView + key={listItem.id} + onDelete={() => this.deleteFeatureGroupItem(listItem, version)} + onSelect={() => this.editFeatureGroupItem(listItem, version)} + 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 smaller-field"> + <div className="feature-groups-count-field"> + <div className="title">{i18n('EP')}</div> + <div className="feature-groups-count-ep"> + {entitlementPoolsIds.length || 0} + </div> + </div> + </div> + <div className="list-editor-item-view-field smaller-field"> + <div className="feature-groups-count-field"> + <div className="title">{i18n('LKG')}</div> + <div className="feature-groups-count-lk"> + {licenseKeyGroupsIds.length || 0} + </div> + </div> + </div> + + <div className="list-editor-item-view-field"> + <div className="feature-groups-count-field"> + <div className="title title-no-wrap"> + {i18n('Manufacturer Reference Number')} + </div> + <div className="feature-groups-mrn-ep"> + {manufacturerReferenceNumber} + </div> + </div> + </div> + + <div className="list-editor-item-view-field"> + <div className="title">{i18n('Description')}</div> + <div className="text description">{description}</div> + </div> + </ListEditorItemView> + ); + } + + filterList() { + let { featureGroupsList } = this.props; + let { localFilter } = this.state; + if (localFilter.trim()) { + const filter = new RegExp(escape(localFilter), 'i'); + return featureGroupsList.filter( + ({ name = '', description = '' }) => { + return ( + escape(name).match(filter) || + escape(description).match(filter) + ); + } + ); + } else { + return featureGroupsList; + } + } + + editFeatureGroupItem(featureGroup, version) { + this.props.onEditFeatureGroupClick(featureGroup, version); + } + + deleteFeatureGroupItem(featureGroup, version) { + this.props.onDeleteFeatureGroupClick(featureGroup, version); + } } export default FeatureGroupListEditorView; export function generateConfirmationMsg(featureGroupToDelete) { - let name = featureGroupToDelete ? featureGroupToDelete.name : ''; - let msg = i18n('Are you sure you want to delete "{name}"?', {name: name}); - let subMsg = featureGroupToDelete.referencingLicenseAgreements - && featureGroupToDelete.referencingLicenseAgreements.length > 0 ? - i18n('This feature group is associated with one ore more license agreements') : - ''; - return ( - <div> - <p>{msg}</p> - <p>{subMsg}</p> - </div> - ); + let name = featureGroupToDelete ? featureGroupToDelete.name : ''; + let msg = i18n('Are you sure you want to delete "{name}"?', { name: name }); + let subMsg = + featureGroupToDelete.referencingLicenseAgreements && + featureGroupToDelete.referencingLicenseAgreements.length > 0 + ? i18n( + 'This feature group is associated with one ore more license agreements' + ) + : ''; + return ( + <div> + <p>{msg}</p> + <p>{subMsg}</p> + </div> + ); } diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsActionHelper.js index 9e7fe8e0dd..22e21a613a 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsActionHelper.js @@ -15,132 +15,202 @@ */ import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js'; import Configuration from 'sdc-app/config/Configuration.js'; -import {actionTypes as featureGroupsActionConstants} from './FeatureGroupsConstants.js'; +import { actionTypes as featureGroupsActionConstants } from './FeatureGroupsConstants.js'; import EntitlementPoolsActionHelper from 'sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js'; import LicenseKeyGroupsActionHelper from 'sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.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}/feature-groups`; + const restPrefix = Configuration.get('restPrefix'); + const { id: versionId } = version; + return `${restPrefix}/v1.0/vendor-license-models/${licenseModelId}/versions/${versionId}/feature-groups`; } function fetchFeatureGroup(licenseModelId, featureGroupId, version) { - return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}/${featureGroupId}`); + return RestAPIUtil.fetch( + `${baseUrl(licenseModelId, version)}/${featureGroupId}` + ); } function fetchFeatureGroupsList(licenseModelId, version) { - return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}`); + return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}`); } function deleteFeatureGroup(licenseModelId, featureGroupId, version) { - return RestAPIUtil.destroy(`${baseUrl(licenseModelId, version)}/${featureGroupId}`); + return RestAPIUtil.destroy( + `${baseUrl(licenseModelId, version)}/${featureGroupId}` + ); } function addFeatureGroup(licenseModelId, featureGroup, version) { - return RestAPIUtil.post(baseUrl(licenseModelId, version), { - name: featureGroup.name, - description: featureGroup.description, - partNumber: featureGroup.partNumber, - manufacturerReferenceNumber: featureGroup.manufacturerReferenceNumber, - addedLicenseKeyGroupsIds: featureGroup.licenseKeyGroupsIds, - addedEntitlementPoolsIds: featureGroup.entitlementPoolsIds - }); + return RestAPIUtil.post(baseUrl(licenseModelId, version), { + name: featureGroup.name, + description: featureGroup.description, + partNumber: featureGroup.partNumber, + manufacturerReferenceNumber: featureGroup.manufacturerReferenceNumber, + addedLicenseKeyGroupsIds: featureGroup.licenseKeyGroupsIds, + addedEntitlementPoolsIds: featureGroup.entitlementPoolsIds + }); } -function updateFeatureGroup(licenseModelId, previousFeatureGroup, featureGroup, version) { - - const {licenseKeyGroupsIds = []} = featureGroup; - const {licenseKeyGroupsIds: prevLicenseKeyGroupsIds = []} = previousFeatureGroup; - const {entitlementPoolsIds = []} = featureGroup; - const {entitlementPoolsIds: prevEntitlementPoolsIds = []} = previousFeatureGroup; - return RestAPIUtil.put(`${baseUrl(licenseModelId, version)}/${featureGroup.id}`, { - name: featureGroup.name, - description: featureGroup.description, - partNumber: featureGroup.partNumber, - manufacturerReferenceNumber: featureGroup.manufacturerReferenceNumber, - addedLicenseKeyGroupsIds: licenseKeyGroupsIds.filter(licenseKeyGroupId => prevLicenseKeyGroupsIds.indexOf(licenseKeyGroupId) === -1), - removedLicenseKeyGroupsIds: prevLicenseKeyGroupsIds.filter(prevLicenseKeyGroupId => licenseKeyGroupsIds.indexOf(prevLicenseKeyGroupId) === -1), - addedEntitlementPoolsIds: entitlementPoolsIds.filter(entitlementPoolId => prevEntitlementPoolsIds.indexOf(entitlementPoolId) === -1), - removedEntitlementPoolsIds: prevEntitlementPoolsIds.filter(prevEntitlementPoolId => entitlementPoolsIds.indexOf(prevEntitlementPoolId) === -1) - - }); +function updateFeatureGroup( + licenseModelId, + previousFeatureGroup, + featureGroup, + version +) { + const { licenseKeyGroupsIds = [] } = featureGroup; + const { + licenseKeyGroupsIds: prevLicenseKeyGroupsIds = [] + } = previousFeatureGroup; + const { entitlementPoolsIds = [] } = featureGroup; + const { + entitlementPoolsIds: prevEntitlementPoolsIds = [] + } = previousFeatureGroup; + return RestAPIUtil.put( + `${baseUrl(licenseModelId, version)}/${featureGroup.id}`, + { + name: featureGroup.name, + description: featureGroup.description, + partNumber: featureGroup.partNumber, + manufacturerReferenceNumber: + featureGroup.manufacturerReferenceNumber, + addedLicenseKeyGroupsIds: licenseKeyGroupsIds.filter( + licenseKeyGroupId => + prevLicenseKeyGroupsIds.indexOf(licenseKeyGroupId) === -1 + ), + removedLicenseKeyGroupsIds: prevLicenseKeyGroupsIds.filter( + prevLicenseKeyGroupId => + licenseKeyGroupsIds.indexOf(prevLicenseKeyGroupId) === -1 + ), + addedEntitlementPoolsIds: entitlementPoolsIds.filter( + entitlementPoolId => + prevEntitlementPoolsIds.indexOf(entitlementPoolId) === -1 + ), + removedEntitlementPoolsIds: prevEntitlementPoolsIds.filter( + prevEntitlementPoolId => + entitlementPoolsIds.indexOf(prevEntitlementPoolId) === -1 + ) + } + ); } export default { - fetchFeatureGroup(dispatch, {licenseModelId, featureGroupId, version}) { - return fetchFeatureGroup(licenseModelId, featureGroupId, version); - }, + fetchFeatureGroup(dispatch, { licenseModelId, featureGroupId, version }) { + return fetchFeatureGroup(licenseModelId, featureGroupId, version); + }, - fetchFeatureGroupsList(dispatch, {licenseModelId, version}) { - return fetchFeatureGroupsList(licenseModelId, version).then(response => dispatch({ - type: featureGroupsActionConstants.FEATURE_GROUPS_LIST_LOADED, - response - })); - }, + fetchFeatureGroupsList(dispatch, { licenseModelId, version }) { + return fetchFeatureGroupsList(licenseModelId, version).then(response => + dispatch({ + type: featureGroupsActionConstants.FEATURE_GROUPS_LIST_LOADED, + response + }) + ); + }, - deleteFeatureGroup(dispatch, {licenseModelId, featureGroupId, version}) { - return deleteFeatureGroup(licenseModelId, featureGroupId, version).then(() => { - dispatch({ - type: featureGroupsActionConstants.DELETE_FEATURE_GROUPS, - featureGroupId - }); - return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id}); - }); - }, + deleteFeatureGroup(dispatch, { licenseModelId, featureGroupId, version }) { + return deleteFeatureGroup(licenseModelId, featureGroupId, version).then( + () => { + dispatch({ + type: featureGroupsActionConstants.DELETE_FEATURE_GROUPS, + featureGroupId + }); + return ItemsHelper.checkItemStatus(dispatch, { + itemId: licenseModelId, + versionId: version.id + }); + } + ); + }, - saveFeatureGroup(dispatch, {licenseModelId, previousFeatureGroup, featureGroup, version}) { - if (previousFeatureGroup) { - return updateFeatureGroup(licenseModelId, previousFeatureGroup, featureGroup, version).then(() =>{ - dispatch({ - type: featureGroupsActionConstants.EDIT_FEATURE_GROUPS, - featureGroup - }); - EntitlementPoolsActionHelper.fetchEntitlementPoolsList(dispatch, {licenseModelId, version}); - LicenseKeyGroupsActionHelper.fetchLicenseKeyGroupsList(dispatch, {licenseModelId, version}); - return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id}); - }); - } - else { - return addFeatureGroup(licenseModelId, featureGroup, version).then(response => { - dispatch({ - type: featureGroupsActionConstants.ADD_FEATURE_GROUPS, - featureGroup: { - ...featureGroup, - id: response.value, - referencingLicenseAgreements: [] - } - }); - EntitlementPoolsActionHelper.fetchEntitlementPoolsList(dispatch, {licenseModelId, version}); - LicenseKeyGroupsActionHelper.fetchLicenseKeyGroupsList(dispatch, {licenseModelId, version}); - return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id}); - }); - } - }, + saveFeatureGroup( + dispatch, + { licenseModelId, previousFeatureGroup, featureGroup, version } + ) { + if (previousFeatureGroup) { + return updateFeatureGroup( + licenseModelId, + previousFeatureGroup, + featureGroup, + version + ).then(() => { + dispatch({ + type: featureGroupsActionConstants.EDIT_FEATURE_GROUPS, + featureGroup + }); + EntitlementPoolsActionHelper.fetchEntitlementPoolsList( + dispatch, + { licenseModelId, version } + ); + LicenseKeyGroupsActionHelper.fetchLicenseKeyGroupsList( + dispatch, + { licenseModelId, version } + ); + return ItemsHelper.checkItemStatus(dispatch, { + itemId: licenseModelId, + versionId: version.id + }); + }); + } else { + return addFeatureGroup(licenseModelId, featureGroup, version).then( + response => { + dispatch({ + type: featureGroupsActionConstants.ADD_FEATURE_GROUPS, + featureGroup: { + ...featureGroup, + id: response.value, + referencingLicenseAgreements: [] + } + }); + EntitlementPoolsActionHelper.fetchEntitlementPoolsList( + dispatch, + { licenseModelId, version } + ); + LicenseKeyGroupsActionHelper.fetchLicenseKeyGroupsList( + dispatch, + { licenseModelId, version } + ); + return ItemsHelper.checkItemStatus(dispatch, { + itemId: licenseModelId, + versionId: version.id + }); + } + ); + } + }, - selectEntitlementPoolsEditorTab(dispatch, {tab}) { - dispatch({ - type: featureGroupsActionConstants.featureGroupsEditor.SELECT_TAB, - tab - }); - }, + selectEntitlementPoolsEditorTab(dispatch, { tab }) { + dispatch({ + type: featureGroupsActionConstants.featureGroupsEditor.SELECT_TAB, + tab + }); + }, - openFeatureGroupsEditor(dispatch, {featureGroup, licenseModelId, version}) { - return Promise.all([ - EntitlementPoolsActionHelper.fetchEntitlementPoolsList(dispatch, {licenseModelId, version}), - LicenseKeyGroupsActionHelper.fetchLicenseKeyGroupsList(dispatch, {licenseModelId, version}) - ]).then(() => { - dispatch({ - type: featureGroupsActionConstants.featureGroupsEditor.OPEN, - featureGroup - }); - }); - }, + openFeatureGroupsEditor( + dispatch, + { featureGroup, licenseModelId, version } + ) { + return Promise.all([ + EntitlementPoolsActionHelper.fetchEntitlementPoolsList(dispatch, { + licenseModelId, + version + }), + LicenseKeyGroupsActionHelper.fetchLicenseKeyGroupsList(dispatch, { + licenseModelId, + version + }) + ]).then(() => { + dispatch({ + type: featureGroupsActionConstants.featureGroupsEditor.OPEN, + featureGroup + }); + }); + }, - closeFeatureGroupsEditor(dispatch) { - dispatch({ - type: featureGroupsActionConstants.featureGroupsEditor.CLOSE - }); - } + closeFeatureGroupsEditor(dispatch) { + dispatch({ + type: featureGroupsActionConstants.featureGroupsEditor.CLOSE + }); + } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsConstants.js index 4c5a94f239..feeb5b6c39 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsConstants.js @@ -16,27 +16,27 @@ import keyMirror from 'nfvo-utils/KeyMirror.js'; export const actionTypes = keyMirror({ - FEATURE_GROUPS_LIST_LOADED: null, - ADD_FEATURE_GROUPS: null, - EDIT_FEATURE_GROUPS: null, - DELETE_FEATURE_GROUPS: null, + FEATURE_GROUPS_LIST_LOADED: null, + ADD_FEATURE_GROUPS: null, + EDIT_FEATURE_GROUPS: null, + DELETE_FEATURE_GROUPS: null, - ENTITLEMENT_POOLS_LIST_LOADED: null, + ENTITLEMENT_POOLS_LIST_LOADED: null, - featureGroupsEditor: { - OPEN: null, - CLOSE: null, - DATA_CHANGED: null, - SELECT_TAB: null - } + featureGroupsEditor: { + OPEN: null, + CLOSE: null, + DATA_CHANGED: null, + SELECT_TAB: null + } }); export const FG_EDITOR_FORM = 'FG_EDITOR_FORM'; export const state = keyMirror({ - SELECTED_FEATURE_GROUP_TAB: { - GENERAL: 1, - ENTITLEMENT_POOLS: 2, - LICENSE_KEY_GROUPS: 3 - } + SELECTED_FEATURE_GROUP_TAB: { + GENERAL: 1, + ENTITLEMENT_POOLS: 2, + LICENSE_KEY_GROUPS: 3 + } }); diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsEditorReducer.js index 5688fc0f16..aa1081ed20 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsEditorReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsEditorReducer.js @@ -14,65 +14,82 @@ * permissions and limitations under the License. */ -import {actionTypes, FG_EDITOR_FORM, state as FeatureGroupStateConstants} from './FeatureGroupsConstants.js'; - - +import { + actionTypes, + FG_EDITOR_FORM, + state as FeatureGroupStateConstants +} from './FeatureGroupsConstants.js'; export default (state = {}, action) => { - switch (action.type) { - case actionTypes.featureGroupsEditor.OPEN: - return { - ...state, - data: action.featureGroup || {}, - formReady: null, - formName: FG_EDITOR_FORM, - genericFieldInfo: { - 'description': { - isValid: true, - errorText: '', - validations: [{type: 'maxLength', data: 1000}], - tabId: FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL - }, - 'partNumber': { - isValid: true, - errorText: '', - validations: [{type: 'required', data: true}], - tabId: FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL - }, - 'manufacturerReferenceNumber': { - isValid: true, - errorText: '', - validations: [{type: 'required', data: true}, {type: 'maxLength', data: 100}], - tabId: FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL - }, - 'name': { - isValid: true, - errorText: '', - validations: [{type: 'required', data: true}, {type: 'maxLength', data: 120}], - tabId: FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL - } - } - }; - case actionTypes.featureGroupsEditor.CLOSE: - return {}; - case actionTypes.featureGroupsEditor.SELECT_TAB: - return { - ...state, - selectedTab: action.tab - }; - - case actionTypes.featureGroupsEditor.SELECTED_ENTITLEMENT_POOLS_BUTTONTAB: - return { - ...state, - selectedEntitlementPoolsButtonTab: action.buttonTab - }; - case actionTypes.featureGroupsEditor.SELECTED_LICENSE_KEY_GROUPS_BUTTONTAB: - return { - ...state, - selectedLicenseKeyGroupsButtonTab: action.buttonTab - }; - default: - return state; - } + switch (action.type) { + case actionTypes.featureGroupsEditor.OPEN: + return { + ...state, + data: action.featureGroup || {}, + formReady: null, + formName: FG_EDITOR_FORM, + genericFieldInfo: { + description: { + isValid: true, + errorText: '', + validations: [{ type: 'maxLength', data: 1000 }], + tabId: + FeatureGroupStateConstants + .SELECTED_FEATURE_GROUP_TAB.GENERAL + }, + partNumber: { + isValid: true, + errorText: '', + validations: [{ type: 'required', data: true }], + tabId: + FeatureGroupStateConstants + .SELECTED_FEATURE_GROUP_TAB.GENERAL + }, + manufacturerReferenceNumber: { + isValid: true, + errorText: '', + validations: [ + { type: 'required', data: true }, + { type: 'maxLength', data: 100 } + ], + tabId: + FeatureGroupStateConstants + .SELECTED_FEATURE_GROUP_TAB.GENERAL + }, + name: { + isValid: true, + errorText: '', + validations: [ + { type: 'required', data: true }, + { type: 'maxLength', data: 120 } + ], + tabId: + FeatureGroupStateConstants + .SELECTED_FEATURE_GROUP_TAB.GENERAL + } + } + }; + case actionTypes.featureGroupsEditor.CLOSE: + return {}; + case actionTypes.featureGroupsEditor.SELECT_TAB: + return { + ...state, + selectedTab: action.tab + }; + case actionTypes.featureGroupsEditor + .SELECTED_ENTITLEMENT_POOLS_BUTTONTAB: + return { + ...state, + selectedEntitlementPoolsButtonTab: action.buttonTab + }; + case actionTypes.featureGroupsEditor + .SELECTED_LICENSE_KEY_GROUPS_BUTTONTAB: + return { + ...state, + selectedLicenseKeyGroupsButtonTab: action.buttonTab + }; + default: + return state; + } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsListReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsListReducer.js index 3b5f1c55e4..072bba403d 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsListReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsListReducer.js @@ -13,19 +13,27 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes} from './FeatureGroupsConstants.js'; +import { actionTypes } from './FeatureGroupsConstants.js'; export default (state = [], action) => { - switch (action.type) { - case actionTypes.FEATURE_GROUPS_LIST_LOADED: - return [...action.response.results]; - case actionTypes.ADD_FEATURE_GROUPS: - return [...state, action.featureGroup]; - case actionTypes.EDIT_FEATURE_GROUPS: - const indexForEdit = state.findIndex(featureGroup => featureGroup.id === action.featureGroup.id); - return [...state.slice(0, indexForEdit), action.featureGroup, ...state.slice(indexForEdit + 1)]; - case actionTypes.DELETE_FEATURE_GROUPS: - return state.filter(featureGroup => featureGroup.id !== action.featureGroupId); - default: - return state; - } + switch (action.type) { + case actionTypes.FEATURE_GROUPS_LIST_LOADED: + return [...action.response.results]; + case actionTypes.ADD_FEATURE_GROUPS: + return [...state, action.featureGroup]; + case actionTypes.EDIT_FEATURE_GROUPS: + const indexForEdit = state.findIndex( + featureGroup => featureGroup.id === action.featureGroup.id + ); + return [ + ...state.slice(0, indexForEdit), + action.featureGroup, + ...state.slice(indexForEdit + 1) + ]; + case actionTypes.DELETE_FEATURE_GROUPS: + return state.filter( + featureGroup => featureGroup.id !== action.featureGroupId + ); + default: + return state; + } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementActionHelper.js index b1b4ee8fdd..e07777f69e 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementActionHelper.js @@ -15,109 +15,181 @@ */ import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js'; import Configuration from 'sdc-app/config/Configuration.js'; -import {actionTypes as licenseAgreementActionTypes} from './LicenseAgreementConstants.js'; +import { actionTypes as licenseAgreementActionTypes } from './LicenseAgreementConstants.js'; import FeatureGroupsActionHelper from 'sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsActionHelper.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-agreements`; + const restPrefix = Configuration.get('restPrefix'); + const { id: versionId } = version; + return `${restPrefix}/v1.0/vendor-license-models/${licenseModelId}/versions/${versionId}/license-agreements`; } function fetchLicenseAgreementList(licenseModelId, version) { - return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}`); + return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}`); } function fetchLicenseAgreement(licenseModelId, licenseAgreementId, version) { - return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}/${licenseAgreementId}`); + return RestAPIUtil.fetch( + `${baseUrl(licenseModelId, version)}/${licenseAgreementId}` + ); } function postLicenseAgreement(licenseModelId, licenseAgreement, version) { - return RestAPIUtil.post(baseUrl(licenseModelId, version), { - name: licenseAgreement.name, - description: licenseAgreement.description, - licenseTerm: licenseAgreement.licenseTerm, - requirementsAndConstrains: licenseAgreement.requirementsAndConstrains, - addedFeatureGroupsIds: licenseAgreement.featureGroupsIds - }); + return RestAPIUtil.post(baseUrl(licenseModelId, version), { + name: licenseAgreement.name, + description: licenseAgreement.description, + licenseTerm: licenseAgreement.licenseTerm, + requirementsAndConstrains: licenseAgreement.requirementsAndConstrains, + addedFeatureGroupsIds: licenseAgreement.featureGroupsIds + }); } -function putLicenseAgreement(licenseModelId, previousLicenseAgreement, licenseAgreement, version) { - const {featureGroupsIds = []} = licenseAgreement; - const {featureGroupsIds: prevFeatureGroupsIds = []} = previousLicenseAgreement; - return RestAPIUtil.put(`${baseUrl(licenseModelId, version)}/${licenseAgreement.id}`, { - name: licenseAgreement.name, - description: licenseAgreement.description, - licenseTerm: licenseAgreement.licenseTerm, - requirementsAndConstrains: licenseAgreement.requirementsAndConstrains, - addedFeatureGroupsIds: featureGroupsIds.filter(featureGroupId => prevFeatureGroupsIds.indexOf(featureGroupId) === -1), - removedFeatureGroupsIds: prevFeatureGroupsIds.filter(prevFeatureGroupsId => featureGroupsIds.indexOf(prevFeatureGroupsId) === -1) - }); +function putLicenseAgreement( + licenseModelId, + previousLicenseAgreement, + licenseAgreement, + version +) { + const { featureGroupsIds = [] } = licenseAgreement; + const { + featureGroupsIds: prevFeatureGroupsIds = [] + } = previousLicenseAgreement; + return RestAPIUtil.put( + `${baseUrl(licenseModelId, version)}/${licenseAgreement.id}`, + { + name: licenseAgreement.name, + description: licenseAgreement.description, + licenseTerm: licenseAgreement.licenseTerm, + requirementsAndConstrains: + licenseAgreement.requirementsAndConstrains, + addedFeatureGroupsIds: featureGroupsIds.filter( + featureGroupId => + prevFeatureGroupsIds.indexOf(featureGroupId) === -1 + ), + removedFeatureGroupsIds: prevFeatureGroupsIds.filter( + prevFeatureGroupsId => + featureGroupsIds.indexOf(prevFeatureGroupsId) === -1 + ) + } + ); } function deleteLicenseAgreement(licenseModelId, licenseAgreementId, version) { - return RestAPIUtil.destroy(`${baseUrl(licenseModelId, version)}/${licenseAgreementId}`); + return RestAPIUtil.destroy( + `${baseUrl(licenseModelId, version)}/${licenseAgreementId}` + ); } export default { + fetchLicenseAgreementList(dispatch, { licenseModelId, version }) { + return fetchLicenseAgreementList(licenseModelId, version).then( + response => + dispatch({ + type: + licenseAgreementActionTypes.LICENSE_AGREEMENT_LIST_LOADED, + response + }) + ); + }, - fetchLicenseAgreementList(dispatch, {licenseModelId, version}) { - return fetchLicenseAgreementList(licenseModelId, version).then(response => dispatch({ - type: licenseAgreementActionTypes.LICENSE_AGREEMENT_LIST_LOADED, - response - })); - }, + fetchLicenseAgreement( + dispatch, + { licenseModelId, licenseAgreementId, version } + ) { + return fetchLicenseAgreement( + licenseModelId, + licenseAgreementId, + version + ); + }, - fetchLicenseAgreement(dispatch, {licenseModelId, licenseAgreementId, version}) { - return fetchLicenseAgreement(licenseModelId, licenseAgreementId, version); - }, + openLicenseAgreementEditor( + dispatch, + { licenseModelId, licenseAgreement, version } + ) { + FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, { + licenseModelId, + version + }); + dispatch({ + type: licenseAgreementActionTypes.licenseAgreementEditor.OPEN, + licenseAgreement + }); + }, - openLicenseAgreementEditor(dispatch, {licenseModelId, licenseAgreement, version}) { - FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {licenseModelId, version}); - dispatch({ - type: licenseAgreementActionTypes.licenseAgreementEditor.OPEN, - licenseAgreement - }); - }, + closeLicenseAgreementEditor(dispatch) { + dispatch({ + type: licenseAgreementActionTypes.licenseAgreementEditor.CLOSE + }); + }, - closeLicenseAgreementEditor(dispatch) { - dispatch({ - type: licenseAgreementActionTypes.licenseAgreementEditor.CLOSE - }); - }, + saveLicenseAgreement( + dispatch, + { licenseModelId, previousLicenseAgreement, licenseAgreement, version } + ) { + if (previousLicenseAgreement) { + return putLicenseAgreement( + licenseModelId, + previousLicenseAgreement, + licenseAgreement, + version + ).then(() => { + this.fetchLicenseAgreementList(dispatch, { + licenseModelId, + version + }); + return ItemsHelper.checkItemStatus(dispatch, { + itemId: licenseModelId, + versionId: version.id + }); + }); + } else { + return postLicenseAgreement( + licenseModelId, + licenseAgreement, + version + ).then(() => { + this.fetchLicenseAgreementList(dispatch, { + licenseModelId, + version + }); + FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, { + licenseModelId, + version + }); + return ItemsHelper.checkItemStatus(dispatch, { + itemId: licenseModelId, + versionId: version.id + }); + }); + } + }, + deleteLicenseAgreement( + dispatch, + { licenseModelId, licenseAgreementId, version } + ) { + return deleteLicenseAgreement( + licenseModelId, + licenseAgreementId, + version + ).then(() => { + dispatch({ + type: licenseAgreementActionTypes.DELETE_LICENSE_AGREEMENT, + licenseAgreementId + }); + return ItemsHelper.checkItemStatus(dispatch, { + itemId: licenseModelId, + versionId: version.id + }); + }); + }, - saveLicenseAgreement(dispatch, {licenseModelId, previousLicenseAgreement, licenseAgreement, version}) { - if (previousLicenseAgreement) { - return putLicenseAgreement(licenseModelId, previousLicenseAgreement, licenseAgreement, version).then(() => { - this.fetchLicenseAgreementList(dispatch, {licenseModelId, version}); - return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id}); - }); - } - else { - return postLicenseAgreement(licenseModelId, licenseAgreement, version).then(() => { - this.fetchLicenseAgreementList(dispatch, {licenseModelId, version}); - FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {licenseModelId, version}); - return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id}); - }); - } - }, - - deleteLicenseAgreement(dispatch, {licenseModelId, licenseAgreementId, version}) { - return deleteLicenseAgreement(licenseModelId, licenseAgreementId, version).then(() => { - dispatch({ - type: licenseAgreementActionTypes.DELETE_LICENSE_AGREEMENT, - licenseAgreementId - }); - return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id}); - }); - }, - - selectLicenseAgreementEditorTab(dispatch, {tab}) { - dispatch({ - type: licenseAgreementActionTypes.licenseAgreementEditor.SELECT_TAB, - tab - }); - } + selectLicenseAgreementEditorTab(dispatch, { tab }) { + dispatch({ + type: licenseAgreementActionTypes.licenseAgreementEditor.SELECT_TAB, + tab + }); + } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementConstants.js index 181171d4cd..65a45348ca 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementConstants.js @@ -15,49 +15,54 @@ */ 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_AGREEMENT_LIST_LOADED: null, - DELETE_LICENSE_AGREEMENT: null, - - licenseAgreementEditor: { - OPEN: null, - CLOSE: null, - DATA_CHANGED: null, - SELECT_TAB: null - } + LICENSE_AGREEMENT_LIST_LOADED: null, + DELETE_LICENSE_AGREEMENT: null, + licenseAgreementEditor: { + OPEN: null, + CLOSE: null, + DATA_CHANGED: null, + SELECT_TAB: null + } }); export const LA_EDITOR_FORM = 'LA_EDITOR_FORM'; export const enums = keyMirror({ - SELECTED_LICENSE_AGREEMENT_TAB: { - GENERAL: 1, - FEATURE_GROUPS: 2 - } + SELECTED_LICENSE_AGREEMENT_TAB: { + GENERAL: 1, + FEATURE_GROUPS: 2 + } }); export const defaultState = { - LICENSE_AGREEMENT_EDITOR_DATA: { - licenseTerm: {choice: '', other: ''} - } + LICENSE_AGREEMENT_EDITOR_DATA: { + licenseTerm: { choice: '', other: '' } + } }; export const optionsInputValues = { - LICENSE_MODEL_TYPE: [ - {enum: '', title: i18n('please select…')}, - {enum: 'Fixed_Term', title: 'Fixed Term'}, - {enum: 'Perpetual', title: 'Perpetual'}, - {enum: 'Unlimited', title: 'Unlimited'} - ] + LICENSE_MODEL_TYPE: [ + { enum: '', title: i18n('please select…') }, + { enum: 'Fixed_Term', title: 'Fixed Term' }, + { enum: 'Perpetual', title: 'Perpetual' }, + { enum: 'Unlimited', title: 'Unlimited' } + ] }; -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.choice === optionInputOther.OTHER ? item.other : InputOptions.getTitleByName(optionsInputValues, item.choice) : ''; + return item + ? item.choice === optionInputOther.OTHER + ? item.other + : InputOptions.getTitleByName(optionsInputValues, item.choice) + : ''; }; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditor.js index 7d70da6ea5..735531a175 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditor.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditor.js @@ -13,66 +13,93 @@ * 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 LicenseAgreementActionHelper from './LicenseAgreementActionHelper.js'; import LicenseAgreementEditorView from './LicenseAgreementEditorView.jsx'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; -export const mapStateToProps = ({licenseModel: {licenseAgreement, featureGroup}}) => { +export const mapStateToProps = ({ + licenseModel: { licenseAgreement, featureGroup } +}) => { + let { + data, + selectedTab, + genericFieldInfo, + formReady + } = licenseAgreement.licenseAgreementEditor; + const list = licenseAgreement.licenseAgreementList; + const LANames = {}; + let previousData; + const licenseAgreementId = data ? data.id : null; + if (licenseAgreementId) { + previousData = licenseAgreement.licenseAgreementList.find( + licenseAgreement => licenseAgreement.id === licenseAgreementId + ); + } - let {data, selectedTab, genericFieldInfo, formReady} = licenseAgreement.licenseAgreementEditor; - const list = licenseAgreement.licenseAgreementList; - const LANames = {}; + for (let i = 0; i < list.length; i++) { + LANames[list[i].name.toLowerCase()] = list[i].id; + } - let previousData; - const licenseAgreementId = data ? data.id : null; - if(licenseAgreementId) { - previousData = licenseAgreement.licenseAgreementList.find(licenseAgreement => licenseAgreement.id === licenseAgreementId); - } + const { featureGroupsList = [] } = featureGroup; - for (let i = 0; i < list.length; i++) { - LANames[list[i].name.toLowerCase()] = list[i].id; - } + let isFormValid = true; + let invalidTabs = []; + for (let field in genericFieldInfo) { + if (!genericFieldInfo[field].isValid) { + isFormValid = false; + let tabId = genericFieldInfo[field].tabId; + if (invalidTabs.indexOf(tabId) === -1) { + invalidTabs[invalidTabs.length] = genericFieldInfo[field].tabId; + } + } + } - const {featureGroupsList = []} = featureGroup; - - let isFormValid = true; - let invalidTabs = []; - for (let field in genericFieldInfo) { - if (!genericFieldInfo[field].isValid) { - isFormValid = false; - let tabId = genericFieldInfo[field].tabId; - if (invalidTabs.indexOf(tabId) === -1) { - invalidTabs[invalidTabs.length] = genericFieldInfo[field].tabId; - } - } - } - - return { - data, - previousData, - selectedTab, - featureGroupsList, - LANames, - genericFieldInfo, - isFormValid, - formReady, - invalidTabs - }; + return { + data, + previousData, + selectedTab, + featureGroupsList, + LANames, + genericFieldInfo, + isFormValid, + formReady, + invalidTabs + }; }; -export const mapActionsToProps = (dispatch, {licenseModelId, version}) => { - return { - onDataChanged: (deltaData, formName, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName, customValidations}), - onTabSelect: tab => LicenseAgreementActionHelper.selectLicenseAgreementEditorTab(dispatch, {tab}), - onCancel: () => LicenseAgreementActionHelper.closeLicenseAgreementEditor(dispatch), - onSubmit: ({previousLicenseAgreement, licenseAgreement}) => { - LicenseAgreementActionHelper.closeLicenseAgreementEditor(dispatch); - LicenseAgreementActionHelper.saveLicenseAgreement(dispatch, {licenseModelId, previousLicenseAgreement, licenseAgreement, version}); - }, - onValidateForm: (formName) => ValidationHelper.validateForm(dispatch, formName) - }; +export const mapActionsToProps = (dispatch, { licenseModelId, version }) => { + return { + onDataChanged: (deltaData, formName, customValidations) => + ValidationHelper.dataChanged(dispatch, { + deltaData, + formName, + customValidations + }), + onTabSelect: tab => + LicenseAgreementActionHelper.selectLicenseAgreementEditorTab( + dispatch, + { + tab + } + ), + onCancel: () => + LicenseAgreementActionHelper.closeLicenseAgreementEditor(dispatch), + onSubmit: ({ previousLicenseAgreement, licenseAgreement }) => { + LicenseAgreementActionHelper.closeLicenseAgreementEditor(dispatch); + LicenseAgreementActionHelper.saveLicenseAgreement(dispatch, { + licenseModelId, + previousLicenseAgreement, + licenseAgreement, + version + }); + }, + onValidateForm: formName => + ValidationHelper.validateForm(dispatch, formName) + }; }; -export default connect(mapStateToProps, mapActionsToProps)(LicenseAgreementEditorView); +export default connect(mapStateToProps, mapActionsToProps)( + LicenseAgreementEditorView +); diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorReducer.js index 9cff2792ff..0d3fb2a3b6 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorReducer.js @@ -13,53 +13,76 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes, defaultState, LA_EDITOR_FORM, enums as LicenseAgreementEnums} from './LicenseAgreementConstants.js'; -import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx'; +import { + actionTypes, + defaultState, + LA_EDITOR_FORM, + enums as LicenseAgreementEnums +} from './LicenseAgreementConstants.js'; +import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx'; export default (state = {}, action) => { - switch (action.type) { - case actionTypes.licenseAgreementEditor.OPEN: - return { - ...state, - formReady: null, - formName: LA_EDITOR_FORM, - genericFieldInfo: { - 'description' : { - isValid: true, - errorText: '', - validations: [{type: 'maxLength', data: 1000}], - tabId: LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.GENERAL - }, - 'requirementsAndConstrains' : { - isValid: true, - errorText: '', - validations: [{type: 'maxLength', data: 1000}], - tabId: LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.GENERAL - }, - 'licenseTerm' : { - isValid: true, - errorText: '', - validations: [{type: 'required', data: true}, {type: 'requiredChoiceWithOther', data: optionInputOther.OTHER}], - tabId: LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.GENERAL - }, - 'name' : { - isValid: true, - errorText: '', - validations: [{type: 'required', data: true}, {type: 'maxLength', data: 25}], - tabId: LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.GENERAL - } - }, - data: action.licenseAgreement ? { ...action.licenseAgreement } : defaultState.LICENSE_AGREEMENT_EDITOR_DATA - }; - case actionTypes.licenseAgreementEditor.CLOSE: - return {}; - case actionTypes.licenseAgreementEditor.SELECT_TAB: - return { - ...state, - selectedTab: action.tab - }; - default: - return state; - } - + switch (action.type) { + case actionTypes.licenseAgreementEditor.OPEN: + return { + ...state, + formReady: null, + formName: LA_EDITOR_FORM, + genericFieldInfo: { + description: { + isValid: true, + errorText: '', + validations: [{ type: 'maxLength', data: 1000 }], + tabId: + LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB + .GENERAL + }, + requirementsAndConstrains: { + isValid: true, + errorText: '', + validations: [{ type: 'maxLength', data: 1000 }], + tabId: + LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB + .GENERAL + }, + licenseTerm: { + isValid: true, + errorText: '', + validations: [ + { type: 'required', data: true }, + { + type: 'requiredChoiceWithOther', + data: optionInputOther.OTHER + } + ], + tabId: + LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB + .GENERAL + }, + name: { + isValid: true, + errorText: '', + validations: [ + { type: 'required', data: true }, + { type: 'maxLength', data: 25 } + ], + tabId: + LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB + .GENERAL + } + }, + data: action.licenseAgreement + ? { ...action.licenseAgreement } + : defaultState.LICENSE_AGREEMENT_EDITOR_DATA + }; + case actionTypes.licenseAgreementEditor.CLOSE: + return {}; + case actionTypes.licenseAgreementEditor.SELECT_TAB: + return { + ...state, + selectedTab: action.tab + }; + default: + return state; + } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorView.jsx index a3e73f4f14..cc16dd996d 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorView.jsx @@ -17,7 +17,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import GridSection from 'nfvo-components/grid/GridSection.jsx'; import GridItem from 'nfvo-components/grid/GridItem.jsx'; -import {TabsForm as Form} from 'nfvo-components/input/validation/Form.jsx'; +import { TabsForm as Form } from 'nfvo-components/input/validation/Form.jsx'; import Tabs from 'nfvo-components/input/validation/Tabs.jsx'; import Tab from 'sdc-ui/lib/react/Tab.js'; import Input from 'nfvo-components/input/validation/Input.jsx'; @@ -25,176 +25,278 @@ import InputOptions from 'nfvo-components/input/validation/InputOptions.jsx'; import DualListboxView from 'nfvo-components/input/dualListbox/DualListboxView.jsx'; import i18n from 'nfvo-utils/i18n/i18n.js'; import Validator from 'nfvo-utils/Validator.js'; -import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx'; +import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx'; -import {enums as LicenseAgreementEnums, optionsInputValues as LicenseAgreementOptionsInputValues, LA_EDITOR_FORM} from './LicenseAgreementConstants.js'; +import { + enums as LicenseAgreementEnums, + optionsInputValues as LicenseAgreementOptionsInputValues, + LA_EDITOR_FORM +} from './LicenseAgreementConstants.js'; const dualBoxFilterTitle = { - left: i18n('Available Feature Groups'), - right: i18n('Selected Feature Groups') + left: i18n('Available Feature Groups'), + right: i18n('Selected Feature Groups') }; const LicenseAgreementPropType = PropTypes.shape({ - id: PropTypes.string, - name: PropTypes.string, - description: PropTypes.string, - requirementsAndConstrains: PropTypes.string, - licenseTerm: PropTypes.object, - featureGroupsIds: PropTypes.arrayOf(PropTypes.string), - version: PropTypes.object + id: PropTypes.string, + name: PropTypes.string, + description: PropTypes.string, + requirementsAndConstrains: PropTypes.string, + licenseTerm: PropTypes.object, + featureGroupsIds: PropTypes.arrayOf(PropTypes.string), + version: PropTypes.object }); - -const GeneralTabContent = ({data, genericFieldInfo, onDataChanged, validateName}) => { - let {name, description, requirementsAndConstrains, licenseTerm} = data; - return ( - <GridSection hasLastColSet> - <GridItem colSpan={2}> - <Input - isValid={genericFieldInfo.name.isValid} - errorText={genericFieldInfo.name.errorText} - onChange={name => onDataChanged({name}, LA_EDITOR_FORM, { name: validateName })} - label={i18n('Name')} - value={name} - data-test-id='create-la-name' - name='license-agreement-name' - isRequired={true} - type='text'/> - <Input - isValid={genericFieldInfo.requirementsAndConstrains.isValid} - errorText={genericFieldInfo.requirementsAndConstrains.errorText} - onChange={requirementsAndConstrains => onDataChanged({requirementsAndConstrains}, LA_EDITOR_FORM)} - label={i18n('Requirements and Constraints')} - value={requirementsAndConstrains} - data-test-id='create-la-requirements-constants' - name='license-agreement-requirements-and-constraints' - type='textarea'/> - <InputOptions - onInputChange={()=>{}} - isMultiSelect={false} - onEnumChange={licenseTerm => onDataChanged({licenseTerm:{choice: licenseTerm, other: ''}}, - LA_EDITOR_FORM)} - onOtherChange={licenseTerm => onDataChanged({licenseTerm:{choice: optionInputOther.OTHER, - other: licenseTerm}}, LA_EDITOR_FORM)} - label={i18n('License Term')} - data-test-id='create-la-license-term' - isRequired={true} - type='select' - selectedEnum={licenseTerm && licenseTerm.choice} - otherValue={licenseTerm && licenseTerm.other} - values={LicenseAgreementOptionsInputValues.LICENSE_MODEL_TYPE} - isValid={genericFieldInfo.licenseTerm.isValid} - errorText={genericFieldInfo.licenseTerm.errorText} /> - </GridItem> - <GridItem colSpan={2} stretch lastColInRow> - <Input - isValid={genericFieldInfo.description.isValid} - errorText={genericFieldInfo.description.errorText} - onChange={description => onDataChanged({description}, LA_EDITOR_FORM)} - label={i18n('Description')} - value={description} - overlayPos='bottom' - data-test-id='create-la-description' - name='license-agreement-description' - type='textarea'/> - </GridItem> - </GridSection> - ); +const GeneralTabContent = ({ + data, + genericFieldInfo, + onDataChanged, + validateName +}) => { + let { name, description, requirementsAndConstrains, licenseTerm } = data; + return ( + <GridSection hasLastColSet> + <GridItem colSpan={2}> + <Input + isValid={genericFieldInfo.name.isValid} + errorText={genericFieldInfo.name.errorText} + onChange={name => + onDataChanged({ name }, LA_EDITOR_FORM, { + name: validateName + }) + } + label={i18n('Name')} + value={name} + data-test-id="create-la-name" + name="license-agreement-name" + isRequired={true} + type="text" + /> + <Input + isValid={genericFieldInfo.requirementsAndConstrains.isValid} + errorText={ + genericFieldInfo.requirementsAndConstrains.errorText + } + onChange={requirementsAndConstrains => + onDataChanged( + { requirementsAndConstrains }, + LA_EDITOR_FORM + ) + } + label={i18n('Requirements and Constraints')} + value={requirementsAndConstrains} + data-test-id="create-la-requirements-constants" + name="license-agreement-requirements-and-constraints" + type="textarea" + /> + <InputOptions + onInputChange={() => {}} + isMultiSelect={false} + onEnumChange={licenseTerm => + onDataChanged( + { licenseTerm: { choice: licenseTerm, other: '' } }, + LA_EDITOR_FORM + ) + } + onOtherChange={licenseTerm => + onDataChanged( + { + licenseTerm: { + choice: optionInputOther.OTHER, + other: licenseTerm + } + }, + LA_EDITOR_FORM + ) + } + label={i18n('License Term')} + data-test-id="create-la-license-term" + isRequired={true} + type="select" + selectedEnum={licenseTerm && licenseTerm.choice} + otherValue={licenseTerm && licenseTerm.other} + values={ + LicenseAgreementOptionsInputValues.LICENSE_MODEL_TYPE + } + isValid={genericFieldInfo.licenseTerm.isValid} + errorText={genericFieldInfo.licenseTerm.errorText} + /> + </GridItem> + <GridItem colSpan={2} stretch lastColInRow> + <Input + isValid={genericFieldInfo.description.isValid} + errorText={genericFieldInfo.description.errorText} + onChange={description => + onDataChanged({ description }, LA_EDITOR_FORM) + } + label={i18n('Description')} + value={description} + overlayPos="bottom" + data-test-id="create-la-description" + name="license-agreement-description" + type="textarea" + /> + </GridItem> + </GridSection> + ); }; class LicenseAgreementEditorView extends React.Component { + static propTypes = { + data: LicenseAgreementPropType, + previousData: LicenseAgreementPropType, + LANames: PropTypes.object, + isReadOnlyMode: PropTypes.bool, + onDataChanged: PropTypes.func.isRequired, + onSubmit: PropTypes.func.isRequired, + onCancel: PropTypes.func.isRequired, - static propTypes = { - data: LicenseAgreementPropType, - previousData: LicenseAgreementPropType, - LANames: PropTypes.object, - isReadOnlyMode: PropTypes.bool, - onDataChanged: PropTypes.func.isRequired, - onSubmit: PropTypes.func.isRequired, - onCancel: PropTypes.func.isRequired, - - selectedTab: PropTypes.number, - onTabSelect: PropTypes.func, + selectedTab: PropTypes.number, + onTabSelect: PropTypes.func, - selectedFeatureGroupsButtonTab: PropTypes.number, - onFeatureGroupsButtonTabSelect: PropTypes.func, - featureGroupsList: DualListboxView.propTypes.availableList - }; + selectedFeatureGroupsButtonTab: PropTypes.number, + onFeatureGroupsButtonTabSelect: PropTypes.func, + featureGroupsList: DualListboxView.propTypes.availableList + }; - static defaultProps = { - selectedTab: LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.GENERAL, - data: {} - }; + static defaultProps = { + selectedTab: + LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.GENERAL, + data: {} + }; - state = { - localFeatureGroupsListFilter: '' - }; + state = { + localFeatureGroupsListFilter: '' + }; - render() { - let {selectedTab, onTabSelect, isReadOnlyMode, featureGroupsList, data, onDataChanged, genericFieldInfo} = this.props; - return ( - <div> - {genericFieldInfo && <Form - ref='validationForm' - hasButtons={true} - onSubmit={ () => this.submit() } - onReset={ () => this.props.onCancel() } - labledButtons={true} - isReadOnlyMode={isReadOnlyMode} - isValid={this.props.isFormValid} - formReady={this.props.formReady} - onValidateForm={() => this.props.onValidateForm(LA_EDITOR_FORM) } - className='license-model-form license-agreement-form'> - <Tabs activeTab={onTabSelect ? selectedTab : undefined} onTabClick={onTabSelect} invalidTabs={this.props.invalidTabs} > - <Tab - tabId={LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.GENERAL} - data-test-id='general-tab' - title={i18n('General')}> - <fieldset disabled={isReadOnlyMode}> - <GeneralTabContent data={data} genericFieldInfo={genericFieldInfo} onDataChanged={onDataChanged} validateLTChoice={(value)=>this.validateLTChoice(value)} - validateName={(value)=>this.validateName(value)}/> - </fieldset> - </Tab> - <Tab - tabId={LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.FEATURE_GROUPS} - data-test-id='feature-group-tab' - title={i18n('Feature Groups')}> - <fieldset disabled={isReadOnlyMode}> - {featureGroupsList.length > 0 ? - <DualListboxView - isReadOnlyMode={isReadOnlyMode} - filterTitle={dualBoxFilterTitle} - selectedValuesList={data.featureGroupsIds} - availableList={featureGroupsList} - onChange={ selectedValuesList => onDataChanged( { featureGroupsIds: selectedValuesList }, LA_EDITOR_FORM )}/> : - <p>{i18n('There are no available feature groups')}</p>} - </fieldset> - </Tab> - </Tabs> - </Form>} - </div> - ); - } + render() { + let { + selectedTab, + onTabSelect, + isReadOnlyMode, + featureGroupsList, + data, + onDataChanged, + genericFieldInfo + } = this.props; + return ( + <div> + {genericFieldInfo && ( + <Form + ref="validationForm" + hasButtons={true} + onSubmit={() => this.submit()} + onReset={() => this.props.onCancel()} + labledButtons={true} + isReadOnlyMode={isReadOnlyMode} + isValid={this.props.isFormValid} + formReady={this.props.formReady} + onValidateForm={() => + this.props.onValidateForm(LA_EDITOR_FORM) + } + className="license-model-form license-agreement-form"> + <Tabs + activeTab={onTabSelect ? selectedTab : undefined} + onTabClick={onTabSelect} + invalidTabs={this.props.invalidTabs}> + <Tab + tabId={ + LicenseAgreementEnums + .SELECTED_LICENSE_AGREEMENT_TAB.GENERAL + } + data-test-id="general-tab" + title={i18n('General')}> + <fieldset disabled={isReadOnlyMode}> + <GeneralTabContent + data={data} + genericFieldInfo={genericFieldInfo} + onDataChanged={onDataChanged} + validateLTChoice={value => + this.validateLTChoice(value) + } + validateName={value => + this.validateName(value) + } + /> + </fieldset> + </Tab> + <Tab + tabId={ + LicenseAgreementEnums + .SELECTED_LICENSE_AGREEMENT_TAB + .FEATURE_GROUPS + } + data-test-id="feature-group-tab" + title={i18n('Feature Groups')}> + <fieldset disabled={isReadOnlyMode}> + {featureGroupsList.length > 0 ? ( + <DualListboxView + isReadOnlyMode={isReadOnlyMode} + filterTitle={dualBoxFilterTitle} + selectedValuesList={ + data.featureGroupsIds + } + availableList={featureGroupsList} + onChange={selectedValuesList => + onDataChanged( + { + featureGroupsIds: selectedValuesList + }, + LA_EDITOR_FORM + ) + } + /> + ) : ( + <p> + {i18n( + 'There are no available feature groups' + )} + </p> + )} + </fieldset> + </Tab> + </Tabs> + </Form> + )} + </div> + ); + } - submit() { - const {data: licenseAgreement, previousData: previousLicenseAgreement} = this.props; - this.props.onSubmit({licenseAgreement, previousLicenseAgreement}); - } + submit() { + const { + data: licenseAgreement, + previousData: previousLicenseAgreement + } = this.props; + this.props.onSubmit({ licenseAgreement, previousLicenseAgreement }); + } - validateLTChoice(value) { - if (!value.choice) { - return {isValid: false, errorText: i18n('Field is required')}; - } - return {isValid: true, errorText: ''}; - } + validateLTChoice(value) { + if (!value.choice) { + return { isValid: false, errorText: i18n('Field is required') }; + } + return { isValid: true, errorText: '' }; + } - validateName(value) { - const {data: {id}, LANames} = this.props; - const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: LANames}); + validateName(value) { + const { data: { id }, LANames } = this.props; + const isExists = Validator.isItemNameAlreadyExistsInList({ + itemId: id, + itemName: value, + list: LANames + }); - return !isExists ? {isValid: true, errorText: ''} : - {isValid: false, errorText: i18n('License Agreement by the name \'' + value + '\' already exists. License agreement name must be unique')}; - } + return !isExists + ? { isValid: true, errorText: '' } + : { + isValid: false, + errorText: i18n( + "License Agreement by the name '" + + value + + "' already exists. License agreement name must be unique" + ) + }; + } } export default LicenseAgreementEditorView; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditor.js index 72474ecdd3..cba39731b5 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditor.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditor.js @@ -13,42 +13,64 @@ * 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 LicenseAgreementActionHelper from './LicenseAgreementActionHelper.js'; import LicenseAgreementListEditorView from './LicenseAgreementListEditorView.jsx'; -import {actionTypes as globalMoadlActions} from 'nfvo-components/modal/GlobalModalConstants.js'; +import { actionTypes as globalMoadlActions } from 'nfvo-components/modal/GlobalModalConstants.js'; -const mapStateToProps = ({licenseModel: {licenseAgreement, licenseModelEditor}}) => { - - let {licenseAgreementList} = licenseAgreement; - let {data} = licenseAgreement.licenseAgreementEditor; - let {vendorName, version} = licenseModelEditor.data; - - return { - vendorName, - version, - licenseAgreementList, - isDisplayModal: Boolean(data), - isModalInEditMode: Boolean(data && data.id) - }; +const mapStateToProps = ({ + licenseModel: { licenseAgreement, licenseModelEditor } +}) => { + let { licenseAgreementList } = licenseAgreement; + let { data } = licenseAgreement.licenseAgreementEditor; + let { vendorName, version } = licenseModelEditor.data; + return { + vendorName, + version, + licenseAgreementList, + isDisplayModal: Boolean(data), + isModalInEditMode: Boolean(data && data.id) + }; }; -const mapActionsToProps = (dispatch, {licenseModelId}) => { - return { - onAddLicenseAgreementClick: (version) => LicenseAgreementActionHelper.openLicenseAgreementEditor(dispatch, {licenseModelId, version}), - onEditLicenseAgreementClick: (licenseAgreement, version) => LicenseAgreementActionHelper.openLicenseAgreementEditor(dispatch, {licenseModelId, licenseAgreement, version}), - onDeleteLicenseAgreement: (licenseAgreement, version) => dispatch({ - type: globalMoadlActions.GLOBAL_MODAL_WARNING, - data:{ - msg: i18n('Are you sure you want to delete "{name}"?', {name: licenseAgreement.name}), - confirmationButtonText: i18n('Delete'), - title: i18n('Delete'), - onConfirmed: ()=>LicenseAgreementActionHelper.deleteLicenseAgreement(dispatch, {licenseModelId, licenseAgreementId: licenseAgreement.id, version}) - } - }) - }; +const mapActionsToProps = (dispatch, { licenseModelId }) => { + return { + onAddLicenseAgreementClick: version => + LicenseAgreementActionHelper.openLicenseAgreementEditor(dispatch, { + licenseModelId, + version + }), + onEditLicenseAgreementClick: (licenseAgreement, version) => + LicenseAgreementActionHelper.openLicenseAgreementEditor(dispatch, { + licenseModelId, + licenseAgreement, + version + }), + onDeleteLicenseAgreement: (licenseAgreement, version) => + dispatch({ + type: globalMoadlActions.GLOBAL_MODAL_WARNING, + data: { + msg: i18n('Are you sure you want to delete "{name}"?', { + name: licenseAgreement.name + }), + confirmationButtonText: i18n('Delete'), + title: i18n('Delete'), + onConfirmed: () => + LicenseAgreementActionHelper.deleteLicenseAgreement( + dispatch, + { + licenseModelId, + licenseAgreementId: licenseAgreement.id, + version + } + ) + } + }) + }; }; -export default connect(mapStateToProps, mapActionsToProps)(LicenseAgreementListEditorView); +export default connect(mapStateToProps, mapActionsToProps)( + LicenseAgreementListEditorView +); diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditorView.jsx index ad3cdb0b58..acec1e0ddb 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditorView.jsx @@ -21,107 +21,151 @@ import Modal from 'nfvo-components/modal/Modal.jsx'; import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx'; import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx'; import LicenseAgreementEditor from './LicenseAgreementEditor.js'; -import {extractValue} from './LicenseAgreementConstants'; +import { extractValue } from './LicenseAgreementConstants'; class LicenseAgreementListEditorView extends React.Component { - static propTypes = { - vendorName: PropTypes.string, - licenseModelId: PropTypes.string.isRequired, - licenseAgreementList: PropTypes.array, - isReadOnlyMode: PropTypes.bool.isRequired, - isDisplayModal: PropTypes.bool, - isModalInEditMode: PropTypes.bool, - onAddLicenseAgreementClick: PropTypes.func, - onEditLicenseAgreementClick: PropTypes.func, - onDeleteLicenseAgreement: PropTypes.func, - }; + static propTypes = { + vendorName: PropTypes.string, + licenseModelId: PropTypes.string.isRequired, + licenseAgreementList: PropTypes.array, + isReadOnlyMode: PropTypes.bool.isRequired, + isDisplayModal: PropTypes.bool, + isModalInEditMode: PropTypes.bool, + onAddLicenseAgreementClick: PropTypes.func, + onEditLicenseAgreementClick: PropTypes.func, + onDeleteLicenseAgreement: PropTypes.func + }; - static defaultProps = { - licenseAgreementList: [] - }; + static defaultProps = { + licenseAgreementList: [] + }; - state = { - localFilter: '' - }; + state = { + localFilter: '' + }; - render() { - const {licenseModelId, isReadOnlyMode, isDisplayModal, isModalInEditMode, version} = this.props; - const {onAddLicenseAgreementClick} = this.props; - const {localFilter} = this.state; + render() { + const { + licenseModelId, + isReadOnlyMode, + isDisplayModal, + isModalInEditMode, + version + } = this.props; + const { onAddLicenseAgreementClick } = this.props; + const { localFilter } = this.state; - return ( - <div className='license-model-list-editor license-agreement-list-editor'> - <ListEditorView - title={i18n('License Agreements')} - plusButtonTitle={i18n('Add License Agreement')} - onAdd={() => onAddLicenseAgreementClick(version)} - filterValue={localFilter} - onFilter={value => this.setState({localFilter: value})} - isReadOnlyMode={isReadOnlyMode}> - {this.filterList().map(licenseAgreement => this.renderLicenseAgreementListItem(licenseAgreement, isReadOnlyMode, version))} - </ListEditorView> - <Modal show={isDisplayModal} bsSize='large' animation={true} className='onborading-modal license-model-modal license-agreement-modal'> - <Modal.Header> - <Modal.Title>{`${isModalInEditMode ? i18n('Edit License Agreement') : i18n('Create New License Agreement')}`}</Modal.Title> - </Modal.Header> - <Modal.Body> - { - isDisplayModal && ( - <LicenseAgreementEditor version={version} licenseModelId={licenseModelId} isReadOnlyMode={isReadOnlyMode} /> - ) - } - </Modal.Body> - </Modal> - </div> - ); - } + return ( + <div className="license-model-list-editor license-agreement-list-editor"> + <ListEditorView + title={i18n('License Agreements')} + plusButtonTitle={i18n('Add License Agreement')} + onAdd={() => onAddLicenseAgreementClick(version)} + filterValue={localFilter} + onFilter={value => this.setState({ localFilter: value })} + isReadOnlyMode={isReadOnlyMode}> + {this.filterList().map(licenseAgreement => + this.renderLicenseAgreementListItem( + licenseAgreement, + isReadOnlyMode, + version + ) + )} + </ListEditorView> + <Modal + show={isDisplayModal} + bsSize="large" + animation={true} + className="onborading-modal license-model-modal license-agreement-modal"> + <Modal.Header> + <Modal.Title>{`${ + isModalInEditMode + ? i18n('Edit License Agreement') + : i18n('Create New License Agreement') + }`}</Modal.Title> + </Modal.Header> + <Modal.Body> + {isDisplayModal && ( + <LicenseAgreementEditor + version={version} + licenseModelId={licenseModelId} + isReadOnlyMode={isReadOnlyMode} + /> + )} + </Modal.Body> + </Modal> + </div> + ); + } - filterList() { - let {licenseAgreementList} = this.props; - let {localFilter} = this.state; - if (localFilter.trim()) { - const filter = new RegExp(escape(localFilter), 'i'); - return licenseAgreementList.filter(({name = '', description = '', licenseTerm = ''}) => { - return escape(name).match(filter) || escape(description).match(filter) || escape(extractValue(licenseTerm)).match(filter); - }); - } - else { - return licenseAgreementList; - } - } + filterList() { + let { licenseAgreementList } = this.props; + let { localFilter } = this.state; + if (localFilter.trim()) { + const filter = new RegExp(escape(localFilter), 'i'); + return licenseAgreementList.filter( + ({ name = '', description = '', licenseTerm = '' }) => { + return ( + escape(name).match(filter) || + escape(description).match(filter) || + escape(extractValue(licenseTerm)).match(filter) + ); + } + ); + } else { + return licenseAgreementList; + } + } - renderLicenseAgreementListItem(licenseAgreement, isReadOnlyMode, version) { - let {id, name, description, licenseTerm, featureGroupsIds = []} = licenseAgreement; - let {onEditLicenseAgreementClick, onDeleteLicenseAgreement} = this.props; - return ( - <ListEditorItemView - key={id} - onSelect={() => onEditLicenseAgreementClick(licenseAgreement, version)} - onDelete={() => onDeleteLicenseAgreement(licenseAgreement, version)} - 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='list-editor-item-view-field-tight'> - <div className='title'>{i18n('Type')}</div> - <div className='text type'>{extractValue(licenseTerm)}</div> - </div> - <div className='list-editor-item-view-field-tight'> - <div className='title'>{i18n('Feature')}</div> - <div className='title'>{i18n('Groups')}</div> - <div className='feature-groups-count'>{featureGroupsIds.length}</div> - </div> - </div> - <div className='list-editor-item-view-field'> - <div className='title'>{i18n('Description')}</div> - <div className='text description'>{description}</div> - </div> - </ListEditorItemView> - ); - } + renderLicenseAgreementListItem(licenseAgreement, isReadOnlyMode, version) { + let { + id, + name, + description, + licenseTerm, + featureGroupsIds = [] + } = licenseAgreement; + let { + onEditLicenseAgreementClick, + onDeleteLicenseAgreement + } = this.props; + return ( + <ListEditorItemView + key={id} + onSelect={() => + onEditLicenseAgreementClick(licenseAgreement, version) + } + onDelete={() => + onDeleteLicenseAgreement(licenseAgreement, version) + } + 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="list-editor-item-view-field-tight"> + <div className="title">{i18n('Type')}</div> + <div className="text type"> + {extractValue(licenseTerm)} + </div> + </div> + <div className="list-editor-item-view-field-tight"> + <div className="title">{i18n('Feature')}</div> + <div className="title">{i18n('Groups')}</div> + <div className="feature-groups-count"> + {featureGroupsIds.length} + </div> + </div> + </div> + <div className="list-editor-item-view-field"> + <div className="title">{i18n('Description')}</div> + <div className="text description">{description}</div> + </div> + </ListEditorItemView> + ); + } } export default LicenseAgreementListEditorView; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListReducer.js index 7d1a5ef8ee..213a63d565 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListReducer.js @@ -13,15 +13,18 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes as licenseAgreementActionTypes} from './LicenseAgreementConstants'; +import { actionTypes as licenseAgreementActionTypes } from './LicenseAgreementConstants'; export default (state = [], action) => { - switch (action.type) { - case licenseAgreementActionTypes.LICENSE_AGREEMENT_LIST_LOADED: - return [...action.response.results]; - case licenseAgreementActionTypes.DELETE_LICENSE_AGREEMENT: - return state.filter(licenseAgreement => licenseAgreement.id !== action.licenseAgreementId); - default: - return state; - } + switch (action.type) { + case licenseAgreementActionTypes.LICENSE_AGREEMENT_LIST_LOADED: + return [...action.response.results]; + case licenseAgreementActionTypes.DELETE_LICENSE_AGREEMENT: + return state.filter( + licenseAgreement => + licenseAgreement.id !== action.licenseAgreementId + ); + default: + return state; + } }; 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; + } }; - diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.js index d483383472..76ea36db98 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.js @@ -1,25 +1,30 @@ -import {connect} from 'react-redux'; +import { connect } from 'react-redux'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; import LimitEditor from './LimitEditor.jsx'; -const mapStateToProps = ({licenseModel: {limitEditor}}) => { +const mapStateToProps = ({ licenseModel: { limitEditor } }) => { + let { data, genericFieldInfo, formReady } = limitEditor; + let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); - let {data, genericFieldInfo, formReady} = limitEditor; - let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); - - return { - data, - genericFieldInfo, - isFormValid, - formReady - }; + return { + data, + genericFieldInfo, + isFormValid, + formReady + }; }; -const mapActionsToProps = (dispatch) => { - return { - onDataChanged: (deltaData, formName, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName, customValidations}), - onValidateForm: (formName) => ValidationHelper.validateForm(dispatch, formName) - }; +const mapActionsToProps = dispatch => { + return { + onDataChanged: (deltaData, formName, customValidations) => + ValidationHelper.dataChanged(dispatch, { + deltaData, + formName, + customValidations + }), + onValidateForm: formName => + ValidationHelper.validateForm(dispatch, formName) + }; }; -export default connect(mapStateToProps, mapActionsToProps)(LimitEditor);
\ No newline at end of file +export default connect(mapStateToProps, mapActionsToProps)(LimitEditor); diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx index 54f057eaa4..0d1d4eaf10 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx @@ -5,206 +5,349 @@ 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 {LIMITS_FORM_NAME, selectValues} from './LimitEditorConstants.js'; +import { LIMITS_FORM_NAME, selectValues } from './LimitEditorConstants.js'; import Button from 'sdc-ui/lib/react/Button.js'; import Validator from 'nfvo-utils/Validator.js'; -import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx'; +import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx'; import InputOptions from 'nfvo-components/input/validation/InputOptions.jsx'; const LimitPropType = PropTypes.shape({ - id: PropTypes.string, - name: PropTypes.string, - description: PropTypes.string, - metric: PropTypes.shape({ - choice: PropTypes.string, - other: PropTypes.string - }), - value: PropTypes.string, - aggregationFunction: PropTypes.string, - time: PropTypes.string, - unit: PropTypes.shape({ - choice: PropTypes.string, - other: PropTypes.string - }) + id: PropTypes.string, + name: PropTypes.string, + description: PropTypes.string, + metric: PropTypes.shape({ + choice: PropTypes.string, + other: PropTypes.string + }), + value: PropTypes.string, + aggregationFunction: PropTypes.string, + time: PropTypes.string, + unit: PropTypes.shape({ + choice: PropTypes.string, + other: PropTypes.string + }) }); class LimitEditor extends React.Component { - static propTypes = { - data: LimitPropType, - limitsNames: PropTypes.object, - isReadOnlyMode: PropTypes.bool, - isFormValid: PropTypes.bool, - formReady: PropTypes.bool, - genericFieldInfo: PropTypes.object.isRequired, - onDataChanged: PropTypes.func.isRequired, - onSubmit: PropTypes.func.isRequired, - onValidateForm: PropTypes.func.isRequired, - onCancel: PropTypes.func.isRequired - }; + static propTypes = { + data: LimitPropType, + limitsNames: PropTypes.object, + isReadOnlyMode: PropTypes.bool, + isFormValid: PropTypes.bool, + formReady: PropTypes.bool, + genericFieldInfo: PropTypes.object.isRequired, + onDataChanged: PropTypes.func.isRequired, + onSubmit: PropTypes.func.isRequired, + onValidateForm: PropTypes.func.isRequired, + onCancel: PropTypes.func.isRequired + }; - componentDidUpdate(prevProps) { - if (this.props.formReady && this.props.formReady !== prevProps.formReady) { - this.submit(); - } - } + componentDidUpdate(prevProps) { + if ( + this.props.formReady && + this.props.formReady !== prevProps.formReady + ) { + this.submit(); + } + } - render() { - let {data = {}, onDataChanged, isReadOnlyMode, genericFieldInfo, onCancel, isFormValid, formReady, onValidateForm} = this.props; - let {name, description, metric, value, aggregationFunction, time, unit} = data; - return ( - <div className='limit-editor'> - {!data.id && - <div className='limit-editor-title'> - {data.name ? data.name : i18n('NEW LIMIT')} - </div>} - { - genericFieldInfo && - <Form - ref='validationForm' - hasButtons={false} - isValid={isFormValid} - formReady={formReady} - onValidateForm={() => onValidateForm(LIMITS_FORM_NAME) } - labledButtons={false} - isReadOnlyMode={isReadOnlyMode} - className='limit-editor-form'> - <GridSection className='limit-editor-form-grid-section' hasLastColSet> - <GridItem colSpan={2}> - <Input - onChange={name => onDataChanged({name}, LIMITS_FORM_NAME, {name: () => this.validateName(name)})} - label={i18n('Name')} - data-test-id='limit-editor-name' - value={name} - isValid={genericFieldInfo.name.isValid} - errorText={genericFieldInfo.name.errorText} - isRequired={true} - type='text'/> - </GridItem> - <GridItem colSpan={2} lastColInRow> - <Input - onChange={description => onDataChanged({description}, LIMITS_FORM_NAME)} - label={i18n('Description')} - data-test-id='limit-editor-description' - value={description} - isValid={genericFieldInfo.description.isValid} - errorText={genericFieldInfo.description.errorText} - isRequired={false} - type='text'/> - </GridItem> - <GridItem colSpan={2}> - <InputOptions - onInputChange={()=>{}} - isMultiSelect={false} - isRequired={true} - onEnumChange={metric => onDataChanged({metric:{choice: metric, other: ''}}, - LIMITS_FORM_NAME)} - onOtherChange={metric => onDataChanged({metric:{choice: optionInputOther.OTHER, - other: metric}}, LIMITS_FORM_NAME)} - label={i18n('Metric')} - data-test-id='limit-editor-metric' - type='select' - required={true} - selectedEnum={metric && metric.choice} - otherValue={metric && metric.other} - values={selectValues.METRIC} - isValid={genericFieldInfo.metric.isValid} - errorText={genericFieldInfo.metric.errorText} /> - </GridItem> - <GridItem> - <Input - onChange={value => onDataChanged({value}, LIMITS_FORM_NAME)} - label={i18n('Metric value')} - data-test-id='limit-editor-metric-value' - value={value} - isValid={genericFieldInfo.value.isValid} - errorText={genericFieldInfo.value.errorText} - isRequired={true} - type='text'/> - </GridItem> - <GridItem lastColInRow> - <InputOptions - onInputChange={()=>{}} - isMultiSelect={false} - isRequired={false} - onEnumChange={unit => onDataChanged({unit:{choice: unit, other: ''}}, - LIMITS_FORM_NAME)} - onOtherChange={unit => onDataChanged({unit:{choice: optionInputOther.OTHER, - other: unit}}, LIMITS_FORM_NAME)} - label={i18n('Units')} - data-test-id='limit-editor-units' - type='select' - required={false} - selectedEnum={unit && unit.choice} - otherValue={unit && unit.other} - values={selectValues.UNIT} - isValid={genericFieldInfo.unit.isValid} - errorText={genericFieldInfo.unit.errorText} /> - </GridItem> - <GridItem colSpan={2}> - <Input - onChange={e => { - const selectedIndex = e.target.selectedIndex; - const val = e.target.options[selectedIndex].value; - onDataChanged({aggregationFunction: val}, LIMITS_FORM_NAME);} - } - value={aggregationFunction} - label={i18n('Aggregation Function')} - data-test-id='limit-editor-aggregation-function' - isValid={genericFieldInfo.aggregationFunction.isValid} - errorText={genericFieldInfo.aggregationFunction.errorText} - groupClassName='bootstrap-input-options' - className='input-options-select' - type='select' > - {selectValues.AGGREGATION_FUNCTION.map(mtype => - <option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)} - </Input> - </GridItem> - <GridItem> - <Input - onChange={e => { - const selectedIndex = e.target.selectedIndex; - const val = e.target.options[selectedIndex].value; - onDataChanged({time: val}, LIMITS_FORM_NAME);} - } - value={time} - label={i18n('Time')} - data-test-id='limit-editor-time' - isValid={genericFieldInfo.time.isValid} - errorText={genericFieldInfo.time.errorText} - groupClassName='bootstrap-input-options' - className='input-options-select' - type='select' > - {selectValues.TIME.map(mtype => - <option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)} - </Input> - </GridItem> - </GridSection> - <GridSection className='limit-editor-buttons'> - <Button btnType='outline' disabled={!isFormValid || isReadOnlyMode} onClick={() => this.submit()} type='reset'>{i18n('Save')}</Button> - <Button btnType='outline' color='gray' onClick={onCancel} type='reset'>{i18n('Cancel')}</Button> - </GridSection> - </Form> - } - </div> - ); - } + render() { + let { + data = {}, + onDataChanged, + isReadOnlyMode, + genericFieldInfo, + onCancel, + isFormValid, + formReady, + onValidateForm + } = this.props; + let { + name, + description, + metric, + value, + aggregationFunction, + time, + unit + } = data; + return ( + <div className="limit-editor"> + {!data.id && ( + <div className="limit-editor-title"> + {data.name ? data.name : i18n('NEW LIMIT')} + </div> + )} + {genericFieldInfo && ( + <Form + ref="validationForm" + hasButtons={false} + isValid={isFormValid} + formReady={formReady} + onValidateForm={() => onValidateForm(LIMITS_FORM_NAME)} + labledButtons={false} + isReadOnlyMode={isReadOnlyMode} + className="limit-editor-form"> + <GridSection + className="limit-editor-form-grid-section" + hasLastColSet> + <GridItem colSpan={2}> + <Input + onChange={name => + onDataChanged( + { name }, + LIMITS_FORM_NAME, + { + name: () => + this.validateName(name) + } + ) + } + label={i18n('Name')} + data-test-id="limit-editor-name" + value={name} + isValid={genericFieldInfo.name.isValid} + errorText={genericFieldInfo.name.errorText} + isRequired={true} + type="text" + /> + </GridItem> + <GridItem colSpan={2} lastColInRow> + <Input + onChange={description => + onDataChanged( + { description }, + LIMITS_FORM_NAME + ) + } + label={i18n('Description')} + data-test-id="limit-editor-description" + value={description} + isValid={ + genericFieldInfo.description.isValid + } + errorText={ + genericFieldInfo.description.errorText + } + isRequired={false} + type="text" + /> + </GridItem> + <GridItem colSpan={2}> + <InputOptions + onInputChange={() => {}} + isMultiSelect={false} + isRequired={true} + onEnumChange={metric => + onDataChanged( + { + metric: { + choice: metric, + other: '' + } + }, + LIMITS_FORM_NAME + ) + } + onOtherChange={metric => + onDataChanged( + { + metric: { + choice: + optionInputOther.OTHER, + other: metric + } + }, + LIMITS_FORM_NAME + ) + } + label={i18n('Metric')} + data-test-id="limit-editor-metric" + type="select" + required={true} + selectedEnum={metric && metric.choice} + otherValue={metric && metric.other} + values={selectValues.METRIC} + isValid={genericFieldInfo.metric.isValid} + errorText={ + genericFieldInfo.metric.errorText + } + /> + </GridItem> + <GridItem> + <Input + onChange={value => + onDataChanged( + { value }, + LIMITS_FORM_NAME + ) + } + label={i18n('Metric value')} + data-test-id="limit-editor-metric-value" + value={value} + isValid={genericFieldInfo.value.isValid} + errorText={genericFieldInfo.value.errorText} + isRequired={true} + type="text" + /> + </GridItem> + <GridItem lastColInRow> + <InputOptions + onInputChange={() => {}} + isMultiSelect={false} + isRequired={false} + onEnumChange={unit => + onDataChanged( + { + unit: { + choice: unit, + other: '' + } + }, + LIMITS_FORM_NAME + ) + } + onOtherChange={unit => + onDataChanged( + { + unit: { + choice: + optionInputOther.OTHER, + other: unit + } + }, + LIMITS_FORM_NAME + ) + } + label={i18n('Units')} + data-test-id="limit-editor-units" + type="select" + required={false} + selectedEnum={unit && unit.choice} + otherValue={unit && unit.other} + values={selectValues.UNIT} + isValid={genericFieldInfo.unit.isValid} + errorText={genericFieldInfo.unit.errorText} + /> + </GridItem> + <GridItem colSpan={2}> + <Input + onChange={e => { + const selectedIndex = + e.target.selectedIndex; + const val = + e.target.options[selectedIndex] + .value; + onDataChanged( + { aggregationFunction: val }, + LIMITS_FORM_NAME + ); + }} + value={aggregationFunction} + label={i18n('Aggregation Function')} + data-test-id="limit-editor-aggregation-function" + isValid={ + genericFieldInfo.aggregationFunction + .isValid + } + errorText={ + genericFieldInfo.aggregationFunction + .errorText + } + groupClassName="bootstrap-input-options" + className="input-options-select" + type="select"> + {selectValues.AGGREGATION_FUNCTION.map( + mtype => ( + <option + key={mtype.enum} + value={mtype.enum}>{`${ + mtype.title + }`}</option> + ) + )} + </Input> + </GridItem> + <GridItem> + <Input + onChange={e => { + const selectedIndex = + e.target.selectedIndex; + const val = + e.target.options[selectedIndex] + .value; + onDataChanged( + { time: val }, + LIMITS_FORM_NAME + ); + }} + value={time} + label={i18n('Time')} + data-test-id="limit-editor-time" + isValid={genericFieldInfo.time.isValid} + errorText={genericFieldInfo.time.errorText} + groupClassName="bootstrap-input-options" + className="input-options-select" + type="select"> + {selectValues.TIME.map(mtype => ( + <option + key={mtype.enum} + value={mtype.enum}>{`${ + mtype.title + }`}</option> + ))} + </Input> + </GridItem> + </GridSection> + <GridSection className="limit-editor-buttons"> + <Button + btnType="outline" + disabled={!isFormValid || isReadOnlyMode} + onClick={() => this.submit()} + type="reset"> + {i18n('Save')} + </Button> + <Button + btnType="outline" + color="gray" + onClick={onCancel} + type="reset"> + {i18n('Cancel')} + </Button> + </GridSection> + </Form> + )} + </div> + ); + } - validateName(value) { - const {data: {id}, limitsNames} = this.props; - const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: limitsNames}); + validateName(value) { + const { data: { id }, limitsNames } = this.props; + const isExists = Validator.isItemNameAlreadyExistsInList({ + itemId: id, + itemName: value, + list: limitsNames + }); - return !isExists ? {isValid: true, errorText: ''} : - {isValid: false, errorText: i18n('Limit by the name \'' + value + '\' already exists. Limit name must be unique')}; - } + return !isExists + ? { isValid: true, errorText: '' } + : { + isValid: false, + errorText: i18n( + "Limit by the name '" + + value + + "' already exists. Limit name must be unique" + ) + }; + } - - submit() { - if (!this.props.formReady) { - this.props.onValidateForm(LIMITS_FORM_NAME); - } else { - this.props.onSubmit(); - } - } + submit() { + if (!this.props.formReady) { + this.props.onValidateForm(LIMITS_FORM_NAME); + } else { + this.props.onSubmit(); + } + } } export default LimitEditor; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js index 8ac845a1a7..a275808d01 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js @@ -14,41 +14,47 @@ * permissions and limitations under the License. */ -import {actionTypes, selectValues} from './LimitEditorConstants.js'; -import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx'; - +import { actionTypes, selectValues } from './LimitEditorConstants.js'; +import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx'; const LimitEditorActionHelper = { - openLimitsEditor(dispatch, {limit}) { - let modifiedLimit = {...limit}; - if (limit && limit.metric) { - modifiedLimit.metric = LimitEditorActionHelper.createChoiceObject(modifiedLimit.metric, selectValues.METRIC); - } - if (limit && limit.unit) { - modifiedLimit.unit = LimitEditorActionHelper.createChoiceObject(modifiedLimit.unit, selectValues.UNIT); - } - dispatch({type: actionTypes.OPEN, limitItem: modifiedLimit}); - }, + openLimitsEditor(dispatch, { limit }) { + let modifiedLimit = { ...limit }; + if (limit && limit.metric) { + modifiedLimit.metric = LimitEditorActionHelper.createChoiceObject( + modifiedLimit.metric, + selectValues.METRIC + ); + } + if (limit && limit.unit) { + modifiedLimit.unit = LimitEditorActionHelper.createChoiceObject( + modifiedLimit.unit, + selectValues.UNIT + ); + } + dispatch({ type: actionTypes.OPEN, limitItem: modifiedLimit }); + }, - closeLimitsEditor(dispatch) { - dispatch({type: actionTypes.CLOSE}); - }, + closeLimitsEditor(dispatch) { + dispatch({ type: actionTypes.CLOSE }); + }, - createChoiceObject(value, optionsList) { - let option = optionsList.find(function(item) { return item.enum === value; }); - if (!option) { - return { - choice: optionInputOther.OTHER, - other: value - }; - } - else { - return { - choice: value, - other: '' - }; - } - } + createChoiceObject(value, optionsList) { + let option = optionsList.find(function(item) { + return item.enum === value; + }); + if (!option) { + return { + choice: optionInputOther.OTHER, + other: value + }; + } else { + return { + choice: value, + other: '' + }; + } + } }; export default LimitEditorActionHelper; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js index 9829e696c3..a916b9594c 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js @@ -3,62 +3,61 @@ import i18n from 'nfvo-utils/i18n/i18n.js'; // import InputOptions, {other as optionInputOther} from 'nfvo-components/input/inputOptions/InputOptions.jsx'; export const actionTypes = keyMirror({ - OPEN: null, - CLOSE: null, - DATA_CHANGED: null, + OPEN: null, + CLOSE: null, + DATA_CHANGED: null }); export const LIMITS_FORM_NAME = 'LIMITSFORM'; export const selectValues = { - METRIC: [ - {enum: '', title: i18n('please select…')}, - {enum: 'BWTH', title: 'BWTH'}, - {enum: 'Country', title: 'Country'}, - {enum: 'Session', title: 'Session'}, - {enum: 'LoB', title: 'LoB'}, - {enum: 'Site', title: 'Site'}, - {enum: 'Usage', title: 'Usage'} - ], - UNIT: [ - {enum: '', title: i18n('please select…')}, - {enum: 'trunk', title: 'Trunks'}, - {enum: 'user', title: 'Users'}, - {enum: 'subscriber', title: 'Subscribers'}, - {enum: 'session', title: 'Sessions'}, - {enum: 'tenant', title: 'Tenants'}, - {enum: 'token', title: 'Tokens'}, - {enum: 'seats', title: 'Seats'}, - {enum: 'TB', title: 'TB'}, - {enum: 'GB', title: 'GB'}, - {enum: 'MB', title: 'MB'} - ], - AGGREGATION_FUNCTION: [ - {enum: '', title: i18n('please select…')}, - {enum: 'Peak', title: 'Peak'}, - {enum: 'Average', title: 'Average'} - ], - TIME: [ - {enum: '', title: i18n('please select…')}, - {enum: 'Day', title: 'Day'}, - {enum: 'Month', title: 'Month'}, - {enum: 'Hour', title: 'Hour'}, - {enum: 'Minute', title: 'Minute'}, - {enum: 'Second', title: 'Second'}, - {enum: 'Milli-Second', title: 'Milli-Second'} - ] - + METRIC: [ + { enum: '', title: i18n('please select…') }, + { enum: 'BWTH', title: 'BWTH' }, + { enum: 'Country', title: 'Country' }, + { enum: 'Session', title: 'Session' }, + { enum: 'LoB', title: 'LoB' }, + { enum: 'Site', title: 'Site' }, + { enum: 'Usage', title: 'Usage' } + ], + UNIT: [ + { enum: '', title: i18n('please select…') }, + { enum: 'trunk', title: 'Trunks' }, + { enum: 'user', title: 'Users' }, + { enum: 'subscriber', title: 'Subscribers' }, + { enum: 'session', title: 'Sessions' }, + { enum: 'tenant', title: 'Tenants' }, + { enum: 'token', title: 'Tokens' }, + { enum: 'seats', title: 'Seats' }, + { enum: 'TB', title: 'TB' }, + { enum: 'GB', title: 'GB' }, + { enum: 'MB', title: 'MB' } + ], + AGGREGATION_FUNCTION: [ + { enum: '', title: i18n('please select…') }, + { enum: 'Peak', title: 'Peak' }, + { enum: 'Average', title: 'Average' } + ], + TIME: [ + { enum: '', title: i18n('please select…') }, + { enum: 'Day', title: 'Day' }, + { enum: 'Month', title: 'Month' }, + { enum: 'Hour', title: 'Hour' }, + { enum: 'Minute', title: 'Minute' }, + { enum: 'Second', title: 'Second' }, + { enum: 'Milli-Second', title: 'Milli-Second' } + ] }; export const limitType = { - SERVICE_PROVIDER: 'ServiceProvider', - VENDOR: 'Vendor' + SERVICE_PROVIDER: 'ServiceProvider', + VENDOR: 'Vendor' }; export const defaultState = { - LIMITS_EDITOR_DATA: { - metric: {choice: '', other: ''}, - } + LIMITS_EDITOR_DATA: { + metric: { choice: '', other: '' } + } }; export const NEW_LIMIT_TEMP_ID = 'NEW_LIMIT_TEMP_ID'; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js index 99d94a09cc..a0c3b0b1b1 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js @@ -14,58 +14,73 @@ * permissions and limitations under the License. */ -import {actionTypes, LIMITS_FORM_NAME, defaultState} from './LimitEditorConstants.js'; -import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx'; +import { + actionTypes, + LIMITS_FORM_NAME, + defaultState +} from './LimitEditorConstants.js'; +import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx'; export default (state = {}, action) => { - switch (action.type) { - case actionTypes.OPEN: - return { - ...state, - data: action.limitItem ? {...action.limitItem} : defaultState.LIMITS_EDITOR_DATA, - formReady: null, - formName: LIMITS_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}] - }, - 'metric' : { - isValid: true, - errorText: '', - validations: [{type: 'required', data: true}, {type: 'requiredChoiceWithOther', data: optionInputOther.OTHER}] - }, - 'value' : { - isValid: true, - errorText: '', - validations: [{type: 'required', data: true}] - }, - 'unit' : { - isValid: true, - errorText: '', - validations: [] - }, - 'aggregationFunction' : { - isValid: true, - errorText: '', - validations: [] - }, - 'time' : { - isValid: true, - errorText: '', - validations: [] - } - } - }; - case actionTypes.CLOSE: - return {}; - default: - return state; - } + switch (action.type) { + case actionTypes.OPEN: + return { + ...state, + data: action.limitItem + ? { ...action.limitItem } + : defaultState.LIMITS_EDITOR_DATA, + formReady: null, + formName: LIMITS_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 } + ] + }, + metric: { + isValid: true, + errorText: '', + validations: [ + { type: 'required', data: true }, + { + type: 'requiredChoiceWithOther', + data: optionInputOther.OTHER + } + ] + }, + value: { + isValid: true, + errorText: '', + validations: [{ type: 'required', data: true }] + }, + unit: { + isValid: true, + errorText: '', + validations: [] + }, + aggregationFunction: { + isValid: true, + errorText: '', + validations: [] + }, + time: { + isValid: true, + errorText: '', + validations: [] + } + } + }; + case actionTypes.CLOSE: + return {}; + default: + return state; + } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx index 4841d0335c..2667560935 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx @@ -18,99 +18,157 @@ import i18n from 'nfvo-utils/i18n/i18n.js'; import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx'; import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx'; import LimitEditor from './LimitEditor.js'; -import {NEW_LIMIT_TEMP_ID, selectValues} from './LimitEditorConstants.js'; +import { NEW_LIMIT_TEMP_ID, selectValues } from './LimitEditorConstants.js'; -const LimitItem = ({isReadOnlyMode, limit, onDelete, onSelect}) => { - const {name, description, value, metric, aggregationFunction = '', time = ''} = limit; - const timeLabel = time ? `per ${time}` : ''; - let metricOption = selectValues.METRIC.find(item => item.enum === metric); - metricOption = metricOption ? metricOption.title : metric; +const LimitItem = ({ isReadOnlyMode, limit, onDelete, onSelect }) => { + const { + name, + description, + value, + metric, + aggregationFunction = '', + time = '' + } = limit; + const timeLabel = time ? `per ${time}` : ''; + let metricOption = selectValues.METRIC.find(item => item.enum === metric); + metricOption = metricOption ? metricOption.title : metric; - return ( - <ListEditorItemView - onDelete={onDelete} - onSelect={onSelect} - isReadOnlyMode={isReadOnlyMode}> - <div className='list-editor-item-view-field limit-name'> - <div className='text name'>{name}</div> - </div> + return ( + <ListEditorItemView + onDelete={onDelete} + onSelect={onSelect} + isReadOnlyMode={isReadOnlyMode}> + <div className="list-editor-item-view-field limit-name"> + <div className="text name">{name}</div> + </div> - <div className='list-editor-item-view-field limit-description'> - <div className='text description'>{description}</div> - </div> + <div className="list-editor-item-view-field limit-description"> + <div className="text description">{description}</div> + </div> - <div className='list-editor-item-view-field limit-metric-details'> - <div className='text description'>{`${metricOption} ${value} ${aggregationFunction} ${timeLabel}`}</div> - </div> - </ListEditorItemView> - ); + <div className="list-editor-item-view-field limit-metric-details"> + <div className="text description">{`${metricOption} ${value} ${aggregationFunction} ${timeLabel}`}</div> + </div> + </ListEditorItemView> + ); }; class Limits extends React.Component { + state = { + localFilter: '' + }; + render() { + const { + isReadOnlyMode = false, + limitEditor, + limitsList = [], + onCloseLimitEditor, + selectedLimit + } = this.props; + let limitsNames = {}; + for (let i = 0; i < limitsList.length; i++) { + limitsNames[limitsList[i].name.toLowerCase()] = limitsList[i].id; + } + return ( + <div className="license-model-limits-view"> + <ListEditorView isReadOnlyMode={isReadOnlyMode}> + {this.props.selectedLimit === NEW_LIMIT_TEMP_ID && + limitEditor.data && ( + <LimitEditor + limitsNames={limitsNames} + onCancel={onCloseLimitEditor} + onSubmit={() => this.submit()} + isReadOnlyMode={isReadOnlyMode} + /> + )} + {limitsList.length === 0 && + !limitEditor.data && ( + <div className="no-limits-text"> + {i18n('There are no limits')} + </div> + )} + {limitsList.map(limit => ( + <div key={limit.id} className="limit-item-wrapper"> + <LimitItem + onDelete={() => this.deleteLimit(limit)} + onSelect={ + selectedLimit + ? undefined + : () => this.props.onSelectLimit(limit) + } + clickable={!selectedLimit} + isReadOnlyMode={isReadOnlyMode} + limit={limit} + /> + {limit.id === selectedLimit && + limitEditor.data && ( + <LimitEditor + limitsNames={limitsNames} + onCancel={onCloseLimitEditor} + onSubmit={() => this.submit()} + isReadOnlyMode={isReadOnlyMode} + /> + )} + </div> + ))} + </ListEditorView> + </div> + ); + } - state = { - localFilter: '' - }; + submit() { + let { + onSubmit, + onCloseLimitEditor, + parent, + limitEditor, + licenseModelId, + version, + limitType + } = this.props; + onSubmit( + { type: limitType, ...limitEditor.data }, + parent, + licenseModelId, + version + ).then(() => onCloseLimitEditor()); + } - render() { - const {isReadOnlyMode = false, limitEditor, limitsList = [], onCloseLimitEditor, selectedLimit} = this.props; - let limitsNames = {}; - for (let i = 0; i < limitsList.length; i++) { - limitsNames[limitsList[i].name.toLowerCase()] = limitsList[i].id; - } - return ( - <div className='license-model-limits-view'> - <ListEditorView isReadOnlyMode={isReadOnlyMode}> - {this.props.selectedLimit === NEW_LIMIT_TEMP_ID && limitEditor.data && - <LimitEditor limitsNames={limitsNames} onCancel={onCloseLimitEditor} onSubmit={ () => this.submit()} isReadOnlyMode={isReadOnlyMode}/> - } - {limitsList.length === 0 && !limitEditor.data && <div className='no-limits-text'>{i18n('There are no limits')}</div>} - {limitsList.map(limit => - <div key={limit.id} className='limit-item-wrapper'> - <LimitItem - onDelete={() => this.deleteLimit(limit)} - onSelect={selectedLimit ? undefined : () => this.props.onSelectLimit(limit)} - clickable={!selectedLimit} - isReadOnlyMode={isReadOnlyMode} - limit={limit}/> - {limit.id === selectedLimit && limitEditor.data && - <LimitEditor - limitsNames={limitsNames} - onCancel={onCloseLimitEditor} - onSubmit={ () => this.submit()} - isReadOnlyMode={isReadOnlyMode} /> - } - </div> )} - </ListEditorView> + deleteLimit(limit) { + let { + onDelete, + parent, + licenseModelId, + version, + onCloseLimitEditor, + selectedLimit + } = this.props; + onDelete({ + limit, + parent, + licenseModelId, + version, + onCloseLimitEditor, + selectedLimit + }); + } - </div> - ); - } - - submit() { - let {onSubmit, onCloseLimitEditor, parent, limitEditor, licenseModelId, version, limitType} = this.props; - onSubmit({type: limitType, ...limitEditor.data}, parent, licenseModelId, version).then(() => onCloseLimitEditor()); - } - - deleteLimit(limit) { - let {onDelete, parent, licenseModelId, version, onCloseLimitEditor, selectedLimit} = this.props; - onDelete({limit, parent, licenseModelId, version, onCloseLimitEditor, selectedLimit}); - } - - filterList() { - let {limitsList = []} = this.props; - let {localFilter} = this.state; - if (localFilter.trim()) { - const filter = new RegExp(escape(localFilter), 'i'); - return limitsList.filter(({name = '', description = ''}) => { - return escape(name).match(filter) || escape(description).match(filter); - }); - } - else { - return limitsList; - } - } + filterList() { + let { limitsList = [] } = this.props; + let { localFilter } = this.state; + if (localFilter.trim()) { + const filter = new RegExp(escape(localFilter), 'i'); + return limitsList.filter(({ name = '', description = '' }) => { + return ( + escape(name).match(filter) || + escape(description).match(filter) + ); + }); + } else { + return limitsList; + } + } } export default Limits; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitsServer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitsServer.js index 1b8ecb9d94..679f9975e5 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitsServer.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitsServer.js @@ -16,31 +16,29 @@ // items/{itemId}/users -let list = [ - -]; +let list = []; export default { - fetch() { - return Promise.resolve({ - listCount: list.length, - results: list - }); - }, + fetch() { + return Promise.resolve({ + listCount: list.length, + results: list + }); + }, - put(url, payload) { - // let {removedUsers, addedUsers} = payload; - // users = users.filter(user => !removedUsers.map(user => user.userId).includes(user.userId)).concat(addedUsers); - payload.id = Math.random() * (1000 - 1) + 1; - list.push(payload); - return Promise.resolve(); - }, + put(url, payload) { + // let {removedUsers, addedUsers} = payload; + // users = users.filter(user => !removedUsers.map(user => user.userId).includes(user.userId)).concat(addedUsers); + payload.id = Math.random() * (1000 - 1) + 1; + list.push(payload); + return Promise.resolve(); + }, - destroy(url) { - const parts = url.split('/'); - const id = parts[parts.length - 1]; - let newList = list.filter(item => item.id !== id); - list = newList; - return Promise.resolve(); - } -};
\ No newline at end of file + destroy(url) { + const parts = url.split('/'); + const id = parts[parts.length - 1]; + let newList = list.filter(item => item.id !== id); + list = newList; + return Promise.resolve(); + } +}; 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); |