diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct')
76 files changed, 1277 insertions, 1357 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProduct.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProduct.js index ae3d3932ed..cdaf189fc0 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProduct.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProduct.js @@ -16,64 +16,69 @@ import {connect} from 'react-redux'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js'; +import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js'; import TabulatedEditor from 'src/nfvo-components/editor/TabulatedEditor.jsx'; -import {enums} from 'sdc-app/onboarding/OnboardingConstants.js'; -import OnboardingActionHelper from 'sdc-app/onboarding/OnboardingActionHelper.js'; +import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js'; -import {navigationItems, mapScreenToNavigationItem, onboardingMethod as onboardingMethodTypes, onboardingOriginTypes} from './SoftwareProductConstants.js'; +import {onboardingMethod as onboardingMethodTypes, onboardingOriginTypes} from './SoftwareProductConstants.js'; import SoftwareProductActionHelper from './SoftwareProductActionHelper.js'; import SoftwareProductComponentsActionHelper from './components/SoftwareProductComponentsActionHelper.js'; -import SoftwareProductDependenciesActionHelper from './dependencies/SoftwareProductDependenciesActionHelper.js'; - +import PermissionsActionHelper from './../permissions/PermissionsActionHelper.js'; +import RevisionsActionHelper from './../revisions/RevisionsActionHelper.js'; import HeatSetupActionHelper from './attachments/setup/HeatSetupActionHelper.js'; import { actionsEnum as versionControllerActions } from 'nfvo-components/panel/versionController/VersionControllerConstants.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 {onboardingMethod as onboardingMethodType} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js'; +import {SyncStates} from 'sdc-app/common/merge/MergeEditorConstants.js'; +import {catalogItemStatuses} from 'sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js'; function getActiveNavigationId(screen, componentId) { - let activeItemId = componentId ? mapScreenToNavigationItem[screen] + '|' + componentId : mapScreenToNavigationItem[screen]; + let activeItemId = componentId ? screen + '|' + componentId : screen; return activeItemId; } const buildComponentNavigationBarGroups = ({componentId, meta}) => { const groups = ([ { - id: navigationItems.GENERAL + '|' + componentId, + id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL + '|' + componentId, name: i18n('General'), disabled: false, meta }, { - id: navigationItems.COMPUTE + '|' + componentId, + id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE + '|' + componentId, name: i18n('Compute'), disabled: false, meta }, { - id: navigationItems.LOAD_BALANCING + '|' + componentId, + id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING + '|' + componentId, name: i18n('High Availability & Load Balancing'), disabled: false, meta }, { - id: navigationItems.NETWORKS + '|' + componentId, + id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK + '|' + componentId, name: i18n('Networks'), disabled: false, meta }, { - id: navigationItems.STORAGE + '|' + componentId, + id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE + '|' + componentId, name: i18n('Storage'), disabled: false, meta }, { - id: navigationItems.IMAGES + '|' + componentId, + id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES + '|' + componentId, name: i18n('Images'), disabled: false, meta }, { - id: navigationItems.PROCESS_DETAILS + '|' + componentId, + id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES + '|' + componentId, name: i18n('Process Details'), disabled: false, meta }, { - id: navigationItems.MONITORING + '|' + componentId, + id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING + '|' + componentId, name: i18n('Monitoring'), disabled: false, meta @@ -85,67 +90,67 @@ const buildComponentNavigationBarGroups = ({componentId, meta}) => { const buildNavigationBarProps = ({softwareProduct, meta, screen, componentId, componentsList, mapOfExpandedIds}) => { const {softwareProductEditor: {data: currentSoftwareProduct = {}}} = softwareProduct; - const {id, name, onboardingMethod, onboardingOrigin} = currentSoftwareProduct; + const {id, name, onboardingMethod, candidateOnboardingOrigin} = currentSoftwareProduct; const groups = [{ id: id, name: name, items: [ { - id: navigationItems.VENDOR_SOFTWARE_PRODUCT, + id: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE, name: i18n('Overview'), disabled: false, meta }, { - id: navigationItems.GENERAL, + id: enums.SCREEN.SOFTWARE_PRODUCT_DETAILS, name: i18n('General'), disabled: false, meta }, { - id: navigationItems.DEPLOYMENT_FLAVORS, + id: enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT, name: i18n('Deployment Flavors'), disabled: false, hidden: onboardingMethod !== onboardingMethodTypes.MANUAL, meta }, { - id: navigationItems.PROCESS_DETAILS, + id: enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES, name: i18n('Process Details'), disabled: false, meta }, { - id: navigationItems.NETWORKS, + id: enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS, name: i18n('Networks'), disabled: false, meta }, { - id: navigationItems.ATTACHMENTS, + id: enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS, name: i18n('Attachments'), disabled: false, - hidden: onboardingOrigin === onboardingOriginTypes.NONE, + hidden: candidateOnboardingOrigin === onboardingOriginTypes.NONE, meta }, { - id: navigationItems.ACTIVITY_LOG, + id: enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG, name: i18n('Activity Log'), disabled: false, meta }, { - id: navigationItems.DEPENDENCIES, + id: enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES, name: i18n('Component Dependencies'), hidden: componentsList.length <= 1, disabled: false, meta }, { - id: navigationItems.COMPONENTS, + id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS, name: i18n('Components'), hidden: componentsList.length <= 0, meta, - expanded: mapOfExpandedIds[navigationItems.COMPONENTS] === true && screen !== enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE, + expanded: mapOfExpandedIds[enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS] === true && screen !== enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE, items: [ ...componentsList.map(({id, displayName}) => ({ - id: navigationItems.COMPONENTS + '|' + id, + id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS + '|' + id, name: displayName, meta, - expanded: mapOfExpandedIds[navigationItems.COMPONENTS + '|' + id] === true && screen !== enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE, + expanded: mapOfExpandedIds[enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS + '|' + id] === true && screen !== enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE, items: buildComponentNavigationBarGroups({componentId: id, meta}) })) ] @@ -158,24 +163,28 @@ const buildNavigationBarProps = ({softwareProduct, meta, screen, componentId, co }; }; -const buildVersionControllerProps = (softwareProduct) => { - const {softwareProductEditor} = softwareProduct; - const {data: currentSoftwareProduct = {}, isValidityData = true} = softwareProductEditor; - - const {version, viewableVersions, status: currentStatus, lockingUser} = currentSoftwareProduct; - const {status, isCheckedOut} = VersionControllerUtils.getCheckOutStatusKindByUserID(currentStatus, lockingUser); +const buildVersionControllerProps = ({softwareProduct, versions, currentVersion, permissions, userInfo, usersList, itemPermission, isReadOnlyMode}) => { + const {softwareProductEditor = {data: {}}} = softwareProduct; + const {isValidityData = true, data: {name, onboardingMethod}} = softwareProductEditor; return { - status, isCheckedOut, version, viewableVersions, - isFormDataValid: isValidityData + version: currentVersion, + viewableVersions: versions, + isFormDataValid: isValidityData, + permissions, + itemName: name, + itemPermission, + isReadOnlyMode, + userInfo, + usersList, + isManual: onboardingMethod === onboardingMethodType.MANUAL }; }; -function buildMeta({softwareProduct, componentId, softwareProductDependencies}) { +function buildMeta({softwareProduct, componentId, softwareProductDependencies, isReadOnlyMode}) { const {softwareProductEditor, softwareProductComponents, softwareProductQuestionnaire, softwareProductAttachments} = softwareProduct; const {data: currentSoftwareProduct = {}} = softwareProductEditor; - const {version, onboardingOrigin} = currentSoftwareProduct; - const isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct); + const {version, onboardingOrigin, candidateOnboardingOrigin} = currentSoftwareProduct; const {qdata} = softwareProductQuestionnaire; const {heatSetup, heatSetupCache} = softwareProductAttachments; let currentComponentMeta = {}; @@ -183,35 +192,52 @@ function buildMeta({softwareProduct, componentId, softwareProductDependencies}) const {componentEditor: {data: componentData = {} , qdata: componentQdata}} = softwareProductComponents; currentComponentMeta = {componentData, componentQdata}; } - const meta = {softwareProduct: currentSoftwareProduct, qdata, version, onboardingOrigin, heatSetup, heatSetupCache, isReadOnlyMode, currentComponentMeta, softwareProductDependencies}; + const meta = {softwareProduct: currentSoftwareProduct, qdata, version, onboardingOrigin, candidateOnboardingOrigin, heatSetup, heatSetupCache, + isReadOnlyMode, currentComponentMeta, softwareProductDependencies}; return meta; } -const mapStateToProps = ({softwareProduct}, {currentScreen: {screen, props: {componentId}}}) => { +const mapStateToProps = ( + { + softwareProduct, + users: {usersList, userInfo}, + versionsPage: {versionsList: {versions}, permissions} + }, + { + currentScreen: {screen, itemPermission, props: {version: currentVersion, componentId, isReadOnlyMode}} + } +) => { const {softwareProductEditor, softwareProductComponents, softwareProductDependencies} = softwareProduct; const {mapOfExpandedIds = []} = softwareProductEditor; const {componentsList = []} = softwareProductComponents; - const meta = buildMeta({softwareProduct, componentId, softwareProductDependencies}); + const meta = buildMeta({softwareProduct, componentId, softwareProductDependencies, isReadOnlyMode}); return { - versionControllerProps: buildVersionControllerProps(softwareProduct), + versionControllerProps: buildVersionControllerProps({ + softwareProduct, + versions, + currentVersion, + userInfo, + usersList, + permissions, + itemPermission: {...itemPermission, isDirty: true}, + isReadOnlyMode + }), navigationBarProps: buildNavigationBarProps({softwareProduct, meta, screen, componentId, componentsList, mapOfExpandedIds}), meta }; }; -const autoSaveBeforeNavigate = ({dispatch, screen, softwareProductId, componentId, - meta: {isReadOnlyMode, softwareProduct, version, qdata, softwareProductDependencies, +const autoSaveBeforeNavigate = ({dispatch, screen, softwareProductId, version, componentId, + meta: {isReadOnlyMode, softwareProduct, qdata, currentComponentMeta: {componentData, componentQdata}}}) => { let promise; if (isReadOnlyMode) { promise = Promise.resolve(); } else { switch(screen) { - case enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES: - promise = SoftwareProductDependenciesActionHelper.saveDependencies(dispatch,{softwareProductId, version, dependenciesList: softwareProductDependencies}); case enums.SCREEN.SOFTWARE_PRODUCT_DETAILS: - promise = SoftwareProductActionHelper.updateSoftwareProduct(dispatch, {softwareProduct, qdata}); + promise = SoftwareProductActionHelper.updateSoftwareProduct(dispatch, {softwareProduct, version, qdata}); break; case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL: promise = SoftwareProductComponentsActionHelper.updateSoftwareProductComponent(dispatch, @@ -233,96 +259,65 @@ const autoSaveBeforeNavigate = ({dispatch, screen, softwareProductId, componentI }; -const onComponentNavigate = (dispatch, {id, softwareProductId, version, currentComponentId}) => { - const [nextScreen, nextComponentId] = id.split('|'); - switch(nextScreen) { - case navigationItems.COMPONENTS: - if(nextComponentId === currentComponentId) { - OnboardingActionHelper.navigateToSoftwareProductComponents(dispatch, {softwareProductId}); - } else { - OnboardingActionHelper.navigateToSoftwareProductComponentGeneral(dispatch, {softwareProductId, componentId: nextComponentId, version}); - } - break; - case navigationItems.GENERAL: - OnboardingActionHelper.navigateToSoftwareProductComponentGeneral(dispatch, {softwareProductId, componentId: nextComponentId, version}); - break; - case navigationItems.COMPUTE: - OnboardingActionHelper.navigateToComponentCompute(dispatch, {softwareProductId, componentId: nextComponentId, version}); - break; - case navigationItems.LOAD_BALANCING: - OnboardingActionHelper.navigateToComponentLoadBalancing(dispatch, {softwareProductId, componentId: nextComponentId, version}); - break; - case navigationItems.NETWORKS: - OnboardingActionHelper.navigateToComponentNetwork(dispatch, {softwareProductId, componentId: nextComponentId, version}); - break; - case navigationItems.IMAGES: - OnboardingActionHelper.navigateToComponentImages(dispatch, {softwareProductId, componentId: nextComponentId, version}); - break; - case navigationItems.STORAGE: - OnboardingActionHelper.navigateToComponentStorage(dispatch, {softwareProductId, componentId: nextComponentId, version}); - break; - case navigationItems.PROCESS_DETAILS: - OnboardingActionHelper.navigateToSoftwareProductComponentProcesses(dispatch, {softwareProductId, componentId: nextComponentId, version}); - break; - case navigationItems.MONITORING: - OnboardingActionHelper.navigateToSoftwareProductComponentMonitoring(dispatch, {softwareProductId, componentId: nextComponentId, version}); - break; - } -}; - -const mapActionsToProps = (dispatch, {currentScreen: {screen, props: {softwareProductId, componentId: currentComponentId}}}) => { +const mapActionsToProps = (dispatch, {currentScreen: {screen, props: {softwareProductId, licenseModelId, version, componentId: currentComponentId}}}) => { const props = { - onVersionSwitching: (version, meta) => { - const screenToLoad = !currentComponentId ? screen : enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS; - SoftwareProductActionHelper.fetchSoftwareProduct(dispatch, {softwareProductId, version}); - props.onNavigate({id: getActiveNavigationId(screenToLoad), meta, version}); + onVersionSwitching: (versionToSwitch, meta) => { + ScreensHelper.loadScreen(dispatch, {screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT, + props: {softwareProductId: meta.softwareProduct.id, version: versionToSwitch}}); + }, + onOpenPermissions: ({users}) => { + return PermissionsActionHelper.fetchItemUsers(dispatch, {itemId: softwareProductId, allUsers: users}); + }, + onOpenRevisionsModal: () => { + return RevisionsActionHelper.openRevisionsView(dispatch, {itemId: softwareProductId, version: version, itemType: screenTypes.SOFTWARE_PRODUCT}); + }, + onOpenCommentCommitModal: ({onCommit, title}) => dispatch({ + type: modalActionTypes.GLOBAL_MODAL_SHOW, + data: { + modalComponentName: modalContentMapper.COMMIT_COMMENT, + modalComponentProps: { + onCommit, + type: CommitModalType.COMMIT + }, + title + } + }), + onMoreVersionsClick: ({itemName, users}) => { + ScreensHelper.loadScreen(dispatch, {screen: enums.SCREEN.SOFTWARE_PRODUCT_VERSIONS_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT, + props: {softwareProductId, softwareProduct: {name: itemName, vendorId: licenseModelId}, usersList: users}}); + }, onToggle: (groups, itemIdToExpand) => groups.map(({items}) => SoftwareProductActionHelper.toggleNavigationItems(dispatch, {items, itemIdToExpand})), - onNavigate: ({id, meta, version}) => { - let {onboardingOrigin, heatSetup, heatSetupCache} = meta; + onNavigate: ({id, meta, newVersion}) => { + let navigationVersion = newVersion || version; + let {onboardingOrigin, candidateOnboardingOrigin, heatSetup, heatSetupCache} = meta; let heatSetupPopupPromise = screen === enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS ? HeatSetupActionHelper.heatSetupLeaveConfirmation(dispatch, {softwareProductId, heatSetup, heatSetupCache}) : Promise.resolve(); - let preNavigate = meta ? autoSaveBeforeNavigate({dispatch, screen, meta, softwareProductId, componentId: currentComponentId}) : Promise.resolve(); + let preNavigate = meta ? autoSaveBeforeNavigate({dispatch, screen, meta, version, softwareProductId, componentId: currentComponentId}) : Promise.resolve(); version = version || (meta ? meta.version : undefined); Promise.all([preNavigate, heatSetupPopupPromise]).then(() => { - switch(id) { - case navigationItems.VENDOR_SOFTWARE_PRODUCT: - OnboardingActionHelper.navigateToSoftwareProductLandingPage(dispatch, {softwareProductId, version}); - break; - case navigationItems.GENERAL: - OnboardingActionHelper.navigateToSoftwareProductDetails(dispatch, {softwareProductId, version}); - break; - case navigationItems.DEPLOYMENT_FLAVORS: - OnboardingActionHelper.navigateToSoftwareProductDeployment(dispatch, {softwareProductId, version}); - break; - case navigationItems.PROCESS_DETAILS: - OnboardingActionHelper.navigateToSoftwareProductProcesses(dispatch, {softwareProductId, version}); - break; - case navigationItems.NETWORKS: - OnboardingActionHelper.navigateToSoftwareProductNetworks(dispatch, {softwareProductId, version}); - break; - case navigationItems.DEPENDENCIES: - OnboardingActionHelper.navigateToSoftwareProductDependencies(dispatch, {softwareProductId, version}); - break; - case navigationItems.ATTACHMENTS: - if(onboardingOrigin === onboardingOriginTypes.ZIP) { - OnboardingActionHelper.navigateToSoftwareProductAttachmentsSetupTab(dispatch, {softwareProductId, version}); + let [nextScreen, nextComponentId] = id.split('|'); + if(nextScreen === enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS && nextComponentId && nextComponentId === currentComponentId) { + ScreensHelper.loadScreen(dispatch, { + screen: nextScreen, screenType: screenTypes.SOFTWARE_PRODUCT, + props: {softwareProductId, version: navigationVersion} + }); + } + else { + if(nextScreen === enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS) { + if(onboardingOrigin === onboardingOriginTypes.ZIP || candidateOnboardingOrigin === onboardingOriginTypes.ZIP) { + nextScreen = enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_SETUP; } else if(onboardingOrigin === onboardingOriginTypes.CSAR) { - OnboardingActionHelper.navigateToSoftwareProductAttachmentsValidationTab(dispatch, {softwareProductId, version}); + nextScreen = enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_VALIDATION; } - break; - case navigationItems.COMPONENTS: - OnboardingActionHelper.navigateToSoftwareProductComponents(dispatch, {softwareProductId, version}); - break; - case navigationItems.ACTIVITY_LOG: - OnboardingActionHelper.navigateToSoftwareProductActivityLog(dispatch, {softwareProductId, version}); - break; - default: - onComponentNavigate(dispatch, {id, softwareProductId, version, screen, currentComponentId}); - break; + } + ScreensHelper.loadScreen(dispatch, { + screen: nextScreen, screenType: screenTypes.SOFTWARE_PRODUCT, + props: {softwareProductId, version: navigationVersion, componentId: nextComponentId} + }); } }).catch((e) => {console.error(e);}); } @@ -342,25 +337,33 @@ const mapActionsToProps = (dispatch, {currentScreen: {screen, props: {softwarePr props.onSave = () => Promise.resolve(); break; default: - props.onSave = ({softwareProduct, qdata}) => SoftwareProductActionHelper.updateSoftwareProduct(dispatch, {softwareProduct, qdata}); + props.onSave = ({softwareProduct, qdata}) => SoftwareProductActionHelper.updateSoftwareProduct(dispatch, {softwareProduct, qdata, version}); break; } - props.onVersionControllerAction = (action, version, meta) => { + props.onVersionControllerAction = (action, version, comment, meta) => { let {heatSetup, heatSetupCache} = meta; - let heatSetupPopupPromise = screen === enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS && action === versionControllerActions.CHECK_IN ? + let autoSavePromise = meta ? autoSaveBeforeNavigate({dispatch, screen, meta, version, softwareProductId, componentId: currentComponentId}) : Promise.resolve(); + let heatSetupPopupPromise = screen === enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS && action === versionControllerActions.COMMIT ? HeatSetupActionHelper.heatSetupLeaveConfirmation(dispatch, {softwareProductId, heatSetup, heatSetupCache}) : Promise.resolve(); - heatSetupPopupPromise.then(() => { - return SoftwareProductActionHelper.performVCAction(dispatch, {softwareProductId, action, version}).then(({newVersion}) => { - //props.onNavigate({id: getActiveNavigationId(screen, currentComponentId), version}); - if(screen === enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG) { - OnboardingActionHelper.navigateToSoftwareProductActivityLog(dispatch, {softwareProductId, version: newVersion}); + Promise.all([autoSavePromise, heatSetupPopupPromise]).then(() => { + return SoftwareProductActionHelper.performVCAction(dispatch, {softwareProductId, action, version, comment, meta}).then(updatedVersion => { + const inMerge = updatedVersion && updatedVersion.state && updatedVersion.state.synchronizationState === SyncStates.MERGE; + if((action === versionControllerActions.SYNC && !inMerge) || + ((action === versionControllerActions.COMMIT || action === versionControllerActions.SYNC) && updatedVersion.status === catalogItemStatuses.CERTIFIED)) { + ScreensHelper.loadLandingScreen(dispatch, {previousScreenName: screen, props: {softwareProductId, version: updatedVersion}}); + + } else { + ScreensHelper.loadScreen(dispatch, {screen, screenType: screenTypes.SOFTWARE_PRODUCT, + props: {softwareProductId, version: updatedVersion, componentId: currentComponentId}}); } }); }).catch((e) => {console.error(e);}); }; + + props.onManagePermissions = () => PermissionsActionHelper.openPermissonsManager(dispatch, {itemId: softwareProductId, askForRights: false}); return props; }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js index db7afd27d9..735c6d7f8b 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js @@ -31,8 +31,26 @@ import {actionTypes as componentActionTypes} from './components/SoftwareProductC import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js'; -import {statusEnum} from 'nfvo-components/panel/versionController/VersionControllerConstants.js'; +import ItemsHelper from 'sdc-app/common/helpers/ItemsHelper.js'; +import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js'; +import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js'; +import MergeEditorActionHelper from 'sdc-app/common/merge/MergeEditorActionHelper.js'; +import {CommitModalType} from 'nfvo-components/panel/versionController/components/CommitCommentModal.jsx'; import {actionTypes as commonActionTypes} from 'sdc-app/common/reducers/PlainDataReducerConstants.js'; +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 getValue from 'nfvo-utils/getValue.js'; + +function getLicensingData(licensingData = {}) { + const {licenseAgreement, featureGroups} = licensingData; + const newlicenseAgreement = getValue(licenseAgreement); + const newfeatureGroups = getValue(featureGroups); + return newlicenseAgreement ? { + licenseAgreement: newlicenseAgreement, + featureGroups: newfeatureGroups + } : undefined; +}; function baseUrl() { const restPrefix = Configuration.get('restPrefix'); @@ -48,20 +66,17 @@ function uploadFile(vspId, formData, version) { } -function putSoftwareProduct(softwareProduct) { - return RestAPIUtil.put(`${baseUrl()}${softwareProduct.id}/versions/${softwareProduct.version.id}`, { +function putSoftwareProduct({softwareProduct, version}) { + return RestAPIUtil.put(`${baseUrl()}${softwareProduct.id}/versions/${version.id}`, { name: softwareProduct.name, description: softwareProduct.description, category: softwareProduct.category, subCategory: softwareProduct.subCategory, vendorId: softwareProduct.vendorId, vendorName: softwareProduct.vendorName, - licensingVersion: softwareProduct.licensingVersion && softwareProduct.licensingVersion.id ? softwareProduct.licensingVersion : {} , + licensingVersion: softwareProduct.licensingVersion ? softwareProduct.licensingVersion : undefined, icon: softwareProduct.icon, - licensingData: softwareProduct.licensingData, - onboardingMethod: softwareProduct.onboardingMethod, - networkPackageName: softwareProduct.networkPackageName, - onboardingOrigin: softwareProduct.onboardingOrigin + licensingData: getLicensingData(softwareProduct.licensingData) }); } @@ -74,11 +89,11 @@ function putSoftwareProductAction(id, action, version) { } function fetchSoftwareProductList() { - return RestAPIUtil.fetch(baseUrl()); + return RestAPIUtil.fetch(`${baseUrl()}?versionFilter=Draft`); } function fetchFinalizedSoftwareProductList() { - return RestAPIUtil.fetch(`${baseUrl()}?versionFilter=Final`); + return RestAPIUtil.fetch(`${baseUrl()}?versionFilter=Certified`); } function fetchSoftwareProduct(vspId, version) { @@ -138,10 +153,12 @@ function fetchSoftwareProductCategories(dispatch) { } function loadLicensingData(dispatch, {licenseModelId, licensingVersion}) { - return Promise.all([ - LicenseAgreementActionHelper.fetchLicenseAgreementList(dispatch, {licenseModelId, version: licensingVersion}), - FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {licenseModelId, version: licensingVersion}) - ]); + return ItemsHelper.fetchVersion({itemId: licenseModelId, versionId: licensingVersion}).then(() => { + return Promise.all([ + LicenseAgreementActionHelper.fetchLicenseAgreementList(dispatch, {licenseModelId, version: {id: licensingVersion}}), + FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {licenseModelId, version: {id: licensingVersion}}) + ]); + }); } function getExpandedItemsId(items, itemIdToToggle) { @@ -203,15 +220,7 @@ function migrateSoftwareProduct(vspId, version) { return RestAPIUtil.put(`${baseUrl()}${vspId}/versions/${version.id}/heal`); } -function adjustMinorVersion(version, value) { - let ar = version.split('.'); - return ar[0] + '.' + (parseInt(ar[1]) + value); -} -function adjustMajorVersion(version, value) { - let ar = version.split('.'); - return (parseInt(ar[0]) + value) + '.0'; -} const SoftwareProductActionHelper = { @@ -229,7 +238,10 @@ const SoftwareProductActionHelper = { loadSoftwareProductDetailsData(dispatch, {licenseModelId, licensingVersion}) { SoftwareProductActionHelper.loadSoftwareProductAssociatedData(dispatch); - return loadLicensingData(dispatch, {licenseModelId, licensingVersion}); + if (licensingVersion) { + return loadLicensingData(dispatch, {licenseModelId, licensingVersion}); + } + return Promise.resolve(); }, fetchSoftwareProductList(dispatch) { @@ -246,6 +258,14 @@ const SoftwareProductActionHelper = { })); }, + loadLicensingVersionsList(dispatch, {licenseModelId}){ + return ItemsHelper.fetchVersions({itemId: licenseModelId}).then(response => { + dispatch({ + type: actionTypes.LOAD_LICENSING_VERSIONS_LIST, + licensingVersionsList: response.results + }); + }); + }, updateSoftwareProductHeatCandidate(dispatch, {softwareProductId, heatCandidate, version}){ return updateSoftwareProductHeatCandidate(softwareProductId, heatCandidate, version); }, @@ -276,10 +296,16 @@ const SoftwareProductActionHelper = { }); switch(response.onboardingOrigin){ case onboardingOriginTypes.ZIP: - OnboardingActionHelper.navigateToSoftwareProductAttachmentsSetupTab(dispatch, {softwareProductId, version}); + ScreensHelper.loadScreen(dispatch, { + screen: enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_SETUP, screenType: screenTypes.SOFTWARE_PRODUCT, + props: {softwareProductId, version} + }); break; case onboardingOriginTypes.CSAR: - OnboardingActionHelper.navigateToSoftwareProductAttachmentsValidationTab(dispatch, {softwareProductId, version}); + ScreensHelper.loadScreen(dispatch, { + screen: enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_VALIDATION, screenType: screenTypes.SOFTWARE_PRODUCT, + props: {softwareProductId, version} + }); break; } } @@ -292,7 +318,7 @@ const SoftwareProductActionHelper = { type: modalActionTypes.GLOBAL_MODAL_ERROR, data: { title: failedNotificationTitle, - msg: error.message + msg: error.message || (error.responseJSON && error.responseJSON.message) } }); }); @@ -311,9 +337,9 @@ const SoftwareProductActionHelper = { type: actionTypes.softwareProductEditor.UPLOAD_CONFIRMATION }); }, - updateSoftwareProduct(dispatch, {softwareProduct, qdata}) { + updateSoftwareProduct(dispatch, {softwareProduct, version, qdata}) { return Promise.all([ - SoftwareProductActionHelper.updateSoftwareProductData(dispatch, {softwareProduct}).then( + SoftwareProductActionHelper.updateSoftwareProductData(dispatch, {softwareProduct, version}).then( () => dispatch({ type: actionTypes.SOFTWARE_PRODUCT_LIST_EDIT, payload: {softwareProduct} @@ -322,13 +348,13 @@ const SoftwareProductActionHelper = { SoftwareProductActionHelper.updateSoftwareProductQuestionnaire(dispatch, { softwareProductId: softwareProduct.id, qdata, - version: softwareProduct.version + version }) ]); }, - updateSoftwareProductData(dispatch, {softwareProduct}) { - return putSoftwareProduct(softwareProduct); + updateSoftwareProductData(dispatch, {softwareProduct, version}) { + return putSoftwareProduct({softwareProduct, version}); }, updateSoftwareProductQuestionnaire(dispatch, {softwareProductId, qdata, version}) { @@ -350,19 +376,18 @@ const SoftwareProductActionHelper = { }, softwareProductEditorVendorChanged(dispatch, {deltaData, formName}) { - if (deltaData.licensingVersion.id){ - let p = Promise.all([ - LicenseAgreementActionHelper.fetchLicenseAgreementList(dispatch, { - licenseModelId: deltaData.vendorId, - version: {id: deltaData.licensingVersion.id} - }), - FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, { - licenseModelId: deltaData.vendorId, - version: {id: deltaData.licensingVersion.id} - }) - ]); + if (deltaData.licensingVersion){ + return loadLicensingData(dispatch, {licenseModelId: deltaData.vendorId, licensingVersion: deltaData.licensingVersion}).then(() => { + ValidationHelper.dataChanged(dispatch, {deltaData, formName}); + return Promise.resolve(); + }); + } else if (deltaData.vendorId) { ValidationHelper.dataChanged(dispatch, {deltaData, formName}); - return p; + return SoftwareProductActionHelper.loadLicensingVersionsList(dispatch, { + licenseModelId: deltaData.vendorId + }).then( () => + OnboardingActionHelper.forceBreadCrumbsUpdate(dispatch) + ); } else { ValidationHelper.dataChanged(dispatch, {deltaData, formName}); @@ -386,13 +411,6 @@ const SoftwareProductActionHelper = { }); }, - addSoftwareProduct(dispatch, {softwareProduct}) { - dispatch({ - type: actionTypes.ADD_SOFTWARE_PRODUCT, - softwareProduct - }); - }, - fetchSoftwareProduct(dispatch, {softwareProductId, version}) { return Promise.all([ fetchSoftwareProduct(softwareProductId, version).then(response => { @@ -409,10 +427,33 @@ const SoftwareProductActionHelper = { ]); }, - performVCAction(dispatch, {softwareProductId, action, version}) { - if (action === VersionControllerActionsEnum.SUBMIT) { - return putSoftwareProductAction(softwareProductId, action, version).then(() => { - return putSoftwareProductAction(softwareProductId, VersionControllerActionsEnum.CREATE_PACKAGE, version).then(() => { + manageSubmitAction(dispatch, {softwareProductId, version, isDirty}) { + if (isDirty) { + const onCommit = comment => { + return this.performVCAction(dispatch, {softwareProductId, action: VersionControllerActionsEnum.COMMIT, version, comment}).then(() => { + return this.performSubmitAction(dispatch, {softwareProductId, version}); + }); + }; + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_SHOW, + data: { + modalComponentName: modalContentMapper.COMMIT_COMMENT, + modalComponentProps: { + onCommit, + type: CommitModalType.COMMIT_SUBMIT + }, + title: i18n('Commit & Submit') + } + }); + return Promise.resolve(version); + } + return this.performSubmitAction(dispatch, {softwareProductId, version}); + }, + + performSubmitAction(dispatch, {softwareProductId, version}) { + return putSoftwareProductAction(softwareProductId, VersionControllerActionsEnum.SUBMIT, version).then(() => { + return putSoftwareProductAction(softwareProductId, VersionControllerActionsEnum.CREATE_PACKAGE, version).then(() => { + return ItemsHelper.checkItemStatus(dispatch, {itemId: softwareProductId, versionId: version.id}).then(updatedVersion => { dispatch({ type: modalActionTypes.GLOBAL_MODAL_SUCCESS, data: { @@ -422,12 +463,13 @@ const SoftwareProductActionHelper = { timeout: 2000 } }); - const newVersionId = adjustMajorVersion(version.label, 1); - OnboardingActionHelper.updateCurrentScreenVersion(dispatch, {label: newVersionId, id: newVersionId}); - SoftwareProductActionHelper.fetchSoftwareProduct(dispatch,{softwareProductId, version: {id: newVersionId}}); - return Promise.resolve({newVersion: {id: newVersionId}}); + versionPageActionHelper.fetchVersions(dispatch, {itemType: itemTypes.SOFTWARE_PRODUCT, itemId: softwareProductId}); + return Promise.resolve(updatedVersion); }); - }, error => dispatch({ + }); + }, error => + { + dispatch({ type: modalActionTypes.GLOBAL_MODAL_ERROR, data: { modalComponentName: modalContentMapper.SUMBIT_ERROR_RESPONSE, @@ -435,36 +477,57 @@ const SoftwareProductActionHelper = { modalComponentProps: { validationResponse: error.responseJSON }, - cancelButtonText: i18n('Ok') + cancelButtonText: i18n('OK') } - })); - } - else { - return putSoftwareProductAction(softwareProductId, action, version).then(() => { - let newVersionId = version.id; - /* - TODO Temorary switch to change version label - */ - switch(action) { - case VersionControllerActionsEnum.CHECK_OUT: - newVersionId = adjustMinorVersion(version.label, 1); - break; - case VersionControllerActionsEnum.UNDO_CHECK_OUT: - newVersionId = adjustMinorVersion(version.label, -1); - break; - } - OnboardingActionHelper.updateCurrentScreenVersion(dispatch, {label: newVersionId, id: newVersionId}); - SoftwareProductActionHelper.fetchSoftwareProduct(dispatch,{softwareProductId, version:{id: newVersionId}}); - return Promise.resolve({newVersion: {id: newVersionId}}); }); - } + return Promise.reject(error.responseJSON); + }); }, - switchVersion(dispatch, {softwareProductId, licenseModelId, version}) { - OnboardingActionHelper.navigateToSoftwareProductLandingPage(dispatch, { - softwareProductId, - licenseModelId, - version + performVCAction(dispatch, {softwareProductId, action, version, comment}) { + return MergeEditorActionHelper.analyzeSyncResult(dispatch, {itemId: softwareProductId, version}).then(({inMerge, isDirty, updatedVersion}) => { + if (updatedVersion.status === catalogItemStatuses.CERTIFIED && + (action === VersionControllerActionsEnum.COMMIT || action === VersionControllerActionsEnum.SYNC)) { + versionPageActionHelper.fetchVersions(dispatch, {itemType: itemTypes.SOFTWARE_PRODUCT, itemId: softwareProductId}); + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_WARNING, + data: { + title: i18n('Commit error'), + msg: i18n('Item version already Certified'), + cancelButtonText: i18n('Cancel') + } + }); + return Promise.resolve(updatedVersion); + } + if (!inMerge) { + if (action === VersionControllerActionsEnum.SUBMIT) { + return this.manageSubmitAction(dispatch, {softwareProductId, version, isDirty}); + } + else { + let isCallActionValid = action !== VersionControllerActionsEnum.COMMIT || isDirty; + if(isCallActionValid) { + return ItemsHelper.performVCAction({itemId: softwareProductId, action, version, comment}).then(() => { + versionPageActionHelper.fetchVersions(dispatch, {itemType: itemTypes.LICENSE_MODEL, itemId: softwareProductId}); + if (action === VersionControllerActionsEnum.SYNC) { + return MergeEditorActionHelper.analyzeSyncResult(dispatch, {itemId: softwareProductId, version}).then(({updatedVersion}) => { + return Promise.resolve(updatedVersion); + }); + } else { + return ItemsHelper.checkItemStatus(dispatch, {itemId: softwareProductId, versionId: version.id}); + } + }); + } + else { + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_ERROR, + data: { + title: i18n('Commit Failed'), + msg: i18n('There is nothing to commit') + } + }); + } + } + } }); }, @@ -477,7 +540,7 @@ const SoftwareProductActionHelper = { }, /** for the next verision */ - addComponent(dispatch, {softwareProductId, modalClassName}) { + addComponent(dispatch, {softwareProductId, modalClassName, version}) { SoftwareProductComponentsActionHelper.clearComponentCreationData(dispatch); dispatch({ type: componentActionTypes.COMPONENT_CREATE_OPEN @@ -486,7 +549,7 @@ const SoftwareProductActionHelper = { type: modalActionTypes.GLOBAL_MODAL_SHOW, data: { modalComponentName: modalContentMapper.COMPONENT_CREATION, - modalComponentProps: {softwareProductId}, + modalComponentProps: {softwareProductId, version}, modalClassName, title: 'Create Virtual Function Component' } @@ -494,12 +557,12 @@ const SoftwareProductActionHelper = { }, migrateSoftwareProduct(dispatch, {softwareProduct}) { - let {licenseModelId, licensingVersion, id: softwareProductId, version, status} = softwareProduct; - const newVer = status === statusEnum.CHECK_IN_STATUS || status === statusEnum.SUBMIT_STATUS ? - adjustMinorVersion(version.id, 1) : version.id; - migrateSoftwareProduct(softwareProductId, version) - .then(() =>OnboardingActionHelper.navigateToSoftwareProductLandingPage(dispatch, - {softwareProductId, version: {id: newVer, label: newVer}, licenseModelId, licensingVersion})); + let {id: softwareProductId, version} = softwareProduct; + const newVer = version.id; + migrateSoftwareProduct(softwareProductId, version).then(() => ScreensHelper.loadScreen(dispatch, { + screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT, + props: {softwareProductId, version: {id: newVer, label: newVer}} + })); } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js index 2c094ac36a..7df46589c3 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js @@ -14,7 +14,6 @@ * permissions and limitations under the License. */ import keyMirror from 'nfvo-utils/KeyMirror.js'; -import {enums} from 'sdc-app/onboarding/OnboardingConstants.js'; export const actionTypes = keyMirror({ SOFTWARE_PRODUCT_LOADED: null, @@ -23,7 +22,7 @@ export const actionTypes = keyMirror({ SOFTWARE_PRODUCT_LIST_EDIT: null, SOFTWARE_PRODUCT_CATEGORIES_LOADED: null, SOFTWARE_PRODUCT_QUESTIONNAIRE_UPDATE: null, - ADD_SOFTWARE_PRODUCT: null, + LOAD_LICENSING_VERSIONS_LIST: null, TOGGLE_NAVIGATION_ITEM: null, softwareProductEditor: { @@ -34,23 +33,7 @@ export const actionTypes = keyMirror({ } }); -export const navigationItems = keyMirror({ - VENDOR_SOFTWARE_PRODUCT: 'vendor-software-product', - GENERAL: 'general', - PROCESS_DETAILS: 'process-details', - DEPLOYMENT_FLAVORS: 'deployment-flavor', - NETWORKS: 'networks', - IMAGES: 'images', - ATTACHMENTS: 'attachments', - ACTIVITY_LOG: 'activity-log', - COMPONENTS: 'components', - DEPENDENCIES: 'dependencies', - COMPUTE: 'compute', - LOAD_BALANCING: 'load-balancing', - STORAGE: 'storage', - MONITORING: 'monitoring' -}); export const onboardingMethod = { MANUAL: 'Manual', @@ -69,22 +52,3 @@ export const forms = keyMirror({ export const PRODUCT_QUESTIONNAIRE = 'product'; -export const mapScreenToNavigationItem = { - [enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE]: navigationItems.VENDOR_SOFTWARE_PRODUCT, - [enums.SCREEN.SOFTWARE_PRODUCT_DETAILS]: navigationItems.GENERAL, - [enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS]: navigationItems.ATTACHMENTS, - [enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES]: navigationItems.PROCESS_DETAILS, - [enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT]: navigationItems.DEPLOYMENT_FLAVORS, - [enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS]: navigationItems.NETWORKS, - [enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG]: navigationItems.ACTIVITY_LOG, - [enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES]: navigationItems.DEPENDENCIES, - [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS]: navigationItems.COMPONENTS, - [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL]: navigationItems.GENERAL, - [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE]: navigationItems.COMPUTE, - [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING]: navigationItems.LOAD_BALANCING, - [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK]: navigationItems.NETWORKS, - [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES]: navigationItems.IMAGES, - [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE]: navigationItems.STORAGE, - [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES]: navigationItems.PROCESS_DETAILS, - [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING]: navigationItems.MONITORING, -}; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductListReducer.js index 2fde8c2216..31be338ff5 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductListReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductListReducer.js @@ -22,8 +22,6 @@ export default (state = [], action) => { case actionTypes.SOFTWARE_PRODUCT_LIST_EDIT: const indexForEdit = state.findIndex(vsp => vsp.id === action.payload.softwareProduct.id); return [...state.slice(0, indexForEdit), action.payload.softwareProduct, ...state.slice(indexForEdit + 1)]; - case actionTypes.ADD_SOFTWARE_PRODUCT: - return [...state, action.softwareProduct]; default: return state; } diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachments.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachments.js index f14c988866..234953ec3b 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachments.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachments.js @@ -20,13 +20,12 @@ import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/Soft import HeatSetupActionHelper from './setup/HeatSetupActionHelper.js'; import SoftwareProductAttachmentsView from './SoftwareProductAttachmentsView.jsx'; import {errorLevels} from 'sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationConstants.js'; -import OnboardingActionHelper from 'sdc-app/onboarding/OnboardingActionHelper.js'; import HeatSetup from './setup/HeatSetup.js'; import {doesHeatDataExist} from './SoftwareProductAttachmentsUtils.js'; +import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js'; +import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js'; import SoftwareProductAttachmentsActionHelper from './SoftwareProductAttachmentsActionHelper.js'; -import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js'; - export const mapStateToProps = (state) => { let { softwareProduct: { @@ -46,8 +45,6 @@ export const mapStateToProps = (state) => { } let heatDataExist = doesHeatDataExist(heatSetup); - let isReadOnlyMode = currentSoftwareProduct && currentSoftwareProduct.version ? - VersionControllerUtils.isReadOnly(currentSoftwareProduct) : false; let {version, onboardingOrigin} = currentSoftwareProduct; return { isValidationAvailable: unassigned.length === 0 && modules.length > 0, @@ -56,17 +53,16 @@ export const mapStateToProps = (state) => { heatDataExist, goToOverview, HeatSetupComponent: HeatSetup, - isReadOnlyMode, version, onboardingOrigin, activeTab }; }; -export const mapActionsToProps = (dispatch, {softwareProductId}) => { +export const mapActionsToProps = (dispatch, {softwareProductId, version}) => { return { - onDownload: ({heatCandidate, isReadOnlyMode, version}) => SoftwareProductActionHelper.downloadHeatFile(dispatch, {softwareProductId, heatCandidate, isReadOnlyMode, version}), - onUpload: (formData, version) => dispatch({ + onDownload: ({heatCandidate, isReadOnlyMode}) => SoftwareProductActionHelper.downloadHeatFile(dispatch, {softwareProductId, heatCandidate, isReadOnlyMode, version}), + onUpload: (formData) => dispatch({ type: modalActionTypes.GLOBAL_MODAL_WARNING, data:{ msg: i18n('Upload will erase existing data. Do you want to continue?'), @@ -79,15 +75,25 @@ export const mapActionsToProps = (dispatch, {softwareProductId}) => { }) } }), - onSave: (heatCandidate, version) => SoftwareProductActionHelper.updateSoftwareProductHeatCandidate(dispatch, {softwareProductId, heatCandidate, version}), - onGoToOverview: ({version}) => { - OnboardingActionHelper.navigateToSoftwareProductLandingPage(dispatch, {softwareProductId, version}); - }, - onProcessAndValidate: ({heatData, heatDataCache, isReadOnlyMode, version}) => { + onInvalidFileUpload: () => dispatch({ + type: modalActionTypes.GLOBAL_MODAL_ERROR, + data: { + title: i18n('Upload Failed'), + confirmationButtonText: i18n('Continue'), + msg: i18n('no zip or csar file was uploaded or expected file doesn\'t exist') + } + }), + onSave: (heatCandidate) => SoftwareProductActionHelper.updateSoftwareProductHeatCandidate(dispatch, {softwareProductId, heatCandidate, version}), + onGoToOverview: () => ScreensHelper.loadScreen(dispatch, { + screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT, + props: {softwareProductId, version} + }), + onProcessAndValidate: ({heatData, heatDataCache, isReadOnlyMode}) => { return HeatSetupActionHelper.processAndValidateHeat(dispatch, {softwareProductId, heatData, heatDataCache, isReadOnlyMode, version}); }, setActiveTab: ({activeTab}) => SoftwareProductAttachmentsActionHelper.setActiveTab(dispatch, {activeTab}) + }; }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx index 8c59b2b1cc..a23015732b 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx @@ -13,12 +13,12 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import React, {Component, PropTypes} from 'react'; -import Tabs from 'react-bootstrap/lib/Tabs.js'; -import Tab from 'react-bootstrap/lib/Tab.js'; +import React, {Component} from 'react'; +import PropTypes from 'prop-types'; +import accept from 'attr-accept'; +import {SVGIcon, Tab, Tabs} from 'sdc-ui/lib/react'; import {tabsMapping} from './SoftwareProductAttachmentsConstants.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; import HeatValidation from './validation/HeatValidation.js'; import {onboardingOriginTypes} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js'; @@ -27,7 +27,7 @@ class HeatScreenView extends Component { static propTypes = { isValidationAvailable: PropTypes.bool, goToOverview: PropTypes.bool, - setActiveTab: PropTypes.function + setActiveTab: PropTypes.func }; render() { @@ -64,7 +64,7 @@ class HeatScreenView extends Component { labelPosition='right' color='secondary' disabled={isReadOnlyMode} - onClick={evt => {this.refs.hiddenImportFileInput.click(evt);}} + onClick={isReadOnlyMode ? undefined : evt => this.refs.hiddenImportFileInput.click(evt)} data-test-id='upload-heat'/> <input ref='hiddenImportFileInput' @@ -73,8 +73,12 @@ class HeatScreenView extends Component { accept='.zip, .csar' onChange={evt => this.handleImport(evt)}/> </div> - <Tabs id='attachments-tabs' activeKey={activeTab} onSelect={key => this.handleTabPress(key)}> - <Tab eventKey={tabsMapping.SETUP} title='Setup' disabled={onboardingOrigin === onboardingOriginTypes.CSAR}> + <Tabs + className='attachments-tabs' + type='header' + activeTab={activeTab} + onTabClick={key => this.handleTabPress(key)}> + <Tab tabId={tabsMapping.SETUP} title='Setup' disabled={onboardingOrigin === onboardingOriginTypes.CSAR}> <HeatSetupComponent heatDataExist={heatDataExist} changeAttachmentsTab={tab => setActiveTab({activeTab: tab})} @@ -83,7 +87,7 @@ class HeatScreenView extends Component { isReadOnlyMode={isReadOnlyMode} version={version}/> </Tab> - <Tab eventKey={tabsMapping.VALIDATION} title='Validation' disabled={!isValidationAvailable}> + <Tab tabId={tabsMapping.VALIDATION} title='Validation' disabled={!isValidationAvailable}> <HeatValidation {...other}/> </Tab> </Tabs> @@ -107,9 +111,14 @@ class HeatScreenView extends Component { handleImport(evt) { evt.preventDefault(); + let file = this.refs.hiddenImportFileInput.files[0]; + if(! (file && file.size && accept(file, ['.zip', '.csar'])) ) { + this.props.onInvalidFileUpload(); + return; + } let {version} = this.props; let formData = new FormData(); - formData.append('upload', this.refs.hiddenImportFileInput.files[0]); + formData.append('upload', file); this.refs.hiddenImportFileInput.value = ''; this.props.onUpload(formData, version); } diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx index 2308527220..3fdaa9c591 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx @@ -13,7 +13,8 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import React, {Component, PropTypes} from 'react'; +import React, {Component} from 'react'; +import PropTypes from 'prop-types'; import classNames from 'classnames'; import Collapse from 'react-bootstrap/lib/Collapse.js'; import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; @@ -95,7 +96,7 @@ function HeatFileTreeHeader(props) { <div className='tree-header-title' > {/*<SVGIcon name='zip' color={props.selectedNode === nodeFilters.ALL ? 'primary' : ''} iconClassName='header-icon' />*/} <span className={classNames({'tree-header-title-text' : true, - 'tree-header-title-selected' : props.selectedNode === nodeFilters.ALL})}>{i18n(`${props.headerTitle} ${hasErrors ? '(Draft)' : ''}`)}</span> + 'tree-header-title-selected' : props.selectedNode === nodeFilters.ALL})}>{i18n('{title} {hasErrors}', {title: props.headerTitle, hasErrors: hasErrors ? '(Draft)' : ''})}</span> </div> <ErrorsAndWarningsCount errorList={props.errorList} size='large' /> </div>); @@ -199,7 +200,6 @@ class HeatMessageBoard extends Component { } renderError(error) { let rand = Math.random() * (3000 - 1) + 1; - console.log(this.props.selectedNode ); return ( <div key={error.name + error.errorMessage + error.parentName + rand} diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponents.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponents.js index 61aebdf293..f74b2fe2fb 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponents.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponents.js @@ -1,62 +1,47 @@ import {connect} from 'react-redux'; -import React from 'react'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import SoftwareProductComponentsList from './SoftwareProductComponentsList.js'; -import OnboardingActionHelper from 'sdc-app/onboarding/OnboardingActionHelper.js'; -import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js'; import SoftwareProductComponentsActionHelper from '../components/SoftwareProductComponentsActionHelper.js'; -import {onboardingMethod} from '../SoftwareProductConstants.js'; +import {onboardingMethod as onboardingMethodTypes} from '../SoftwareProductConstants.js'; import ConfirmationModalConstants from 'nfvo-components/modal/GlobalModalConstants.js'; +import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js'; +import {screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js'; +import SoftwareProductComponentsView from './SoftwareProductComponentsListView.jsx'; +import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js'; const generateMessage = (name) => { - return i18n(`Are you sure you want to delete ${name}?`); + return i18n('Are you sure you want to delete {name}?', {name: name}); }; -const mapStateToProps = ({softwareProduct}) => { - let {softwareProductEditor: {data: currentSoftwareProduct}, softwareProductComponents} = softwareProduct; +const mapStateToProps = ({softwareProduct, currentScreen: {props: {version}}}) => { + let {softwareProductEditor: {data: currentSoftwareProduct = {}}, softwareProductComponents} = softwareProduct; let {componentsList} = softwareProductComponents; - let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct); - + let {onboardingMethod = onboardingMethodTypes.HEAT} = currentSoftwareProduct; return { currentSoftwareProduct, - isReadOnlyMode, componentsList, - isManual: currentSoftwareProduct.onboardingMethod === onboardingMethod.MANUAL - + isManual: onboardingMethod === onboardingMethodTypes.MANUAL, + version }; }; -class SoftwareProductComponentsView extends React.Component { - render() { - let {currentSoftwareProduct, isReadOnlyMode, componentsList, isManual, onDeleteComponent} = this.props; - return ( - <SoftwareProductComponentsList - isReadOnlyMode={isReadOnlyMode} - componentsList={componentsList} - onDeleteComponent={onDeleteComponent} - isManual={isManual} - currentSoftwareProduct={currentSoftwareProduct}/>); - } - -} - const mapActionToProps = (dispatch) => { return { - onComponentSelect: ({id: softwareProductId, componentId, version}) => { - OnboardingActionHelper.navigateToSoftwareProductComponentGeneralAndUpdateLeftPanel(dispatch, {softwareProductId, componentId, version }); - }, - onAddComponent: (softwareProductId) => SoftwareProductComponentsActionHelper.addComponent(dispatch, {softwareProductId}), + onComponentSelect: ({id: softwareProductId, componentId, version}) => + ScreensHelper.loadScreen(dispatch, { + screen: screenTypes.SOFTWARE_PRODUCT_COMPONENT_DEFAULT_GENERAL, screenType: screenTypes.SOFTWARE_PRODUCT, + props: {softwareProductId, version, componentId} + }), + onAddComponent: (softwareProductId, version) => SoftwareProductActionHelper.addComponent(dispatch, {softwareProductId, version, modalClassName: 'create-vfc-modal'}), onDeleteComponent: (component, softwareProductId, version) => dispatch({ type: ConfirmationModalConstants.GLOBAL_MODAL_WARNING, data:{ msg: generateMessage(component.displayName), - onConfirmed: ()=>SoftwareProductComponentsActionHelper.deleteComponent(dispatch, - { - softwareProductId, - componentId: component.id, - version - }) + onConfirmed: ()=>SoftwareProductComponentsActionHelper.deleteComponent(dispatch, { + softwareProductId, + componentId: component.id, + version + }) } }) }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js index 8085c875f4..cf63ad79d0 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js @@ -74,6 +74,7 @@ const SoftwareProductComponentsActionHelper = { type: actionTypes.COMPONENTS_LIST_UPDATE, componentsList: response.results }); + return response; }); }, diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsList.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsList.js deleted file mode 100644 index bd4c2fa884..0000000000 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsList.js +++ /dev/null @@ -1,51 +0,0 @@ -/*! - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * - * 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 i18n from 'nfvo-utils/i18n/i18n.js'; - -import SoftwareProductComponentsListView from './SoftwareProductComponentsListView.jsx'; -import OnboardingActionHelper from 'sdc-app/onboarding/OnboardingActionHelper.js'; -import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js'; -import SoftwareProductComponentsActionHelper from '../components/SoftwareProductComponentsActionHelper.js'; -import {actionTypes as globalModalActions} from 'nfvo-components/modal/GlobalModalConstants.js'; - -const generateMessage = (name) => { - return i18n(`Are you sure you want to delete ${name}?`); -}; - - -const mapActionToProps = (dispatch) => { - return { - onComponentSelect: ({id: softwareProductId, componentId, version}) => { - OnboardingActionHelper.navigateToSoftwareProductComponentGeneralAndUpdateLeftPanel(dispatch, {softwareProductId, componentId, version }); - }, - onAddComponent: (softwareProductId) => SoftwareProductActionHelper.addComponent(dispatch, {softwareProductId, modalClassName: 'create-vfc-modal'}), - onDeleteComponent: (component, softwareProductId, version) => dispatch({ - type: globalModalActions.GLOBAL_MODAL_WARNING, - data:{ - msg: generateMessage(component.displayName), - onConfirmed: ()=>SoftwareProductComponentsActionHelper.deleteComponent(dispatch, - { - softwareProductId, - componentId: component.id, - version - }) - } - }) - }; -}; - -export default connect(null, mapActionToProps, null, {withRef: true})(SoftwareProductComponentsListView); diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx index 88a01becfc..0bf32df1a3 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx @@ -14,17 +14,18 @@ * permissions and limitations under the License. */ import React from 'react'; +import PropTypes from 'prop-types'; 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 ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx'; -const ComponentPropType = React.PropTypes.shape({ - id: React.PropTypes.string, - name: React.PropTypes.string, - displayName: React.PropTypes.string, - description: React.PropTypes.string +const ComponentPropType = PropTypes.shape({ + id: PropTypes.string, + name: PropTypes.string, + displayName: PropTypes.string, + description: PropTypes.string }); class SoftwareProductComponentsListView extends React.Component { @@ -34,9 +35,9 @@ class SoftwareProductComponentsListView extends React.Component { }; static propTypes = { - isReadOnlyMode: React.PropTypes.bool, - componentsList: React.PropTypes.arrayOf(ComponentPropType), - onComponentSelect: React.PropTypes.func + isReadOnlyMode: PropTypes.bool, + componentsList: PropTypes.arrayOf(ComponentPropType), + onComponentSelect: PropTypes.func }; render() { @@ -52,7 +53,7 @@ class SoftwareProductComponentsListView extends React.Component { renderComponents() { const {localFilter} = this.state; - const {isManual, onAddComponent, isReadOnlyMode, currentSoftwareProduct: {id: softwareProductId}, componentsList } = this.props; + const {isManual, onAddComponent, isReadOnlyMode, version, currentSoftwareProduct: {id: softwareProductId}, componentsList } = this.props; return ( <ListEditorView title={i18n('Virtual Function Components')} @@ -61,7 +62,7 @@ class SoftwareProductComponentsListView extends React.Component { onFilter={value => this.setState({localFilter: value})} isReadOnlyMode={isReadOnlyMode || !!this.filterList().length} plusButtonTitle={i18n('Add Component')} - onAdd={isManual && componentsList.length === 0 ? () => onAddComponent(softwareProductId) : false} + onAdd={isManual && componentsList.length === 0 ? () => onAddComponent(softwareProductId, version) : false} twoColumns> {this.filterList().map(component => this.renderComponentsListItem(component))} </ListEditorView> @@ -70,7 +71,7 @@ class SoftwareProductComponentsListView extends React.Component { renderComponentsListItem(component) { let {id: componentId, name, displayName, description = ''} = component; - let {currentSoftwareProduct: {id, version}, onComponentSelect} = this.props; + let {currentSoftwareProduct: {id}, onComponentSelect, version} = this.props; return ( <ListEditorItemView key={name + Math.floor(Math.random() * (100 - 1) + 1).toString()} diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentCompute.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentCompute.js index bb8df29b82..574828c9ef 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentCompute.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentCompute.js @@ -16,24 +16,19 @@ import {connect} from 'react-redux'; import SoftwareProductComponentComputeView from './SoftwareProductComponentComputeView.jsx'; import SoftwareProductComponentsActionHelper from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js'; -import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js'; import {COMPONENTS_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; import {onboardingMethod} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js'; -const mapStateToProps = ({softwareProduct, currentScreen: {props: {softwareProductId, componentId}}}) => { +const mapStateToProps = ({softwareProduct}) => { let {softwareProductEditor: {data: currentVSP}, softwareProductComponents} = softwareProduct; let {componentEditor: {qdata, dataMap, qgenericFieldInfo}, computeFlavor: {computesList: computeFlavorsList}} = softwareProductComponents; - let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentVSP); return { qdata, dataMap, qgenericFieldInfo, - isReadOnlyMode, - softwareProductId, - componentId, computeFlavorsList, isManual: currentVSP.onboardingMethod === onboardingMethod.MANUAL }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentComputeView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentComputeView.jsx index dd524a35f3..55e5e2b30b 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentComputeView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentComputeView.jsx @@ -14,6 +14,7 @@ * permissions and limitations under the License. */ import React from 'react'; +import PropTypes from 'prop-types'; import Form from 'nfvo-components/input/validation/Form.jsx'; import NumberOfVms from './computeComponents/NumberOfVms.jsx'; import GuestOs from './computeComponents/GuestOs.jsx'; @@ -23,13 +24,13 @@ import Validator from 'nfvo-utils/Validator.js'; class SoftwareProductComponentComputeView extends React.Component { static propTypes = { - dataMap: React.PropTypes.object, - qgenericFieldInfo: React.PropTypes.object, - isReadOnlyMode: React.PropTypes.bool, - isManual: React.PropTypes.bool, - onQDataChanged: React.PropTypes.func.isRequired, - qValidateData: React.PropTypes.func.isRequired, - onSubmit: React.PropTypes.func.isRequired + dataMap: PropTypes.object, + qgenericFieldInfo: PropTypes.object, + isReadOnlyMode: PropTypes.bool, + isManual: PropTypes.bool, + onQDataChanged: PropTypes.func.isRequired, + qValidateData: PropTypes.func.isRequired, + onSubmit: PropTypes.func.isRequired }; render() { diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/ComputeFlavors.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/ComputeFlavors.js index c72d42c11f..2b6d84f381 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/ComputeFlavors.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/ComputeFlavors.js @@ -14,6 +14,7 @@ * permissions and limitations under the License. */ import React from 'react'; +import PropTypes from 'prop-types'; import {connect} from 'react-redux'; import i18n from 'nfvo-utils/i18n/i18n.js'; import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx'; @@ -28,26 +29,26 @@ const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) onDeleteCompute: ({id, name}) => dispatch({ type: modalActionTypes.GLOBAL_MODAL_WARNING, data:{ - msg: i18n(`Are you sure you want to delete "${name}"?`), + msg: i18n('Are you sure you want to delete "{name}"?', {name: name}), onConfirmed: () => ComputeFlavorActionHelper.deleteCompute(dispatch, {softwareProductId, componentId, computeId: id, version}) } }) }; }; -const computeItemPropType = React.PropTypes.shape({ - id: React.PropTypes.string, - name: React.PropTypes.string, - description: React.PropTypes.string +const computeItemPropType = PropTypes.shape({ + id: PropTypes.string, + name: PropTypes.string, + description: PropTypes.string }); class ComputeFlavors extends React.Component { static propTypes = { - isReadOnlyMode: React.PropTypes.bool, - isManual: React.PropTypes.bool, - onAddComputeClick: React.PropTypes.func, - computeFlavorsList: React.PropTypes.arrayOf(computeItemPropType) + isReadOnlyMode: PropTypes.bool, + isManual: PropTypes.bool, + onAddComputeClick: PropTypes.func, + computeFlavorsList: PropTypes.arrayOf(computeItemPropType) }; state = { diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/GuestOs.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/GuestOs.jsx index 16bf599834..8ae9961859 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/GuestOs.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/GuestOs.jsx @@ -23,7 +23,7 @@ import GridItem from 'nfvo-components/grid/GridItem.jsx'; const GuestOs = ({qgenericFieldInfo, dataMap, onQDataChanged}) => { return( <div> - <GridSection title={i18n('Guest OS')} > + <GridSection title={i18n('Guest OS')} hasLastColSet> <GridItem> <div className='vertical-flex'> <label key='label' className='control-label'>{i18n('OS Bit Size')}</label> @@ -55,7 +55,7 @@ const GuestOs = ({qgenericFieldInfo, dataMap, onQDataChanged}) => { errorText={qgenericFieldInfo['compute/guestOS/name'].errorText} value={dataMap['compute/guestOS/name']} /> </GridItem> - <GridItem colSpan={2}> + <GridItem colSpan={2} lastColInRow> <Input data-test-id='guestOS-tools' type='textarea' diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/NumberOfVms.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/NumberOfVms.jsx index ddde4391d9..967c6f7aef 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/NumberOfVms.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/NumberOfVms.jsx @@ -14,6 +14,7 @@ * permissions and limitations under the License. */ import React from 'react'; +import PropTypes from 'prop-types'; import i18n from 'nfvo-utils/i18n/i18n.js'; import Input from 'nfvo-components/input/validation/Input.jsx'; import GridSection from 'nfvo-components/grid/GridSection.jsx'; @@ -50,7 +51,7 @@ const NumberOfVms = ({qgenericFieldInfo, dataMap, onQDataChanged, qValidateData, }; NumberOfVms.propTypes = { - minNumberOfVMsSelectedByUser: React.PropTypes.number + minNumberOfVMsSelectedByUser: PropTypes.number }; export default NumberOfVms; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditor.js index caec0702fd..a3ba5fbc4a 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditor.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditor.js @@ -16,15 +16,21 @@ import {connect} from 'react-redux'; import ComputeFlavorEditorView from './ComputeFlavorEditorView.jsx'; import {COMPUTE_FLAVOR_FORM} from './ComputeFlavorConstants.js'; -import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js'; import ComputeFlavorActionHelper from 'sdc-app/onboarding/softwareProduct/components/compute/ComputeFlavorActionHelper.js'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; import {COMPONENTS_COMPUTE_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; import {onboardingMethod} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js'; -export const mapStateToProps = ({softwareProduct: {softwareProductEditor, softwareProductComponents: {computeFlavor: {computeEditor = {}}}}}) => { +export const mapStateToProps = ({ + softwareProduct: { + softwareProductEditor, + softwareProductComponents: {computeFlavor: {computeEditor = {}}} + }, + currentScreen: { + props: {isReadOnlyMode} + } +}) => { const {data: currentSoftwareProduct = {}} = softwareProductEditor; - const isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct); let {data , qdata, qgenericFieldInfo, dataMap, genericFieldInfo, formReady} = computeEditor; let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditorView.jsx index 8f8a504629..e542ce1fd1 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditorView.jsx @@ -14,6 +14,7 @@ * permissions and limitations under the License. */ import React from 'react'; +import PropTypes from 'prop-types'; 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'; @@ -24,15 +25,15 @@ import i18n from 'nfvo-utils/i18n/i18n.js'; class ComputeEditorView extends React.Component { static propTypes = { - data: React.PropTypes.object, - qdata: React.PropTypes.object, - qschema: React.PropTypes.object, - isReadOnlyMode: React.PropTypes.bool, - isManual: React.PropTypes.bool, - onDataChanged: React.PropTypes.func.isRequired, - onQDataChanged: React.PropTypes.func.isRequired, - onSubmit: React.PropTypes.func.isRequired, - onCancel: React.PropTypes.func.isRequired + data: PropTypes.object, + qdata: PropTypes.object, + qschema: PropTypes.object, + isReadOnlyMode: PropTypes.bool, + isManual: PropTypes.bool, + onDataChanged: PropTypes.func.isRequired, + onQDataChanged: PropTypes.func.isRequired, + onSubmit: PropTypes.func.isRequired, + onCancel: PropTypes.func.isRequired }; render() { @@ -57,8 +58,8 @@ class ComputeEditorView extends React.Component { onValidateForm={() => onValidateForm() } className='component-questionnaire-validation-form' submitButtonText={edittingComputeMode ? i18n('Save') : i18n('Create')}> - <GridSection> - <GridItem colSpan={edittingComputeMode ? 2 : 4}> + <GridSection hasLostColSet> + <GridItem colSpan={edittingComputeMode ? 2 : 4} lastColInRow={!edittingComputeMode}> <Input disabled={!isManual} data-test-id='name' @@ -70,7 +71,7 @@ class ComputeEditorView extends React.Component { errorText={genericFieldInfo['name'].errorText} isRequired/> </GridItem> - <GridItem colSpan={edittingComputeMode ? 2 : 4}> + <GridItem colSpan={edittingComputeMode ? 2 : 4} lastColInRow> <Input data-test-id='description' type='textarea' diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/VmSizing.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/VmSizing.jsx index 8b30468362..54f22e0760 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/VmSizing.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/VmSizing.jsx @@ -20,7 +20,7 @@ import GridSection from 'nfvo-components/grid/GridSection.jsx'; import GridItem from 'nfvo-components/grid/GridItem.jsx'; const VmSizing = ({qgenericFieldInfo, dataMap, onQDataChanged}) => { return( - <GridSection title={i18n('VM Sizing')}> + <GridSection title={i18n('VM Sizing')} hasLastColSet> <GridItem> <Input data-test-id='numOfCPUs' @@ -51,7 +51,7 @@ const VmSizing = ({qgenericFieldInfo, dataMap, onQDataChanged}) => { errorText={qgenericFieldInfo['vmSizing/persistentStorageVolumeSize'].errorText} value={dataMap['vmSizing/persistentStorageVolumeSize']} /> </GridItem> - <GridItem> + <GridItem lastColInRow> <Input data-test-id='ioOperationsPerSec' type='number' diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreation.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreation.js index e85b6b6504..9f59cd5b27 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreation.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreation.js @@ -21,23 +21,22 @@ import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; import {forms} from '../SoftwareProductComponentsConstants.js'; export const mapStateToProps = ({softwareProduct}) => { - let {softwareProductComponents: {componentEditor: {data, genericFieldInfo, formReady}}, softwareProductEditor: {data: {version}}} = softwareProduct; + let {softwareProductComponents: {componentEditor: {data, genericFieldInfo, formReady}}} = softwareProduct; let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); return { data, genericFieldInfo, formReady, - isFormValid, - version + isFormValid }; }; -const mapActionsToProps = (dispatch, {softwareProductId}) => { +const mapActionsToProps = (dispatch, {softwareProductId, version}) => { return { onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: forms.CREATE_FORM}), //onDataChanged: deltaData => SoftwareProductComponentsActionHelper.componentDataChanged(dispatch, {deltaData}), - onSubmit: (componentData, version) => { + onSubmit: (componentData) => { return SoftwareProductComponentsActionHelper.createSoftwareProductComponent(dispatch, {softwareProductId, componentData, version}); }, diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreationView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreationView.jsx index 55bcc818f5..42804ce5a6 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreationView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreationView.jsx @@ -28,7 +28,7 @@ class ComponentCreationView extends React.Component { let {data = {}, onDataChanged, onCancel, genericFieldInfo} = this.props; let {displayName, description} = data; return( - <div> + <div> { genericFieldInfo && <Form ref='validationForm' @@ -41,8 +41,8 @@ class ComponentCreationView extends React.Component { formReady={this.props.formReady} onValidateForm={() => this.props.onValidateForm(forms.CREATE_FORM) } className='entitlement-pools-form'> - <GridSection> - <GridItem colSpan={4}> + <GridSection hasLastColSet> + <GridItem colSpan={4} lastColInRow> <Input data-test-id='name' onChange={displayName => onDataChanged({displayName})} @@ -53,7 +53,7 @@ class ComponentCreationView extends React.Component { value={displayName} type='text'/> </GridItem> - <GridItem colSpan={4}> + <GridItem colSpan={4} lastColInRow> <Input label={i18n('Description')} onChange={description => onDataChanged({description})} @@ -66,13 +66,13 @@ class ComponentCreationView extends React.Component { </GridSection> </Form> } - </div> + </div> ); } submit() { - const {onSubmit, data, version} = this.props; - onSubmit(data, version); + const {onSubmit, data} = this.props; + onSubmit(data); } } diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneral.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneral.js index 7b4135028b..8c06fd0ab8 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneral.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneral.js @@ -16,25 +16,20 @@ import {connect} from 'react-redux'; import SoftwareProductComponentsGeneralView from './SoftwareProductComponentsGeneralView.jsx'; import SoftwareProductComponentsActionHelper from '../SoftwareProductComponentsActionHelper.js'; -import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js'; - import {forms, COMPONENTS_QUESTIONNAIRE} from '../SoftwareProductComponentsConstants.js'; import {onboardingMethod} from '../../SoftwareProductConstants.js'; - export const mapStateToProps = ({softwareProduct}) => { let {softwareProductEditor: {data: currentVSP}, softwareProductComponents} = softwareProduct; let {componentEditor: {data: componentData = {} , qdata, qgenericFieldInfo : qGenericFieldInfo, dataMap, genericFieldInfo}} = softwareProductComponents; - let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentVSP); let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); return { componentData, qdata, - isReadOnlyMode, isManual: currentVSP.onboardingMethod === onboardingMethod.MANUAL, genericFieldInfo, qGenericFieldInfo, @@ -43,7 +38,6 @@ export const mapStateToProps = ({softwareProduct}) => { }; }; - const mapActionsToProps = (dispatch, {softwareProductId, version, componentId}) => { return { onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: forms.ALL_SPC_FORMS}), diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageActionHelper.js index 34198281b7..8d70d6f14c 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageActionHelper.js @@ -87,7 +87,7 @@ const SoftwareProductComponentImagesActionHelper = { return fetchImage({softwareProductId, componentId, imageId, version}); }, - openEditImageEditor(dispatch, {image, softwareProductId, componentId, version, isReadOnlyMode, modalClassName}) { + openEditImageEditor(dispatch, {image, softwareProductId, componentId, version, isReadOnlyMode}) { return SoftwareProductComponentImagesActionHelper.loadImageData({softwareProductId, componentId, imageId: image.id, version}).then(({data}) => { SoftwareProductComponentImagesActionHelper.loadImageQuestionnaire(dispatch, { softwareProductId, @@ -100,7 +100,6 @@ const SoftwareProductComponentImagesActionHelper = { componentId, version, isReadOnlyMode, - modalClassName, image, data }); @@ -110,12 +109,13 @@ const SoftwareProductComponentImagesActionHelper = { openImageEditor(dispatch, {image = {}, data = {}, softwareProductId, componentId, version, isReadOnlyMode}) { - let title = (image && image.id) ? i18n('Edit Image') : i18n('Create New Image'); - let className = (image && image.id) ? 'image-edit-editor-model' : 'image-new-editor-modal'; + let {id} = image; + let title = id ? i18n('Edit Image') : i18n('Create New Image'); + let className = id ? 'image-modal-edit' : 'image-modal-new'; dispatch({ type: actionTypes.ImageEditor.OPEN, - image: {...data, id: image.id} + image: {...data, id} }); dispatch({ @@ -123,9 +123,11 @@ const SoftwareProductComponentImagesActionHelper = { data: { modalComponentName: modalContentMapper.SOFTWARE_PRODUCT_COMPONENT_IMAGE_EDITOR, title: title, - modalComponentProps: {softwareProductId, componentId, version, isReadOnlyMode, dialogClassName:className} + modalClassName: className, + modalComponentProps: {softwareProductId, componentId, version, isReadOnlyMode} } }); + }, closeImageEditor(dispatch) { @@ -137,6 +139,7 @@ const SoftwareProductComponentImagesActionHelper = { dispatch({ type: actionTypes.ImageEditor.CLOSE }); + }, loadImageQuestionnaire(dispatch, {softwareProductId, componentId, imageId, version}) { @@ -166,4 +169,5 @@ const SoftwareProductComponentImagesActionHelper = { } } }; + export default SoftwareProductComponentImagesActionHelper; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js index 5c81f05e80..c5f23e7681 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js @@ -17,18 +17,19 @@ import {connect} from 'react-redux'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; import SoftwareProductComponentsImageActionHelper from './SoftwareProductComponentsImageActionHelper.js'; import SoftwareProductComponentsImageEditorView from './SoftwareProductComponentsImageEditorView.jsx'; -import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js'; import {onboardingMethod as onboardingMethodTypes} from '../../SoftwareProductConstants.js'; import {forms} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; import {IMAGE_QUESTIONNAIRE} from './SoftwareProductComponentsImageConstants.js'; -export const mapStateToProps = ({softwareProduct}) => { +export const mapStateToProps = ({ + softwareProduct, + currentScreen: {props: {isReadOnlyMode}} +}) => { let {softwareProductEditor: {data:currentSoftwareProduct = {}, isValidityData = true}, softwareProductComponents} = softwareProduct; let {images: {imageEditor = {}}} = softwareProductComponents; let {data, qdata, genericFieldInfo, qgenericFieldInfo, dataMap, formReady} = imageEditor; - let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct); let {version, onboardingMethod} = currentSoftwareProduct; let isManual = onboardingMethod === onboardingMethodTypes.MANUAL; let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo) && ValidationHelper.checkFormValid(qgenericFieldInfo); @@ -47,6 +48,7 @@ export const mapStateToProps = ({softwareProduct}) => { isReadOnlyMode, isManual: isManual }; + }; const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => { diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx index 7c1a3f5b55..a5ef152e01 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx @@ -14,6 +14,7 @@ * permissions and limitations under the License. */ import React from 'react'; +import PropTypes from 'prop-types'; import i18n from 'nfvo-utils/i18n/i18n.js'; import Form from 'nfvo-components/input/validation/Form.jsx'; @@ -24,9 +25,9 @@ import {imageCustomValidations} from './ImageValidations.js'; class SoftwareProductComponentsImageEditorView extends React.Component { static propTypes = { - onDataChanged: React.PropTypes.func.isRequired, - onSubmit: React.PropTypes.func.isRequired, - onCancel: React.PropTypes.func.isRequired + onDataChanged: PropTypes.func.isRequired, + onSubmit: PropTypes.func.isRequired, + onCancel: PropTypes.func.isRequired }; render() { diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageList.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageList.js index fb3bd35eb2..d071647058 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageList.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageList.js @@ -16,7 +16,6 @@ import {connect} from 'react-redux'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js'; import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; import SoftwareProductComponentsImageListView from './SoftwareProductComponentsImageListView.jsx'; import ImageHelper from './SoftwareProductComponentsImageActionHelper.js'; @@ -31,38 +30,35 @@ export const mapStateToProps = ({softwareProduct}) => { let {softwareProductEditor: {data: currentSoftwareProduct = {}, isValidityData = true}, softwareProductComponents} = softwareProduct; let {images: {imagesList = []}, componentEditor: {data: componentData, qdata, dataMap, qgenericFieldInfo}} = softwareProductComponents; - let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct); - let {version, onboardingMethod} = currentSoftwareProduct; + let {onboardingMethod} = currentSoftwareProduct; let isManual = onboardingMethod === onboardingMethodTypes.MANUAL; return { - version, componentData, qdata, dataMap, qgenericFieldInfo, isValidityData, imagesList, - isReadOnlyMode, isManual : isManual }; }; -const mapActionsToProps = (dispatch, {softwareProductId, componentId}) => { +const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => { return { onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, qName: COMPONENTS_QUESTIONNAIRE}), - onAddImage: (version, isReadOnlyMode) => { + onAddImage: (isReadOnlyMode) => { SoftwareProductComponentsImagesActionHelper.openImageEditor(dispatch, {isReadOnlyMode, softwareProductId, componentId, version} );}, - onDeleteImage: ((image, version) => { + onDeleteImage: (image) => { let shortenedFileName = (image.fileName.length > 40) ? image.fileName.substr(0,40) + '...' : image.fileName; dispatch({ type: modalActionTypes.GLOBAL_MODAL_WARNING, data: { - msg: i18n(`Are you sure you want to delete "${shortenedFileName}"?`), + msg: i18n('Are you sure you want to delete "{shortenedFileName}"?', {shortenedFileName: shortenedFileName}), onConfirmed: () => ImageHelper.deleteImage(dispatch, { softwareProductId, componentId, @@ -71,13 +67,13 @@ const mapActionsToProps = (dispatch, {softwareProductId, componentId}) => { }) } }); - }), - onEditImageClick: (image, version, isReadOnlyMode) => { + }, + onEditImageClick: (image, isReadOnlyMode) => { SoftwareProductComponentsImagesActionHelper.openEditImageEditor(dispatch, { image, isReadOnlyMode, softwareProductId, componentId, version, modalClassName: 'image-modal-edit'} ); }, - onSubmit: (version, qdata) => { return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, + onSubmit: (qdata) => { return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, vspComponentId: componentId, version, diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx index 54def08fc1..004cbebe5d 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx @@ -75,7 +75,7 @@ class SoftwareProductComponentsImageListView extends React.Component { renderImagesList() { const {localFilter} = this.state; - let {isReadOnlyMode, onAddImage, isManual, version} = this.props; + let {isReadOnlyMode, onAddImage, isManual} = this.props; return ( <ListEditorView @@ -84,7 +84,7 @@ class SoftwareProductComponentsImageListView extends React.Component { placeholder={i18n('Filter Images by Name')} isReadOnlyMode={isReadOnlyMode} onFilter={value => this.setState({localFilter: value})} - onAdd={isManual ? () => onAddImage(version, isReadOnlyMode) : null} + onAdd={isManual ? () => onAddImage(isReadOnlyMode) : null} plusButtonTitle={i18n('Add Image')} twoColumns> {this.filterList().map(image => this.renderImagesListItem(image, isReadOnlyMode))} @@ -95,13 +95,13 @@ class SoftwareProductComponentsImageListView extends React.Component { renderImagesListItem(image, isReadOnlyMode) { let {id, fileName} = image; - let {onEditImageClick, version, isManual, onDeleteImage} = this.props; + let {onEditImageClick, isManual, onDeleteImage} = this.props; return ( <ListEditorItemView key={id} isReadOnlyMode={isReadOnlyMode} - onSelect={() => onEditImageClick(image, version, isReadOnlyMode)} - onDelete={isManual ? () => onDeleteImage(image, version) : null}> + onSelect={() => onEditImageClick(image, isReadOnlyMode)} + onDelete={isManual ? () => onDeleteImage(image) : null}> <ListEditorItemViewField> <div className='image-filename-cell'><span className='image-filename'>{fileName}</span></div> @@ -125,8 +125,8 @@ class SoftwareProductComponentsImageListView extends React.Component { } save() { - let {onSubmit, qdata, version} = this.props; - return onSubmit(version, qdata); + let {onSubmit, qdata} = this.props; + return onSubmit(qdata); } } export default SoftwareProductComponentsImageListView; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx index 2e9ab417d8..64367c00f2 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx @@ -26,8 +26,8 @@ import Version from './Version.jsx'; const FileDetails = ({editingMode, fileName, onDataChanged, isManual, dataMap, onQDataChanged, genericFieldInfo, qgenericFieldInfo}) => { let fileNameCols = (editingMode) ? 3 : 4; return( - <GridSection> - <GridItem colSpan={fileNameCols}> + <GridSection hasLastColSset> + <GridItem colSpan={fileNameCols} lastColInRow={!editingMode}> <Input disabled={!isManual} onChange={fileName => onDataChanged({fileName}, forms.IMAGE_EDIT_FORM)} diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx index 7dd577b8c9..bd55c5ba91 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx @@ -22,7 +22,7 @@ import {imageCustomValidations} from '../ImageValidations.js'; const Version = ({isManual, dataMap, qgenericFieldInfo, onQDataChanged}) => { return( - <GridItem colSpan={1}> + <GridItem colSpan={1} lastColInRow> <Input disabled={!isManual} data-test-id='image-version' diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancing.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancing.js index 0634858219..350e80c0f8 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancing.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancing.js @@ -17,29 +17,25 @@ import {connect} from 'react-redux'; import SoftwareProductComponentLoadBalancingView from './SoftwareProductComponentLoadBalancingRefView.jsx'; import SoftwareProductComponentsActionHelper from '../SoftwareProductComponentsActionHelper.js'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; -import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js'; import {COMPONENTS_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; -export const mapStateToProps = ({softwareProduct}) => { - let {softwareProductEditor: {data: currentVSP}, softwareProductComponents} = softwareProduct; - let {componentEditor: {qdata, qgenericFieldInfo : genericFieldInfo, dataMap}} = softwareProductComponents; - let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentVSP); +export const mapStateToProps = ({softwareProduct: {softwareProductComponents}}) => { + + let {componentEditor: {qdata, qgenericFieldInfo: genericFieldInfo, dataMap}} = softwareProductComponents; return { qdata, genericFieldInfo, - dataMap, - isReadOnlyMode + dataMap }; -}; +}; const mapActionsToProps = (dispatch, {softwareProductId, version, componentId}) => { return { onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, qName: COMPONENTS_QUESTIONNAIRE}), onSubmit: ({qdata}) =>{ return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId: componentId, qdata});} }; - }; export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductComponentLoadBalancingView); diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx index 8a82f54901..1cbb9afc5d 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx @@ -14,6 +14,7 @@ * permissions and limitations under the License. */ import React from 'react'; +import PropTypes from 'prop-types'; import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; @@ -79,11 +80,11 @@ const TextAreaItem = ({item, toggle, expanded, genericFieldInfo, dataMap, onQDat class SoftwareProductComponentLoadBalancingView extends React.Component { static propTypes = { - componentId: React.PropTypes.string.isRequired, - softwareProductId: React.PropTypes.string.isRequired, - qdata: React.PropTypes.object, - qschema: React.PropTypes.object, - currentSoftwareProduct: React.PropTypes.object + componentId: PropTypes.string.isRequired, + softwareProductId: PropTypes.string.isRequired, + qdata: PropTypes.object, + qschema: PropTypes.object, + currentSoftwareProduct: PropTypes.object }; state = { diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoring.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoring.js index 730beba545..8871aabbb5 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoring.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoring.js @@ -14,7 +14,6 @@ * permissions and limitations under the License. */ import {connect} from 'react-redux'; -import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js'; import SoftwareProductComponentsMonitoringView from './SoftwareProductComponentsMonitoringView.jsx'; import SoftwareProductComponentsMonitoringAction from './SoftwareProductComponentsMonitoringActionHelper.js'; import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; @@ -24,17 +23,15 @@ import i18n from 'nfvo-utils/i18n/i18n.js'; export const mapStateToProps = ({softwareProduct}) => { - let {softwareProductEditor: {data:currentVSP = {}}, softwareProductComponents: {monitoring}} = softwareProduct; - let filenames = monitoring; - let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentVSP); - + let {softwareProductComponents: {monitoring}} = softwareProduct; return { - isReadOnlyMode, - filenames + filenames: monitoring }; + }; const mapActionsToProps = (dispatch, {softwareProductId, version, componentId}) => { + return { onDropMibFileToUpload: (formData, type) => SoftwareProductComponentsMonitoringAction.uploadFile(dispatch, { @@ -58,9 +55,9 @@ const mapActionsToProps = (dispatch, {softwareProductId, version, componentId}) title: i18n('Upload Failed'), msg: i18n('Expected "zip" file. Please check the provided file type.') } - }), - + }) }; + }; export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductComponentsMonitoringView); diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx index 2d5a965c40..41acee43ca 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx @@ -13,7 +13,8 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import React, {Component, PropTypes} from 'react'; +import React, {Component} from 'react'; +import PropTypes from 'prop-types'; import Dropzone from 'react-dropzone'; import Button from 'sdc-ui/lib/react/Button.js'; import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx'; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreation.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreation.js index 865367a734..d4aaf7cc7e 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreation.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreation.js @@ -36,13 +36,13 @@ export const mapStateToProps = ({softwareProduct}) => { }; }; -const mapActionsToProps = (dispatch) => { +const mapActionsToProps = (dispatch, {softwareProductId, version}) => { return { onDataChanged: deltaData => ValidationHelper.dataChanged(dispatch, {deltaData, formName: NIC_CREATION_FORM_NAME}), onCancel: () => NICCreationActionHelper.close(dispatch), - onSubmit: ({nic, softwareProductId, componentId, version}) => { - NICCreationActionHelper.close(dispatch); + onSubmit: ({nic, componentId}) => { SoftwareProductComponentsNetworkActionHelper.createNIC(dispatch, {nic, softwareProductId, componentId, version}); + NICCreationActionHelper.close(dispatch); }, onValidateForm: () => ValidationHelper.validateForm(dispatch, NIC_CREATION_FORM_NAME) }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationActionHelper.js index ad28c86b81..a40b32d51a 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationActionHelper.js @@ -20,7 +20,7 @@ import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js'; export default { - open(dispatch, {softwareProductId, componentId, modalClassName}) { + open(dispatch, {softwareProductId, componentId, modalClassName, version}) { dispatch({ type: actionTypes.NICCreation.OPEN }); @@ -31,7 +31,7 @@ export default { modalComponentName: modalContentMapper.NIC_CREATION, title: i18n('Create NEW NIC'), modalClassName, - modalComponentProps: {softwareProductId, componentId} + modalComponentProps: {softwareProductId, componentId, version} } }); }, diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationView.jsx index 3cb731a421..258876844a 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationView.jsx @@ -14,26 +14,27 @@ * permissions and limitations under the License. */ import React from 'react'; +import PropTypes from 'prop-types'; import i18n from 'nfvo-utils/i18n/i18n.js'; import Input from 'nfvo-components/input/validation/Input.jsx'; import Form from 'nfvo-components/input/validation/Form.jsx'; import GridSection from 'nfvo-components/grid/GridSection.jsx'; import GridItem from 'nfvo-components/grid/GridItem.jsx'; -const NICPropType = React.PropTypes.shape({ - id: React.PropTypes.string, - name: React.PropTypes.string, - description: React.PropTypes.string, - networkId: React.PropTypes.string +const NICPropType = PropTypes.shape({ + id: PropTypes.string, + name: PropTypes.string, + description: PropTypes.string, + networkId: PropTypes.string }); class NICCreationView extends React.Component { static propTypes = { data: NICPropType, - onDataChanged: React.PropTypes.func.isRequired, - onSubmit: React.PropTypes.func.isRequired, - onCancel: React.PropTypes.func.isRequired + onDataChanged: PropTypes.func.isRequired, + onSubmit: PropTypes.func.isRequired, + onCancel: PropTypes.func.isRequired }; render() { @@ -51,8 +52,8 @@ class NICCreationView extends React.Component { isValid={isFormValid} onValidateForm={() => onValidateForm()} formReady={formReady} > - <GridSection> - <GridItem colSpan={4}> + <GridSection hasLastColSet> + <GridItem colSpan={4} lastColInRow> <Input value={name} label={i18n('Name')} @@ -74,7 +75,7 @@ class NICCreationView extends React.Component { className='field-section'/> </GridItem> </GridSection> - <GridSection title={i18n('Network')}> + <GridSection title={i18n('Network')} hasLastColSet> <GridItem colSpan={2}> <div className='form-group'> <label className='control-label'>{i18n('Network Type')}</label> @@ -96,7 +97,7 @@ class NICCreationView extends React.Component { </div> </div> </GridItem> - <GridItem colSpan={2}> + <GridItem colSpan={2} lastColInRow> <Input value={networkDescription} label={i18n('Network Description')} @@ -115,8 +116,8 @@ class NICCreationView extends React.Component { submit() { - const {data: nic, softwareProductId, componentId, currentSoftwareProduct} = this.props; - this.props.onSubmit({nic, softwareProductId, componentId, version: currentSoftwareProduct.version}); + const {data: nic, componentId} = this.props; + this.props.onSubmit({nic, componentId}); } } diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditor.js index b47c7e0f99..93bd0bd67e 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditor.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditor.js @@ -16,19 +16,17 @@ import {connect} from 'react-redux'; import SoftwareProductComponentsNetworkActionHelper from './SoftwareProductComponentsNetworkActionHelper.js'; import SoftwareProductComponentsNICEditorView from './SoftwareProductComponentsNICEditorView.jsx'; -import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; import {forms} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; import {NIC_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js'; import {onboardingMethod as onboardingMethodTypes} from '../../SoftwareProductConstants.js'; -export const mapStateToProps = ({softwareProduct}) => { +export const mapStateToProps = ({softwareProduct, currentScreen}) => { let {softwareProductEditor: {data:currentSoftwareProduct = {}, isValidityData = true}, softwareProductComponents} = softwareProduct; - let {network: {nicEditor = {}}} = softwareProductComponents; let {data, qdata, genericFieldInfo, qgenericFieldInfo, dataMap, formReady} = nicEditor; - let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct); + let {props: {isReadOnlyMode}} = currentScreen; let {onboardingMethod} = currentSoftwareProduct; let protocols = []; if(qdata && qdata.protocols && qdata.protocols.protocols && qdata.protocols.protocols.length){ @@ -55,11 +53,11 @@ export const mapStateToProps = ({softwareProduct}) => { }; -const mapActionsToProps = (dispatch, {softwareProductId, componentId}) => { +const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => { return { onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: forms.NIC_EDIT_FORM}), - onSubmit: ({data, qdata, version}) => SoftwareProductComponentsNetworkActionHelper.saveNICDataAndQuestionnaire(dispatch, {softwareProductId, version, componentId, data, qdata}), + onSubmit: ({data, qdata}) => SoftwareProductComponentsNetworkActionHelper.saveNICDataAndQuestionnaire(dispatch, {softwareProductId, version, componentId, data, qdata}), onCancel: () => SoftwareProductComponentsNetworkActionHelper.closeNICEditor(dispatch), onValidateForm: () => ValidationHelper.validateForm(dispatch, forms.NIC_EDIT_FORM), onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorView.jsx index 8a4c55a411..fbb3d53033 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorView.jsx @@ -65,8 +65,8 @@ class SoftwareProductComponentsNetworkEditorView extends React.Component { } submit() { - let {data, qdata, onSubmit, version} = this.props; - onSubmit({data, qdata, version}); + let {data, qdata, onSubmit} = this.props; + onSubmit({data, qdata}); } } diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkActionHelper.js index a3cfe65128..1ffbc5919f 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkActionHelper.js @@ -78,7 +78,7 @@ const SoftwareProductComponentNetworkActionHelper = { }); }, - openNICEditor(dispatch, {nic = {}, data = {}, softwareProductId, componentId, isReadOnlyMode, modalClassName}) { + openNICEditor(dispatch, {nic = {}, data = {}, softwareProductId, componentId, isReadOnlyMode, modalClassName, version}) { dispatch({ type: actionTypes.NICEditor.FILL_DATA, nic: {...data, id: nic.id} @@ -87,7 +87,7 @@ const SoftwareProductComponentNetworkActionHelper = { type: GlobalModalActions.GLOBAL_MODAL_SHOW, data: { modalClassName, - modalComponentProps: {softwareProductId, componentId, isReadOnlyMode}, + modalComponentProps: {softwareProductId, componentId, isReadOnlyMode, version}, modalComponentName: modalPagesMapper.NIC_EDITOR, title: i18n('Edit NIC') } diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkList.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkList.js index 0fa877e90f..bb256d5d41 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkList.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkList.js @@ -15,7 +15,6 @@ */ import {connect} from 'react-redux'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js'; import SoftwareProductComponentsActionHelper from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js'; import SoftwareProductComponentsNetworkListView from './SoftwareProductComponentsNetworkListView.jsx'; @@ -31,8 +30,8 @@ export const mapStateToProps = ({softwareProduct}) => { let {softwareProductEditor: {data: currentSoftwareProduct = {}, isValidityData = true}, softwareProductComponents} = softwareProduct; let {network: {nicList = []}, componentEditor: {data: componentData, qdata, dataMap, qgenericFieldInfo}} = softwareProductComponents; - let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct); let {version, onboardingMethod} = currentSoftwareProduct; + let isManual = onboardingMethod === onboardingMethodTypes.MANUAL; return { version, @@ -42,26 +41,25 @@ export const mapStateToProps = ({softwareProduct}) => { qgenericFieldInfo, isValidityData, nicList, - isReadOnlyMode, - isManual: onboardingMethod === onboardingMethodTypes.MANUAL + isManual }; }; -const mapActionsToProps = (dispatch, {softwareProductId, componentId}) => { +const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => { return { onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, qName: COMPONENTS_QUESTIONNAIRE}), - onAddNic: () => NICCreationActionHelper.open(dispatch, {softwareProductId, componentId, modalClassName: 'network-nic-modal-create'}), - onDeleteNic: (nic, version) => dispatch({ + onAddNic: () => NICCreationActionHelper.open(dispatch, {softwareProductId, componentId, modalClassName: 'network-nic-modal-create', version}), + onDeleteNic: (nic) => dispatch({ type: GlobalModalActions.GLOBAL_MODAL_WARNING, data:{ - msg: i18n(`Are you sure you want to delete "${nic.name}"?`), + msg: i18n('Are you sure you want to delete "{name}"?', {name: nic.name}), onConfirmed: () => SoftwareProductComponentsNetworkActionHelper.deleteNIC(dispatch, {softwareProductId, componentId, nicId: nic.id, version}) } }), - onEditNicClick: (nic, version, isReadOnlyMode) => { + onEditNicClick: (nic, isReadOnlyMode) => { Promise.all([ SoftwareProductComponentsNetworkActionHelper.loadNICData({ softwareProductId, @@ -77,10 +75,10 @@ const mapActionsToProps = (dispatch, {softwareProductId, componentId}) => { }) ]).then( ([{data}]) => SoftwareProductComponentsNetworkActionHelper.openNICEditor(dispatch, {nic, data, - isReadOnlyMode, softwareProductId, componentId, modalClassName: 'network-nic-modal-edit'}) + isReadOnlyMode, softwareProductId, componentId, modalClassName: 'network-nic-modal-edit', version}) ); }, - onSubmit: ({qdata, version}) => { return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, + onSubmit: ({qdata}) => { return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId: componentId, qdata}); diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Acceptable.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Acceptable.jsx index 524b95c3ad..0fc7404c56 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Acceptable.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Acceptable.jsx @@ -21,53 +21,53 @@ import GridItem from 'nfvo-components/grid/GridItem.jsx'; const Acceptable = ({qgenericFieldInfo, dataMap, onQDataChanged}) => { return( - <GridSection> - <GridItem colSpan={3}> - <div className='part-title-small packets'>{i18n('Acceptable Jitter')}</div> - </GridItem> - <GridItem> - <div className='part-title-small bytes'>{i18n('Allow Packet Loss')}</div> - </GridItem> - <GridItem> - <Input - label={i18n('Mean')} - type='number' - data-test-id='acceptableJitter-mean' - isValid={qgenericFieldInfo['sizing/acceptableJitter/mean'].isValid} - errorText={qgenericFieldInfo['sizing/acceptableJitter/mean'].errorText} - value={dataMap['sizing/acceptableJitter/mean']} - onChange={val => onQDataChanged({'sizing/acceptableJitter/mean' : val})} /> - </GridItem> - <GridItem> - <Input - label={i18n('Max')} - type='number' - data-test-id='acceptableJitter-max' - isValid={qgenericFieldInfo['sizing/acceptableJitter/max'].isValid} - errorText={qgenericFieldInfo['sizing/acceptableJitter/max'].errorText} - value={dataMap['sizing/acceptableJitter/max']} - onChange={val => onQDataChanged({'sizing/acceptableJitter/max' : val})} /> - </GridItem> - <GridItem> - <Input - label={i18n('Var')} - type='number' - data-test-id='acceptableJitter-variable' - isValid={qgenericFieldInfo['sizing/acceptableJitter/variable'].isValid} - errorText={qgenericFieldInfo['sizing/acceptableJitter/variable'].errorText} - value={dataMap['sizing/acceptableJitter/variable']} - onChange={val => onQDataChanged({'sizing/acceptableJitter/variable' : val})} /> - </GridItem> - <GridItem> - <Input - label={i18n('In Percent')} - type='number' - data-test-id='acceptableJitter-acceptablePacketLoss' - isValid={qgenericFieldInfo['sizing/acceptablePacketLoss'].isValid} - errorText={qgenericFieldInfo['sizing/acceptablePacketLoss'].errorText} - value={dataMap['sizing/acceptablePacketLoss']} - onChange={val => onQDataChanged({'sizing/acceptablePacketLoss' : val})} /> - </GridItem> + <GridSection hasLastColSet> + <GridItem colSpan={3}> + <div className='part-title-small packets'>{i18n('Acceptable Jitter')}</div> + </GridItem> + <GridItem lastColInRow> + <div className='part-title-small bytes'>{i18n('Allow Packet Loss')}</div> + </GridItem> + <GridItem> + <Input + label={i18n('Mean')} + type='number' + data-test-id='acceptableJitter-mean' + isValid={qgenericFieldInfo['sizing/acceptableJitter/mean'].isValid} + errorText={qgenericFieldInfo['sizing/acceptableJitter/mean'].errorText} + value={dataMap['sizing/acceptableJitter/mean']} + onChange={val => onQDataChanged({'sizing/acceptableJitter/mean' : val})} /> + </GridItem> + <GridItem> + <Input + label={i18n('Max')} + type='number' + data-test-id='acceptableJitter-max' + isValid={qgenericFieldInfo['sizing/acceptableJitter/max'].isValid} + errorText={qgenericFieldInfo['sizing/acceptableJitter/max'].errorText} + value={dataMap['sizing/acceptableJitter/max']} + onChange={val => onQDataChanged({'sizing/acceptableJitter/max' : val})} /> + </GridItem> + <GridItem> + <Input + label={i18n('Var')} + type='number' + data-test-id='acceptableJitter-variable' + isValid={qgenericFieldInfo['sizing/acceptableJitter/variable'].isValid} + errorText={qgenericFieldInfo['sizing/acceptableJitter/variable'].errorText} + value={dataMap['sizing/acceptableJitter/variable']} + onChange={val => onQDataChanged({'sizing/acceptableJitter/variable' : val})} /> + </GridItem> + <GridItem lastColInRow> + <Input + label={i18n('In Percent')} + type='number' + data-test-id='acceptableJitter-acceptablePacketLoss' + isValid={qgenericFieldInfo['sizing/acceptablePacketLoss'].isValid} + errorText={qgenericFieldInfo['sizing/acceptablePacketLoss'].errorText} + value={dataMap['sizing/acceptablePacketLoss']} + onChange={val => onQDataChanged({'sizing/acceptablePacketLoss' : val})} /> + </GridItem> </GridSection> ); }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/NameAndPurpose.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/NameAndPurpose.jsx index bc692e753c..06a2bb445c 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/NameAndPurpose.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/NameAndPurpose.jsx @@ -14,6 +14,7 @@ * permissions and limitations under the License. */ import React from 'react'; +import PropTypes from 'prop-types'; import i18n from 'nfvo-utils/i18n/i18n.js'; import Input from 'nfvo-components/input/validation/Input.jsx'; import GridSection from 'nfvo-components/grid/GridSection.jsx'; @@ -22,7 +23,7 @@ import GridItem from 'nfvo-components/grid/GridItem.jsx'; const NameAndPurpose = ({onDataChanged, genericFieldInfo, isReadOnlyMode, name, description, isManual}) => { return ( - <GridSection> + <GridSection hastLastColSet> <GridItem colSpan={2}> <Input label={i18n('Name')} @@ -35,24 +36,24 @@ const NameAndPurpose = ({onDataChanged, genericFieldInfo, isReadOnlyMode, name, errorText={genericFieldInfo['name'].errorText} type='text' /> </GridItem> - <GridItem colSpan={2}> + <GridItem colSpan={2} lastColInRow> <Input label={i18n('Purpose of NIC')} value={description} data-test-id='nic-description' onChange={description => onDataChanged({description})} disabled={isReadOnlyMode} - type='textarea'/> + type='textarea' /> </GridItem> </GridSection> ); }; NameAndPurpose.PropTypes = { - name: React.PropTypes.string, - description: React.PropTypes.array, - onDataChanged: React.PropTypes.func, - isReadOnlyMode: React.PropTypes.bool, + name: PropTypes.string, + description: PropTypes.array, + onDataChanged: PropTypes.func, + isReadOnlyMode: PropTypes.bool, }; export default NameAndPurpose; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Network.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Network.jsx index 8d9b79e67f..7e6712cb5e 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Network.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Network.jsx @@ -14,6 +14,7 @@ * permissions and limitations under the License. */ import React from 'react'; +import PropTypes from 'prop-types'; import i18n from 'nfvo-utils/i18n/i18n.js'; import Input from 'nfvo-components/input/validation/Input.jsx'; import GridSection from 'nfvo-components/grid/GridSection.jsx'; @@ -23,51 +24,53 @@ import { networkTypes } from '../SoftwareProductComponentsNetworkConstants.js'; const Network = ({networkValues, networkType, networkDescription, onDataChanged, isReadOnlyMode}) => { const isExternal = networkType === networkTypes.EXTERNAL; return ( - <GridSection title={i18n('Network')}> - <GridItem> - <Input - label={i18n('Internal')} - disabled - checked={!isExternal} - data-test-id='nic-internal' - className='network-radio disabled' - type='radio'/> - </GridItem> - <GridItem> - <Input - label={i18n('External')} - disabled - checked={isExternal} - data-test-id='nic-external' - className='network-radio disabled' - type='radio'/> - </GridItem> - <GridItem colSpan={2}> - {isExternal ? + <GridSection title={i18n('Network')} hasLastColSet> + <GridItem> + <Input + label={i18n('Internal')} + disabled + checked={!isExternal} + data-test-id='nic-internal' + className='network-radio disabled' + type='radio' /> + </GridItem> + <GridItem> + <Input + label={i18n('External')} + disabled + checked={isExternal} + data-test-id='nic-external' + className='network-radio disabled' + type='radio' /> + </GridItem> + <GridItem colSpan={2} lastColInRow> + { + isExternal ? <Input label={i18n('Network Description')} value={networkDescription} data-test-id='nic-network-description' onChange={networkDescription => onDataChanged({networkDescription})} disabled={isReadOnlyMode} - type='text'/> - : + type='text' /> + : <Input label={i18n('Network')} data-test-id='nic-network' type='select' className='input-options-select' groupClassName='bootstrap-input-options' - disabled={true} > - {networkValues.map(val => <option key={val.enum} value={val.enum}>{val.title}</option>)} - </Input>} - </GridItem> + disabled={true}> + {networkValues.map(val => <option key={val.enum} value={val.enum}>{val.title}</option>)} + </Input> + } + </GridItem> </GridSection> ); }; Network.PropTypes = { - networkValues: React.PropTypes.array + networkValues: PropTypes.array }; export default Network; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/PacketsBytes.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/PacketsBytes.jsx index d7ee91bd15..f5f28aea59 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/PacketsBytes.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/PacketsBytes.jsx @@ -14,14 +14,15 @@ * permissions and limitations under the License. */ import React from 'react'; +import PropTypes from 'prop-types'; import i18n from 'nfvo-utils/i18n/i18n.js'; 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'; -const PointerInput = ({label, value, onQDataChanged, qgenericFieldInfo, dataMap}) => { +const PointerInput = ({label, value, onQDataChanged, qgenericFieldInfo, dataMap, lastColInRow}) => { return ( - <GridItem> + <GridItem lastColInRow={lastColInRow}> <Input label={i18n(label)} type='number' @@ -35,31 +36,31 @@ const PointerInput = ({label, value, onQDataChanged, qgenericFieldInfo, dataMap} }; PointerInput.PropTypes = { - label: React.PropTypes.string, - value: React.PropTypes.string + label: PropTypes.string, + value: PropTypes.string }; const PacketsBytes = ({title, pointers = [], qgenericFieldInfo, dataMap, onQDataChanged}) => { return( - <GridSection title={title}> + <GridSection title={title} hasLastColSet> <GridItem colSpan={2}> <div className='part-title-small packets'>{i18n('Packets')}</div> </GridItem> - <GridItem colSpan={2}> + <GridItem colSpan={2} lastColInRow> <div className='part-title-small bytes'>{i18n('Bytes')}</div> </GridItem> - {pointers.map(pointer => {return (<PointerInput key={pointer.value} label={pointer.label} value={pointer.value} - qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged} dataMap={dataMap} />);})} + {pointers.map((pointer, i) => {return (<PointerInput key={i} label={pointer.label} value={pointer.value} + qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged} dataMap={dataMap} lastColInRow={i === 3} />);})} </GridSection> ); }; PacketsBytes.PropTypes = { - title: React.PropTypes.string, - pointers: React.PropTypes.array, - onQDataChanged: React.PropTypes.function, - dataMap: React.PropTypes.object, - qgenericFieldInfo: React.PropTypes.object + title: PropTypes.string, + pointers: PropTypes.array, + onQDataChanged: PropTypes.function, + dataMap: PropTypes.object, + qgenericFieldInfo: PropTypes.object }; export default PacketsBytes; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Protocols.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Protocols.jsx index 3e8a9f4e77..be4093da59 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Protocols.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Protocols.jsx @@ -14,6 +14,7 @@ * permissions and limitations under the License. */ import React from 'react'; +import PropTypes from 'prop-types'; import i18n from 'nfvo-utils/i18n/i18n.js'; import Input from 'nfvo-components/input/validation/Input.jsx'; import InputOptions from 'nfvo-components/input/validation/InputOptions.jsx'; @@ -22,7 +23,7 @@ import GridItem from 'nfvo-components/grid/GridItem.jsx'; const Protocols = ({protocols, qgenericFieldInfo, dataMap, onQDataChanged}) => { return ( - <GridSection title={i18n('Protocols')}> + <GridSection title={i18n('Protocols')} hasLastColSet> <GridItem colSpan={2}> <InputOptions data-test-id='nic-protocols' @@ -39,7 +40,7 @@ const Protocols = ({protocols, qgenericFieldInfo, dataMap, onQDataChanged}) => { clearable={false} values={qgenericFieldInfo['protocols/protocols'].enum}/> </GridItem> - <GridItem colSpan={2}> + <GridItem colSpan={2} lastColInRow> <Input data-test-id='nic-protocolWithHighestTrafficProfile' label={i18n('Protocol with Highest Traffic Profile')} @@ -65,10 +66,10 @@ const Protocols = ({protocols, qgenericFieldInfo, dataMap, onQDataChanged}) => { }; Protocols.PropTypes = { - protocols: React.PropTypes.array, - onQDataChanged: React.PropTypes.function, - dataMap: React.PropTypes.object, - qgenericFieldInfo: React.PropTypes.object + protocols: PropTypes.array, + onQDataChanged: PropTypes.function, + dataMap: PropTypes.object, + qgenericFieldInfo: PropTypes.object }; export default Protocols; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Sizing.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Sizing.jsx index 1dd0045f7b..202d458f25 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Sizing.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Sizing.jsx @@ -21,8 +21,8 @@ import GridItem from 'nfvo-components/grid/GridItem.jsx'; const Sizing = ({qgenericFieldInfo, dataMap, onQDataChanged}) => { return( - <GridSection title={i18n('Sizing')}> - <GridItem colSpan={4}> + <GridSection title={i18n('Sizing')} hasLastColSet> + <GridItem colSpan={4} lastColInRow> <Input label={i18n('Describe Quality of Service')} type='textarea' diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx index 87abaf4978..9841ecbae7 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx @@ -14,168 +14,17 @@ * permissions and limitations under the License. */ import React from 'react'; -import i18n from 'nfvo-utils/i18n/i18n.js'; -import Dropzone from 'react-dropzone'; - -import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx'; import {optionsInputValues as ComponentProcessesOptionsInputValues} from './SoftwareProductComponentProcessesConstants.js'; -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'; - -const SoftwareProductProcessEditorPropType = React.PropTypes.shape({ - id: React.PropTypes.string, - name: React.PropTypes.string, - description: React.PropTypes.string, - artifactName: React.PropTypes.string, - type: React.PropTypes.string -}); +import SoftwareProductProcessesEditorForm from 'sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx'; class SoftwareProductProcessesEditorView extends React.Component { - state = { - dragging: false, - files: [] - }; - - static propTypes = { - data: SoftwareProductProcessEditorPropType, - previousData: SoftwareProductProcessEditorPropType, - isReadOnlyMode: React.PropTypes.bool, - onDataChanged: React.PropTypes.func, - onSubmit: React.PropTypes.func, - onCancel: React.PropTypes.func - }; - render() { - let {isReadOnlyMode, onCancel, onDataChanged, genericFieldInfo, data = {}} = this.props; - let {name, description, artifactName, type} = data; - return ( - <div> - { genericFieldInfo && <Form - ref='validationForm' - isReadOnlyMode={isReadOnlyMode} - hasButtons={true} - labledButtons={true} - onSubmit={ () => this.submit() } - onReset={ () => onCancel() } - isValid={this.props.isFormValid} - formReady={this.props.formReady} - onValidateForm={() => this.props.onValidateForm() } - className='vsp-processes-editor'> - <div className={`vsp-processes-editor-data${isReadOnlyMode ? ' disabled' : '' }`}> - <Dropzone - className={`vsp-process-dropzone-view ${this.state.dragging ? 'active-dragging' : ''}`} - onDrop={(acceptedFiles, rejectedFiles) => this.handleImportSubmit(acceptedFiles, rejectedFiles)} - onDragEnter={() => this.setState({dragging:true})} - onDragLeave={() => this.setState({dragging:false})} - multiple={false} - disableClick={true} - ref='processEditorFileInput' - name='processEditorFileInput'> - <GridSection> - <GridItem colSpan={2}> - <Input - onChange={name => onDataChanged({name})} - isValid={genericFieldInfo.name.isValid} - isRequired={true} - data-test-id='name' - errorText={genericFieldInfo.name.errorText} - label={i18n('Name')} - value={name} - type='text'/> - </GridItem> - <GridItem colSpan={2}> - <DraggableUploadFileBox isReadOnlyMode={isReadOnlyMode} className='file-upload-box' onClick={() => this.refs.processEditorFileInput.open()} /> - </GridItem> - </GridSection> - <GridSection> - <GridItem colSpan={2}> - <Input - name='vsp-process-description' - groupClassName='vsp-process-description' - onChange={description => onDataChanged({description})} - isValid={genericFieldInfo.description.isValid} - errorText={genericFieldInfo.description.errorText} - label={i18n('Notes')} - value={description} - data-test-id='vsp-process-description' - type='textarea'/> - </GridItem> - <GridItem colSpan={2}> - <Input - label={i18n('Artifacts')} - data-test-id='artifacts' - value={artifactName} - type='text' - disabled/> - <Input - onChange={e => { - // setting the unit to the correct value - const selectedIndex = e.target.selectedIndex; - const val = e.target.options[selectedIndex].value; - onDataChanged({type: val});} - } - value={type} - label={i18n('Process Type')} - data-test-id='process-type' - isValid={genericFieldInfo.type.isValid} - errorText={genericFieldInfo.type.errorText} - type='select' - className='input-options-select' - groupClassName='bootstrap-input-options' > - {ComponentProcessesOptionsInputValues.PROCESS_TYPE.map(mtype => - <option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)} - </Input> - </GridItem> - </GridSection> - </Dropzone> - </div> - </Form>} - </div> + <SoftwareProductProcessesEditorForm optionsInputValues={ComponentProcessesOptionsInputValues} {...this.props}/> ); } - - submit() { - const {data: process, previousData: previousProcess} = this.props; - let {files} = this.state; - let formData = new FormData(); - if (files.length) { - let file = files[0]; - formData.append('upload', file); - } - - let updatedProcess = { - ...process, - formData: files.length ? formData : false - }; - this.props.onSubmit({process: updatedProcess, previousProcess}); - } - - - handleImportSubmit(files, rejectedFiles) { - if (files.length > 0) { - let {onDataChanged} = this.props; - this.setState({ - dragging: false, - complete: '0', - files - }); - onDataChanged({artifactName: files[0].name}); - } - else if (rejectedFiles.length > 0) { - this.setState({ - dragging: false - }); - if (DEBUG) { - console.log('file was rejected ' + rejectedFiles[0].name); - } - } - - } } export default SoftwareProductProcessesEditorView; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js index 8c359db869..2a7152ef8b 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js @@ -16,7 +16,6 @@ import {connect} from 'react-redux'; import i18n from 'nfvo-utils/i18n/i18n.js'; import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; -import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js'; import SoftwareProductComponentProcessesActionHelper from './SoftwareProductComponentProcessesActionHelper.js'; import SoftwareProductComponentsProcessesListView from './SoftwareProductComponentsProcessesListView.jsx'; @@ -26,28 +25,26 @@ export const mapStateToProps = ({softwareProduct}) => { let {softwareProductEditor: {data:currentSoftwareProduct = {}, isValidityData = true}, softwareProductComponents: {componentProcesses = {}}} = softwareProduct; let{processesList = [], processesEditor = {}} = componentProcesses; let {data} = processesEditor; - let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct); return { currentSoftwareProduct, isValidityData, processesList, isDisplayModal: Boolean(data), - isModalInEditMode: Boolean(data && data.id), - isReadOnlyMode + isModalInEditMode: Boolean(data && data.id) }; }; -const mapActionsToProps = (dispatch, {componentId, softwareProductId}) => { +const mapActionsToProps = (dispatch, {componentId, softwareProductId, version}) => { return { onAddProcess: () => SoftwareProductComponentProcessesActionHelper.openEditor(dispatch), - onEditProcessClick: (process) => SoftwareProductComponentProcessesActionHelper.openEditor(dispatch, process), - onDeleteProcessClick: (process, version) => dispatch({ + onEditProcess: (process) => SoftwareProductComponentProcessesActionHelper.openEditor(dispatch, process), + onDeleteProcess: (process) => dispatch({ type: modalActionTypes.GLOBAL_MODAL_WARNING, data:{ - msg: i18n(`Are you sure you want to delete "${process.name}"?`), + msg: i18n('Are you sure you want to delete "{name}"?', {name: process.name}), confirmationButtonText: i18n('Delete'), title: i18n('Delete'), onConfirmed: ()=> SoftwareProductComponentProcessesActionHelper.deleteProcess(dispatch, diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx index 93d5ce886a..27c4b9f429 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx @@ -14,13 +14,11 @@ * permissions and limitations under the License. */ import React from 'react'; +import PropTypes from 'prop-types'; import i18n from 'nfvo-utils/i18n/i18n.js'; 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 SoftwareProductProcessesEditor from './SoftwareProductComponentProcessesEditor.js'; +import SoftwareProductProcessListView from 'sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx'; class SoftwareProductProcessesView extends React.Component { @@ -29,15 +27,15 @@ class SoftwareProductProcessesView extends React.Component { }; static propTypes = { - onAddProcess: React.PropTypes.func, - onEditProcessClick: React.PropTypes.func, - onDeleteProcessClick: React.PropTypes.func, - isDisplayModal: React.PropTypes.bool, - isModalInEditMode: React.PropTypes.bool, - onStorageSelect: React.PropTypes.func, - componentId: React.PropTypes.string, - softwareProductId: React.PropTypes.string, - currentSoftwareProduct: React.PropTypes.object + onAddProcess: PropTypes.func, + onEditProcess: PropTypes.func, + onDeleteProcess: PropTypes.func, + isDisplayModal: PropTypes.bool, + isModalInEditMode: PropTypes.bool, + onStorageSelect: PropTypes.func, + componentId: PropTypes.string, + softwareProductId: PropTypes.string, + currentSoftwareProduct: PropTypes.object }; render() { @@ -46,7 +44,7 @@ class SoftwareProductProcessesView extends React.Component { <div className='software-product-view'> <div className='software-product-landing-view-right-side vsp-components-processes-page flex-column'> {this.renderEditor()} - {this.renderProcessList()} + <SoftwareProductProcessListView addButtonTitle={i18n('Add Component Process Details')} {...this.props}/> </div> </div> </div> @@ -54,7 +52,7 @@ class SoftwareProductProcessesView extends React.Component { } renderEditor() { - let {softwareProductId, currentSoftwareProduct: {version}, componentId, isReadOnlyMode, isDisplayModal, isModalInEditMode} = this.props; + let {softwareProductId, version, componentId, isReadOnlyMode, isDisplayModal, isModalInEditMode} = this.props; return ( <Modal show={isDisplayModal} bsSize='large' animation={true} className='onborading-modal'> <Modal.Header> @@ -72,66 +70,6 @@ class SoftwareProductProcessesView extends React.Component { ); } - renderProcessList() { - const {localFilter} = this.state; - let {onAddProcess, isReadOnlyMode} = this.props; - return ( - <div className='processes-list'> - <ListEditorView - plusButtonTitle={i18n('Add Component Process Details')} - filterValue={localFilter} - placeholder={i18n('Filter Process')} - onAdd={onAddProcess} - isReadOnlyMode={isReadOnlyMode} - title={i18n('Process Details')} - onFilter={value => this.setState({localFilter: value})}> - {this.filterList().map(processes => this.renderProcessListItem(processes, isReadOnlyMode))} - </ListEditorView> - </div> - ); - } - - renderProcessListItem(process, isReadOnlyMode) { - let {id, name, description, artifactName = ''} = process; - let {currentSoftwareProduct: {version}, onEditProcessClick, onDeleteProcessClick} = this.props; - return ( - <ListEditorItemView - key={id} - className='list-editor-item-view' - isReadOnlyMode={isReadOnlyMode} - onSelect={() => onEditProcessClick(process)} - onDelete={() => onDeleteProcessClick(process, version)}> - - <div className='list-editor-item-view-field'> - <div className='title'>{i18n('Name')}</div> - <div className='name'>{name}</div> - </div> - <div className='list-editor-item-view-field'> - <div className='title'>{i18n('Artifact name')}</div> - <div className='artifact-name'>{artifactName}</div> - </div> - <div className='list-editor-item-view-field'> - <div className='title'>{i18n('Notes')}</div> - <div className='description'>{description}</div> - </div> - </ListEditorItemView> - ); - } - - - filterList() { - let {processesList} = this.props; - let {localFilter} = this.state; - if (localFilter.trim()) { - const filter = new RegExp(escape(localFilter), 'i'); - return processesList.filter(({name = '', description = ''}) => { - return escape(name).match(filter) || escape(description).match(filter); - }); - } - else { - return processesList; - } - } } export default SoftwareProductProcessesView; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorage.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorage.js index 7149adbbfb..ca27a76a18 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorage.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorage.js @@ -15,7 +15,6 @@ */ import {connect} from 'react-redux'; -import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; import SoftwareProductComponentsActionHelper from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js'; @@ -23,26 +22,21 @@ import SoftwareProductComponentStorageView from './SoftwareProductComponentStora import {COMPONENTS_QUESTIONNAIRE} from '../SoftwareProductComponentsConstants.js'; -const mapStateToProps = ({softwareProduct}) => { - let {softwareProductEditor: {data: currentVSP}, softwareProductComponents} = softwareProduct; - let {componentEditor: {data: componentData , qdata, qgenericFieldInfo : qGenericFieldInfo, dataMap}} = softwareProductComponents; - let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentVSP); +const mapStateToProps = ({softwareProduct: {softwareProductComponents}}) => { + let {componentEditor: {qdata, qgenericFieldInfo : qGenericFieldInfo, dataMap}} = softwareProductComponents; return { - componentData, qdata, - isReadOnlyMode, qGenericFieldInfo, - dataMap, - version: currentVSP.version + dataMap }; }; -const mapActionToProps = (dispatch, {softwareProductId, componentId}) => { +const mapActionToProps = (dispatch, {softwareProductId, version, componentId}) => { return { onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, qName: COMPONENTS_QUESTIONNAIRE}), - onSubmit: ({componentData, qdata, version}) => { return SoftwareProductComponentsActionHelper.updateSoftwareProductComponent(dispatch, - {softwareProductId, version, vspComponentId: componentId, componentData, qdata}); + onSubmit: ({qdata}) => { + return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId: componentId, qdata}); } }; }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorageView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorageView.jsx index 00df21bb59..8538dab6bc 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorageView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorageView.jsx @@ -14,6 +14,7 @@ * permissions and limitations under the License. */ import React from 'react'; +import PropTypes from 'prop-types'; import i18n from 'nfvo-utils/i18n/i18n.js'; import Input from 'nfvo-components/input/validation/Input.jsx'; import Form from 'nfvo-components/input/validation/Form.jsx'; @@ -155,14 +156,14 @@ const LogBackupSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => ( class SoftwareProductComponentStorageView extends React.Component { static propTypes = { - componentId: React.PropTypes.string, - onQDataChanged: React.PropTypes.func, - onSubmit: React.PropTypes.func, - isReadOnlyMode: React.PropTypes.bool + componentId: PropTypes.string, + onQDataChanged: PropTypes.func, + onSubmit: PropTypes.func, + isReadOnlyMode: PropTypes.bool }; render() { - let {onQDataChanged, dataMap, qGenericFieldInfo, isReadOnlyMode, onSubmit, qdata, version} = this.props; + let {onQDataChanged, dataMap, qGenericFieldInfo, isReadOnlyMode, onSubmit, qdata} = this.props; return( <div className='vsp-component-questionnaire-view'> @@ -170,7 +171,7 @@ class SoftwareProductComponentStorageView extends React.Component { ref={form => this.form = form } isValid={true} formReady={null} - onSubmit={() => onSubmit({qdata, version})} + onSubmit={() => onSubmit({qdata})} className='component-questionnaire-validation-form' isReadOnlyMode={isReadOnlyMode} hasButtons={false}> @@ -183,8 +184,8 @@ class SoftwareProductComponentStorageView extends React.Component { } save(){ - const {componentData, qdata, onSubmit, version} = this.props; - return onSubmit({componentData, qdata, version}); + const {qdata, onSubmit} = this.props; + return onSubmit({qdata}); } } diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreation.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreation.js index 3b973c65cd..0136048bf7 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreation.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreation.js @@ -15,13 +15,17 @@ */ import {connect} from 'react-redux'; -import OnboardingActionHelper from 'sdc-app/onboarding/OnboardingActionHelper.js'; import SoftwareProductCreationActionHelper from './SoftwareProductCreationActionHelper.js'; import SoftwareProductCreationView from './SoftwareProductCreationView.jsx'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; import SoftwareProductActionHelper from '../SoftwareProductActionHelper.js'; +import VersionsPageActionHelper from 'sdc-app/onboarding/versionsPage/VersionsPageActionHelper.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 PermissionsActionHelper from 'sdc-app/onboarding/permissions/PermissionsActionHelper.js'; -export const mapStateToProps = ({finalizedLicenseModelList, softwareProductList, softwareProduct: {softwareProductCreation, softwareProductCategories} }) => { +export const mapStateToProps = ({finalizedLicenseModelList, users: {usersList}, softwareProductList, softwareProduct: {softwareProductCreation, softwareProductCategories} }) => { let {genericFieldInfo} = softwareProductCreation; let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); @@ -39,7 +43,8 @@ export const mapStateToProps = ({finalizedLicenseModelList, softwareProductList, isFormValid, formReady: softwareProductCreation.formReady, genericFieldInfo, - VSPNames + VSPNames, + usersList }; }; @@ -47,13 +52,18 @@ export const mapActionsToProps = (dispatch) => { return { onDataChanged: (deltaData, formName, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName, customValidations}), onCancel: () => SoftwareProductCreationActionHelper.resetData(dispatch), - onSubmit: (softwareProduct) => { + onSubmit: (softwareProduct, usersList) => { SoftwareProductCreationActionHelper.resetData(dispatch); SoftwareProductCreationActionHelper.createSoftwareProduct(dispatch, {softwareProduct}).then(response => { - SoftwareProductActionHelper.fetchSoftwareProductList(dispatch).then(() => { - let {vendorId: licenseModelId, licensingVersion} = softwareProduct; - OnboardingActionHelper.navigateToSoftwareProductLandingPage(dispatch, {softwareProductId: response.vspId, licenseModelId, licensingVersion}); - }); + let {itemId, version} = response; + SoftwareProductActionHelper.fetchSoftwareProductList(dispatch).then(() => + PermissionsActionHelper.fetchItemUsers(dispatch, {itemId, allUsers: usersList}).then(() => + VersionsPageActionHelper.fetchVersions(dispatch, {itemType: versionItemTypes.SOFTWARE_PRODUCT, itemId}).then(() => + ScreensHelper.loadScreen(dispatch, {screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT, + props: {softwareProductId: itemId, version}}) + ) + ) + ); }); }, onValidateForm: (formName) => ValidationHelper.validateForm(dispatch, formName) diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationActionHelper.js index a22b517fa0..b19e460497 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationActionHelper.js @@ -48,10 +48,10 @@ const SoftwareProductCreationActionHelper = { type: modalActionTypes.GLOBAL_MODAL_SHOW, data: { modalComponentName: modalContentMapper.SOFTWARE_PRODUCT_CREATION, - title: i18n('New Software Product'), + title: i18n('New Software Product'), modalComponentProps: { vendorId, - size: modalSizes.LARGE + size: modalSizes.LARGE } } }); @@ -70,7 +70,13 @@ const SoftwareProductCreationActionHelper = { }, createSoftwareProduct(dispatch, {softwareProduct}) { - return createSoftwareProduct(softwareProduct); + return createSoftwareProduct(softwareProduct).then(result => { + dispatch({ + type: actionTypes.SOFTWARE_PRODUCT_CREATED, + result + }); + return result; + }); } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationConstants.js index 241d7985b1..b941c849cb 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationConstants.js @@ -17,7 +17,8 @@ import keyMirror from 'nfvo-utils/KeyMirror.js'; export const actionTypes = keyMirror({ OPEN: null, - RESET_DATA: null + RESET_DATA: null, + SOFTWARE_PRODUCT_CREATED: null }); export const SP_CREATION_FORM_NAME = 'SPCREATIONFORM'; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationView.jsx index c7ab3e644c..e491491f4d 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationView.jsx @@ -14,6 +14,7 @@ * permissions and limitations under the License. */ import React from 'react'; +import PropTypes from 'prop-types'; import i18n from 'nfvo-utils/i18n/i18n.js'; import Validator from 'nfvo-utils/Validator.js'; import Input from 'nfvo-components/input/validation/Input.jsx'; @@ -27,25 +28,26 @@ import sortByStringProperty from 'nfvo-utils/sortByStringProperty.js'; import SoftwareProductCategoriesHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductCategoriesHelper.js'; import {onboardingMethod as onboardingMethodConst} from '../SoftwareProductConstants.js'; -const SoftwareProductPropType = React.PropTypes.shape({ - id: React.PropTypes.string, - name: React.PropTypes.string, - description: React.PropTypes.string, - category: React.PropTypes.string, - subCategory: React.PropTypes.string, - vendorId: React.PropTypes.string +const SoftwareProductPropType = PropTypes.shape({ + id: PropTypes.string, + name: PropTypes.string, + description: PropTypes.string, + category: PropTypes.string, + subCategory: PropTypes.string, + vendorId: PropTypes.string }); class SoftwareProductCreationView extends React.Component { static propTypes = { data: SoftwareProductPropType, - finalizedLicenseModelList: React.PropTypes.array, - softwareProductCategories: React.PropTypes.array, - VSPNames: React.PropTypes.object, - onDataChanged: React.PropTypes.func.isRequired, - onSubmit: React.PropTypes.func.isRequired, - onCancel: React.PropTypes.func.isRequired + finalizedLicenseModelList: PropTypes.array, + softwareProductCategories: PropTypes.array, + VSPNames: PropTypes.object, + usersList: PropTypes.array, + onDataChanged: PropTypes.func.isRequired, + onSubmit: PropTypes.func.isRequired, + onCancel: PropTypes.func.isRequired }; render() { @@ -65,7 +67,7 @@ class SoftwareProductCreationView extends React.Component { submitButtonText={i18n('Create')} formReady={this.props.formReady} onValidateForm={() => this.validate() }> - <GridSection> + <GridSection hasLastColSet> <GridItem colSpan='2'> <Input value={name} @@ -115,7 +117,7 @@ class SoftwareProductCreationView extends React.Component { } </Input> </GridItem> - <GridItem colSpan='2' stretch> + <GridItem colSpan='2' stretch lastColInRow> <Input value={description} label={i18n('Description')} @@ -139,10 +141,10 @@ class SoftwareProductCreationView extends React.Component { let {finalizedLicenseModelList} = this.props; return [{enum: '', title: i18n('please select...')}].concat( - sortByStringProperty(finalizedLicenseModelList, 'vendorName').map(vendor => { + sortByStringProperty(finalizedLicenseModelList, 'name').map(vendor => { return { enum: vendor.id, - title: vendor.vendorName + title: vendor.name }; }) ); @@ -163,9 +165,9 @@ class SoftwareProductCreationView extends React.Component { } submit() { - let {data:softwareProduct, finalizedLicenseModelList} = this.props; - softwareProduct.vendorName = finalizedLicenseModelList.find(vendor => vendor.id === softwareProduct.vendorId).vendorName; - this.props.onSubmit(softwareProduct); + let {data:softwareProduct, finalizedLicenseModelList, usersList} = this.props; + softwareProduct.vendorName = finalizedLicenseModelList.find(vendor => vendor.id === softwareProduct.vendorId).name; + this.props.onSubmit(softwareProduct, usersList); } validateName(value) { diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependencies.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependencies.js index 05a1fc7797..9888087800 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependencies.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependencies.js @@ -16,24 +16,21 @@ import {connect} from 'react-redux'; import SoftwareProductDependenciesView from './SoftwareProductDependenciesView.jsx'; -import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js'; import SoftwareProductDependenciesActionHelper from './SoftwareProductDependenciesActionHelper.js'; export const mapStateToProps = ({softwareProduct}) => { - let {softwareProductEditor: {data: currentSoftwareProduct = {}}, softwareProductDependencies, softwareProductComponents: {componentsList}} = softwareProduct; - let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct); + let {softwareProductDependencies, softwareProductComponents: {componentsList}} = softwareProduct; return { - isReadOnlyMode, - softwareProductDependencies: softwareProductDependencies.length ? softwareProductDependencies : [{sourceId: '', targetId: '', relationType: 'dependsOn', id: 'fake'}], + softwareProductDependencies: softwareProductDependencies, componentsOptions: componentsList.map(component => ({value: component.id, label: component.displayName})) }; }; const mapActionsToProps = (dispatch, {softwareProductId, version}) => { return { - onDataChanged: dependenciesList => SoftwareProductDependenciesActionHelper.updateDependencyList(dispatch, {dependenciesList}), - onAddDependency: () => SoftwareProductDependenciesActionHelper.addDependency(dispatch), - onSubmit: (dependenciesList) => SoftwareProductDependenciesActionHelper.saveDependencies(dispatch, {softwareProductId, version, dependenciesList}) + onDataChanged: (item) => SoftwareProductDependenciesActionHelper.updateDependency(dispatch, {softwareProductId, version, item}), + onDeleteDependency: (item) => SoftwareProductDependenciesActionHelper.removeDependency(dispatch, {softwareProductId, version, item}), + onAddDependency: (item) => SoftwareProductDependenciesActionHelper.createDependency(dispatch, {softwareProductId, version, item}) }; }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesActionHelper.js index e47b33a577..f04f8faf56 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesActionHelper.js @@ -15,44 +15,83 @@ */ import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js'; import Configuration from 'sdc-app/config/Configuration.js'; -import {actionTypes} from './SoftwareProductDependenciesConstants.js'; -import uuid from 'uuid-js'; +import {actionTypes, NEW_RULE_TEMP_ID} from './SoftwareProductDependenciesConstants.js'; function baseUrl(softwareProductId, version) { const versionId = version.id; const restPrefix = Configuration.get('restPrefix'); - return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/component-dependency-model`; + return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/component-dependencies`; } -function fetchDependency(softwareProductId, version) { +function fetchDependencies(softwareProductId, version) { return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`); } -function postDependency(softwareProductId, version, dependenciesList) { - let modifedDependencyList = dependenciesList ? dependenciesList.filter(item => item.sourceId && item.targetId) - .map(item => ({sourceId: item.sourceId, targetId: item.targetId, relationType: item.relationType})) : []; - return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, {componentDependencyModels:modifedDependencyList}); +function addDepencency(softwareProductId, version, item) { + return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, { + sourceId: item.sourceId, + targetId: item.targetId, + relationType: item.relationType + }); } + +function updateDepencency(softwareProductId, version, item) { + return RestAPIUtil.put(`${baseUrl(softwareProductId, version)}/${item.id}`, + { + sourceId: item.sourceId, + targetId: item.targetId, + relationType: item.relationType + }); +} + +function removeDependency(softwareProductId, version, item) { + return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version)}/${item.id}`); +} + + const SoftwareProductDependenciesActionHelper = { - updateDependencyList(dispatch, {dependenciesList}) { - dispatch({type: actionTypes.SOFTWARE_PRODUCT_DEPENDENCIES_LIST_UPDATE, dependenciesList}); + updateDependency(dispatch, {softwareProductId, version, item}) { + // if change was made on existing item - we will update the server and refresh the list + // if change was made on the 'new' row - we will only fire the event + if (item.id !== NEW_RULE_TEMP_ID) { + return updateDepencency(softwareProductId, version, item).then(() => { + return this.fetchDependencies(dispatch, {softwareProductId, version}); + }); + } else { + dispatch({ + type: actionTypes.UPDATE_NEW_SOFTWARE_PRODUCT_DEPENDENCY, + item: item + }); + } }, - addDependency(dispatch) { - dispatch({type: actionTypes.ADD_SOFTWARE_PRODUCT_DEPENDENCY}); + + createDependency(dispatch, {softwareProductId, version, item}) { + // removing the temp id + delete item.id; + // creating the new dependency + return addDepencency(softwareProductId, version, item).then(() => { + dispatch({ + type: actionTypes.ADD_SOFTWARE_PRODUCT_DEPENDENCY + }); + return this.fetchDependencies(dispatch, {softwareProductId, version}); + }); }, + + removeDependency(dispatch, {softwareProductId, version, item}) { + return removeDependency(softwareProductId, version, item).then( () => { + return this.fetchDependencies(dispatch, {softwareProductId, version}); + }); + }, + fetchDependencies(dispatch, {softwareProductId, version}) { - return fetchDependency(softwareProductId, version).then( response => { - const dependenciesList = response.results ? response.results.map(item => {return {...item, id: uuid.create().toString()};}) : []; + return fetchDependencies(softwareProductId, version).then( response => { dispatch({ type: actionTypes.SOFTWARE_PRODUCT_DEPENDENCIES_LIST_UPDATE, - dependenciesList + dependenciesList : response.results }); }); - }, - saveDependencies(dispatch, {softwareProductId, version, dependenciesList}) { - return postDependency(softwareProductId, version, dependenciesList); - } + } }; export default SoftwareProductDependenciesActionHelper; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesConstants.js index 1f27ed8311..c25561da17 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesConstants.js @@ -17,7 +17,8 @@ import keyMirror from 'nfvo-utils/KeyMirror.js'; export const actionTypes = keyMirror({ SOFTWARE_PRODUCT_DEPENDENCIES_LIST_UPDATE: null, - ADD_SOFTWARE_PRODUCT_DEPENDENCY: null + ADD_SOFTWARE_PRODUCT_DEPENDENCY: null, + UPDATE_NEW_SOFTWARE_PRODUCT_DEPENDENCY: null }); export const relationTypes = { @@ -27,3 +28,5 @@ export const relationTypes = { export const relationTypesOptions = [ {value: relationTypes.DEPENDS_ON, label: 'Depends On'} ]; + +export const NEW_RULE_TEMP_ID = 'newRuleTempId';
\ No newline at end of file diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesReducer.js index 3fb479eedc..3edd3b899a 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesReducer.js @@ -15,21 +15,31 @@ * permissions and limitations under the License. */ -import {actionTypes, relationTypes} from './SoftwareProductDependenciesConstants.js'; +import {actionTypes, relationTypes, NEW_RULE_TEMP_ID} from './SoftwareProductDependenciesConstants.js'; import {checkCyclesAndMarkDependencies} from './SoftwareProductDependenciesUtils.js'; -import uuid from 'uuid-js'; -export default (state = [], action) => { +let newRowObject = {id: NEW_RULE_TEMP_ID, targetId: null, sourceId: null, relationType: relationTypes.DEPENDS_ON}; + +export default (state = [Object.assign({}, newRowObject) ], action) => { switch (action.type) { case actionTypes.SOFTWARE_PRODUCT_DEPENDENCIES_LIST_UPDATE: + // copying the entity with the data for the row that is in the 'add' mode + let newDependency = state.find(dependency => dependency.id === NEW_RULE_TEMP_ID); + action.dependenciesList.push(newDependency); + // returning list from the server with our 'new entity' row return checkCyclesAndMarkDependencies(action.dependenciesList); - case actionTypes.ADD_SOFTWARE_PRODUCT_DEPENDENCY: - return [...state, { - sourceId: null, - relationType: relationTypes.DEPENDS_ON, - targetId: null, - id: uuid.create() - }]; + case actionTypes.ADD_SOFTWARE_PRODUCT_DEPENDENCY : + // resetting the entity with the data for the 'add' mode for a new entity + let newArray = state.filter(dependency => dependency.id !== NEW_RULE_TEMP_ID); + newArray.push(Object.assign({}, newRowObject)); + return newArray; + case actionTypes.UPDATE_NEW_SOFTWARE_PRODUCT_DEPENDENCY : + // we really only need this for the 'new' row since we need to change the state to get + // everything updated + let updateArrayIndex = state.findIndex(dependency => dependency.id === NEW_RULE_TEMP_ID); + let updateArray = state.slice(); + updateArray.splice(updateArrayIndex, 1, action.item); + return checkCyclesAndMarkDependencies(updateArray); default: return state; } diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesView.jsx index a427470a4f..ed92de7bb1 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesView.jsx @@ -20,7 +20,42 @@ import i18n from 'nfvo-utils/i18n/i18n.js'; import SelectActionTable from 'nfvo-components/table/SelectActionTable.jsx'; import SelectActionTableRow from 'nfvo-components/table/SelectActionTableRow.jsx'; import SelectActionTableCell from 'nfvo-components/table/SelectActionTableCell.jsx'; -import {relationTypesOptions} from './SoftwareProductDependenciesConstants.js'; +import {relationTypesOptions, NEW_RULE_TEMP_ID} from './SoftwareProductDependenciesConstants.js'; + + +const TableActionRow = ({onAction, actionIcon, showAction, dependency, sourceOptions, targetOptions, onDataChanged}) => { + return ( + <SelectActionTableRow + key={dependency.id} + onAction={onAction} + overlayMsg={i18n('There is a loop between selections')} + hasError={dependency.hasCycle} + hasErrorIndication + showAction={showAction} + actionIcon={actionIcon}> + <SelectActionTableCell + options={sourceOptions} + selected={dependency.sourceId} + placeholder={i18n('Select VFC...')} + clearable={false} + onChange={newVal => { + dependency.sourceId = newVal; + onDataChanged(dependency); + }} /> + <SelectActionTableCell options={relationTypesOptions} selected={dependency.relationType} clearable={false}/> + <SelectActionTableCell + placeholder={i18n('Select VFC...')} + options={targetOptions} + selected={dependency.targetId} + clearable={false} + onChange={newVal => { + dependency.targetId = newVal; + onDataChanged(dependency); + }} /> + </SelectActionTableRow> + ); +}; + export default class SoftwareProductDependenciesView extends React.Component { filterTargets({componentsOptions, sourceToTargetMapping, selectedSourceId, selectedTargetId}) { @@ -46,8 +81,7 @@ export default class SoftwareProductDependenciesView extends React.Component { } render() { - let {componentsOptions, softwareProductDependencies, onDataChanged, onAddDependency, isReadOnlyMode} = this.props; - let canAdd = softwareProductDependencies.length < componentsOptions.length * (componentsOptions.length - 1); + let {componentsOptions, softwareProductDependencies, onDataChanged, onAddDependency, onDeleteDependency, isReadOnlyMode} = this.props; let sourceToTargetMapping = {}; softwareProductDependencies.map(dependency => { let isInMap = sourceToTargetMapping.hasOwnProperty(dependency.sourceId); @@ -55,47 +89,42 @@ export default class SoftwareProductDependenciesView extends React.Component { sourceToTargetMapping[dependency.sourceId] = isInMap ? [...sourceToTargetMapping[dependency.sourceId], dependency.targetId] : [dependency.targetId]; } }); + let depList = softwareProductDependencies.filter(dependency => dependency.id !== NEW_RULE_TEMP_ID); + let newDependency = softwareProductDependencies.find(dependency => dependency.id === NEW_RULE_TEMP_ID); return ( <div className='software-product-dependencies'> - <div className='software-product-dependencies-title'>{i18n('Dependencies')}</div> + <div className='page-title'>{i18n('Dependencies')}</div> <SelectActionTable - columns={['Source', 'Relation Type', 'Target']} + columns={[i18n('Source'), i18n('Relation Type'), i18n('Target')]} numOfIcons={2} - isReadOnlyMode={isReadOnlyMode} - onAdd={canAdd ? onAddDependency : undefined} - onAddItem={i18n('Add Rule')}> - {softwareProductDependencies.map(dependency => ( - <SelectActionTableRow + isReadOnlyMode={isReadOnlyMode}> + {!isReadOnlyMode && <TableActionRow + key={newDependency.id} + actionIcon='plusCircle' + onAction={() => onAddDependency(newDependency)} + dependency={newDependency} + componentsOptions={componentsOptions} + sourceToTargetMapping={sourceToTargetMapping} + onDataChanged={onDataChanged} + sourceOptions={this.filterSources({componentsOptions, sourceToTargetMapping, selectedSourceId: newDependency.sourceId, selectedTargetId: newDependency.targetId})} + targetOptions={this.filterTargets({componentsOptions, sourceToTargetMapping, selectedSourceId: newDependency.sourceId, selectedTargetId: newDependency.targetId})} + showAction={newDependency.targetId !== null && newDependency.relationType !== null && newDependency.sourceId !== null}/> } + {depList.map(dependency => ( + <TableActionRow key={dependency.id} - onDelete={() => onDataChanged(softwareProductDependencies.filter(currentDependency => currentDependency.id !== dependency.id))} - overlayMsg={i18n('There is a loop between selections')} - hasError={dependency.hasCycle} - hasErrorIndication - showDelete={dependency.id !== 'fake' || dependency.hasCycle !== undefined}> - <SelectActionTableCell - options={this.filterSources({componentsOptions, sourceToTargetMapping, selectedSourceId: dependency.sourceId, selectedTargetId: dependency.targetId})} - selected={dependency.sourceId} - placeholder={i18n('Select VFC...')} - onChange={newSourceId => onDataChanged(softwareProductDependencies.map(currentDependency => - ({...currentDependency, sourceId: currentDependency.id === dependency.id ? newSourceId : currentDependency.sourceId}) - ))} /> - <SelectActionTableCell options={relationTypesOptions} selected={dependency.relationType} clearable={false}/> - <SelectActionTableCell - placeholder={i18n('Select VFC...')} - options={this.filterTargets({componentsOptions, sourceToTargetMapping, selectedSourceId: dependency.sourceId, selectedTargetId: dependency.targetId})} - selected={dependency.targetId} - onChange={newTargetId => onDataChanged(softwareProductDependencies.map(currentDependency => - ({...currentDependency, targetId: currentDependency.id === dependency.id ? newTargetId : currentDependency.targetId}) - ))} /> - </SelectActionTableRow> + actionIcon='trashO' + onAction={() => onDeleteDependency(dependency)} + dependency={dependency} + componentsOptions={componentsOptions} + sourceToTargetMapping={sourceToTargetMapping} + sourceOptions={this.filterSources({componentsOptions, sourceToTargetMapping, selectedSourceId: dependency.sourceId, selectedTargetId: dependency.targetId})} + targetOptions={this.filterTargets({componentsOptions, sourceToTargetMapping, selectedSourceId: dependency.sourceId, selectedTargetId: dependency.targetId})} + onDataChanged={onDataChanged} + showAction={true}/> ))} </SelectActionTable> </div> ); } - save() { - let {onSubmit, softwareProductDependencies} = this.props; - return onSubmit(softwareProductDependencies); - } } diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeployment.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeployment.js index 98f773b465..a5c70068b0 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeployment.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeployment.js @@ -18,13 +18,10 @@ import SoftwareProductDeploymentView from './SoftwareProductDeploymentView.jsx'; import SoftwareProductDeploymentActionHelper from './SoftwareProductDeploymentActionHelper.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; -import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js'; export function mapStateToProps({softwareProduct}) { - let {softwareProductEditor: {data: currentSoftwareProduct = {}},softwareProductComponents: {componentsList}, softwareProductDeployment: {deploymentFlavors}} = softwareProduct; - let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct); + let {softwareProductComponents: {componentsList}, softwareProductDeployment: {deploymentFlavors}} = softwareProduct; return { - isReadOnlyMode, deploymentFlavors, componentsList }; @@ -37,7 +34,7 @@ function mapActionToProps(dispatch, {softwareProductId, version}) { onDeleteDeployment: ({id, model}) => dispatch({ type: modalActionTypes.GLOBAL_MODAL_WARNING, data:{ - msg: i18n(`Are you sure you want to delete "${model}"?`), + msg: i18n('Are you sure you want to delete "{model}"?', {model: model}), onConfirmed: () => SoftwareProductDeploymentActionHelper.deleteDeploymentFlavor(dispatch, {softwareProductId, deploymentFlavorId: id, version}) } }), diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentView.jsx index 81477ecff7..860d02c343 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentView.jsx @@ -14,6 +14,7 @@ * permissions and limitations under the License. */ import React from 'react'; +import PropTypes from 'prop-types'; import i18n from 'nfvo-utils/i18n/i18n.js'; import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx'; @@ -26,10 +27,10 @@ export default class SoftwareProductDeployment extends React.Component { }; static propTypes = { - onAddDeployment: React.PropTypes.func.isRequired, - onDeleteDeployment: React.PropTypes.func.isRequired, - onEditDeployment: React.PropTypes.func.isRequired, - isReadOnlyMode: React.PropTypes.bool.isRequired + onAddDeployment: PropTypes.func.isRequired, + onDeleteDeployment: PropTypes.func.isRequired, + onEditDeployment: PropTypes.func.isRequired, + isReadOnlyMode: PropTypes.bool.isRequired }; render() { diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditor.js index ba00d4e56e..c24548b7b9 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditor.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditor.js @@ -16,12 +16,14 @@ import {connect} from 'react-redux'; import SoftwareProductDeploymentEditorView from './SoftwareProductDeploymentEditorView.jsx'; import SoftwareProdcutDeploymentActionHelper from '../SoftwareProductDeploymentActionHelper.js'; -import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; - import {DEPLOYMENT_FLAVORS_FORM_NAME} from '../SoftwareProductDeploymentConstants.js'; -export function mapStateToProps({licenseModel, softwareProduct}) { +export function mapStateToProps({ + licenseModel, + softwareProduct, + currentScreen: {props: {isReadOnlyMode}} +}) { let { softwareProductEditor: { data: currentSoftwareProduct = {} @@ -48,7 +50,6 @@ export function mapStateToProps({licenseModel, softwareProduct}) { } } = licenseModel; - let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct); let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); let selectedFeatureGroupsIds = currentSoftwareProduct.licensingData ? currentSoftwareProduct.licensingData.featureGroups || [] : []; let selectedFeatureGroupsList = featureGroupsList diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorView.jsx index 2d621cd2f5..7c9ae438d9 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorView.jsx @@ -29,7 +29,7 @@ export default class SoftwareProductDeploymentEditorView extends React.Component isValid={this.props.isFormValid} formReady={this.props.formReady} className='vsp-deployment-editor'> - <GridSection> + <GridSection hasLastColSet> <GridItem colSpan={1}> <Input onChange={model => onDataChanged({model}, {model: model => this.validateName(model)})} @@ -41,7 +41,7 @@ export default class SoftwareProductDeploymentEditorView extends React.Component isRequired={true} type='text'/> </GridItem> - <GridItem colSpan={3}> + <GridItem colSpan={3} lastColInRow> <Input onChange={description => onDataChanged({description})} label={i18n('Description')} @@ -52,7 +52,7 @@ export default class SoftwareProductDeploymentEditorView extends React.Component type='text'/> </GridItem> </GridSection> - <GridSection className={`deployment-feature-groups-section${!featureGroupsExist ? ' no-feature-groups' : ''}`} title={i18n('License Details')}> + <GridSection className={`deployment-feature-groups-section${!featureGroupsExist ? ' no-feature-groups' : ''}`} title={i18n('License Details')} hasLastColSet> <GridItem colSpan={1}> <SelectInput data-test-id='deployment-feature-groups' @@ -71,8 +71,8 @@ export default class SoftwareProductDeploymentEditorView extends React.Component <span>{i18n('Please assign Feature Groups in VSP General')}</span> </GridItem> </GridSection>} - <GridSection title={i18n('Assign VFCs and Compute Flavors')} className='vfc-table'> - <GridItem colSpan={4}> + <GridSection title={i18n('Assign VFCs and Compute Flavors')} className='vfc-table' hasLastColSet> + <GridItem colSpan={4} lastColInRow> <SelectActionTable columns={['Virtual Function Components', 'Compute Flavors']} numOfIcons={0}> diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetails.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetails.js index ac0282e593..b7ddf134bb 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetails.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetails.js @@ -15,19 +15,24 @@ */ import {connect} from 'react-redux'; -import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js'; import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js'; import SoftwareProductDetailsView from './SoftwareProductDetailsView.jsx'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; import {PRODUCT_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js'; -export const mapStateToProps = ({finalizedLicenseModelList, softwareProduct, licenseModel: {licenseAgreement, featureGroup}}) => { - let {softwareProductEditor: {data: currentSoftwareProduct, genericFieldInfo}, softwareProductCategories, softwareProductQuestionnaire} = softwareProduct; +export const mapStateToProps = ({ + finalizedLicenseModelList, + softwareProduct, + licenseModel: {licenseAgreement, featureGroup} +}) => { + + let {softwareProductEditor: {data: currentSoftwareProduct, licensingVersionsList = [], genericFieldInfo}, softwareProductCategories, softwareProductQuestionnaire} = softwareProduct; let {licensingData = {}, licensingVersion} = currentSoftwareProduct; let licenseAgreementList = [], filteredFeatureGroupsList = []; - licenseAgreementList = licenseAgreement.licenseAgreementList; - if(licensingVersion && licensingVersion !== '' && licensingData && licensingData.licenseAgreement) { + licenseAgreementList = licensingVersion ? + licenseAgreement.licenseAgreementList : []; + if(licensingVersion && licensingData && licensingData.licenseAgreement) { let selectedLicenseAgreement = licenseAgreementList.find(la => la.id === licensingData.licenseAgreement); if (selectedLicenseAgreement) { let featureGroupsList = featureGroup.featureGroupsList.filter(({referencingLicenseAgreements}) => referencingLicenseAgreements.includes(selectedLicenseAgreement.id)); @@ -37,7 +42,6 @@ export const mapStateToProps = ({finalizedLicenseModelList, softwareProduct, lic } } let {qdata, qgenericFieldInfo : qGenericFieldInfo, dataMap} = softwareProductQuestionnaire; - let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct); let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); @@ -45,24 +49,25 @@ export const mapStateToProps = ({finalizedLicenseModelList, softwareProduct, lic currentSoftwareProduct, softwareProductCategories, licenseAgreementList, + licensingVersionsList, featureGroupsList: filteredFeatureGroupsList, finalizedLicenseModelList, qdata, - isReadOnlyMode, isFormValid, genericFieldInfo, qGenericFieldInfo, dataMap }; + }; -export const mapActionsToProps = (dispatch) => { +export const mapActionsToProps = (dispatch, {version}) => { return { onDataChanged: (deltaData, formName) => ValidationHelper.dataChanged(dispatch, {deltaData, formName}), onVendorParamChanged: (deltaData, formName) => SoftwareProductActionHelper.softwareProductEditorVendorChanged(dispatch, {deltaData, formName}), onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, qName: PRODUCT_QUESTIONNAIRE}), onValidityChanged: isValidityData => SoftwareProductActionHelper.setIsValidityData(dispatch, {isValidityData}), - onSubmit: (softwareProduct, qdata) =>{ return SoftwareProductActionHelper.updateSoftwareProduct(dispatch, {softwareProduct, qdata});} + onSubmit: (softwareProduct, qdata) => SoftwareProductActionHelper.updateSoftwareProduct(dispatch, {softwareProduct, qdata, version}) }; }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsReducer.js index d62207ff9f..54dc1a4d37 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsReducer.js @@ -45,6 +45,11 @@ export default (state = {}, action) => { ...state, mapOfExpandedIds: action.mapOfExpandedIds }; + case actionTypes.LOAD_LICENSING_VERSIONS_LIST: + return { + ...state, + licensingVersionsList: action.licensingVersionsList + }; default: return state; } diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsView.jsx index e4caf92c21..f6199ec83e 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsView.jsx @@ -13,7 +13,8 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import React, {Component, PropTypes} from 'react'; +import React, {Component} from 'react'; +import PropTypes from 'prop-types'; import i18n from 'nfvo-utils/i18n/i18n.js'; import sortByStringProperty from 'nfvo-utils/sortByStringProperty.js'; @@ -55,7 +56,7 @@ class GeneralSection extends React.Component { let {genericFieldInfo} = this.props; return ( <div> - {genericFieldInfo && <GridSection title={i18n('General')}> + {genericFieldInfo && <GridSection title={i18n('General')} className='grid-section-general'> <GridItem> <Input data-test-id='vsp-name' @@ -74,8 +75,8 @@ class GeneralSection extends React.Component { onChange={e => this.onVendorParamChanged(e)}> {sortByStringProperty( this.props.finalizedLicenseModelList, - 'vendorName' - ).map(lm => <option key={lm.id} value={lm.id}>{lm.vendorName}</option>) + 'name' + ).map(lm => <option key={lm.id} value={lm.id}>{lm.name}</option>) } </Input> <Input @@ -117,7 +118,7 @@ class LicensesSection extends React.Component { static propTypes = { onVendorParamChanged: PropTypes.func.isRequired, vendorId: PropTypes.string, - licensingVersion: PropTypes.object, + licensingVersion: PropTypes.string, licensingVersionsList: PropTypes.array, licensingData: PropTypes.shape({ licenceAgreement: PropTypes.string, @@ -132,7 +133,7 @@ class LicensesSection extends React.Component { onVendorParamChanged(e) { const selectedIndex = e.target.selectedIndex; const licensingVersion = e.target.options[selectedIndex].value; - this.props.onVendorParamChanged({vendorId: this.props.vendorId, licensingVersion:{id:licensingVersion, label: licensingVersion}}, forms.VENDOR_SOFTWARE_PRODUCT_DETAILS); + this.props.onVendorParamChanged({vendorId: this.props.vendorId, licensingVersion}, forms.VENDOR_SOFTWARE_PRODUCT_DETAILS); } onLicensingDataChanged(e) { @@ -148,7 +149,7 @@ class LicensesSection extends React.Component { <Input data-test-id='vsp-licensing-version' onChange={e => this.onVendorParamChanged(e)} - value={this.props.licensingVersion ? this.props.licensingVersion.id : ''} + value={this.props.licensingVersion || ''} label={i18n('Licensing Version')} type='select'> {this.props.licensingVersionsList.map(version => @@ -196,6 +197,7 @@ const AvailabilitySection = (props) => ( data-test-id='vsp-use-availability-zone' label={i18n('Use Availability Zones for High Availability')} type='checkbox' + checked={props.dataMap['general/availability/useAvailabilityZonesForHighAvailability']} value={props.dataMap['general/availability/useAvailabilityZonesForHighAvailability']} onChange={(aZone) => props.onQDataChanged({'general/availability/useAvailabilityZonesForHighAvailability' : aZone})} /> </GridItem> @@ -274,7 +276,7 @@ class SoftwareProductDetails extends Component { subCategory: PropTypes.string, vendorId: PropTypes.string, vendorName: PropTypes.string, - licensingVersion: PropTypes.object, + licensingVersion: PropTypes.string, licensingData: PropTypes.shape({ licenceAgreement: PropTypes.string, featureGroups: PropTypes.array @@ -292,10 +294,6 @@ class SoftwareProductDetails extends Component { onVendorParamChanged: PropTypes.func.isRequired }; - state = { - licensingVersionsList: [] - }; - prepareDataForGeneralSection(){ let {softwareProductCategories, finalizedLicenseModelList, onDataChanged, currentSoftwareProduct, genericFieldInfo} = this.props; let {name, description, vendorId, subCategory} = currentSoftwareProduct; @@ -317,12 +315,11 @@ class SoftwareProductDetails extends Component { prepareDataForLicensesSection(){ let { featureGroupsList, licenseAgreementList, currentSoftwareProduct } = this.props; let {vendorId, licensingVersion, licensingData = {}} = currentSoftwareProduct; - let licensingVersionsList = this.state.licensingVersionsList.length > 0 ? this.state.licensingVersionsList : this.refreshVendorVersionsList(vendorId); return { onVendorParamChanged: args => this.onVendorParamChanged(args), vendorId, licensingVersion, - licensingVersionsList, + licensingVersionsList: this.buildLicensingVersionsListItems(), licensingData, onFeatureGroupsChanged: args => this.onFeatureGroupsChanged(args), onLicensingDataChanged: args => this.onLicensingDataChanged(args), @@ -361,10 +358,10 @@ class SoftwareProductDetails extends Component { onVendorParamChanged({vendorId, licensingVersion}) { let {finalizedLicenseModelList, onVendorParamChanged} = this.props; if(!licensingVersion) { - const licensingVersionsList = this.refreshVendorVersionsList(vendorId); - licensingVersion = licensingVersionsList.length > 0 ? licensingVersionsList[0].enum : ''; + const licensingVersionsList = this.buildLicensingVersionsListItems(); + licensingVersion = licensingVersionsList[0].enum; } - let vendorName = finalizedLicenseModelList.find(licenseModelItem => licenseModelItem.id === vendorId).vendorName || ''; + let vendorName = finalizedLicenseModelList.find(licenseModelItem => licenseModelItem.id === vendorId).name || ''; let deltaData = { vendorId, vendorName, @@ -376,25 +373,15 @@ class SoftwareProductDetails extends Component { } - refreshVendorVersionsList(vendorId) { - if(!vendorId) { - return []; - } + buildLicensingVersionsListItems() { + let {licensingVersionsList} = this.props; - let {finalVersions} = this.props.finalizedLicenseModelList.find(vendor => vendor.id === vendorId); - - let licensingVersionsList = [{ + let licensingVersionsListItems = [{ enum: '', title: i18n('Select...') }]; - if(finalVersions) { - finalVersions.forEach(version => licensingVersionsList.push({ - enum: version.id, - title: version.label - })); - } - return licensingVersionsList; + return licensingVersionsListItems.concat(licensingVersionsList.map(version => ({enum: version.id, title: version.name}))); } onFeatureGroupsChanged({featureGroups}) { diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js index a13e742006..90ea182dfa 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js @@ -15,14 +15,18 @@ */ import {connect} from 'react-redux'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js'; -import OnboardingActionHelper from 'sdc-app/onboarding/OnboardingActionHelper.js'; import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js'; import LandingPageView from './SoftwareProductLandingPageView.jsx'; import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; import {onboardingMethod} from '../SoftwareProductConstants.js'; +import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js'; +import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js'; -export const mapStateToProps = ({softwareProduct, licenseModel: {licenseAgreement}}) => { + +export const mapStateToProps = ({ + softwareProduct, + licenseModel: {licenseAgreement}, +}) => { let {softwareProductEditor: {data:currentSoftwareProduct = {}}, softwareProductComponents, softwareProductCategories = []} = softwareProduct; let {licensingData = {}} = currentSoftwareProduct; let {licenseAgreementList} = licenseAgreement; @@ -44,7 +48,6 @@ export const mapStateToProps = ({softwareProduct, licenseModel: {licenseAgreemen } fullCategoryDisplayName = `${subCategoryName} (${categoryName})`; - const isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct); return { currentSoftwareProduct: { @@ -52,7 +55,6 @@ export const mapStateToProps = ({softwareProduct, licenseModel: {licenseAgreemen licenseAgreementName, fullCategoryDisplayName }, - isReadOnlyMode, componentsList, isManual: currentSoftwareProduct.onboardingMethod === onboardingMethod.MANUAL }; @@ -60,11 +62,12 @@ export const mapStateToProps = ({softwareProduct, licenseModel: {licenseAgreemen const mapActionsToProps = (dispatch, {version}) => { return { - onDetailsSelect: ({id: softwareProductId, vendorId: licenseModelId, version}) => OnboardingActionHelper.navigateToSoftwareProductDetails(dispatch, { - softwareProductId, - licenseModelId, - version - }), + onDetailsSelect: ({id: softwareProductId}) => + ScreensHelper.loadScreen(dispatch, { + screen: enums.SCREEN.SOFTWARE_PRODUCT_DETAILS, screenType: screenTypes.SOFTWARE_PRODUCT, + props: {softwareProductId, version} + }), + onUpload: (softwareProductId, formData) => SoftwareProductActionHelper.uploadFile(dispatch, { softwareProductId, @@ -100,9 +103,10 @@ const mapActionsToProps = (dispatch, {version}) => { msg: i18n('no zip or csar file was uploaded or expected file doesn\'t exist') } }), - onComponentSelect: ({id: softwareProductId, componentId}) => { - OnboardingActionHelper.navigateToSoftwareProductComponentGeneralAndUpdateLeftPanel(dispatch, {softwareProductId, componentId, version }); - }, + onComponentSelect: ({id: softwareProductId, componentId}) => ScreensHelper.loadScreen(dispatch, { + screen: screenTypes.SOFTWARE_PRODUCT_COMPONENT_DEFAULT_GENERAL, screenType: screenTypes.SOFTWARE_PRODUCT, + props: {softwareProductId, version, componentId} + }), /** for the next version */ onAddComponent: () => SoftwareProductActionHelper.addComponent(dispatch) }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx index 72a416473c..56402b4417 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx @@ -14,6 +14,7 @@ * permissions and limitations under the License. */ import React from 'react'; +import PropTypes from 'prop-types'; import classnames from 'classnames'; import Dropzone from 'react-dropzone'; @@ -22,25 +23,25 @@ import i18n from 'nfvo-utils/i18n/i18n.js'; import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx'; import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; -import SoftwareProductComponentsList from '../components/SoftwareProductComponentsList.js'; - -const SoftwareProductPropType = React.PropTypes.shape({ - name: React.PropTypes.string, - description: React.PropTypes.string, - version: React.PropTypes.object, - id: React.PropTypes.string, - categoryId: React.PropTypes.string, - vendorId: React.PropTypes.string, - status: React.PropTypes.string, - licensingData: React.PropTypes.object, - validationData: React.PropTypes.object +import SoftwareProductComponentsList from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponents.js'; + +const SoftwareProductPropType = PropTypes.shape({ + name: PropTypes.string, + description: PropTypes.string, + version: PropTypes.object, + id: PropTypes.string, + categoryId: PropTypes.string, + vendorId: PropTypes.string, + status: PropTypes.string, + licensingData: PropTypes.object, + validationData: PropTypes.object }); -const ComponentPropType = React.PropTypes.shape({ - id: React.PropTypes.string, - name: React.PropTypes.string, - displayName: React.PropTypes.string, - description: React.PropTypes.string +const ComponentPropType = PropTypes.shape({ + id: PropTypes.string, + name: PropTypes.string, + displayName: PropTypes.string, + description: PropTypes.string }); class SoftwareProductLandingPageView extends React.Component { @@ -54,18 +55,19 @@ class SoftwareProductLandingPageView extends React.Component { static propTypes = { currentSoftwareProduct: SoftwareProductPropType, - isReadOnlyMode: React.PropTypes.bool, - componentsList: React.PropTypes.arrayOf(ComponentPropType), - onDetailsSelect: React.PropTypes.func, - onUpload: React.PropTypes.func, - onUploadConfirmation: React.PropTypes.func, - onInvalidFileSizeUpload: React.PropTypes.func, - onComponentSelect: React.PropTypes.func, - onAddComponent: React.PropTypes.func + isReadOnlyMode: PropTypes.bool, + componentsList: PropTypes.arrayOf(ComponentPropType), + version: PropTypes.object, + onDetailsSelect: PropTypes.func, + onUpload: PropTypes.func, + onUploadConfirmation: PropTypes.func, + onInvalidFileSizeUpload: PropTypes.func, + onComponentSelect: PropTypes.func, + onAddComponent: PropTypes.func }; render() { - let {currentSoftwareProduct, isReadOnlyMode, isManual, onDetailsSelect, componentsList} = this.props; + let {currentSoftwareProduct, isReadOnlyMode, isManual, onDetailsSelect} = this.props; return ( <div className='software-product-landing-wrapper'> <Dropzone @@ -88,11 +90,7 @@ class SoftwareProductLandingPageView extends React.Component { </div> </div> </Dropzone> - <SoftwareProductComponentsList - isReadOnlyMode={isReadOnlyMode} - componentsList={componentsList} - isManual={isManual} - currentSoftwareProduct={currentSoftwareProduct}/> + <SoftwareProductComponentsList/> </div> ); } diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksView.jsx index 024c5cc44c..e8c365f124 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksView.jsx @@ -14,6 +14,7 @@ * permissions and limitations under the License. */ import React from 'react'; +import PropTypes from 'prop-types'; import i18n from 'nfvo-utils/i18n/i18n.js'; import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx'; @@ -23,11 +24,12 @@ import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemVi class SoftwareProductNetworksView extends React.Component { static propTypes = { - networksList: React.PropTypes.arrayOf(React.PropTypes.shape({ - id: React.PropTypes.string.isRequired, - name: React.PropTypes.string.isRequired, - dhcp: React.PropTypes.bool.isRequired - })).isRequired + networksList: PropTypes.arrayOf(PropTypes.shape({ + id: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + dhcp: PropTypes.bool.isRequired + })).isRequired, + isReadOnlyMode: PropTypes.bool.isRequired }; state = { @@ -36,6 +38,7 @@ class SoftwareProductNetworksView extends React.Component { render() { const {localFilter} = this.state; + const {isReadOnlyMode} = this.props; return ( <div className='vsp-networks-page'> @@ -45,19 +48,19 @@ class SoftwareProductNetworksView extends React.Component { placeholder={i18n('Filter Networks')} onFilter={value => this.setState({localFilter: value})} twoColumns> - {this.filterList().map(network => this.renderNetworksListItem(network))} + {this.filterList().map(network => this.renderNetworksListItem({network, isReadOnlyMode}))} </ListEditorView> </div> ); } - renderNetworksListItem(network) { + renderNetworksListItem({network, isReadOnlyMode}) { let {id, name, dhcp} = network; return ( <ListEditorItemView key={id} className='list-editor-item-view' - isReadOnlyMode={true}> + isReadOnlyMode={isReadOnlyMode}> <ListEditorItemViewField> <div className='name'>{name}</div> diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx new file mode 100644 index 0000000000..aa39c87dd0 --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx @@ -0,0 +1,99 @@ +/*! + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * + * 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 React from 'react'; +import PropTypes from 'prop-types'; +import i18n from 'nfvo-utils/i18n/i18n.js'; + +import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx'; +import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx'; + + +class SoftwareProductProcessesListView extends React.Component { + + state = { + localFilter: '' + }; + + static propTypes = { + onAddProcess: PropTypes.func.isRequired, + onEditProcess: PropTypes.func.isRequired, + onDeleteProcess: PropTypes.func.isRequired, + isReadOnlyMode: PropTypes.bool.isRequired, + currentSoftwareProduct:PropTypes.object, + addButtonTitle: PropTypes.string + }; + + render() { + const {localFilter} = this.state; + let {onAddProcess, isReadOnlyMode, addButtonTitle} = this.props; + + return ( + <ListEditorView + plusButtonTitle={addButtonTitle} + filterValue={localFilter} + placeholder={i18n('Filter Process')} + onAdd={onAddProcess} + isReadOnlyMode={isReadOnlyMode} + title={i18n('Process Details')} + onFilter={value => this.setState({localFilter: value})}> + {this.filterList().map(processes => this.renderProcessListItem(processes, isReadOnlyMode))} + </ListEditorView>); + } + + renderProcessListItem(process, isReadOnlyMode) { + let {id, name, description, artifactName = ''} = process; + let {currentSoftwareProduct: {version}, onEditProcess, onDeleteProcess} = this.props; + return ( + <ListEditorItemView + key={id} + className='list-editor-item-view' + isReadOnlyMode={isReadOnlyMode} + onSelect={() => onEditProcess(process)} + onDelete={() => onDeleteProcess(process, version)}> + + <div className='list-editor-item-view-field'> + <div className='title'>{i18n('Name')}</div> + <div className='name'>{name}</div> + </div> + <div className='list-editor-item-view-field'> + <div className='title'>{i18n('Artifact name')}</div> + <div className='artifact-name'>{artifactName}</div> + </div> + <div className='list-editor-item-view-field'> + <div className='title'>{i18n('Notes')}</div> + <div className='description'>{description}</div> + </div> + </ListEditorItemView> + ); + } + + filterList() { + let {processesList} = this.props; + let {localFilter} = this.state; + + if (localFilter.trim()) { + const filter = new RegExp(escape(localFilter), 'i'); + return processesList.filter(({name = '', description = ''}) => { + return escape(name).match(filter) || escape(description).match(filter); + }); + } + else { + return processesList; + } + } +} + +export default SoftwareProductProcessesListView; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js index c70452919b..b0403abde5 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js @@ -16,33 +16,30 @@ import {connect} from 'react-redux'; import i18n from 'nfvo-utils/i18n/i18n.js'; import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; -import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js'; import SoftwareProductProcessesActionHelper from './SoftwareProductProcessesActionHelper.js'; import SoftwareProductProcessesView from './SoftwareProductProcessesView.jsx'; export const mapStateToProps = ({softwareProduct}) => { let {softwareProductEditor: {data: currentSoftwareProduct = {}}, softwareProductProcesses: {processesList, processesEditor}} = softwareProduct; - let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct); let {data} = processesEditor; return { currentSoftwareProduct, processesList, isDisplayEditor: Boolean(data), - isModalInEditMode: Boolean(data && data.id), - isReadOnlyMode + isModalInEditMode: Boolean(data && data.id) }; }; -const mapActionsToProps = (dispatch, {softwareProductId}) => { +const mapActionsToProps = (dispatch, {softwareProductId, version}) => { return { onAddProcess: () => SoftwareProductProcessesActionHelper.openEditor(dispatch), onEditProcess: (process) => SoftwareProductProcessesActionHelper.openEditor(dispatch, process), - onDeleteProcess: (process, version) => dispatch({ + onDeleteProcess: (process) => dispatch({ type: modalActionTypes.GLOBAL_MODAL_WARNING, data:{ - msg: i18n(`Are you sure you want to delete "${process.name}"?`), + msg: i18n('Are you sure you want to delete "{name}"?', {name: process.name}), confirmationButtonText: i18n('Delete'), title: i18n('Delete'), onConfirmed: ()=> SoftwareProductProcessesActionHelper.deleteProcess(dispatch, diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js index ff787c357e..fc194fac13 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js @@ -45,7 +45,7 @@ const mapActionsToProps = (dispatch, {softwareProductId, version}) => { SoftwareProductProcessesActionHelper.closeEditor(dispatch); SoftwareProductProcessesActionHelper.saveProcess(dispatch, {softwareProductId, version, previousProcess, process}); }, - onClose: () => SoftwareProductProcessesActionHelper.closeEditor(dispatch), + onCancel: () => SoftwareProductProcessesActionHelper.closeEditor(dispatch), onValidateForm: () => ValidationHelper.validateForm(dispatch, VSP_PROCESS_FORM) }; }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx new file mode 100644 index 0000000000..72b2f8cb38 --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx @@ -0,0 +1,181 @@ +/*! + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * + * 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 React from 'react'; +import PropTypes from 'prop-types'; +import Dropzone from 'react-dropzone'; + +import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx'; +import i18n from 'nfvo-utils/i18n/i18n.js'; +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'; + +const SoftwareProductProcessEditorPropType = React.PropTypes.shape({ + id: PropTypes.string, + name: PropTypes.string, + description: PropTypes.string, + artifactName: PropTypes.string, + type: PropTypes.string +}); + + + +class SoftwareProductProcessesEditorForm extends React.Component { + + + static propTypes = { + data: SoftwareProductProcessEditorPropType, + previousData: SoftwareProductProcessEditorPropType, + isReadOnlyMode: React.PropTypes.bool, + onDataChanged: React.PropTypes.func, + onSubmit: React.PropTypes.func, + onCancel: React.PropTypes.func + }; + state = { + dragging: false, + files: [] + }; + + render() { + let {data = {}, isReadOnlyMode, onDataChanged, onCancel, genericFieldInfo, optionsInputValues} = this.props; + let {name, description, artifactName, type} = data; + + return ( + <div> + {genericFieldInfo && <Form + ref='validationForm' + hasButtons={true} + labledButtons={true} + isReadOnlyMode={isReadOnlyMode} + onSubmit={ () => this.submit() } + onReset={ () => onCancel() } + isValid={this.props.isFormValid} + formReady={this.props.formReady} + onValidateForm={() => this.props.onValidateForm() } + className='vsp-processes-editor'> + <div className={`vsp-processes-editor-data${isReadOnlyMode ? ' disabled' : '' }`}> + <Dropzone + className={`vsp-process-dropzone-view ${this.state.dragging ? 'active-dragging' : ''}`} + onDrop={(acceptedFiles, rejectedFiles) => this.handleImportSubmit(acceptedFiles, rejectedFiles)} + onDragEnter={() => this.setState({dragging: true})} + onDragLeave={() => this.setState({dragging: false})} + multiple={false} + disableClick={true} + ref='processEditorFileInput' + name='processEditorFileInput'> + <GridSection hasLastColSet={true}> + <GridItem colSpan={2}> + <Input + onChange={name => onDataChanged({name})} + isValid={genericFieldInfo.name.isValid} + isRequired={true} + data-test-id='name' + errorText={genericFieldInfo.name.errorText} + label={i18n('Name')} + value={name} + type='text'/> + </GridItem> + <GridItem colSpan={2} lastColInRow={true}> + <label> </label> + <DraggableUploadFileBox className='process-editor-file-box' isReadOnlyMode={isReadOnlyMode} onClick={() => this.refs.processEditorFileInput.open()}/> + </GridItem> + </GridSection> + <GridSection hasLastColSet={true}> + <GridItem colSpan={2}> + <Input + name='vsp-process-description' + groupClassName='vsp-process-description' + onChange={description => onDataChanged({description})} + isValid={genericFieldInfo.description.isValid} + errorText={genericFieldInfo.description.errorText} + label={i18n('Notes')} + value={description} + data-test-id='vsp-process-description' + type='textarea'/> + </GridItem> + <GridItem colSpan={2} lastColInRow={true}> + <Input + label={i18n('Artifacts')} + value={artifactName} + type='text' + disabled/> + <Input + onChange={e => { + // setting the unit to the correct value + const selectedIndex = e.target.selectedIndex; + const val = e.target.options[selectedIndex].value; + onDataChanged({type: val});} + } + value={type} + label={i18n('Process Type')} + className='process-type' + data-test-id='process-type' + isValid={genericFieldInfo.type.isValid} + errorText={genericFieldInfo.type.errorText} + type='select'> + {optionsInputValues.PROCESS_TYPE.map(mtype => + <option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)} + </Input> + </GridItem> + </GridSection> + </Dropzone> + </div> + </Form>} + </div> + ); + } + + submit() { + const {data: process, previousData: previousProcess} = this.props; + let {files} = this.state; + let formData = false; + if (files.length) { + let file = files[0]; + formData = new FormData(); + formData.append('upload', file); + } + + let updatedProcess = { + ...process, + formData + }; + this.props.onSubmit({process: updatedProcess, previousProcess}); + } + + + handleImportSubmit(files, rejectedFiles) { + if (files.length > 0) { + let {onDataChanged} = this.props; + this.setState({ + dragging: false, + complete: '0', + files + }); + onDataChanged({artifactName: files[0].name}); + } + else if (rejectedFiles.length > 0) { + this.setState({ + dragging: false + }); + if (DEBUG) { + console.log('file was rejected.' + rejectedFiles[0].name); + } + } + } +} + +export default SoftwareProductProcessesEditorForm; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx index 0df36cf65d..9ce690a1ca 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx @@ -14,167 +14,17 @@ * permissions and limitations under the License. */ import React from 'react'; -import Dropzone from 'react-dropzone'; -import classnames from 'classnames'; -import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx'; -import i18n from 'nfvo-utils/i18n/i18n.js'; import {optionsInputValues as ProcessesOptionsInputValues} from './SoftwareProductProcessesConstants.js'; -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'; - -const SoftwareProductProcessEditorPropType = React.PropTypes.shape({ - id: React.PropTypes.string, - name: React.PropTypes.string, - description: React.PropTypes.string, - artifactName: React.PropTypes.string, - type: React.PropTypes.string -}); - +import SoftwareProductProcessesEditorForm from './SoftwareProductProcessesEditorForm.jsx'; class SoftwareProductProcessesEditorView extends React.Component { - - state = { - dragging: false, - files: [] - }; - - static propTypes = { - data: SoftwareProductProcessEditorPropType, - previousData: SoftwareProductProcessEditorPropType, - isReadOnlyMode: React.PropTypes.bool, - onDataChanged: React.PropTypes.func, - onSubmit: React.PropTypes.func, - onClose: React.PropTypes.func - }; - render() { - let {data = {}, isReadOnlyMode, onDataChanged, onClose, genericFieldInfo} = this.props; - let {name, description, artifactName, type} = data; - return ( - <div> - {genericFieldInfo && <Form - ref='validationForm' - hasButtons={true} - labledButtons={true} - isReadOnlyMode={isReadOnlyMode} - onSubmit={ () => this.submit() } - onReset={ () => onClose() } - isValid={this.props.isFormValid} - formReady={this.props.formReady} - onValidateForm={() => this.props.onValidateForm() } - className='vsp-processes-editor'> - <div className={classnames('vsp-processes-editor-data', {'disabled': isReadOnlyMode})}> - <Dropzone - className={classnames('vsp-process-dropzone-view', {'active-dragging': this.state.dragging})} - onDrop={(acceptedFiles, rejectedFiles) => this.handleImportSubmit(acceptedFiles, rejectedFiles)} - onDragEnter={() => this.setState({dragging: true})} - onDragLeave={() => this.setState({dragging: false})} - multiple={false} - disableClick={true} - ref='processEditorFileInput' - name='processEditorFileInput'> - <GridSection> - <GridItem colSpan={2}> - <Input - onChange={name => onDataChanged({name})} - isValid={genericFieldInfo.name.isValid} - isRequired={true} - data-test-id='name' - errorText={genericFieldInfo.name.errorText} - label={i18n('Name')} - value={name} - type='text'/> - </GridItem> - <GridItem colSpan={2}> - <DraggableUploadFileBox isReadOnlyMode={isReadOnlyMode} className='file-upload-box' onClick={() => this.refs.processEditorFileInput.open()}/> - </GridItem> - </GridSection> - <GridSection> - <GridItem colSpan={2}> - <Input - name='vsp-process-description' - groupClassName='vsp-process-description' - onChange={description => onDataChanged({description})} - isValid={genericFieldInfo.description.isValid} - errorText={genericFieldInfo.description.errorText} - label={i18n('Notes')} - value={description} - data-test-id='vsp-process-description' - type='textarea'/> - </GridItem> - <GridItem colSpan={2}> - <Input - label={i18n('Artifacts')} - value={artifactName} - type='text' - disabled/> - <Input - onChange={e => { - // setting the unit to the correct value - const selectedIndex = e.target.selectedIndex; - const val = e.target.options[selectedIndex].value; - onDataChanged({type: val});} - } - value={type} - label={i18n('Process Type')} - data-test-id='process-type' - isValid={genericFieldInfo.type.isValid} - errorText={genericFieldInfo.type.errorText} - type='select'> - {ProcessesOptionsInputValues.PROCESS_TYPE.map(mtype => - <option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)} - </Input> - </GridItem> - </GridSection> - </Dropzone> - </div> - </Form>} - </div> + <SoftwareProductProcessesEditorForm optionsInputValues={ProcessesOptionsInputValues} {...this.props}/> ); } - - submit() { - const {data: process, previousData: previousProcess} = this.props; - let {files} = this.state; - let formData = false; - if (files.length) { - let file = files[0]; - formData = new FormData(); - formData.append('upload', file); - } - - let updatedProcess = { - ...process, - formData - }; - this.props.onSubmit({process: updatedProcess, previousProcess}); - } - - - handleImportSubmit(files, rejectedFiles) { - if (files.length > 0) { - let {onDataChanged} = this.props; - this.setState({ - dragging: false, - complete: '0', - files - }); - onDataChanged({artifactName: files[0].name}); - } - else if (rejectedFiles.length > 0) { - this.setState({ - dragging: false - }); - if (DEBUG) { - console.log('file was rejected.' + rejectedFiles[0].name); - } - } - } } export default SoftwareProductProcessesEditorView; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx index 8f52434042..e2cb4edf74 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx @@ -14,14 +14,12 @@ * permissions and limitations under the License. */ import React from 'react'; +import PropTypes from 'prop-types'; import i18n from 'nfvo-utils/i18n/i18n.js'; 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 SoftwareProductProcessesEditor from './SoftwareProductProcessesEditor.js'; - +import SoftwareProductProcessListView from './SoftwareProductProcessListView.jsx'; class SoftwareProductProcessesView extends React.Component { @@ -31,25 +29,25 @@ class SoftwareProductProcessesView extends React.Component { }; static propTypes = { - onAddProcess: React.PropTypes.func.isRequired, - onEditProcess: React.PropTypes.func.isRequired, - onDeleteProcess: React.PropTypes.func.isRequired, - isDisplayEditor: React.PropTypes.bool.isRequired, - isReadOnlyMode: React.PropTypes.bool.isRequired, - currentSoftwareProduct:React.PropTypes.object + onAddProcess: PropTypes.func.isRequired, + onEditProcess: PropTypes.func.isRequired, + onDeleteProcess: PropTypes.func.isRequired, + isDisplayEditor: PropTypes.bool.isRequired, + isReadOnlyMode: PropTypes.bool.isRequired, + currentSoftwareProduct:PropTypes.object }; render() { return ( <div className='software-product-landing-view-right-side vsp-processes-page'> {this.renderEditor()} - {this.renderProcessList()} + <SoftwareProductProcessListView addButtonTitle={i18n('Add Process Details')} {...this.props}/> </div> ); } renderEditor() { - let {currentSoftwareProduct: {id, version}, isModalInEditMode, isReadOnlyMode, isDisplayEditor} = this.props; + let {currentSoftwareProduct: {id}, version, isModalInEditMode, isReadOnlyMode, isDisplayEditor} = this.props; return ( <Modal show={isDisplayEditor} bsSize='large' animation={true} className='onborading-modal'> @@ -62,66 +60,6 @@ class SoftwareProductProcessesView extends React.Component { </Modal> ); } - - renderProcessList() { - const {localFilter} = this.state; - let {onAddProcess, isReadOnlyMode} = this.props; - - return ( - <ListEditorView - plusButtonTitle={i18n('Add Process Details')} - filterValue={localFilter} - placeholder={i18n('Filter Process')} - onAdd={onAddProcess} - isReadOnlyMode={isReadOnlyMode} - title={i18n('Process Details')} - onFilter={value => this.setState({localFilter: value})}> - {this.filterList().map(processes => this.renderProcessListItem(processes, isReadOnlyMode))} - </ListEditorView> - ); - } - - renderProcessListItem(process, isReadOnlyMode) { - let {id, name, description, artifactName = ''} = process; - let {currentSoftwareProduct: {version}, onEditProcess, onDeleteProcess} = this.props; - return ( - <ListEditorItemView - key={id} - className='list-editor-item-view' - isReadOnlyMode={isReadOnlyMode} - onSelect={() => onEditProcess(process)} - onDelete={() => onDeleteProcess(process, version)}> - - <div className='list-editor-item-view-field'> - <div className='title'>{i18n('Name')}</div> - <div className='name'>{name}</div> - </div> - <div className='list-editor-item-view-field'> - <div className='title'>{i18n('Artifact name')}</div> - <div className='artifact-name'>{artifactName}</div> - </div> - <div className='list-editor-item-view-field'> - <div className='title'>{i18n('Notes')}</div> - <div className='description'>{description}</div> - </div> - </ListEditorItemView> - ); - } - - filterList() { - let {processesList} = this.props; - let {localFilter} = this.state; - - if (localFilter.trim()) { - const filter = new RegExp(escape(localFilter), 'i'); - return processesList.filter(({name = '', description = ''}) => { - return escape(name).match(filter) || escape(description).match(filter); - }); - } - else { - return processesList; - } - } } export default SoftwareProductProcessesView; |